From 33ca103c1086ea8fbc47e2c494b4f3c1932ef74f Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 6 Jun 2025 12:54:48 -0400
Subject: [PATCH] Get ready for rollout of next.js version

---
 packages/skin-database/app/App.tsx            | 18 ++++++++++++++++++
 packages/skin-database/app/SearchLogo.tsx     | 19 +++++++++++++++++++
 .../app/[[...folderName]]/page.tsx            |  4 ++--
 packages/skin-database/app/layout.tsx         | 10 ----------
 .../app/skin/[...segments]/page.tsx           |  4 ++--
 packages/skin-database/scripts/reload.sh      | 16 ++++++++++++++++
 packages/skin-museum-client/src/App.js        |  2 +-
 packages/skin-museum-client/src/Header.js     |  4 ++--
 8 files changed, 60 insertions(+), 17 deletions(-)
 create mode 100644 packages/skin-database/app/App.tsx
 create mode 100644 packages/skin-database/app/SearchLogo.tsx
 create mode 100755 packages/skin-database/scripts/reload.sh

diff --git a/packages/skin-database/app/App.tsx b/packages/skin-database/app/App.tsx
new file mode 100644
index 00000000..a767b910
--- /dev/null
+++ b/packages/skin-database/app/App.tsx
@@ -0,0 +1,18 @@
+"use client";
+// There is some bug between how JSZip pulls in setimmediate (which it expects
+// to polyfill `window.setimmediate` and our Webpack setup. The result is that
+// one of our bundles is missing the polyfill. If we call JSZip code from within
+// that bundle the polyfill is not present and we get an error.
+//
+// This explicit import should ensure that the polyfill is present in the
+// entrypoint bundle and thus always set on `window`.
+//
+// We should be able to remove this once we root cause the bundling issue.
+import "setimmediate";
+
+import LegacyApp from "../../skin-museum-client/src/App";
+import SearchLogo from "./SearchLogo";
+
+export default function App() {
+  return <LegacyApp next={true} searchLogo={<SearchLogo />} />;
+}
diff --git a/packages/skin-database/app/SearchLogo.tsx b/packages/skin-database/app/SearchLogo.tsx
new file mode 100644
index 00000000..eb43b440
--- /dev/null
+++ b/packages/skin-database/app/SearchLogo.tsx
@@ -0,0 +1,19 @@
+"use client";
+// import { useWindowSize } from "../../skin-museum-client/src/hooks";
+// import AlgoliaLogo from "../../skin-museum-client/src/searchByAlgoliaDarkbBackground.svg";
+// import algoliaLogoSmallUrl from "../../skin-museum-client/src/searchByAlgoliaSmall.png";
+
+export default function SearchLogo() {
+  return null;
+  // const { windowWidth } = useWindowSize();
+  // if (windowWidth > 500) {
+  //   return <AlgoliaLogo.ReactComponent />;
+  // }
+  // return (
+  //   <img
+  //     alt="Search by Algolia"
+  //     style={{ width: 25, height: 25, paddingTop: 4 }}
+  //     src={algoliaLogoSmallUrl}
+  //   />
+  // );
+}
diff --git a/packages/skin-database/app/[[...folderName]]/page.tsx b/packages/skin-database/app/[[...folderName]]/page.tsx
index ae35d674..31b59f8a 100644
--- a/packages/skin-database/app/[[...folderName]]/page.tsx
+++ b/packages/skin-database/app/[[...folderName]]/page.tsx
@@ -1,4 +1,4 @@
-import App from "../../../skin-museum-client/src/App";
+import App from "../App";
 import type { Metadata } from "next";
 
 const DESCRIPTION =
@@ -73,5 +73,5 @@ export async function generateMetadata({ searchParams }): Promise<Metadata> {
 }
 
 export default function Page() {
-  return <App next={true} />;
+  return <App />;
 }
diff --git a/packages/skin-database/app/layout.tsx b/packages/skin-database/app/layout.tsx
index 761de386..0dc3cec8 100644
--- a/packages/skin-database/app/layout.tsx
+++ b/packages/skin-database/app/layout.tsx
@@ -1,13 +1,3 @@
-// There is some bug between how JSZip pulls in setimmediate (which it expects
-// to polyfill `window.setimmediate` and our Webpack setup. The result is that
-// one of our bundles is missing the polyfill. If we call JSZip code from within
-// that bundle the polyfill is not present and we get an error.
-//
-// This explicit import should ensure that the polyfill is present in the
-// entrypoint bundle and thus always set on `window`.
-//
-// We should be able to remove this once we root cause the bundling issue.
-import "setimmediate";
 import ReduxContextProvider from "./redux";
 import { GoogleAnalytics } from "@next/third-parties/google";
 
diff --git a/packages/skin-database/app/skin/[...segments]/page.tsx b/packages/skin-database/app/skin/[...segments]/page.tsx
index db465c1a..64f3392c 100644
--- a/packages/skin-database/app/skin/[...segments]/page.tsx
+++ b/packages/skin-database/app/skin/[...segments]/page.tsx
@@ -1,4 +1,4 @@
-import App from "../../../../skin-museum-client/src/App";
+import App from "../../App";
 import type { Metadata } from "next";
 import SkinModel from "../../../data/SkinModel";
 import UserContext from "../../../data/UserContext";
@@ -52,5 +52,5 @@ export async function generateMetadata({ params }): Promise<Metadata> {
 }
 
 export default function Page() {
-  return <App next={true} />;
+  return <App />;
 }
diff --git a/packages/skin-database/scripts/reload.sh b/packages/skin-database/scripts/reload.sh
new file mode 100755
index 00000000..4c840ff2
--- /dev/null
+++ b/packages/skin-database/scripts/reload.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+set -euo pipefail
+
+# Switch to Node 20
+export NVM_DIR="$HOME/.nvm"
+source "$NVM_DIR/nvm.sh"
+nvm use 20
+
+# Install dependencies
+yarn install --frozen-lockfile
+
+# Build the site
+yarn run build
+
+# Reload processes via PM2
+pm2 reload ecosystem.config.js
\ No newline at end of file
diff --git a/packages/skin-museum-client/src/App.js b/packages/skin-museum-client/src/App.js
index de31553a..92b4fd16 100644
--- a/packages/skin-museum-client/src/App.js
+++ b/packages/skin-museum-client/src/App.js
@@ -64,7 +64,7 @@ function App(props) {
   return (
     <div>
       {props.next || <Head />}
-      <Header next={props.next} />
+      <Header searchLogo={props.searchLogo} />
       <div {...getRootProps()}>
         {props.uploadViewOpen || isDragActive ? (
           <UploadGrid
diff --git a/packages/skin-museum-client/src/Header.js b/packages/skin-museum-client/src/Header.js
index ae2396f7..780a7501 100644
--- a/packages/skin-museum-client/src/Header.js
+++ b/packages/skin-museum-client/src/Header.js
@@ -52,7 +52,7 @@ function useFocusOnSlash() {
   return setInput;
 }
 
-function Header({ next }) {
+function Header({ searchLogo }) {
   const searchQuery = useSelector(Selectors.getSearchQuery);
   const uploadViewOpen = useSelector(Selectors.getUploadViewOpen);
   const setSearchQuery = useActionCreator(Actions.searchQueryChanged);
@@ -89,7 +89,7 @@ function Header({ next }) {
               transition: "opacity ease-in 300ms",
             }}
           >
-            {next || <SearchLogo />}
+            {searchLogo || <SearchLogo />}
           </a>
           <input
             type="search"