Tech test

COMMENTS.md

@@ -1 +1,10 @@
 # put your "I would have done this with more time"-style comments here
+
+## With more time I would have completed task 4 and 5.
+
+## I spent too long trying to get an error handler working for task 3 but couldnt get it working and wanted to move on to the next task. This didnt leave me enough time to research the MUI Card package properly.
+## The Cards currently do not render, using the source code from the documentation renders one card. With more time I would have mapped through the areas array to display all the area cards.
+## Had I got the cards rendering properly I would have done a minimal amount of CSS changes to make the page functional.
+## Depending on the scope of the project I also would have refactored the api requests to create a base URL if there were to be any other types of requests.
+
+## Once all tasks were completed I would spend time making changes to the appearance of the app.

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

@@ -9,4 +9,8 @@
   height: 90vh;
   width: 90vw;
   border: solid grey 2px;
+}
+
+.cards {
+  display: flex;
 }

src/App.jsx

@@ -1,32 +1,43 @@
 import { useEffect, useState } from 'react'
 import { getAreaData } from './api'
+import PostcodeSearch from './Components/PostcodeSearch';
+import Cards from './Components/Cards';
 
 import './App.css'
 
 function App() {
 
   const [areas, setAreas] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [submittedValue, setSubmittedValue] = useState("BB10");
 
   const load = async () => {
     try {
-      const areaData = await getAreaData()
-
-      areas.concat(areaData);
+      setIsLoading(true);
+      const areaData = await getAreaData(submittedValue);
 
-      setAreas(areas);
+      setAreas(areaData);
+      setIsLoading(false);
     } catch (error) {
-      window.alert("todo: fix app")
+      setIsLoading(false);
+      setError(error)
+      console.log(error)
     }
   }
 
   useEffect(() => {
     load();
-  }, []);
+  }, [submittedValue]);
 
-  return (
+  return isLoading ? <>Loading...</> :
+   (
     <div className="App">
       <h1>Postcoders</h1>
-      <h2>{`Areas for BB10: ${areas.length}`}</h2>
+      <PostcodeSearch inputValue={inputValue} setInputValue={setInputValue} setSubmittedValue={setSubmittedValue} />
+      <h2>{`Areas for ${submittedValue}: ${areas.length}`}</h2>
+      <Cards areas={areas} />
     </div>
   )
 }

src/Components/Cards.jsx

@@ -0,0 +1,24 @@
+import { Card, CardContent, Typography } from '@mui/material';
+
+const Cards = (props) => {
+    const {areas} = props
+
+    return ( <Card className='cards'>
+        {areas.map((area) => {
+            <CardContent>
+                {/* {console.log(area['place name'])} */}
+                {console.log(area)}
+                <Typography>
+                    {area['place name']}
+                </Typography>
+                <Typography>
+                    area {area.state}
+
+                </Typography>
+            </CardContent>
+        })}
+    </Card>
+    )
+}
+
+export default Cards

src/Components/Error.jsx

@@ -0,0 +1,7 @@
+const Error = (props) => {
+    const {error} = props;
+    console.log(error)
+    return error ? <h2>Please provide a valid postcode</h2> : <></>
+}
+
+export default Error

src/Components/PostcodeSearch.jsx

@@ -0,0 +1,24 @@
+const PostcodeSearch = (props) => {
+    const { inputValue, setInputValue, setSubmittedValue } = props;
+
+    const handleChange = event => {
+        setInputValue(event.target.value);
+    };
+
+    const handleSubmit = event => {
+        event.preventDefault();
+        setSubmittedValue(inputValue.toUpperCase());
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <label>
+                Enter Postcode
+                <input type="text" placeholder="Outcode only" value={inputValue} onChange={handleChange} />
+            </label>
+            <button type="submit">Search</button>
+        </form>
+    )
+}
+
+export default PostcodeSearch

src/api/index.js

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