feat: query params

src/components/diff/DiffJSON.tsx

@@ -4,6 +4,7 @@ import { useTheme } from 'next-themes';
 type Props = {
 	base: string;
 	target: string;
+	onlyShowDiff: boolean;
 };
 
 const styles = {
@@ -84,7 +85,7 @@ const styles = {
 	wordRemoved: { padding: '0px', margin: '0px' },
 };
 
-export const DiffJSON = ({ base, target }: Props): JSX.Element => {
+export const DiffJSON = ({ base, target, onlyShowDiff }: Props): JSX.Element => {
 	const { resolvedTheme } = useTheme();
 	return (
 		<>
@@ -100,6 +101,7 @@ export const DiffJSON = ({ base, target }: Props): JSX.Element => {
 						splitView={true}
 						useDarkTheme={resolvedTheme !== 'light'}
 						styles={styles}
+						showDiffOnly={onlyShowDiff}
 					/>
 				</div>
 			</div>

src/components/ui/Toggle.tsx

@@ -1,17 +1,43 @@
 import { Tab } from '@headlessui/react';
 import { classNames } from '@/lib/utils';
+import { useRouter } from 'next/router';
 
 type Props = {
 	enabled: boolean;
 	setEnabled: (enabled: boolean) => void;
 	enabledText: string;
 	disabledText: string;
+	queryParamName?: string;
 };
 
-export const Toggle = ({ enabled, setEnabled, enabledText, disabledText }: Props) => {
+export const Toggle = ({
+	enabled,
+	setEnabled,
+	enabledText,
+	disabledText,
+	queryParamName,
+}: Props) => {
+	const router = useRouter();
+
+	const setQueryParam = (newValue: boolean) => {
+		if (!queryParamName) return;
+
+		const currentQueryParams = router.query;
+		const isParamPresent = Object.prototype.hasOwnProperty.call(currentQueryParams, queryParamName);
+		const newQueryParams = { ...currentQueryParams, [queryParamName]: newValue.toString() };
+
+		if (isParamPresent && currentQueryParams[queryParamName] === newValue.toString()) return;
+		router.replace({ pathname: router.pathname, query: newQueryParams });
+	};
+
+	const onChange = (index: number) => {
+		setEnabled(index === 0);
+		setQueryParam(index === 0);
+	};
+
 	return (
 		<div className="flex items-center">
-			<Tab.Group selectedIndex={enabled ? 0 : 1} onChange={(index) => setEnabled(index === 0)}>
+			<Tab.Group selectedIndex={enabled ? 0 : 1} onChange={(index) => onChange(index)}>
 				<Tab.List className="flex space-x-1 rounded-md bg-zinc-100 p-1 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-700">
 					<Tab
 						className={({ selected }) =>

src/pages/diff.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { LinkIcon, CogIcon } from '@heroicons/react/20/solid';
+import { LinkIcon } from '@heroicons/react/20/solid';
 import type { Chain } from '@/../script/index';
 import { ChainDiffSelector } from '@/components/ChainDiffSelector';
 import { DiffDeployedContracts } from '@/components/diff/DiffDeployedContracts';
@@ -42,13 +42,23 @@ const SECTION_MAP: Record<string, Section> = {
 const Diff = () => {
 	// -------- Parse query parameters --------
 	const router = useRouter();
-	const { base, target } = router.query;
+	const {
+		base,
+		target,
+		onlyShowDiff: onlyShowDiffParam,
+		showPrettyDiff: showPrettyDiffParam,
+	} = router.query;
 
 	const [baseChain, setBaseChain] = useState(null);
 	const [targetChain, setTargetChain] = useState(null);
+	const [onlyShowDiff, setOnlyShowDiff] = useState(true);
+	const [showPrettyDiff, setShowPrettyDiff] = useState(true);
 
 	useEffect(() => {
 		if (!base || !target) return;
+		if (onlyShowDiffParam !== undefined) setOnlyShowDiff(onlyShowDiffParam === 'true');
+		if (showPrettyDiffParam !== undefined) setShowPrettyDiff(showPrettyDiffParam === 'true');
+
 		const fetchData = async () => {
 			try {
 				const urls = [
@@ -71,7 +81,7 @@ const Diff = () => {
 		};
 
 		fetchData();
-	}, [base, target]);
+	}, [base, target, onlyShowDiffParam, showPrettyDiffParam]);
 
 	const ErrorDiv = () => (
 		<main className="text-center">
@@ -86,10 +96,6 @@ const Diff = () => {
 	);
 
 	// -------- Show diff --------
-
-	const [onlyShowDiff, setOnlyShowDiff] = useState(true);
-	const [showPrettyDiff, setShowPrettyDiff] = useState(false);
-
 	const SectionComponent = ({
 		section,
 		base,
@@ -120,12 +126,14 @@ const Diff = () => {
 								setEnabled={setOnlyShowDiff}
 								enabledText="Show Diff"
 								disabledText="Show All"
+								queryParamName="onlyShowDiff"
 							/>
 							<Toggle
 								enabled={showPrettyDiff}
 								setEnabled={setShowPrettyDiff}
 								enabledText="Formatted"
 								disabledText="JSON Diff"
+								queryParamName="showPrettyDiff"
 							/>
 						</div>
 					</div>
@@ -165,6 +173,7 @@ const Diff = () => {
 						<DiffJSON
 							base={JSON.stringify(baseChain, null, 2)}
 							target={JSON.stringify(targetChain, null, 2)}
+							onlyShowDiff={onlyShowDiff}
 						/>
 					)}