feat: always search on client side

src/pages/capture.tsx

@@ -1,16 +1,22 @@
-import { GetServerSideProps } from 'next';
+import { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
 import { getFrontpage } from '../backend/frontpage';
 import CommonDisplay, { QueryParameters } from '../web/display/commonDisplay';
 import { displayForecastsWrapperForCapture } from '../web/display/displayForecastsWrappers';
 import { platformsWithLabels } from '../web/platforms';
-import searchAccordingToQueryData from '../web/worker/searchAccordingToQueryData';
 import Layout from './layout';
 
 /* get Props */
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+interface Props {
+  initialQueryParameters: QueryParameters;
+  defaultResults: any;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
   let urlQuery = context.query;
 
   let initialQueryParameters: QueryParameters = {
@@ -31,33 +37,19 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     },
   }));
 
-  let initialResults =
-    initialQueryParameters.query != ""
-      ? await searchAccordingToQueryData(initialQueryParameters)
-      : frontPageForecasts;
-
-  let props = {
-    initialQueryParameters: initialQueryParameters,
-    initialResults: initialResults,
-    defaultResults: frontPageForecasts,
-    urlQuery: urlQuery,
-  };
-
   return {
-    props: props,
+    props: {
+      initialQueryParameters: initialQueryParameters,
+      defaultResults: frontPageForecasts,
+    },
   };
 };
 
 /* Body */
-export default function Home({
+const Home: NextPage<Props> = ({ defaultResults, initialQueryParameters }) => {
-  initialResults,
-  defaultResults,
-  initialQueryParameters,
-}) {
   return (
     <Layout page={"capture"}>
       <CommonDisplay
-        initialResults={initialResults}
         defaultResults={defaultResults}
         initialQueryParameters={initialQueryParameters}
         hasSearchbar={true}
@@ -69,4 +61,6 @@ export default function Home({
       />
     </Layout>
   );
-}
+};
+
+export default Home;

src/pages/index.tsx

@@ -1,19 +1,25 @@
-import { GetServerSideProps } from 'next';
+import { GetServerSideProps, NextPage } from 'next';
 import React from 'react';
 
 import { getFrontpage } from '../backend/frontpage';
-import CommonDisplay from '../web/display/commonDisplay';
+import CommonDisplay, { QueryParameters } from '../web/display/commonDisplay';
 import { displayForecastsWrapperForSearch } from '../web/display/displayForecastsWrappers';
 import { platformsWithLabels } from '../web/platforms';
-import searchAccordingToQueryData from '../web/worker/searchAccordingToQueryData';
 import Layout from './layout';
 
 /* get Props */
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+interface Props {
+  initialQueryParameters: QueryParameters;
+  defaultResults: any;
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
   let urlQuery = context.query;
 
-  let initialQueryParameters = {
+  let initialQueryParameters: QueryParameters = {
     query: "",
     numDisplay: 21,
     starsThreshold: 2,
@@ -31,33 +37,19 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     },
   }));
 
-  let initialResults =
-    !!initialQueryParameters &&
-    initialQueryParameters.query != "" &&
-    initialQueryParameters.query != undefined
-      ? await searchAccordingToQueryData(initialQueryParameters)
-      : frontPageForecasts;
-
   return {
     props: {
       initialQueryParameters: initialQueryParameters,
-      initialResults: initialResults,
+      defaultResults: frontPageForecasts,
-      defaultResults: frontPageForecasts, // different from initialResults!
-      urlQuery: urlQuery,
     },
   };
 };
 
 /* Body */
-export default function Home({
+const Home: NextPage<Props> = ({ defaultResults, initialQueryParameters }) => {
-  initialResults,
-  defaultResults,
-  initialQueryParameters,
-}) {
   return (
     <Layout page={"search"}>
       <CommonDisplay
-        initialResults={initialResults}
         defaultResults={defaultResults}
         initialQueryParameters={initialQueryParameters}
         hasSearchbar={true}
@@ -69,4 +61,6 @@ export default function Home({
       />
     </Layout>
   );
-}
+};
+
+export default Home;

src/web/display/commonDisplay.tsx

@@ -19,7 +19,6 @@ export interface QueryParameters extends QueryParametersWithoutNum {
 }
 
 interface Props {
-  initialResults: any;
   defaultResults: any;
   initialQueryParameters: QueryParameters;
   hasSearchbar: boolean;
@@ -55,7 +54,6 @@ let transformObjectIntoUrlSlug = (obj: QueryParameters) => {
 
 /* Body */
 const CommonDisplay: React.FC<Props> = ({
-  initialResults,
   defaultResults,
   initialQueryParameters,
   hasSearchbar,
@@ -74,7 +72,7 @@ const CommonDisplay: React.FC<Props> = ({
     initialQueryParameters.numDisplay || 21
   );
 
-  const [results, setResults] = useState(initialResults);
+  const [results, setResults] = useState([]);
   const [advancedOptions, showAdvancedOptions] = useState(false);
   const [whichResultToDisplayAndCapture, setWhichResultToDisplayAndCapture] =
     useState(0);
@@ -114,7 +112,7 @@ const CommonDisplay: React.FC<Props> = ({
       !queryData || queryData.query == "" || queryData.query == undefined;
 
     let results = queryIsEmpty
-      ? filterManually(queryData, defaultResults || initialResults)
+      ? filterManually(queryData, defaultResults)
       : await searchAccordingToQueryData(queryData);
 
     setResults(results);