From 1590207aab6acfa648d5e9c9402ccb09e1fe0853 Mon Sep 17 00:00:00 2001 From: Ochieng Paul Date: Fri, 23 Feb 2024 01:17:20 +0300 Subject: [PATCH] Update index.jsx --- platform/src/pages/map/index.jsx | 331 +++++++++++++++++++------------ 1 file changed, 202 insertions(+), 129 deletions(-) diff --git a/platform/src/pages/map/index.jsx b/platform/src/pages/map/index.jsx index 7dbcce5dde..a9b5dc439d 100644 --- a/platform/src/pages/map/index.jsx +++ b/platform/src/pages/map/index.jsx @@ -1,44 +1,15 @@ import React, { useState, useEffect } from 'react'; import Layout from '@/components/Layout'; -import CloseIcon from '@/icons/close_icon'; import LocationIcon from '@/icons/LocationIcon'; import MenuIcon from '@/icons/map/menuIcon'; import AirQoMap from '@/components/Map/AirQoMap'; +import { useDispatch, useSelector } from 'react-redux'; import HomeIcon from '@/icons/map/homeIcon'; import { useRouter } from 'next/router'; import { AirQualityLegend } from '@/components/Map/components/Legend'; import allCountries from '@/components/Map/components/countries'; -import SearchField from '@/components/Search/SearchField'; - -const MAP_ACCESS_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN; - -const countries = [ - { - id: 1, - name: 'Uganda', - flag: 'UG', - }, - { - id: 2, - name: 'Kenya', - flag: 'KE', - }, - { - id: 3, - name: 'Nigeria', - flag: 'NG', - }, - { - id: 4, - name: 'Rwanda', - flag: 'RW', - }, - { - id: 5, - name: 'Tanzania', - flag: 'TZ', - }, -]; +import SearchField from '@/components/search/SearchField'; +import { getSitesSummary } from '@/lib/store/services/deviceRegistry/GridsSlice'; const TabSelector = ({ selectedTab, setSelectedTab }) => { return ( @@ -58,45 +29,66 @@ const TabSelector = ({ selectedTab, setSelectedTab }) => { }`}> Sites -
setSelectedTab('airqlouds')} - className={`px-3 py-2 flex justify-center items-center w-full hover:cursor-pointer text-sm font-medium text-secondary-neutral-light-600${ - selectedTab === 'airqlouds' ? 'border rounded-md bg-white shadow-sm' : '' - }`}> - AirQlouds -
); }; -const filteredCountries = allCountries.filter((country) => - countries.find((c) => c.name === country.country), -); - -const CountryList = ({ selectedCountry, setSelectedCountry }) => ( -
- {filteredCountries.map((country, index) => ( -
setSelectedCountry(country)}> - {country.country} - {country.country} -
- ))} -
-); +const CountryList = ({ data, selectedCountry, setSelectedCountry }) => { + const dispatch = useDispatch(); + + const sortedData = [...data].sort((a, b) => a.country.localeCompare(b.country)); + + return ( +
+ {sortedData.map((country, index) => ( +
{ + setSelectedCountry(country); + dispatch( + setLocation({ + country: country.country, + }), + ); + }}> + {country.country} + {country.country} +
+ ))} +
+ ); +}; const index = () => { + const dispatch = useDispatch(); const router = useRouter(); const [location, setLocation] = useState(); const [showSideBar, setShowSideBar] = useState(true); const [selectedTab, setSelectedTab] = useState('locations'); + const [selectedSite, setSelectedSite] = useState(null); + const siteData = useSelector((state) => state.grids.sitesSummary); + const [searchResults, setSearchResults] = useState([]); + const [isFocused, setIsFocused] = useState(false); const [selectedCountry, setSelectedCountry] = useState(null); + // admin check + const isAdmin = false; + + // Use destructuring to directly access individual_preferences + const { individual_preferences } = useSelector((state) => state.defaults); + + // Use flatMap for more efficient mapping and flattening + const selectedSites = individual_preferences.flatMap((pref) => pref.selected_sites); + + // siteDetails + const siteDetails = siteData.sites; + + useEffect(() => { + dispatch(getSitesSummary()); + }, []); useEffect(() => { const handleResize = () => { @@ -129,6 +121,10 @@ const index = () => { setLocation(); }; + const handleSearch = (results) => { + setSearchResults(results); + }; + const locations = [ { id: 1, @@ -157,96 +153,173 @@ const index = () => { }, ]; + // Assuming siteDetails and allCountries are defined + let uniqueCountries = []; + let result = []; + + siteDetails.forEach((site) => { + if (!uniqueCountries.includes(site.country)) { + uniqueCountries.push(site.country); + let countryDetails = allCountries.find((data) => data.country === site.country); + if (countryDetails) { + result.push({ ...site, ...countryDetails }); + } else { + return; + } + } + }); + return (
<> {showSideBar && (
-
-
-
+
+
+
- +

+ Navigate, Explore, and Understand Air Quality Data with Precision, Right Down to + Your Neighborhood +

+ {isAdmin && ( + + )}
-

- Navigate, Explore, and Understand Air Quality Data with Precision, Right Down to - Your Neighborhood -

- + {isAdmin &&
}
-
-
- -
- - -
-
- -
- {locations.map((location) => ( -
{ - handleLocationSelect(); - }}> -
- + {selectedTab === 'locations' && + (!isFocused ? ( +
+
setIsFocused(true)}> + +
+
+ + +
+
+ +
+ {selectedSites.map((sites) => ( +
{ + handleLocationSelect(sites); + }}> +
+ +
+
+ + {sites.name} + + + {sites.region + ',' + sites.country} + +
+
+ ))} +
+
+
+ ) : ( + // Search focused view +
+
+ +
+ + {searchResults.length > 0 ? ( +
+ +
+ {searchResults.map((grid) => ( +
{ + handleLocationSelect(grid); + }}> +
+ +
+
+ + {grid.name} + + + {grid.region + ',' + grid.country} + +
+
+ ))} +
-
- - {location.name} - - - {location.country} - + ) : ( +
+

No results found

-
- ))} -
-
-
+ )} +
+ ))}
)}
- -
- {!showSideBar && ( -
-
- - -
+
+
+ +
- )} - -
+
+ +
);