Filter by cost fix

src/comps/context/ThemeProvider.js

@@ -9,23 +9,26 @@ import {
 
 const ThemeContext = React.createContext({
   toggleColorMode: () => {},
-  colorMode: false
+  colorMode: false,
 });
 
 const ThemeProvider = (props) => {
   // dark mode detection/toggles/context may become obsolete in a new version of MUI with the <CssVarsProvider> component
   // using a home-made solution for now since it's still marked experimental
   const browserPreference = useMediaQuery("(prefers-color-scheme: dark)");
-  const [storedPreference, setStoredPreference] = React.useState(window.localStorage.getItem("mode"));
-  const prefersDarkMode = storedPreference !== null ? storedPreference === "dark" : browserPreference;
+  const [storedPreference, setStoredPreference] = React.useState(
+    window.localStorage.getItem("mode")
+  );
+  const prefersDarkMode =
+    storedPreference !== null ? storedPreference === "dark" : browserPreference;
   const toggle = React.useMemo(
-      () => () =>
-          setStoredPreference(() => {
-            const output = prefersDarkMode ? "light" : "dark";
-            window.localStorage.setItem("mode", output); // persist in localStorage
-            return output;
-          }),
-      [prefersDarkMode]
+    () => () =>
+      setStoredPreference(() => {
+        const output = prefersDarkMode ? "light" : "dark";
+        window.localStorage.setItem("mode", output); // persist in localStorage
+        return output;
+      }),
+    [prefersDarkMode]
   );
 
   const theme = React.useMemo(

src/comps/ui/NavDrawer.js

@@ -9,7 +9,15 @@ import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
 import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
 
-import { Drawer, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import {
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
 import NavBarLink from "./NavBarLink.js";
 import { Brightness4, Brightness7 } from "@mui/icons-material";
 import { ThemeContext } from "../context/ThemeProvider";
@@ -86,11 +94,13 @@ const NavDrawer = ({ user }) => {
             </>
           )}
           <ListItem disablePadding={true}>
-            <ListItemButton
-              onClick={theme.toggleColorMode}
-            >
+            <ListItemButton onClick={theme.toggleColorMode}>
               <ListItemIcon>
-                  { theme.colorMode === "light" ? <Brightness4 /> : <Brightness7 /> }
+                {theme.colorMode === "light" ? (
+                  <Brightness4 />
+                ) : (
+                  <Brightness7 />
+                )}
               </ListItemIcon>
               <ListItemText primary={`Toggle dark mode`} />
             </ListItemButton>

src/index.js

@@ -6,9 +6,9 @@ import reportWebVitals from "./reportWebVitals";
 const root = createRoot(document.getElementById("root"));
 
 root.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/catalog.js

@@ -81,6 +81,7 @@ const Catalog = () => {
 
   const user = useContext(UserContext);
   const [maxCost, setMaxCost] = useState(10000);
+  const [costInput, setCostInput] = useState(10000);
 
   // uses ? parameters as search params, targeting `q` as the search engine query key
   let [searchParams] = useSearchParams(); // TODO: filter data server-side in the GraphQL query
@@ -123,9 +124,20 @@ const Catalog = () => {
   // };
 
   const handleInputChange = (event) => {
+    setCostInput(event.target.value === "" ? 0 : Number(event.target.value));
+  };
+
+  const handleInputBlur = (event) => {
     setMaxCost(event.target.value === "" ? 0 : Number(event.target.value));
   };
 
+  const handleKeyDownPress = (event) => {
+    if (event.keyCode === 13) {
+      // enter
+      handleInputBlur(event);
+    }
+  };
+
   // Get array of eligibility names
   const eligibilities_response = useQuery(ELIGIBILITY_QUERY);
   const categories_response = useQuery(CATEGORY_QUERY);
@@ -451,9 +463,11 @@ const Catalog = () => {
             <Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
               <Input
                 autoFocus
-                value={maxCost}
+                value={costInput}
                 size="small"
                 onChange={handleInputChange}
+                onBlur={handleInputBlur}
+                onKeyDown={handleKeyDownPress}
               />
             </Grid>
             {/*<Button*/}