From 8ded9593f16f6067aefc5671782cd1222f7ba3f9 Mon Sep 17 00:00:00 2001
From: Calvin <calvinho125@gmail.com>
Date: Wed, 20 Jan 2021 11:17:14 -0500
Subject: [PATCH] Added user-query package and updated components

---
 src/frontend/next/package.json                 |  3 ++-
 .../src/components/SearchPage/SearchPage.tsx   |  4 ++--
 .../components/SearchPage/SearchResults.tsx    | 18 +++---------------
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/frontend/next/package.json b/src/frontend/next/package.json
index d679e40e63..e3cc12e774 100644
--- a/src/frontend/next/package.json
+++ b/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",
diff --git a/src/frontend/next/src/components/SearchPage/SearchPage.tsx b/src/frontend/next/src/components/SearchPage/SearchPage.tsx
index 9db152b10e..530c363f11 100644
--- a/src/frontend/next/src/components/SearchPage/SearchPage.tsx
+++ b/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
diff --git a/src/frontend/next/src/components/SearchPage/SearchResults.tsx b/src/frontend/next/src/components/SearchPage/SearchResults.tsx
index bc95008f6f..ebb445da23 100644
--- a/src/frontend/next/src/components/SearchPage/SearchResults.tsx
+++ b/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