diff --git a/client/src/components/Loading.tsx b/client/src/components/Loading.tsx
new file mode 100644
index 00000000..d274d46b
--- /dev/null
+++ b/client/src/components/Loading.tsx
@@ -0,0 +1,7 @@
+const Loading: React.FC = () => (
+
+ Loading...
+
+);
+
+export default Loading;
diff --git a/client/src/components/Misdemeanour.tsx b/client/src/components/Misdemeanour.tsx
index 6994742d..09f7457c 100644
--- a/client/src/components/Misdemeanour.tsx
+++ b/client/src/components/Misdemeanour.tsx
@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react';
import { MisdemeanourKind } from '../../types/misdemeanours.types';
+import Loading from './Loading';
interface MisdemeanourProps {
crime: {
@@ -9,13 +11,34 @@ interface MisdemeanourProps {
}
const Misdemeanour: React.FC = ({ crime }) => {
+ const [imgSrc, setImgSrc] = useState('');
+ const [loading, setLoading] = useState(false);
const { citizenId, misdemeanour, date } = crime;
+
+ useEffect(() => {
+ const getRandomImage = async () => {
+ try {
+ setLoading(true);
+ const response = await fetch('https://picsum.photos/200/200');
+ setImgSrc(response.url);
+ } catch (error) {
+ console.error(error);
+ setLoading(false);
+ }
+ };
+ getRandomImage();
+ }, []);
+
return (
-
- - {citizenId}
- - {misdemeanour}
- - {date}
-
+ <>
+ {!loading && }
+ {citizenId} |
+ {date} |
+ {misdemeanour} |
+
+
+ |
+ >
);
};
diff --git a/client/src/components/Misdemeanours.tsx b/client/src/components/Misdemeanours.tsx
index 7487be6a..4f1c0511 100644
--- a/client/src/components/Misdemeanours.tsx
+++ b/client/src/components/Misdemeanours.tsx
@@ -1,10 +1,10 @@
import { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { MisdemeanourContext } from '../utils/context';
-// import Misdemeanour from './Misdemeanour';
import { TMisdemeanour } from '../../types/misdemeanours.types';
import Filter from './Filter';
import RenderCrimes from './RenderCrimes';
+import Loading from './Loading';
const Misdemeanours: React.FC = () => {
const { crimes, setAmount, loading } = useContext(MisdemeanourContext);
@@ -21,6 +21,7 @@ const Misdemeanours: React.FC = () => {
);
}, [selectedMisdemeanour]);
+ const results = filteredCrimes.length !== 0 ? filteredCrimes : crimes;
return (
<>
{
setSelectedMisdemeanour={setSelectedMisdemeanour}
/>
Misdemeanours
- {loading && (
-
- Loading...
-
- )}
-
+ {loading && }
+
{!loading && crimes && crimes.length === 0 && No results}
>
);
diff --git a/client/src/components/RenderCrimes.tsx b/client/src/components/RenderCrimes.tsx
index d4f59649..bd935875 100644
--- a/client/src/components/RenderCrimes.tsx
+++ b/client/src/components/RenderCrimes.tsx
@@ -2,28 +2,37 @@ import { useContext } from 'react';
import { MisdemeanourContext } from '../utils/context';
import { TMisdemeanour } from '../../types/misdemeanours.types';
import Misdemeanour from './Misdemeanour';
+import Loading from './Loading';
interface RenderCrimesProps {
- crimes: Array;
- filteredCrimes: Array;
+ results: Array;
}
-const RenderCrimes: React.FC = ({
- crimes,
- filteredCrimes,
-}) => {
+const RenderCrimes: React.FC = ({ results }) => {
const { loading } = useContext(MisdemeanourContext);
- const results = filteredCrimes.length !== 0 ? filteredCrimes : crimes;
return (
-
- {!loading &&
- results &&
- results.map((crime) => (
- -
-
-
- ))}
-
+ <>
+ {!loading && results && (
+
+
+
+ Citizen ID |
+ Date |
+ Misdemeanour |
+ Punishment Idea |
+
+
+
+ {results.map((crime) => (
+
+
+
+ ))}
+
+
+ )}
+ {loading && }
+ >
);
};
diff --git a/client/src/index.css b/client/src/index.css
index e1176718..8b1fb6b8 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -92,3 +92,23 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
+
+
+table {
+ width: 100%;
+ margin: 2rem auto;
+ table-layout: auto;
+}
+
+table,
+td,
+th {
+ border-collapse: collapse;
+}
+
+th,
+td {
+ padding: 1rem;
+ border: solid 1px;
+ text-align: center;
+}