RileyManda · RileyManda · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
diff --git a/README.md b/README.md
@@ -236,7 +236,10 @@ Thank you for taking the time to explore this project! Your support means a lot
 
 ## 🙏 Acknowledgments <a name="acknowledgements"></a>
 
-I would like to express my sincere gratitude to [Microverse](https://github.com/microverseinc), the dedicated reviewers, and collaborators. Your unwavering support, feedback, and collaborative efforts have played an immense role in making this journey a resounding success. I am truly grateful for your contributions and for being an integral part of my achievements. Thank you for your continued support.
+I would like to express my sincere gratitude to [Microverse](https://github.com/microverseinc), the dedicated reviewers, and collaborators. Your unwavering support, feedback, and collaborative efforts have played an immense role in making this journey a resounding success. I am truly grateful for your contributions and for being an integral part of my achievements.
+I would like to also send out special thanks to [Nelson Sakwa
+](https://www.behance.net/gallery/31579789/Ballhead-App-(Free-PSDs)) for the original Ux design that inspired this project.
+Thank you for your continued support.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,18 +1,18 @@
 {
   "files": {
-    "main.css": "/static/css/main.c7857fc5.css",
-    "main.js": "/static/js/main.defe7405.js",
+    "main.css": "/static/css/main.9fe22626.css",
+    "main.js": "/static/js/main.6dd63180.js",
     "static/js/787.b7a83069.chunk.js": "/static/js/787.b7a83069.chunk.js",
     "static/media/map1.svg": "/static/media/map1.d959b0bd3dc709373454e7ffa70c98c5.svg",
     "static/media/map4.svg": "/static/media/map4.b30cff7757376c8f288d0d15a6e9dc4c.svg",
     "index.html": "/index.html",
     "static/media/map2.svg": "/static/media/map2.868b139b87ec38365817bd132e0b3f5f.svg",
-    "main.c7857fc5.css.map": "/static/css/main.c7857fc5.css.map",
-    "main.defe7405.js.map": "/static/js/main.defe7405.js.map",
+    "main.9fe22626.css.map": "/static/css/main.9fe22626.css.map",
+    "main.6dd63180.js.map": "/static/js/main.6dd63180.js.map",
     "787.b7a83069.chunk.js.map": "/static/js/787.b7a83069.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.c7857fc5.css",
-    "static/js/main.defe7405.js"
+    "static/css/main.9fe22626.css",
+    "static/js/main.6dd63180.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Air Quality</title><script defer="defer" src="/static/js/main.defe7405.js"></script><link href="/static/css/main.c7857fc5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Air Quality</title><script defer="defer" src="/static/js/main.6dd63180.js"></script><link href="/static/css/main.9fe22626.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/build/static/css/main.c7857fc5.css → build/static/css/main.9fe22626.css b/build/static/css/main.c7857fc5.css → build/static/css/main.9fe22626.css
diff --git a/build/static/css/main.9fe22626.css.map b/build/static/css/main.9fe22626.css.map
diff --git a/build/static/css/main.c7857fc5.css.map b/build/static/css/main.c7857fc5.css.map
diff --git a/build/static/js/main.6dd63180.js b/build/static/js/main.6dd63180.js
diff --git a/build/static/js/main.defe7405.js.LICENSE.txt → build/static/js/main.6dd63180.js.LICENSE.txt b/build/static/js/main.defe7405.js.LICENSE.txt → build/static/js/main.6dd63180.js.LICENSE.txt
diff --git a/build/static/js/main.6dd63180.js.map b/build/static/js/main.6dd63180.js.map
diff --git a/build/static/js/main.defe7405.js b/build/static/js/main.defe7405.js
diff --git a/build/static/js/main.defe7405.js.map b/build/static/js/main.defe7405.js.map
diff --git a/src/App.css b/src/App.css
@@ -75,7 +75,7 @@
 }
 
 .sub-text {
-  font-size: 12px;
+  font-size: 10px;
 }
 
 .card-container {
@@ -144,7 +144,8 @@
 
 .top-title-container {
   padding: 10px;
-  width: 50%;
+  width: 54%;
+  margin-top: -20px;
 }
 
 /* card details */

diff --git a/src/App.js b/src/App.js
@@ -13,7 +13,7 @@ function App() {
         <Header />
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="details/:location" element={<Details />}>
+          <Route path="details/:location/" element={<Details />}>
             <Route path="*" element={<NotFound />} />
           </Route>
         </Routes>

diff --git a/src/components/Details.js b/src/components/Details.js
@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
+/* eslint-disable max-len */
+import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircleRight } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import TopCard from './TopCard';
@@ -15,40 +14,34 @@ const Details = () => {
   const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [searchKeyword, setSearchKeyword] = useState('');
 
-  useEffect(() => {
-    window.history.pushState({}, '', '/detail');
-    return () => {
-      window.history.pushState({}, '', '/');
-    };
-  }, []);
-
   if (!locationData) {
     return <p>No data available for this location.</p>;
   }
-  // eslint-disable-next-line max-len
+
   const filteredMeasurements = locationData.measurements.filter((metric) => metric.parameter.toLowerCase().includes(searchKeyword.toLowerCase()));
   const toggleSearch = () => {
     setIsSearchVisible(!isSearchVisible);
     if (!isSearchVisible) {
       setSearchKeyword('');
     }
   };
+
   return (
     <div>
       <TopCard
         backgroundImage={Map4}
         location={locationData.location}
-        views="700 Views"
+        description="Air Quality"
         footerText="CITY/TOWN BREAKDOWN-2013"
         setSearchKeyword={setSearchKeyword}
         toggleSearch={toggleSearch}
         isSearchVisible={isSearchVisible}
       />
       <div className="flex-container flex-column">
-        {filteredMeasurements.map((metric, index) => (
+        {filteredMeasurements.map((metric) => (
           <div
             key={uuidv4()}
-            className={`card-detail flex-container flex-row bold ${index % 2 === 1 ? 'darker' : ''}`}
+            className="card-detail flex-container flex-row bold"
           >
             <div className="card-detail-label flex-container">
               {metric.parameter}
@@ -58,7 +51,6 @@ const Details = () => {
               {metric.value}
               {' '}
               {metric.unit}
-              <FontAwesomeIcon icon={faCircleRight} style={{ color: '#fff', marginLeft: '12px' }} />
             </div>
           </div>
         ))}

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -12,7 +12,7 @@ import Col from 'react-bootstrap/Col';
 import { faCircleRight } from '@fortawesome/free-solid-svg-icons';
 import Map1 from '../assets/images/map1.svg';
 import Map2 from '../assets/images/map2.svg';
-import { fetchData } from '../redux/home/homeSlice';
+import { fetchData, showLocation } from '../redux/home/homeSlice';
 import TopCard from './TopCard';
 import LoadingSpinner from './Spinner';
 import { desktopMediaQuery, mobileMediaQuery } from '../media/mediaConfig';
@@ -32,7 +32,6 @@ const Home = () => {
 
   const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [searchKeyword, setSearchKeyword] = useState('');
-
   const filteredData = data.filter(({ measurements }) => measurements.some(({ parameter }) => airQualityParameters.includes(parameter)));
   const filteredLocations = filteredData.filter((location) => location.location.toLowerCase().includes(searchKeyword.toLowerCase()));
 
@@ -43,6 +42,17 @@ const Home = () => {
     }
   };
 
+  useEffect(() => {
+    dispatch(fetchData()).then((action) => {
+      const { payload } = action;
+      if (payload.results && payload.results.length > 0) {
+        const firstLocation = payload.results[0];
+        const locationToShow = firstLocation.location || firstLocation.country;
+        dispatch(showLocation({ location: locationToShow }));
+      }
+    });
+  }, [dispatch]);
+
   useEffect(() => {
     dispatch(fetchData());
   }, [dispatch]);
@@ -69,13 +79,14 @@ const Home = () => {
       <StyledHome>
         <TopCard
           backgroundImage={Map1}
-          location="USA"
-          views="890 Views"
-          footerText="Stats by air preassure"
+          location={data.length > 0 ? data[0].country : ''}
+          description="Air Quality Data"
+          footerText="Stats by air pressure"
           toggleSearch={toggleSearch}
           isSearchVisible={isSearchVisible}
           setSearchKeyword={setSearchKeyword}
         />
+
         <Container fluid data-testid="content-card">
           <Row xs={1} sm={2} md={2} lg={2} className="g-4 no-gutters p-2">
             {filteredLocations.length > 0 ? (
@@ -84,7 +95,7 @@ const Home = () => {
                 const truncatedTitle = location.location.length > 20 ? `${location.location.slice(0, 20)}...` : location.location;
                 return (
                   <Col key={uuidv4()} xs={6} md={6}>
-                    <Link to={`/details/${location.location}/${uuidv4()}`} style={{ textDecoration: 'none' }}>
+                    <Link to={`/details/${encodeURIComponent(location.location)}/${uuidv4()}`} style={{ textDecoration: 'none' }}>
                       <Card className={`content-card flex-container flex-column bold no-border flex-end ${index % 2 === 1 ? 'darker' : ''}`} style={{ backgroundImage: `url(${Map2})` }}>
                         <Card.Header className="position-absolute top-0 end-0">
                           <FontAwesomeIcon icon={faCircleRight} style={{ color: '#fff' }} />

diff --git a/src/components/TopCard.js b/src/components/TopCard.js
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SearchField from './SearchField';
 
 const TopCard = ({
-  backgroundImage, location, views,
+  backgroundImage, location, description,
   footerText, toggleSearch, isSearchVisible,
   setSearchKeyword,
 }) => (
@@ -18,7 +18,7 @@ const TopCard = ({
         <Stack gap={2} className="col-md-5 p-2 flex-end">
           <div className="top-title-container bold">
             <Card.Title className="top-title white-text ellipsis-multiline-2 p-2"><h2>{location}</h2></Card.Title>
-            <Card.Title className="sub-text white-text bold p-2"><h2>{views}</h2></Card.Title>
+            <Card.Title className="sub-text white-text bold p-2"><h2>{description}</h2></Card.Title>
           </div>
         </Stack>
       </Stack>
@@ -50,7 +50,7 @@ const TopCard = ({
 TopCard.propTypes = {
   backgroundImage: PropTypes.string.isRequired,
   location: PropTypes.string.isRequired,
-  views: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
   footerText: PropTypes.string.isRequired,
   toggleSearch: PropTypes.func.isRequired,
   isSearchVisible: PropTypes.bool.isRequired,

diff --git a/src/redux/home/homeSlice.js b/src/redux/home/homeSlice.js
@@ -25,6 +25,14 @@ const homeSlice = createSlice({
       const displayData = 'Home states';
       state.home = displayData;
     },
+    showLocation: (state, action) => {
+      const { location, temperature } = action.payload;
+      const locationData = state.home.find((item) => item.location === location);
+      if (locationData) {
+        locationData.temperature = temperature;
+      }
+    },
+
   },
   extraReducers: (builder) => {
     builder
@@ -43,5 +51,5 @@ const homeSlice = createSlice({
   },
 });
 
-export const { showData } = homeSlice.actions;
+export const { showData, showLocation } = homeSlice.actions;
 export default homeSlice.reducer;