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([]);
@@ -64,7 +65,7 @@ const MainForm = () => {
   const handleUploadConfig = (fn) => {
     const taskRunner = new TaskRunner(5);
     const request = (vin, i) => {
-      const messagePrefix = `${i+1}/${selectedVins.length} "${vin}":`;
+      const messagePrefix = `${i + 1}/${selectedVins.length} "${vin}":`;
       return async () => {
         const result = await fn(vin, config.force.value, token)
           .then(() => {
@@ -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,12 +1,13 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect } from "react";
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
-import {Grid,} from "@material-ui/core";
+import { Grid, } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import clsx from "clsx";
 
-import {useUserContext} from "../../Contexts/UserContext"
+import { useUserContext } from "../../Contexts/UserContext"
-import {useStatusContext} from "../../Contexts/StatusContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
-import {FleetProvider} from "../../Contexts/FleetContext"
+import { FleetProvider } from "../../Contexts/FleetContext"
+import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import FleetSelectionTable from "../../Controls/FleetSelectionTable";
@@ -14,9 +15,9 @@ 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 { setSitePath, setTitle } = useStatusContext();
-  const {token: {idToken: {jwtToken: token}}} = useUserContext();
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   const handleSearch = (query) => {
     setSearch(query);
@@ -33,18 +34,18 @@ const MainForm = () => {
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
           <Link to={"/fleet-add"}>
-            <AddCircleIcon fontSize="large"/>
+            <AddCircleIcon fontSize="large" />
           </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>
       <FleetSelectionTable
         token={token}
         classes={classes}
-        search={{search}}
+        search={{ search }}
         multiSelect={false}
       />
     </div>

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 [search, setSearch] = useLocalStorage("DEPLOYMENT_SEARCH", "");
-  const [active, setActive] = useState(true);
+  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,
@@ -164,7 +165,7 @@ const MainForm = () => {
   };
 
   const handleActiveChange = (event, newAlignment) => {
-    if (newAlignment !== null){
+    if (newAlignment !== null) {
       setActive(newAlignment)
     }
   }
@@ -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={"true"}>Active</ToggleButton>
-              <ToggleButton value={false}>Archived</ToggleButton>
+              <ToggleButton value={"false"}>Archived</ToggleButton>
             </ToggleButtonGroup>
           </RoleWrap>
         </Grid>