Fix query (#25)

* fix(search): store search input in url with debounce

* fix(footer): updated mui joy link

* fix(ui): fix general background color

* test(snapshot): updated snapshot with new ui

Author: GervinFung

apps/web/package.json

@@ -23,7 +23,8 @@
 		"next-seo": "^6.5.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-icons": "^5.0.1"
+		"react-icons": "^5.0.1",
+		"use-debounce": "^10.0.0"
 	},
 	"devDependencies": {
 		"@ducanh2912/next-pwa": "^10.2.5",

apps/web/pages/compounds/index.tsx

@@ -6,57 +6,16 @@ import { Optional } from '@poolofdeath20/util';
 
 import data from '@periotable/data';
 
-import useSearchQuery from '../../src/web/hooks/search';
 import Seo from '../../src/web/components/seo';
 import ListOfCompounds, {
 	type Compounds,
 } from '../../src/web/components/compounds';
 
 const Compounds = () => {
-	const allCompounds = data.flatMap((value) => {
+	const compounds = data.flatMap((value) => {
 		return value.compounds;
 	}) as Compounds;
 
-	const [value, setValue] = useSearchQuery();
-
-	const [compounds, setCompounds] = React.useState(allCompounds);
-
-	React.useEffect(() => {
-		setCompounds(
-			value
-				.map((value) => {
-					return value.toLowerCase();
-				})
-				.map((value) => {
-					return allCompounds.filter((match) => {
-						const molecularFormulaMatch = match.molecularformula
-							.toLowerCase()
-							.includes(value);
-
-						switch (molecularFormulaMatch) {
-							case true: {
-								return true;
-							}
-							case false: {
-								const nameMatches = match.allnames.filter(
-									(name) => {
-										return name
-											.toLowerCase()
-											.includes(value);
-									}
-								);
-
-								return nameMatches.length;
-							}
-						}
-					});
-				})
-				.unwrapOrElse(() => {
-					return allCompounds;
-				})
-		);
-	}, [value.unwrapOrGet('')]);
-
 	return (
 		<Box display="flex" justifyContent="center" alignItems="center" pb={8}>
 			<Seo
@@ -72,12 +31,9 @@ const Compounds = () => {
 			/>
 			<Box width="90%">
 				<ListOfCompounds
+					useNativeRouter={false}
 					compounds={compounds}
 					path="/compounds"
-					search={{
-						value,
-						setValue,
-					}}
 				/>
 			</Box>
 		</Box>

apps/web/pages/elements/[name]/index.tsx

@@ -34,7 +34,6 @@ import ListOfCompounds, {
 	type Compounds,
 } from '../../../src/web/components/compounds';
 import { BigTile } from '../../../src/web/components/table/element';
-import useSearchQuery from '../../../src/web/hooks/search';
 import useBreakpoint from '../../../src/web/hooks/break-point';
 import { useHeaderHeight } from '../../../src/web/components/common/header';
 import { obtainNameFromUrl } from '../../../src/web/util/asset';
@@ -325,59 +324,14 @@ const generatePostfix = () => {
 
 const Compounds = ({ element }: GetStaticPropsType) => {
 	if (!element.compounds.length) {
-		return <Typography>There are no compound known</Typography>;
+		return <Typography>There are no known compound</Typography>;
 	}
 
-	const [value, setValue] = useSearchQuery();
-
-	const [compounds, setCompounds] = React.useState(
-		element.compounds as Compounds
-	);
-
-	React.useEffect(() => {
-		setCompounds(
-			value
-				.map((value) => {
-					return value.toLowerCase();
-				})
-				.map((value) => {
-					return element.compounds.filter((compound) => {
-						const molecularFormulaMatch = compound.molecularformula
-							.toLowerCase()
-							.includes(value);
-
-						switch (molecularFormulaMatch) {
-							case true: {
-								return true;
-							}
-							case false: {
-								const nameMatches = compound.allnames.filter(
-									(name) => {
-										return name
-											.toLowerCase()
-											.includes(value);
-									}
-								);
-
-								return nameMatches.length;
-							}
-						}
-					});
-				})
-				.unwrapOrElse(() => {
-					return element.compounds;
-				})
-		);
-	}, [value.unwrapOrGet('')]);
-
 	return (
 		<ListOfCompounds
-			compounds={compounds}
+			useNativeRouter
+			compounds={element.compounds}
 			path={`${element.path}/list-of-compounds`}
-			search={{
-				value,
-				setValue,
-			}}
 		/>
 	);
 };

apps/web/src/web/components/common/footer/index.tsx

@@ -146,7 +146,7 @@ const Footer = () => {
 								Component: SiTypescript,
 							},
 							{
-								link: 'mui.com/joy-ui',
+								link: 'mui.com/joy-ui/getting-started',
 								Component: SiMui,
 							},
 						].map((props) => {

apps/web/src/web/components/common/input/index.tsx

@@ -29,9 +29,7 @@ const SearchBar = (
 				onChange={(event) => {
 					const { value } = event.target;
 
-					props.search.setValue(
-						value ? Optional.from(value) : Optional.none()
-					);
+					props.search.setValue(Optional.some(value));
 				}}
 			/>
 		</Box>