Adds URL params to search

www/app/all/page.tsx

@@ -17,7 +17,6 @@ const AllPage = async () => {
 	const entriesArr = await Promise.all(entriesPromisesArr)
 	return (
 		<section className="container max-w-5xl mx-auto ">
-			<Search />
 			<div className="my-10">
 				{entriesArr.map((item, index) => (
 					<ul className="my-3 divide-y-2 text-sm md:text-base" key={`list-${item}`}>

www/app/page.tsx

@@ -16,15 +16,20 @@ const getData = async (
   }
 };
 
-const Home = async () => {
+const Home = async ({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const searchTerms: string = searchParams.searchterms as string;
   const { commitList }: any = await getData();
   // Workaround from Next.JS GitHub
   // https://github.com/vercel/next.js/issues/42292#issuecomment-1464048350
-  const listContainer: JSX.Element = await ListContainer({ commitList })
+  const listContainer: JSX.Element = await ListContainer({ commitList, searchTerms })
 
   return (
     <section className="container max-w-5xl mx-auto ">
-      <Search />
+      <Search searchTerms={searchTerms} />
       <div className="my-10">
         {listContainer}
       </div>

www/components/EntryTile.tsx

@@ -2,14 +2,16 @@ import React from "react";
 import EntryTileVew from "./EntryTileView";
 const fs = require('fs');
 
-const EntryTile: any = async ({ entryID, version }: any) => {
+const EntryTile: any = async ({ entryID, version, searchTerms }: any) => {
   if (version.match(/v\d{4}\.json/) === null) return (<div>Invalid version</div>)
   // List files in data/versions/{entryID} folder
   const versionsFolderPath = `../data/versions/${entryID}`;
 
   const afterData = await fs.promises.readFile(`${versionsFolderPath}/${version}`);
   const afterObj = JSON.parse(afterData)
 
+  if (searchTerms && searchTerms !== '' && JSON.stringify(afterObj).toLowerCase().indexOf(searchTerms.toLowerCase()) === -1) return (<></>)
+
   const getBeforeVersion = (afterVersion: string) => {
     if (afterVersion === 'v0001.json') return ''
     const afterVersionNum: number = parseInt(afterVersion.replace(/^v/,'').replace(/\.json$/, ''))

www/components/ListContainer.tsx

@@ -6,7 +6,7 @@ interface Props {
   commitList: string[];
 }
 
-const ListContainer = async ({ commitList } : {commitList: string[]}) => {
+const ListContainer = async ({ commitList, searchTerms } : {commitList: string[], searchTerms: string}) => {
   const getCommitData = async (sha: string) => await octokit.rest.repos.getCommit({
       owner: owner,
       repo: repo,
@@ -51,7 +51,7 @@ const ListContainer = async ({ commitList } : {commitList: string[]}) => {
         <ul className="my-3 divide-y-2 text-sm md:text-base" key={`list-${item}`}>
           {groupedData[item].map((entry: any) => {
             return (
-              <EntryTile entryID={entry.entryID} version={entry.version} key={`tile-${entry.entryID}-${entry.version}`}/>
+              <EntryTile entryID={entry.entryID} version={entry.version} key={`tile-${entry.entryID}-${entry.version}`} searchTerms={searchTerms}/>
             )
           })}
         </ul>

www/components/Search.tsx

@@ -2,8 +2,8 @@
 import React, { useEffect, useState } from 'react';
 import useDebounce from '../libs/useDebounce'
 
-const Search = () => {
-	const [search, setSearch] = useState('');
+const Search = ({searchTerms} : {searchTerms?: string | undefined}) => {
+	const [search, setSearch] = useState(searchTerms || '');
 	// Debouncing taken from
 	// https://hackernoon.com/how-to-use-debounce-in-nextjs
 	const debouncedSearch = useDebounce(search, 500)
@@ -14,20 +14,7 @@ const Search = () => {
 
 
 	const updateView = (inputValue: string) => {
-		// Entries can be found as li with id='li-container-*'
-		const entries = document.querySelectorAll('li[id^="li-container-"]');
-		entries.forEach((entry) => {
-			const entryHTMLElement = entry as HTMLElement;
-			if (inputValue === '') {
-				entryHTMLElement.style.display = 'block';
-			}
-			if (!entryHTMLElement.innerHTML.toLowerCase().includes(inputValue.toLowerCase())) {
-				entryHTMLElement.style.display = 'none';
-			}
-			else {
-				entryHTMLElement.style.display = 'block';
-			}
-		})
+		window.history.replaceState({}, '', `/?searchterms=${inputValue}`)
 	}
 
 	return (

www/next.config.js

@@ -9,7 +9,6 @@ const nextConfig = {
       },
     ],
   },
-  output: "export"
 };
 
 module.exports = nextConfig;