Pre-Demo Updates (#92)

* replace filter icon with search icon * add clear button to the left panel * update button text
Oceans-1876 · Nov 3, 2023 · 8ab4281 · 8ab4281
1 parent 0714037
commit 8ab4281
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/src/components/Explore/LeftSidebar/StationList/index.tsx b/src/components/Explore/LeftSidebar/StationList/index.tsx
@@ -1,11 +1,11 @@
-import React, { FC, ReactNode, useContext, useEffect, useRef } from 'react';
+import React, { FC, ReactNode, useContext, useEffect, useMemo, useRef } from 'react';
 import Box from '@mui/material/Box';
 
 import { Button, Stack, Typography } from '@mui/material';
 import { DataActionDispatcherContext, DataStateContext } from '@app/store/contexts';
 import { theme } from '@app/theme';
 import { requestScrollIntoView } from '@app/utils/scrollIntoView';
-import { ArrowBackOutlined } from '@mui/icons-material';
+import { ArrowBackOutlined, CloseOutlined } from '@mui/icons-material';
 import RegionCard from './RegionCard';
 import RegionIcon from './RegionIcon';
 import StationCard from './StationCard';
@@ -32,7 +32,12 @@ const Scroll: FC<{ children: ReactNode }> = ({ children }) => {
 
 const StationsList = () => {
     const dataActionDispatcher = useContext(DataActionDispatcherContext);
-    const { filteredStations, selectedFaoArea } = useContext(DataStateContext);
+    const { filteredStations, selectedFaoArea, allStationsList } = useContext(DataStateContext);
+
+    const filteredStationCount = useMemo(
+        () => filteredStations.reduce((cnt, group) => cnt + group.stations.length, 0),
+        [filteredStations]
+    );
 
     const selectedGroup = filteredStations.find((g) => g.faoArea.code === selectedFaoArea?.code) ?? null;
 
@@ -177,6 +182,27 @@ const StationsList = () => {
                             <RegionCard key={group.faoArea.code} stationGroup={group} />
                         ))}
                     </Scroll>
+                    {filteredStationCount < allStationsList.length ? (
+                        <Button
+                            variant="explore-text"
+                            sx={{
+                                margin: '4px',
+                                position: 'absolute',
+                                left: 0,
+                                bottom: 0,
+                                color: theme.palette.explore.secondary
+                            }}
+                            onClick={() => {
+                                dataActionDispatcher({
+                                    type: 'updateFilteredStations',
+                                    stations: allStationsList
+                                });
+                            }}
+                            startIcon={<CloseOutlined />}
+                        >
+                            Clear Filter
+                        </Button>
+                    ) : null}
                 </Stack>
             )}
         </Box>

diff --git a/src/components/Explore/RightSidebar/index.tsx b/src/components/Explore/RightSidebar/index.tsx
@@ -1,7 +1,11 @@
 import { Box, Button, Stack, Typography } from '@mui/material';
 import React, { FC, useCallback, useState } from 'react';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import { KeyboardDoubleArrowLeftOutlined, KeyboardDoubleArrowRightOutlined, LayersOutlined } from '@mui/icons-material';
+import {
+    KeyboardDoubleArrowLeftOutlined,
+    KeyboardDoubleArrowRightOutlined,
+    LayersOutlined,
+    SearchOutlined
+} from '@mui/icons-material';
 import { theme } from '@app/theme';
 import SearchPanel from './Search/SearchPanel';
 import LayerControl from './Layer/LayerControl';
@@ -48,7 +52,7 @@ const RightSidebar: FC = () => {
                         textTransform: 'none'
                     }}
                 >
-                    <FilterListIcon />
+                    <SearchOutlined />
                     {expanded ? <Typography ml="12px">Filter</Typography> : null}
                 </Button>
                 <Button