Merge pull request #145 from kaleido-io/nav-bug

[nav-bug] fixing router bug

Author: peterbroadhurst

package-lock.json

@@ -34,7 +34,6 @@
     "react-scripts": "^5.0.0",
     "reconnecting-websocket": "^4.4.0",
     "typescript": "^4.5.5",
-    "use-query-params": "^1.2.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -31,12 +31,7 @@ import {
 } from './components/Snackbar/MessageSnackbar';
 import { ApplicationContext } from './contexts/ApplicationContext';
 import { SnackbarContext } from './contexts/SnackbarContext';
-import {
-  CreatedFilterOptions,
-  INamespace,
-  IStatus,
-  NAMESPACES_PATH,
-} from './interfaces';
+import { INamespace, IStatus, NAMESPACES_PATH } from './interfaces';
 import { FF_Paths } from './interfaces/constants';
 import { themeOptions } from './theme';
 import { fetchWithCredentials, summarizeFetchError } from './utils';
@@ -62,8 +57,6 @@ const App: React.FC = () => {
   const [orgName, setOrgName] = useState('');
   const [nodeID, setNodeID] = useState('');
   const [nodeName, setNodeName] = useState('');
-  const [createdFilter, setCreatedFilter] =
-    useState<CreatedFilterOptions>('24hours');
   const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
 
   const { pathname: currentPath } = useMemo(() => {
@@ -167,8 +160,6 @@ const App: React.FC = () => {
             identity,
             lastEvent,
             setLastEvent,
-            createdFilter,
-            setCreatedFilter,
           }}
         >
           <SnackbarContext.Provider

src/App.tsx

@@ -1,10 +1,21 @@
 import { styled } from '@mui/material';
 import React, { useContext, useEffect, useState } from 'react';
-import { Navigate, Outlet, useLocation } from 'react-router-dom';
-import { ArrayParam, useQueryParam, withDefault } from 'use-query-params';
+import {
+  Navigate,
+  Outlet,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
 import { ApplicationContext } from '../contexts/ApplicationContext';
+import { DateFilterContext } from '../contexts/DateFilterContext';
 import { FilterContext } from '../contexts/FilterContext';
-import { NAMESPACES_PATH } from '../interfaces';
+import { SlideContext } from '../contexts/SlideContext';
+import {
+  CreatedFilterOptions,
+  ICreatedTimeFilter,
+  NAMESPACES_PATH,
+} from '../interfaces';
+import { getCreatedTimeFilter, isValidUUID } from '../utils';
 import { Navigation, NAV_WIDTH } from './Navigation/Navigation';
 
 const Main = styled('main')({
@@ -22,18 +33,25 @@ const RootDiv = styled('div')({
   display: 'flex',
 });
 
+export const FILTERS_QUERY_KEY = 'filters';
+export const SLIDE_QUERY_KEY = 'slide';
+export const TIME_QUERY_KEY = 'time';
+
 export const AppWrapper: React.FC = () => {
   const { pathname } = useLocation();
   const { selectedNamespace } = useContext(ApplicationContext);
   const [filterAnchor, setFilterAnchor] = useState<HTMLButtonElement | null>(
     null
   );
-  const location = useLocation();
-  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  const [searchParams, setSearchParams] = useSearchParams();
+  // Table filters
+  const [filterArray, setFilterArray] = useState<string[]>([]);
   const [filterString, setFilterString] = useState('');
-  const [filterQuery, setFilterQuery] = useQueryParam(
-    'filters',
-    withDefault(ArrayParam, [])
+  // Slide filters
+  const [slideQuery, setSlideQuery] = useState<string | null>(null);
+  // Date filter
+  const [dateFilter, setDateFilter] = useState<ICreatedTimeFilter>(
+    getCreatedTimeFilter('24hours')
   );
 
   if (pathname === '/') {
@@ -45,49 +63,92 @@ export const AppWrapper: React.FC = () => {
     );
   }
 
-  // Filter
+  // Table Filters
   useEffect(() => {
-    // set filters if they are present in the URL
-    if (filterQuery.length !== 0) {
-      setActiveFilters(filterQuery as string[]);
-    }
-  }, [setActiveFilters, filterQuery]);
+    const filterArray = searchParams.getAll(FILTERS_QUERY_KEY);
+    setFilterArray(filterArray);
+    setFilterString(`&${filterArray.join('&')}`);
+  }, [pathname]);
+
+  // Slide ID
+  useEffect(() => {
+    const slideQuery = searchParams.get(SLIDE_QUERY_KEY);
+    slideQuery !== null && setSlideQuery(slideQuery);
+  }, [pathname, setSearchParams]);
 
+  // Time string
   useEffect(() => {
-    //set query param state
-    setFilterQuery(activeFilters);
-    if (activeFilters.length === 0) {
-      setFilterString('');
-      return;
+    const timeString = searchParams.get(TIME_QUERY_KEY) as CreatedFilterOptions;
+    if (timeString === null) {
+      addDateToParams(dateFilter.filterShortString);
+    } else {
+      setDateFilter(getCreatedTimeFilter(timeString));
     }
+  }, [pathname]);
 
-    setFilterString(`&${activeFilters.join('&')}`);
-  }, [activeFilters, setFilterQuery]);
+  const addFilterToParams = (filter: string) => {
+    searchParams.append(FILTERS_QUERY_KEY, filter);
+    setSearchParams(searchParams);
+    const filterArray = searchParams.getAll(FILTERS_QUERY_KEY);
+    setFilterArray(filterArray);
+    setFilterString(`&${filterArray.join('&')}`);
+  };
 
-  useEffect(() => {
-    setActiveFilters(filterQuery as string[]);
-  }, [location]);
+  const clearAllFilters = () => {
+    searchParams.delete(FILTERS_QUERY_KEY);
+    setSearchParams(searchParams);
+    setFilterArray([]);
+    setFilterString('');
+  };
+
+  const addSlideToParams = (slideID: string | undefined) => {
+    if (slideID === undefined) {
+      searchParams.delete(SLIDE_QUERY_KEY);
+    } else {
+      isValidUUID(slideID) && searchParams.set(SLIDE_QUERY_KEY, slideID);
+      setSearchParams(searchParams);
+    }
+  };
+
+  const addDateToParams = (timeFilterString: CreatedFilterOptions) => {
+    searchParams.set(TIME_QUERY_KEY, timeFilterString);
+    setSearchParams(searchParams);
+    setDateFilter(getCreatedTimeFilter(timeFilterString));
+  };
 
   return (
     <RootDiv>
       <FilterContext.Provider
         value={{
           filterAnchor,
           setFilterAnchor,
-          activeFilters,
-          setActiveFilters,
           filterString,
-          setFilterString,
-          filterQuery,
-          setFilterQuery,
+          filterArray,
+          addFilterToParams,
+          clearAllFilters,
         }}
       >
-        <Main>
-          <Navigation />
-          <ContentDiv>
-            <Outlet />
-          </ContentDiv>
-        </Main>
+        <DateFilterContext.Provider
+          value={{
+            searchParams,
+            dateFilter,
+            addDateToParams,
+          }}
+        >
+          <SlideContext.Provider
+            value={{
+              slideQuery,
+              addSlideToParams,
+            }}
+          >
+            <Main>
+              <Navigation />
+              <ContentDiv>
+                <Outlet />
+              </ContentDiv>
+            </Main>
+          </SlideContext.Provider>
+        </DateFilterContext.Provider>
       </FilterContext.Provider>
     </RootDiv>
   );

src/components/AppWrapper.tsx

@@ -15,30 +15,18 @@
 // limitations under the License.
 
 import { Button, Chip, Grid, Typography } from '@mui/material';
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FilterContext } from '../../contexts/FilterContext';
 import { DEFAULT_PADDING } from '../../theme';
 
 interface Props {
-  filters: string[];
-  setFilters: React.Dispatch<React.SetStateAction<string[]>>;
   onSetFilterAnchor: any;
 }
 
-export const FilterButton: React.FC<Props> = ({
-  filters,
-  setFilters,
-  onSetFilterAnchor,
-}) => {
+export const FilterButton: React.FC<Props> = ({ onSetFilterAnchor }) => {
   const { t } = useTranslation();
-
-  const handleClear = () => {
-    setFilters([]);
-  };
-
-  const handleRemoveFilter = (filter: string) => {
-    setFilters(filters.filter((item) => item !== filter));
-  };
+  const { clearAllFilters, filterArray } = useContext(FilterContext);
 
   const handleOpenFilter = (event: React.MouseEvent<HTMLButtonElement>) => {
     onSetFilterAnchor(event);
@@ -52,7 +40,7 @@ export const FilterButton: React.FC<Props> = ({
       item
       alignItems="center"
     >
-      {filters.length > 0 && (
+      {filterArray.length > 0 && (
         <Grid
           container
           item
@@ -61,17 +49,18 @@ export const FilterButton: React.FC<Props> = ({
           my={DEFAULT_PADDING}
         >
           <Grid container alignItems="center" justifyContent="flex-end">
-            {filters.map((filter, index) => (
+            {filterArray.map((filter, index) => (
               <Grid key={`${filter}${index}`} item>
                 <Chip
-                  onDelete={() => handleRemoveFilter(filter)}
+                  // TODO: Add back
+                  // onDelete={() => handleRemoveFilter(filter)}
                   label={filter}
                 />
               </Grid>
             ))}
             <Grid item>
               <Chip
-                onClick={handleClear}
+                onClick={clearAllFilters}
                 variant="outlined"
                 label={t('clear')}
               />

src/components/Filters/FilterButton.tsx

@@ -29,23 +29,19 @@ import {
   Typography,
 } from '@mui/material';
 import CloseIcon from 'mdi-react/CloseIcon';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FilterContext } from '../../contexts/FilterContext';
 
 interface Props {
   anchor: HTMLButtonElement | null;
   onClose: () => void;
   fields: string[];
-  addFilter: (filter: string) => void;
 }
 
-export const FilterModal: React.FC<Props> = ({
-  anchor,
-  onClose,
-  fields,
-  addFilter,
-}) => {
+export const FilterModal: React.FC<Props> = ({ anchor, onClose, fields }) => {
   const { t } = useTranslation();
+  const { addFilterToParams } = useContext(FilterContext);
   const [open, setOpen] = useState(false);
   const [filterValue, setFilterValue] = useState('');
   const [filterField, setFilterField] = useState('');
@@ -63,7 +59,7 @@ export const FilterModal: React.FC<Props> = ({
     const filter = `${filterField}=${filterNegate ? '!' : ''}${
       filterCaseInsensitive ? ':' : ''
     }${filterOperator}${filterValue}`;
-    addFilter(filter);
+    addFilterToParams(filter);
     onClose();
   };
 

src/components/Filters/FilterModal.tsx

@@ -74,7 +74,6 @@ export const NetworkMap: React.FC<Props> = ({ size }) => {
   const [popoverNode, setPopoverNode] = useState<any>(undefined);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const handleClick = (node: any, event: any) => {
-    console.log(event);
     setAnchorPosition({
       top: node.x,
       left: node.y,