Tech test

COMMENTS.md

@@ -1 +1,3 @@
 # put your "I would have done this with more time"-style comments here
+
+With more time, I would have continued to explore the differences between `localStorage` and `CacheStorage` as it may have been more appropriate to use the latter here.

package.json

@@ -9,6 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.3",
     "axios": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/App.css

@@ -6,7 +6,17 @@
 }
 
 .App {
-  height: 90vh;
-  width: 90vw;
   border: solid grey 2px;
-}
+}
+
+.cards-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 20px;
+}
+
+.area-card {
+  margin: 10px;
+}

src/App.jsx

@@ -1,34 +1,78 @@
-import { useEffect, useState } from 'react'
-import { getAreaData } from './api'
+import { useEffect, useState } from 'react';
+import { getAreaData } from './api';
 
-import './App.css'
+import './App.css';
+import AreaCard from './components/AreaCard';
 
 function App() {
-
   const [areas, setAreas] = useState([]);
+  const [outcodeInput, setOutcodeInput] = useState('');
+  const [newOutcode, setNewOutcode] = useState('BB10');
+  const [displayedOutcode, setDisplayedOutcode] = useState('BB10');
 
-  const load = async () => {
+  const load = async (outcode) => {
     try {
-      const areaData = await getAreaData()
-
-      areas.concat(areaData);
-
-      setAreas(areas);
+      const areaData = await getAreaData(outcode);
+      setAreas(areaData);
+      localStorage.setItem(newOutcode, JSON.stringify(areaData));
     } catch (error) {
-      window.alert("todo: fix app")
+      window.alert('Please try another outcode');
     }
-  }
+  };
 
   useEffect(() => {
-    load();
-  }, []);
+    load(newOutcode);
+  }, [newOutcode]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (localStorage.getItem(outcodeInput)) {
+      setAreas(JSON.parse(localStorage.getItem(outcodeInput)));
+      setDisplayedOutcode(outcodeInput);
+    } else {
+      setNewOutcode(outcodeInput);
+      setDisplayedOutcode(outcodeInput);
+    }
+    setOutcodeInput('');
+  };
 
   return (
-    <div className="App">
+    <div className='App'>
       <h1>Postcoders</h1>
-      <h2>{`Areas for BB10: ${areas.length}`}</h2>
+      <h2>{`Areas for ${displayedOutcode}: ${areas.length}`}</h2>
+      <h3>Try another postcode!</h3>
+      <p>
+        You only need to enter the "outcode" for example “M1” rather than the
+        full “M1 7ED”
+      </p>
+      <form onSubmit={handleSubmit}>
+        <label htmlFor='outcode'>
+          {'Outcode: '}
+          <input
+            type='text'
+            id='outcode'
+            value={outcodeInput.toUpperCase()}
+            placeholder='M1'
+            onChange={(e) => {
+              setOutcodeInput(e.target.value);
+            }}
+          ></input>
+        </label>
+        <button type='submit'>Search</button>
+      </form>
+      <div className='cards-container'>
+        {areas.map((area) => {
+          return (
+            <AreaCard
+              key={area['place name']}
+              area={area}
+              outcode={displayedOutcode}
+            ></AreaCard>
+          );
+        })}
+      </div>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/api/index.js

@@ -1,7 +1,6 @@
 import axios from 'axios';
 
-export const getAreaData = async () => {
-    const { data } = await axios.get('https://api.zipp🐘opotam.us/GB/bb10');
-
-    return data.places;
+export const getAreaData = async (outcode) => {
+  const { data } = await axios.get(`https://api.zippopotam.us/GB/${outcode}`);
+  return data.places;
 };

src/components/AreaCard.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+
+function AreaCard({ area, outcode }) {
+  const {
+    longitude,
+    latitude,
+    state,
+    'state abbreviation': stateAbbreviation,
+    'place name': placeName,
+  } = area;
+  return (
+    <Card sx={{ minWidth: 275 }} className='area-card'>
+      <CardContent>
+        <Typography variant='h5' component='div'>
+          {placeName}
+        </Typography>
+        <Typography sx={{ mb: 1.5 }} color='text.secondary'>
+          {outcode}, {state}, {stateAbbreviation}
+        </Typography>
+        <Typography variant='body2'>
+          {latitude} | {longitude}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default AreaCard;