From 9e55f05df1d89210fa181c43c022e3bc74d32fc5 Mon Sep 17 00:00:00 2001
From: Atty Cronin <antoniajcronin@gmail.com>
Date: Fri, 11 Aug 2023 11:56:38 +0100
Subject: [PATCH 1/3] Add Loading state, refactor RenderCrimes

---
 client/src/components/Loading.tsx       |  7 ++++++
 client/src/components/Misdemeanours.tsx | 11 ++++-----
 client/src/components/RenderCrimes.tsx  | 31 ++++++++++++-------------
 3 files changed, 26 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/Loading.tsx

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 = () => (
+  <div className='text-white font-semibold text-center p-2 my-2'>
+    Loading...
+  </div>
+);
+
+export default Loading;
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 (
     <>
       <Filter
@@ -28,12 +29,8 @@ const Misdemeanours: React.FC = () => {
         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>}
     </>
   );
diff --git a/client/src/components/RenderCrimes.tsx b/client/src/components/RenderCrimes.tsx
index d4f59649..ed2fa6dd 100644
--- a/client/src/components/RenderCrimes.tsx
+++ b/client/src/components/RenderCrimes.tsx
@@ -2,28 +2,27 @@ 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>
+    <>
+      <ul className='border-2 border-red-100 table'>
+        {!loading &&
+          results &&
+          results.map((crime) => (
+            <li key={crime.citizenId}>
+              <Misdemeanour crime={crime} />
+            </li>
+          ))}
+      </ul>
+      {loading && <Loading />}
+    </>
   );
 };
 

From ef4a353eb346a6fc785f2d19f3ef3452c0afe147 Mon Sep 17 00:00:00 2001
From: Atty Cronin <antoniajcronin@gmail.com>
Date: Fri, 11 Aug 2023 11:56:59 +0100
Subject: [PATCH 2/3] Add get random image for each Misdemeanour

---
 client/src/components/Misdemeanour.tsx | 35 ++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Misdemeanour.tsx b/client/src/components/Misdemeanour.tsx
index 6994742d..39ba0117 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,36 @@ 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 />}
+      <ul className='bg-yellow-300 flex justify-between'>
+        <li>{citizenId}</li>
+        <li>{misdemeanour}</li>
+        <li>{date}</li>
+        <li>
+          <img src={imgSrc} />
+        </li>
+      </ul>
+    </>
   );
 };
 

From 31592c486592c9c97302089d6f1afeba093c2f2a Mon Sep 17 00:00:00 2001
From: Atty Cronin <antoniajcronin@gmail.com>
Date: Fri, 11 Aug 2023 12:14:26 +0100
Subject: [PATCH 3/3] Change Misdemeanours to table layout

---
 client/src/components/Misdemeanour.tsx | 14 ++++++-------
 client/src/components/RenderCrimes.tsx | 28 +++++++++++++++++---------
 client/src/index.css                   | 20 ++++++++++++++++++
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Misdemeanour.tsx b/client/src/components/Misdemeanour.tsx
index 39ba0117..09f7457c 100644
--- a/client/src/components/Misdemeanour.tsx
+++ b/client/src/components/Misdemeanour.tsx
@@ -32,14 +32,12 @@ const Misdemeanour: React.FC<MisdemeanourProps> = ({ crime }) => {
   return (
     <>
       {!loading && <Loading />}
-      <ul className='bg-yellow-300 flex justify-between'>
-        <li>{citizenId}</li>
-        <li>{misdemeanour}</li>
-        <li>{date}</li>
-        <li>
-          <img src={imgSrc} />
-        </li>
-      </ul>
+      <td>{citizenId}</td>
+      <td>{date}</td>
+      <td>{misdemeanour}</td>
+      <td>
+        <img src={imgSrc} />
+      </td>
     </>
   );
 };
diff --git a/client/src/components/RenderCrimes.tsx b/client/src/components/RenderCrimes.tsx
index ed2fa6dd..bd935875 100644
--- a/client/src/components/RenderCrimes.tsx
+++ b/client/src/components/RenderCrimes.tsx
@@ -12,15 +12,25 @@ const RenderCrimes: React.FC<RenderCrimesProps> = ({ results }) => {
   const { loading } = useContext(MisdemeanourContext);
   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 />}
     </>
   );
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;
+}