React capstone project - Metrics webapp

README.md

@@ -14,7 +14,7 @@
     - [React Instructions ](#react-stack-)
     - [Tech Stack ](#tech-stack-)
     - [Key Features ](#key-features-)
-  - [🚀 Live Demo ](#-live-demo-)
+  - [🚀 Video & Live Demo ](#-live-demo-)
   - [💻 Getting Started ](#-getting-started-)
     - [Prerequisites](#prerequisites)
     - [Setup](#setup)
@@ -135,10 +135,11 @@ You don't have to ever use `eject`. The curated feature set is suitable for smal
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 
-## 🚀 Live Demo <a name="live-demo"></a>
+## 🚀 Video & Live Demo <a name="live-demo"></a>
 
-> Please follow the link for a live demo.
-- [The matrices webapp: Coming Soon...](https://github.com/porag-m06/Metrics-Webapp-React-Capst)
+> Please follow the link for a video & live demo.
+- [Video Presentation:](https://www.loom.com/share/c59cff2aaf524bc2989f29c857c7b3c5?sid=1172c318-b745-4211-a048-7575dce85e8e)
+- [The matrices webapp:](https://air-pollution-index.onrender.com/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

src/App.js

@@ -1,12 +1,10 @@
 import { Route, Routes } from 'react-router-dom';
-import Nav from './components/Nav';
 import GeoLocation from './components/GeoLocation';
 import PullutionDetail from './components/PollutionDetail';
 
 function App() {
   return (
     <div className="parent-container">
-      <Nav />
       <div className="container">
         <Routes>
           <Route path="/" element={<GeoLocation />} />

src/__test__/GeoLocation.test.js

@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import GeoLocation from '../components/GeoLocation';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('GeoLocation component', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      geolocation: {
+        locations: [],
+        isLoading: false,
+        error: undefined,
+      },
+    });
+  });
+
+  test('GEOLOCATION TEST 1: renders loading message when data is being fetched', () => {
+    store = mockStore({
+      geolocation: {
+        locations: [],
+        isLoading: true,
+        error: undefined,
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <GeoLocation />
+        </BrowserRouter>
+      </Provider>,
+    );
+
+    expect(screen.getByText('geoLocations data is loading...')).toBeInTheDocument();
+  });
+
+  test('GEOLOCATION TEST 2: renders error message when data fetch fails', async () => {
+    store = mockStore({
+      geolocation: {
+        locations: [],
+        isLoading: false,
+        error: 'Something went wrong',
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <GeoLocation />
+        </BrowserRouter>
+      </Provider>,
+    );
+
+    expect(screen.getByText('Something went wrong...!')).toBeInTheDocument();
+  });
+});

src/__test__/PollutionDetail.test.js

@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import PollutionDetail from '../components/PollutionDetail';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('PollutionDetail component', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      airpollution: {
+        list: [],
+        isLoading: false,
+        error: undefined,
+      },
+    });
+  });
+
+  test('POLLUTIONDETAILS TEST 1: renders loading message when data is being fetched', () => {
+    store = mockStore({
+      airpollution: {
+        list: [],
+        isLoading: true,
+        error: undefined,
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <PollutionDetail />
+        </BrowserRouter>
+      </Provider>,
+    );
+
+    expect(screen.getByText('airpollution data is loading...')).toBeInTheDocument();
+  });
+
+  test('POLLUTIONDETAILS TEST 2: renders error message when data fetch fails', () => {
+    store = mockStore({
+      airpollution: {
+        list: [],
+        isLoading: false,
+        error: 'Something went wrong',
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <PollutionDetail />
+        </BrowserRouter>
+      </Provider>,
+    );
+
+    expect(screen.getByText('Something went wrong...!')).toBeInTheDocument();
+  });
+});

src/components/GeoLocation.js

@@ -1,43 +1,86 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import '../style/geolocations.css';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import { IoIosArrowBack } from 'react-icons/io';
+import { BsFillMicFill } from 'react-icons/bs';
+import { RiSettings5Fill } from 'react-icons/ri';
+import worldmap from '../assets/worldmap.png';
 import { fetchGeoLocations } from '../redux/features/geolocations/geolocationSlice';
 
 function GeoLocation() {
   const { locations, isLoading, error } = useSelector((storeState) => storeState.geolocation);
+  const [query, setQuery] = useState('');
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
   useEffect(() => {
     if (locations.length === 0) { dispatch(fetchGeoLocations()); }
   }, [locations, dispatch]);
 
+  const filteredLocations = locations.filter((location) => location.name.toLowerCase()
+    .includes(query.toLowerCase()));
+
   if (isLoading) { return (<div>geoLocations data is loading...</div>); }
   if (error) { return (<div>Something went wrong...!</div>); }
 
   return (
-    <div>
-      GEOLOCATIONS :
-      <ul>
-        {locations.map((location) => (
-          <li key={location.id}>
-            <button
-              type="button"
-              onClick={() => {
-                navigate('/city-pollution-info', { state: { location } });
-              }}
-            >
-              <div className="card">
-                <h2>{location.name}</h2>
-                <h5>{location.country}</h5>
-                <p>{`Latitude: ${location.latitude}\nLongitude: ${location.longitude}`}</p>
-                <h3>{`Population: ${location.population / 100000} Millions`}</h3>
-              </div>
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <>
+      <header className="nav-container">
+        <div className="logo">
+          <IoIosArrowBack />
+          {' '}
+          AirIdX
+        </div>
+        <div className="search">
+          <input
+            type="search"
+            value={query}
+            onChange={
+            (e) => setQuery(e.target.value)
+          }
+            placeholder="search cities by name for air index..."
+          />
+        </div>
+        <div>
+          <BsFillMicFill className="react-icon" />
+          <RiSettings5Fill className="react-icon" />
+        </div>
+      </header>
+
+      <div className="home-container">
+        <div className="hero">
+          <img src={worldmap} alt="worldmap" />
+          <div className="hero-right">
+            <div>
+              <h2>POLLUTION INDEX</h2>
+              <p>82 major cities</p>
+            </div>
+          </div>
+        </div>
+        <p className="middle">STATS BY CITIES</p>
+        <ul className="ulist">
+          {filteredLocations.map((location) => (
+            <li key={location.id}>
+              <button
+                type="button"
+                onClick={() => {
+                  navigate('/city-pollution-info', { state: { location } });
+                }}
+              >
+                <div className="card">
+                  <h3>{(location.name).toUpperCase()}</h3>
+                  <h5>{(location.country).toUpperCase()}</h5>
+                  <h6>{`Latitude: ${(location.latitude).toFixed(2)}`}</h6>
+                  <h6>{`Longitude: ${(location.longitude).toFixed(2)}`}</h6>
+                  <h4>{`Population: ${(location.population / 1000000).toFixed(2)} M`}</h4>
+                </div>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
   );
 }