[next] Fixes #1484: Re-Adds the Search page component

src/frontend/next/src/components/SearchPage.tsx

@@ -0,0 +1,63 @@
+import { FormEvent, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { useRouter } from 'next/router';
+
+import SearchResults from './SearchResults';
+import SearchBar from './SearchBar';
+import BackToTopButton from './BackToTopButton';
+
+type FilterProp = {
+  filter: 'post' | 'author';
+};
+
+const useStyles = makeStyles(() => ({
+  anchor: {
+    position: 'absolute',
+    top: 0,
+  },
+}));
+
+const SearchPage = () => {
+  const classes = useStyles();
+  const router = useRouter();
+  // We synchronize the `text` and `filter` values to the URL's query string
+  // Router query object for a query can be an array if url becomes text=123&text=456
+  // https://stackoverflow.com/questions/60110364/type-string-string-is-not-assignable-to-type-string
+  const [textParam = '', setTextParam] = useState(
+    Array.isArray(router.query.text) ? router.query.text[0] : router.query.text
+  );
+  const [filterParam = 'post', setFilterParam] = useState<FilterProp['filter']>(
+    router.query.filter === 'post' ? 'post' : 'author'
+  );
+
+  // We manage the state of `text` and `filter` internally, and update URL on
+  // form submit only.  These are used in the <SearchBar>, and the user can change them.
+  const [text, setText] = useState('');
+  const [filter, setFilter] = useState<FilterProp['filter']>('post');
+
+  // Form was submitted, so go ahead and sync to URL, (re)triggering search.
+  function onSubmitHandler(event: FormEvent) {
+    event.preventDefault();
+    setTextParam(text);
+    setFilterParam(filter);
+    router.push(`/search?text=${text}&filter=${filter}`);
+  }
+
+  return (
+    <div>
+      <div className={classes.anchor} id="back-to-top-anchor" />
+      <SearchBar
+        text={text}
+        onTextChange={(value: string) => setText(value)}
+        filter={filter}
+        onFilterChange={(value: FilterProp['filter']) => setFilter(value)}
+        onSubmit={onSubmitHandler}
+      />
+      <br />
+      <SearchResults text={textParam} filter={filterParam} />
+      <BackToTopButton />
+    </div>
+  );
+};
+
+export default SearchPage;

src/frontend/next/src/pages/search.tsx

@@ -1,63 +1,28 @@
-import { FormEvent, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { useRouter } from 'next/router';
-
-import SearchResults from '../components/SearchResults';
-import SearchBar from '../components/SearchBar';
-import BackToTopButton from '../components/BackToTopButton';
-
-type FilterProp = {
-  filter: 'post' | 'author';
+import { Theme } from '@material-ui/core';
+import Head from 'next/head';
+import Banner from '../components/Banner';
+import SEO from '../components/SEO';
+import SearchPage from '../components/SearchPage';
+import ThemeToggleButton from '../components/ThemeToggleButton';
+
+type Props = {
+  theme: Theme;
+  toggleTheme: () => void;
 };
 
-const useStyles = makeStyles(() => ({
-  anchor: {
-    position: 'absolute',
-    top: 0,
-  },
-}));
-
-const SearchPage = () => {
-  const classes = useStyles();
-  const router = useRouter();
-  // We synchronize the `text` and `filter` values to the URL's query string
-  // Router query object for a query can be an array if url becomes text=123&text=456
-  // https://stackoverflow.com/questions/60110364/type-string-string-is-not-assignable-to-type-string
-  const [textParam = '', setTextParam] = useState(
-    Array.isArray(router.query.text) ? router.query.text[0] : router.query.text
-  );
-  const [filterParam = 'post', setFilterParam] = useState<FilterProp['filter']>(
-    router.query.filter === 'post' ? 'post' : 'author'
-  );
-
-  // We manage the state of `text` and `filter` internally, and update URL on
-  // form submit only.  These are used in the <SearchBar>, and the user can change them.
-  const [text, setText] = useState('');
-  const [filter, setFilter] = useState<FilterProp['filter']>('post');
-
-  // Form was submitted, so go ahead and sync to URL, (re)triggering search.
-  function onSubmitHandler(event: FormEvent) {
-    event.preventDefault();
-    setTextParam(text);
-    setFilterParam(filter);
-    router.push(`/search?text=${text}&filter=${filter}`);
-  }
-
+const Search = ({ theme, toggleTheme }: Props) => {
   return (
-    <div>
-      <div className={classes.anchor} id="back-to-top-anchor" />
-      <SearchBar
-        text={text}
-        onTextChange={(value: string) => setText(value)}
-        filter={filter}
-        onFilterChange={(value: FilterProp['filter']) => setFilter(value)}
-        onSubmit={onSubmitHandler}
-      />
-      <br />
-      <SearchResults text={textParam} filter={filterParam} />
-      <BackToTopButton />
-    </div>
+    <>
+      <Head>
+        <title>Search</title>
+        <meta property="og:title" content="Telescope" key="title" />
+      </Head>
+      <ThemeToggleButton theme={theme} toggleTheme={toggleTheme} />
+      <Banner />
+      <SEO pageTitle="Search" />
+      <SearchPage />
+    </>
   );
 };
 
-export default SearchPage;
+export default Search;