Simplify Search Front-End

src/web/app/src/components/SearchBar.tsx

@@ -1,9 +1,10 @@
+import { FormEvent, useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import { Grid, MenuItem, TextField, FormControl, Paper, IconButton, Box } from '@material-ui/core';
 
 import SearchInput from './SearchInput/SearchInput';
-import useSearchValue from '../hooks/use-search-value';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -92,10 +93,25 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const SearchBar = () => {
   const classes = useStyles();
+  const router = useRouter();
+  const [filter, setFilter] = useState('');
+  const [text, setText] = useState('');
 
-  const { filter, onFilterChange, onSubmitHandler } = useSearchValue();
+  const textParam = Array.isArray(router.query.text)
+    ? router.query.text[0]
+    : router.query.text || '';
+  const filterParam = router.query.filter === 'post' || !router.query.filter ? 'post' : 'author';
 
   const searchOptions = ['post', 'author'];
+  const onSubmitHandler = (event: FormEvent) => {
+    event.preventDefault();
+    router.push(`/search?text=${text}&filter=${filter}`);
+  };
+
+  useEffect(() => {
+    setFilter(filterParam);
+    setText(textParam);
+  }, [textParam, filterParam]);
 
   return (
     <Box className={classes.root}>
@@ -109,7 +125,7 @@ const SearchBar = () => {
                 value={filter}
                 InputProps={{ disableUnderline: true }}
                 className={classes.selectControl}
-                onChange={(event) => onFilterChange(event.target.value)}
+                onChange={(event) => setFilter(event.target.value)}
               >
                 {searchOptions.map((option) => (
                   <MenuItem key={option} value={option} className={classes.selectItem}>
@@ -121,7 +137,7 @@ const SearchBar = () => {
           </Grid>
           <Grid item xs={12} sm={10} lg={10}>
             <FormControl fullWidth>
-              <SearchInput />
+              <SearchInput text={text} setText={setText} />
               <IconButton
                 className={classes.iconButton}
                 type="submit"

src/web/app/src/components/SearchInput/SearchInput.tsx

@@ -1,11 +1,50 @@
-import PostSearchInput from './PostSearchInput';
-import AuthorSearchInput from './AuthorSearchInput';
-import useSearchValue from '../../hooks/use-search-value';
+import { Dispatch, SetStateAction } from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 
-const SearchInput = () => {
-  const { filter } = useSearchValue();
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    input: {
+      fontSize: '1.6rem',
+      '&:hover': {
+        borderColor: theme.palette.primary.main,
+      },
+      '&:focus': {
+        borderColor: theme.palette.primary.main,
+      },
+      '& > *': {
+        fontSize: '1.6rem !important',
+        color: theme.palette.text.primary,
+      },
+      height: '55px',
+      backgroundColor: 'transparent',
+      paddingLeft: '10px',
+      paddingRight: '60px',
+      border: 'none',
+      borderRadius: '7px',
+      outline: 'none',
+      color: theme.palette.text.primary,
+    },
+  })
+);
 
-  return <>{filter === 'author' ? <AuthorSearchInput /> : <PostSearchInput />}</>;
+interface SearchInputInterface {
+  text: string;
+  setText: Dispatch<SetStateAction<string>>;
+}
+
+const SearchInput = ({ text, setText }: SearchInputInterface) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <input
+        className={classes.input}
+        placeholder="How to contribute to Open Source"
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+      />
+    </>
+  );
 };
 
 export default SearchInput;

src/web/app/src/components/SearchPage.tsx

@@ -1,8 +1,6 @@
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import SearchResults from './SearchResults';
 import SearchBar from './SearchBar';
-import SearchHelp from './SearchHelp';
-import useSearchValue from '../hooks/use-search-value';
 
 const useStyles = makeStyles((theme: Theme) => ({
   searchPage: {
@@ -22,12 +20,10 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
-  const { showHelp } = useSearchValue();
 
   return (
     <div className={classes.searchPage}>
       <SearchBar />
-      {showHelp && <SearchHelp />}
       <SearchResults />
     </div>
   );

src/web/app/src/components/SearchResults.tsx

@@ -1,12 +1,12 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import useSWRInfinite from 'swr/infinite';
 import { Container, Box, createStyles } from '@material-ui/core';
-import { useState } from 'react';
-
 import { searchServiceUrl } from '../config';
 import Timeline from './Posts/Timeline';
 import Spinner from './Spinner';
-import useSearchValue from '../hooks/use-search-value';
+import SearchHelp from './SearchHelp';
 
 const NoResultsImg = '/noResults.svg';
 
@@ -54,12 +54,16 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 const SearchResults = () => {
+  const router = useRouter();
   const classes = useStyles();
-  const { textParam, filter, toggleHelp } = useSearchValue();
   const [totalPosts, setTotalPosts] = useState(0);
+  const textParam = Array.isArray(router.query.text)
+    ? router.query.text[0]
+    : router.query.text || '';
+  const filterParam = router.query.filter === 'post' || !router.query.filter ? 'post' : 'author';
 
   const prepareUrl = (index: number) =>
-    `${searchServiceUrl}?${filter === 'author' ? `author` : `post`}=${encodeURIComponent(
+    `${searchServiceUrl}?${filterParam === 'author' ? `author` : `post`}=${encodeURIComponent(
       textParam
     )}&page=${index}`;
 
@@ -86,11 +90,8 @@ const SearchResults = () => {
 
   // If there is no posts or if the search bar is empty, then show the search help, otherwise hide it
   if (!error && (isEmpty || textParam.length === 0)) {
-    toggleHelp(true);
-  } else {
-    toggleHelp(false);
+    return <SearchHelp />;
   }
-
   if (error) {
     return (
       <Container className={classes.searchResults}>