CEC-4538 - Fleet/Vehicle/Deployment search saved (#363)

* CEC-4538 - Fleet/Vehicle/Deployment search saved

* save archived

src/components/Cars/List/index.jsx

@@ -14,12 +14,13 @@ import { RoleWrap } from "../../Controls/RoleWrap";
 import SearchField from "../../Controls/SearchField";
 import DropDownButton from "../../Controls/DropDownButton";
 import TransformModal from "../../TransformModal";
+import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
 import TaskRunner from "../../../utils/taskRunner";
 
 const MainForm = () => {
   const classes = useStyles();
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useLocalStorage("VEHICLE_SEARCH", "");
   const [online, setOnline] = useState(false);
   const [onlineHMI, setOnlineHMI] = useState(false);
   const [selectedVins, setSelectedVins] = useState([]);
@@ -113,7 +114,7 @@ const MainForm = () => {
           <DropDownButton actions={actions} payload={[selectedVins]} />
         </Grid>
         <Grid item md={4} className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch} />
+          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
         </Grid>
         <Grid item md={2} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
           <OptionsDropdown listId="filter-menu">

src/components/Controls/SearchField/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   FormControl,
   IconButton,
@@ -10,7 +10,7 @@ import SearchIcon from "@material-ui/icons/Search";
 import clsx from "clsx";
 
 const SearchField = (props) => {
-  const { classes, onSearch } = props;
+  const { classes, onSearch, savedSearchValue } = props;
   const [searchTerm, setSearchTerm] = useState("");
   const handleChange = (e) => {
     setSearchTerm(e.target.value);
@@ -29,6 +29,12 @@ const SearchField = (props) => {
     }
   };
 
+  useEffect(() => {
+    if (savedSearchValue) {
+      setSearchTerm(savedSearchValue);
+    }
+  }, [savedSearchValue]);
+
   return (
     <FormControl className={clsx(classes.margin, classes.fullWidth)}>
       <InputLabel htmlFor="search">Search</InputLabel>

src/components/Fleets/Table/index.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect } from "react";
 import { Link } from 'react-router-dom';
 import { Grid, } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
@@ -7,6 +7,7 @@ import clsx from "clsx";
 import { useUserContext } from "../../Contexts/UserContext"
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { FleetProvider } from "../../Contexts/FleetContext"
+import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import FleetSelectionTable from "../../Controls/FleetSelectionTable";
@@ -14,7 +15,7 @@ import FleetSelectionTable from "../../Controls/FleetSelectionTable";
 
 const MainForm = () => {
   const classes = useStyles();
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useLocalStorage("FLEET_SEARCH", "");
   const { setSitePath, setTitle } = useStatusContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
@@ -37,7 +38,7 @@ const MainForm = () => {
           </Link>
         </Grid>
         <Grid item md={4} className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch}/>
+          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
         </Grid>
         <Grid item md={4} className={classes.textRightAlign}></Grid>
       </Grid>

src/components/Manifest/List/index.jsx

@@ -90,8 +90,8 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
-  const [search, setSearch] = useState("");
-  const [active, setActive] = useState(true);
+  const [search, setSearch] = useLocalStorage("DEPLOYMENT_SEARCH", "");
+  const [active, setActive] = useLocalStorage("DEPLOYMENT_ACTIVE", "true");
 
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deleteId, setDeleteId] = useState("");
@@ -130,6 +130,7 @@ const MainForm = () => {
   useEffect(() => {
     (async () => {
       try {
+        handleActiveChange(null, active);
         await getManifests(
           {
             limit: pageSize,
@@ -246,7 +247,7 @@ const MainForm = () => {
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}></Grid>
         <Grid item md={4} className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch} />
+          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
           <RoleWrap
             groups={groups}
             providers={providers}
@@ -258,8 +259,8 @@ const MainForm = () => {
               aria-label="Active"
               onChange={handleActiveChange}
             >
-              <ToggleButton value={true}>Active</ToggleButton>
-              <ToggleButton value={false}>Archived</ToggleButton>
+              <ToggleButton value={"true"}>Active</ToggleButton>
+              <ToggleButton value={"false"}>Archived</ToggleButton>
             </ToggleButtonGroup>
           </RoleWrap>
         </Grid>