Video-46-Create-Search-Box

ripanionut · Jul 25, 2021 · 89f1ced · 89f1ced
1 parent 3a8b9f2
commit 89f1ced
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -217,4 +217,9 @@ $ Open http://localhost:3000
      1.  add drawer
      2.  list categories
      3.  redirect to search screen
+ 46. Create Search Box
+     1.  add form
+     2.  handle form submit
+     3.  redirect to search screen
+
 
diff --git a/components/Layout.js b/components/Layout.js
@@ -22,9 +22,11 @@ import {
   ListItem,
   Divider,
   ListItemText,
+  InputBase,
 } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import CancelIcon from '@material-ui/icons/Cancel';
+import SearchIcon from '@material-ui/icons/Search';
 import useStyles from '../utils/styles';
 import { Store } from '../utils/Store';
 import { getError } from '../utils/error';
@@ -83,6 +85,16 @@ export default function Layout({ title, description, children }) {
       enqueueSnackbar(getError(err), { variant: 'error' });
     }
   };
+
+  const [query, setQuery] = useState('');
+  const queryChangeHandler = (e) => {
+    setQuery(e.target.value);
+  };
+  const submitHandler = (e) => {
+    e.preventDefault();
+    router.push(`/search?query=${query}`);
+  };
+
   useEffect(() => {
     fetchCategories();
   }, []);
@@ -124,6 +136,7 @@ export default function Layout({ title, description, children }) {
                 edge="start"
                 aria-label="open drawer"
                 onClick={sidebarOpenHandler}
+                className={classes.menuButton}
               >
                 <MenuIcon className={classes.navbarButton} />
               </IconButton>
@@ -173,7 +186,23 @@ export default function Layout({ title, description, children }) {
               </List>
             </Drawer>
 
-            <div className={classes.grow}></div>
+            <div className={classes.searchSection}>
+              <form onSubmit={submitHandler} className={classes.searchForm}>
+                <InputBase
+                  name="query"
+                  className={classes.searchInput}
+                  placeholder="Search products"
+                  onChange={queryChangeHandler}
+                />
+                <IconButton
+                  type="submit"
+                  className={classes.iconButton}
+                  aria-label="search"
+                >
+                  <SearchIcon />
+                </IconButton>
+              </form>
+            </div>
             <div>
               <Switch
                 checked={darkMode}

diff --git a/utils/styles.js b/utils/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   navbar: {
     backgroundColor: '#203040',
     '& a': {
@@ -56,5 +56,33 @@ const useStyles = makeStyles({
   toolbar: {
     justifyContent: 'space-between',
   },
-});
+  menuButton: { padding: 0 },
+  // search
+  searchSection: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
+  searchForm: {
+    border: '1px solid #ffffff',
+    backgroundColor: '#ffffff',
+    borderRadius: 5,
+  },
+  searchInput: {
+    paddingLeft: 5,
+    color: '#000000',
+    '& ::placeholder': {
+      color: '#606060',
+    },
+  },
+  iconButton: {
+    backgroundColor: '#f8c040',
+    padding: 5,
+    borderRadius: '0 5px 5px 0',
+    '& span': {
+      color: '#000000',
+    },
+  },
+}));
 export default useStyles;