From 502280eb3bbe229c1645a1bf0e1c62a484c63298 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 6 Nov 2023 22:52:03 -0600
Subject: [PATCH] Redirect from /sets to /grid on desktop

---
 package.json                         |  1 +
 pnpm-lock.yaml                       | 34 ++++++++++++++++++++++++++++
 src/app/(static)/sets/page.tsx       |  3 +++
 src/components/RedirectOnDesktop.tsx | 27 ++++++++++++++++++++++
 src/utility/useIsDesktop.ts          |  9 ++++++++
 5 files changed, 74 insertions(+)
 create mode 100644 src/components/RedirectOnDesktop.tsx
 create mode 100644 src/utility/useIsDesktop.ts

diff --git a/package.json b/package.json
index 51b29ffe..e9b2d6c5 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
+    "react-responsive": "^9.0.2",
     "sonner": "^1.1.0",
     "tailwindcss": "3.3.5",
     "ts-exif-parser": "^0.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c81b2616..02f91a89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ dependencies:
   react-icons:
     specifier: ^4.11.0
     version: 4.11.0(react@18.2.0)
+  react-responsive:
+    specifier: ^9.0.2
+    version: 9.0.2(react@18.2.0)
   sonner:
     specifier: ^1.1.0
     version: 1.1.0(react-dom@18.2.0)(react@18.2.0)
@@ -1926,6 +1929,10 @@ packages:
       which: 2.0.2
     dev: false
 
+  /css-mediaquery@0.1.2:
+    resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
+    dev: false
+
   /css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
     dev: false
@@ -2979,6 +2986,10 @@ packages:
     engines: {node: '>=10.17.0'}
     dev: false
 
+  /hyphenate-style-name@1.0.4:
+    resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
+    dev: false
+
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -3962,6 +3973,12 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: false
 
+  /matchmediaquery@0.3.1:
+    resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==}
+    dependencies:
+      css-mediaquery: 0.1.2
+    dev: false
+
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: false
@@ -4597,6 +4614,19 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-responsive@9.0.2(react@18.2.0):
+    resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==}
+    engines: {node: '>=0.10'}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      hyphenate-style-name: 1.0.4
+      matchmediaquery: 0.3.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      shallow-equal: 1.2.1
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -4786,6 +4816,10 @@ packages:
       has-property-descriptors: 1.0.0
     dev: false
 
+  /shallow-equal@1.2.1:
+    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+    dev: false
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
diff --git a/src/app/(static)/sets/page.tsx b/src/app/(static)/sets/page.tsx
index 4695e486..d97da11b 100644
--- a/src/app/(static)/sets/page.tsx
+++ b/src/app/(static)/sets/page.tsx
@@ -4,9 +4,11 @@ import {
   getUniqueFilmSimulationsCached,
   getUniqueTagsCached,
 } from '@/cache';
+import RedirectOnDesktop from '@/components/RedirectOnDesktop';
 import SiteGrid from '@/components/SiteGrid';
 import PhotoGridSidebar from '@/photo/PhotoGridSidebar';
 import { SHOW_FILM_SIMULATIONS } from '@/site/config';
+import { PATH_GRID } from '@/site/paths';
 import { cc } from '@/utility/css';
 
 export default async function SetsPage() {
@@ -27,6 +29,7 @@ export default async function SetsPage() {
       contentMain={<div className={cc(
         'top-4 space-y-4 text-base',
       )}>
+        <RedirectOnDesktop redirectPath={PATH_GRID} />
         <PhotoGridSidebar {...{
           tags,
           cameras,
diff --git a/src/components/RedirectOnDesktop.tsx b/src/components/RedirectOnDesktop.tsx
new file mode 100644
index 00000000..2305edf9
--- /dev/null
+++ b/src/components/RedirectOnDesktop.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import useIsDesktop from '@/utility/useIsDesktop';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function RedirectOnDesktop({
+  redirectPath,
+}: {
+  redirectPath: string
+}) {
+  const router = useRouter();
+  
+  const pathname = usePathname();
+
+  const isDesktop = useIsDesktop();
+
+  router.prefetch(redirectPath);
+
+  useEffect(() => {
+    if (isDesktop && pathname !== redirectPath) {
+      router.push(redirectPath);
+    }
+  }, [isDesktop, pathname, redirectPath, router]);
+
+  return null;
+}
diff --git a/src/utility/useIsDesktop.ts b/src/utility/useIsDesktop.ts
new file mode 100644
index 00000000..dced84f9
--- /dev/null
+++ b/src/utility/useIsDesktop.ts
@@ -0,0 +1,9 @@
+import { useMediaQuery } from 'react-responsive';
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '@/../tailwind.config';
+
+const screens = resolveConfig(tailwindConfig).theme?.screens as any;
+
+export default function useIsDesktop() {
+  return useMediaQuery({ query: `(min-width: ${screens.md})` });
+};