From a0b75f95cbcbbef6bc33c1c084f2a0cfd124640a Mon Sep 17 00:00:00 2001
From: PedroFonsecaDEV <pedroporventura@gmail.com>
Date: Thu, 21 Jan 2021 03:46:55 -0500
Subject: [PATCH 1/5] Create SearchBar.tsx

---
 .../next/src/components/SearchBar.tsx         | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 src/frontend/next/src/components/SearchBar.tsx

diff --git a/src/frontend/next/src/components/SearchBar.tsx b/src/frontend/next/src/components/SearchBar.tsx
new file mode 100644
index 0000000000..754b6d0386
--- /dev/null
+++ b/src/frontend/next/src/components/SearchBar.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import SearchIcon from '@material-ui/icons/Search';
+import {
+  Grid,
+  MenuItem,
+  TextField,
+  FormControl,
+  Paper,
+  IconButton,
+  Box,
+  Typography,
+} from '@material-ui/core';
+
+import SearchInput from '../SearchInput';
+import SearchHelp from '../SearchHelp';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    overflow: 'visible',
+    maxWidth: '785px',
+    padding: 0,
+    marginTop: '10rem',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginBottom: theme.spacing(6),
+  },
+  card: {
+    padding: theme.spacing(2, 4, 2, 4),
+    backgroundColor: theme.palette.background.default,
+  },
+  header: {
+    padding: 0,
+    marginBottom: theme.spacing(2),
+    backgroundColor: theme.palette.primary.main,
+  },
+  h1: {
+    display: 'block',
+    transition: 'all linear 350ms',
+    fontWeight: 600,
+    color: theme.palette.text.secondary,
+    [theme.breakpoints.between('xs', 'sm')]: {
+      fontSize: '3rem',
+    },
+    [theme.breakpoints.between('md', 'lg')]: {
+      fontSize: '4rem',
+    },
+    [theme.breakpoints.up('xl')]: {
+      fontSize: '5rem',
+    },
+  },
+  iconButton: {
+    backgroundColor: theme.palette.secondary.main,
+    '&:hover': {
+      backgroundColor: theme.palette.secondary.dark,
+    },
+    '& * > .MuiSvgIcon-root': {
+      fontSize: '2rem',
+      color: theme.palette.primary.contrastText,
+    },
+    margin: 0,
+    position: 'absolute',
+    right: '10px',
+    top: '6px',
+  },
+  selectControl: {
+    '& > *': {
+      fontSize: '1.2rem',
+      textTransform: 'capitalize',
+      color: theme.palette.primary.main,
+    },
+  },
+  selectItem: {
+    fontSize: '1.4rem',
+    textTransform: 'capitalize',
+    color: theme.palette.primary.main,
+  },
+}));
+
+function CustomizedInputBase(props) {
+  const classes = useStyles();
+  const { text, onTextChange, onFilterChange, filter, onSubmit } = props;
+
+  const searchOptions = ['post', 'author'];
+
+  return (
+    <Box className={classes.root} boxShadow={2}>
+      <Paper component="form" className={classes.card} elevation={0}>
+        <Grid
+          container
+          className={classes.header}
+          direction="row"
+          spacing={8}
+          alignItems="center"
+          justify="flex-start"
+        >
+          <Grid item>
+            <Typography variant="h1" className={classes.h1}>
+              Search
+            </Typography>
+          </Grid>
+          <SearchHelp />
+        </Grid>
+        <Grid container direction="row" spacing={2} alignItems="center" justify="flex-start">
+          <Grid item xs={12} sm={2} lg={2}>
+            <FormControl fullWidth>
+              <TextField
+                id="standard-select-search-type"
+                select
+                label="Filter"
+                value={filter}
+                variant="outlined"
+                className={classes.selectControl}
+                onChange={(event) => onFilterChange(event.target.value)}
+              >
+                {searchOptions.map((option) => (
+                  <MenuItem key={option} value={option} className={classes.selectItem}>
+                    {option}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} sm={10} lg={10}>
+            <FormControl fullWidth>
+              <SearchInput filter={filter} text={text} onChange={onTextChange} />
+              <IconButton
+                className={classes.iconButton}
+                type="submit"
+                onClick={onSubmit}
+                aria-label="search"
+              >
+                <SearchIcon />
+              </IconButton>
+            </FormControl>
+          </Grid>
+        </Grid>
+      </Paper>
+    </Box>
+  );
+}
+
+CustomizedInputBase.propTypes = {
+  text: PropTypes.string,
+  onTextChange: PropTypes.func,
+  filter: PropTypes.string,
+  onFilterChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+};
+export default CustomizedInputBase;

From dfb43be96c3df550afdf91c1d2216c33a2c1addf Mon Sep 17 00:00:00 2001
From: PedroFonsecaDEV <pedroporventura@gmail.com>
Date: Thu, 21 Jan 2021 04:41:09 -0500
Subject: [PATCH 2/5] imports + searchinput

---
 src/frontend/next/src/components/SearchBar.tsx |  8 +++-----
 .../src/components/SearchInput/SearchInput.tsx | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 src/frontend/next/src/components/SearchInput/SearchInput.tsx

diff --git a/src/frontend/next/src/components/SearchBar.tsx b/src/frontend/next/src/components/SearchBar.tsx
index 754b6d0386..2e45cbc664 100644
--- a/src/frontend/next/src/components/SearchBar.tsx
+++ b/src/frontend/next/src/components/SearchBar.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import {
   Grid,
@@ -13,8 +11,8 @@ import {
   Typography,
 } from '@material-ui/core';
 
-import SearchInput from '../SearchInput';
-import SearchHelp from '../SearchHelp';
+import SearchInput from './SearchInput/SearchInput';
+import SearchHelp from './SearchHelp';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/src/frontend/next/src/components/SearchInput/SearchInput.tsx b/src/frontend/next/src/components/SearchInput/SearchInput.tsx
new file mode 100644
index 0000000000..29ca701b97
--- /dev/null
+++ b/src/frontend/next/src/components/SearchInput/SearchInput.tsx
@@ -0,0 +1,18 @@
+import PostSearchInput from './PostSearchInput';
+import AuthorSearchInput from './AuthorSearchInput';
+
+type searchInputProps = {
+  text: string;
+  onTextChange: Function;
+  searchFilter: string;
+};
+
+const SearchInput = ({ text, onTextChange, searchFilter }: searchInputProps) => {
+  return searchFilter === 'author' ? (
+    <AuthorSearchInput text={text} onChange={(event) => onTextChange(event.target.value)} />
+  ) : (
+    <PostSearchInput text={text} onChange={(event) => onTextChange(event.target.value)} />
+  );
+};
+
+export default SearchInput;

From 7f57108269e3a012847abfb1ef2679697f9a0af7 Mon Sep 17 00:00:00 2001
From: PedroFonsecaDEV <pedroporventura@gmail.com>
Date: Thu, 21 Jan 2021 04:48:08 -0500
Subject: [PATCH 3/5] createStyles

---
 .../next/src/components/SearchBar.tsx         | 110 +++++++++---------
 1 file changed, 56 insertions(+), 54 deletions(-)

diff --git a/src/frontend/next/src/components/SearchBar.tsx b/src/frontend/next/src/components/SearchBar.tsx
index 2e45cbc664..69560b3915 100644
--- a/src/frontend/next/src/components/SearchBar.tsx
+++ b/src/frontend/next/src/components/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import {
   Grid,
@@ -14,67 +14,69 @@ import {
 import SearchInput from './SearchInput/SearchInput';
 import SearchHelp from './SearchHelp';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    overflow: 'visible',
-    maxWidth: '785px',
-    padding: 0,
-    marginTop: '10rem',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    marginBottom: theme.spacing(6),
-  },
-  card: {
-    padding: theme.spacing(2, 4, 2, 4),
-    backgroundColor: theme.palette.background.default,
-  },
-  header: {
-    padding: 0,
-    marginBottom: theme.spacing(2),
-    backgroundColor: theme.palette.primary.main,
-  },
-  h1: {
-    display: 'block',
-    transition: 'all linear 350ms',
-    fontWeight: 600,
-    color: theme.palette.text.secondary,
-    [theme.breakpoints.between('xs', 'sm')]: {
-      fontSize: '3rem',
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      overflow: 'visible',
+      maxWidth: '785px',
+      padding: 0,
+      marginTop: '10rem',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      marginBottom: theme.spacing(6),
     },
-    [theme.breakpoints.between('md', 'lg')]: {
-      fontSize: '4rem',
+    card: {
+      padding: theme.spacing(2, 4, 2, 4),
+      backgroundColor: theme.palette.background.default,
     },
-    [theme.breakpoints.up('xl')]: {
-      fontSize: '5rem',
+    header: {
+      padding: 0,
+      marginBottom: theme.spacing(2),
+      backgroundColor: theme.palette.primary.main,
     },
-  },
-  iconButton: {
-    backgroundColor: theme.palette.secondary.main,
-    '&:hover': {
-      backgroundColor: theme.palette.secondary.dark,
+    h1: {
+      display: 'block',
+      transition: 'all linear 350ms',
+      fontWeight: 600,
+      color: theme.palette.text.secondary,
+      [theme.breakpoints.between('xs', 'sm')]: {
+        fontSize: '3rem',
+      },
+      [theme.breakpoints.between('md', 'lg')]: {
+        fontSize: '4rem',
+      },
+      [theme.breakpoints.up('xl')]: {
+        fontSize: '5rem',
+      },
     },
-    '& * > .MuiSvgIcon-root': {
-      fontSize: '2rem',
-      color: theme.palette.primary.contrastText,
+    iconButton: {
+      backgroundColor: theme.palette.secondary.main,
+      '&:hover': {
+        backgroundColor: theme.palette.secondary.dark,
+      },
+      '& * > .MuiSvgIcon-root': {
+        fontSize: '2rem',
+        color: theme.palette.primary.contrastText,
+      },
+      margin: 0,
+      position: 'absolute',
+      right: '10px',
+      top: '6px',
     },
-    margin: 0,
-    position: 'absolute',
-    right: '10px',
-    top: '6px',
-  },
-  selectControl: {
-    '& > *': {
-      fontSize: '1.2rem',
+    selectControl: {
+      '& > *': {
+        fontSize: '1.2rem',
+        textTransform: 'capitalize',
+        color: theme.palette.primary.main,
+      },
+    },
+    selectItem: {
+      fontSize: '1.4rem',
       textTransform: 'capitalize',
       color: theme.palette.primary.main,
     },
-  },
-  selectItem: {
-    fontSize: '1.4rem',
-    textTransform: 'capitalize',
-    color: theme.palette.primary.main,
-  },
-}));
+  })
+);
 
 function CustomizedInputBase(props) {
   const classes = useStyles();

From bb0ab581cbd173b6682cefcb40ce001ac12b4833 Mon Sep 17 00:00:00 2001
From: PedroFonsecaDEV <pedroporventura@gmail.com>
Date: Thu, 21 Jan 2021 05:01:41 -0500
Subject: [PATCH 4/5] import react changeEvent

---
 .../next/src/components/SearchBar.tsx         | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/frontend/next/src/components/SearchBar.tsx b/src/frontend/next/src/components/SearchBar.tsx
index 69560b3915..bdf044f875 100644
--- a/src/frontend/next/src/components/SearchBar.tsx
+++ b/src/frontend/next/src/components/SearchBar.tsx
@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import {
@@ -78,9 +79,16 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-function CustomizedInputBase(props) {
+type searchBarProps = {
+  text: string;
+  onTextChange: Function;
+  filter: string;
+  onFilterChange: Function;
+  onSubmit: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+const SearchBar = ({ text, onTextChange, onFilterChange, filter, onSubmit }: searchBarProps) => {
   const classes = useStyles();
-  const { text, onTextChange, onFilterChange, filter, onSubmit } = props;
 
   const searchOptions = ['post', 'author'];
 
@@ -124,7 +132,7 @@ function CustomizedInputBase(props) {
           </Grid>
           <Grid item xs={12} sm={10} lg={10}>
             <FormControl fullWidth>
-              <SearchInput filter={filter} text={text} onChange={onTextChange} />
+              <SearchInput searchFilter={filter} text={text} onTextChange={onTextChange} />
               <IconButton
                 className={classes.iconButton}
                 type="submit"
@@ -139,13 +147,6 @@ function CustomizedInputBase(props) {
       </Paper>
     </Box>
   );
-}
-
-CustomizedInputBase.propTypes = {
-  text: PropTypes.string,
-  onTextChange: PropTypes.func,
-  filter: PropTypes.string,
-  onFilterChange: PropTypes.func,
-  onSubmit: PropTypes.func,
 };
-export default CustomizedInputBase;
+
+export default SearchBar;

From d89015baa7e8f8ae8a24a3f73ea980167655491e Mon Sep 17 00:00:00 2001
From: PedroFonsecaDEV <pedroporventura@gmail.com>
Date: Thu, 21 Jan 2021 05:15:38 -0500
Subject: [PATCH 5/5] fix event type

---
 src/frontend/next/src/components/SearchBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/next/src/components/SearchBar.tsx b/src/frontend/next/src/components/SearchBar.tsx
index bdf044f875..76a6fdb274 100644
--- a/src/frontend/next/src/components/SearchBar.tsx
+++ b/src/frontend/next/src/components/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { MouseEvent } from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import {
@@ -84,7 +84,7 @@ type searchBarProps = {
   onTextChange: Function;
   filter: string;
   onFilterChange: Function;
-  onSubmit: (e: ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: (e: MouseEvent<HTMLButtonElement>) => void;
 };
 
 const SearchBar = ({ text, onTextChange, onFilterChange, filter, onSubmit }: searchBarProps) => {