Add picsum images

client/src/components/Loading.tsx

@@ -0,0 +1,7 @@
+const Loading: React.FC = () => (
+  <div className='text-white font-semibold text-center p-2 my-2'>
+    Loading...
+  </div>
+);
+
+export default Loading;

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<MisdemeanourProps> = ({ 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 (
-    <ul className='bg-yellow-300 flex justify-between'>
-      <li>{citizenId}</li>
-      <li>{misdemeanour}</li>
-      <li>{date}</li>
-    </ul>
+    <>
+      {!loading && <Loading />}
+      <td>{citizenId}</td>
+      <td>{date}</td>
+      <td>{misdemeanour}</td>
+      <td>
+        <img src={imgSrc} />
+      </td>
+    </>
   );
 };
 

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,19 +21,16 @@ const Misdemeanours: React.FC = () => {
       );
   }, [selectedMisdemeanour]);
 
+  const results = filteredCrimes.length !== 0 ? filteredCrimes : crimes;
   return (
     <>
       <Filter
         selectedMisdemeanour={selectedMisdemeanour}
         setSelectedMisdemeanour={setSelectedMisdemeanour}
       />
       <h1>Misdemeanours</h1>
-      {loading && (
-        <div className='text-white font-semibold text-center p-2 my-2'>
-          Loading...
-        </div>
-      )}
-      <RenderCrimes crimes={crimes} filteredCrimes={filteredCrimes} />
+      {loading && <Loading />}
+      <RenderCrimes results={results} />
       {!loading && crimes && crimes.length === 0 && <li>No results</li>}
     </>
   );

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<TMisdemeanour>;
-  filteredCrimes: Array<TMisdemeanour>;
+  results: Array<TMisdemeanour>;
 }
 
-const RenderCrimes: React.FC<RenderCrimesProps> = ({
-  crimes,
-  filteredCrimes,
-}) => {
+const RenderCrimes: React.FC<RenderCrimesProps> = ({ results }) => {
   const { loading } = useContext(MisdemeanourContext);
-  const results = filteredCrimes.length !== 0 ? filteredCrimes : crimes;
   return (
-    <ul className='border-2 border-red-100 table'>
-      {!loading &&
-        results &&
-        results.map((crime) => (
-          <li key={crime.citizenId}>
-            <Misdemeanour crime={crime} />
-          </li>
-        ))}
-    </ul>
+    <>
+      {!loading && results && (
+        <table className='table-auto border-2 border-red-100'>
+          <thead>
+            <tr>
+              <th>Citizen ID</th>
+              <th>Date</th>
+              <th>Misdemeanour</th>
+              <th>Punishment Idea</th>
+            </tr>
+          </thead>
+          <tbody>
+            {results.map((crime) => (
+              <tr>
+                <Misdemeanour crime={crime} />
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {loading && <Loading />}
+    </>
   );
 };
 

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;
+}