Added user-query package and updated components

src/frontend/next/package.json

@@ -15,7 +15,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-use": "^15.3.8",
-    "swr": "^0.4.0"
+    "swr": "^0.4.0",
+    "use-query-params": "^1.1.9"
   },
   "devDependencies": {
     "@types/node": "^14.14.8",

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

@@ -1,4 +1,4 @@
-import React, { FC, FormEvent, useState } from 'react';
+import { FormEvent, useState } from 'react';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -13,7 +13,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export const SearchPage: FC = () => {
+export const SearchPage = () => {
   const classes = useStyles();
   // We synchronize the `text` and `filter` values to the URL's query string
   // via `textParam` and `filterParam`. The <SearchBar> UI uses our internal

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

@@ -5,20 +5,9 @@ import useSiteMetadata from '../../hooks/use-site-metadata';
 import Timeline from '../Posts/Timeline.jsx';
 import Spinner from '../Spinner';
 
-// Need below to disable some upper scope issue
-// eslint-disable-next-line no-shadow
-enum Filter {
-  Post,
-  Author,
-}
-
-/* This combined with the above will only allow either the string 'Post' or 'Author'.
-   See https://www.typescriptlang.org/docs/handbook/enums.html for more info */
-type FilterStrings = keyof typeof Filter;
-
 type SearchPageProps = {
   text: string | null;
-  filter: FilterStrings;
+  filter: string | null;
 };
 
 const useStyles = makeStyles(() => ({
@@ -36,12 +25,11 @@ const useStyles = makeStyles(() => ({
 const SearchResults = ({ text, filter }: SearchPageProps) => {
   const classes = useStyles();
   const { telescopeUrl } = useSiteMetadata();
-  const prepareUrl = (index: number) => {
-    return text
+  const prepareUrl = (index: number) =>
+    text
       ? `${telescopeUrl}/query?text=${encodeURIComponent(text)}&filter=${filter}&page=${index}`
       : // Should we return an empty string? or null here?
         null;
-  };
 
   // We only bother doing the request if we have something to search for.
   // Can't do optional chaining below on text only because text could be null