Hack loading SPA from Next

captbaritone · captbaritone · commit e7ca8edf7841 · 2025-06-05T18:57:38.000-07:00
diff --git a/packages/skin-database/app/[[...folderName]]/page.tsx b/packages/skin-database/app/[[...folderName]]/page.tsx
@@ -0,0 +1,4 @@
+import App from "../../../skin-museum-client/src/App";
+export default function Page() {
+  return <App next={true} />;
+}
diff --git a/packages/skin-database/app/layout.tsx b/packages/skin-database/app/layout.tsx
@@ -1,11 +1,17 @@
+import ReduxContextProvider from "./redux";
+import { GoogleAnalytics } from "@next/third-parties/google";
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <ReduxContextProvider>{children}</ReduxContextProvider>
+        <GoogleAnalytics gaId="UA-96948-20" />
+      </body>
     </html>
   );
 }
diff --git a/packages/skin-database/app/page.tsx b/packages/skin-database/app/page.tsx
diff --git a/packages/skin-database/app/redux.tsx b/packages/skin-database/app/redux.tsx
@@ -0,0 +1,23 @@
+"use client";
+import { Provider } from "react-redux";
+import { createStore } from "../../skin-museum-client/src/redux/store";
+import { useEffect, useState } from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function ReduxContextProvider({ children }: Props) {
+  const [store, setStore] = useState<any>(null);
+
+  // Store creation currently fails on the server, so we delay and only create
+  // the store on mount for now.
+  useEffect(() => {
+    const store = createStore();
+    setStore(store);
+  }, []);
+  if (store == null) {
+    return null;
+  }
+  return <Provider store={store}>{children}</Provider>;
+}
diff --git a/packages/skin-database/package.json b/packages/skin-database/package.json
@@ -4,6 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "@next/third-parties": "^15.3.3",
     "@sentry/node": "^5.27.3",
     "@sentry/tracing": "^5.27.3",
     "algoliasearch": "^4.3.0",
diff --git a/packages/skin-museum-client/src/App.js b/packages/skin-museum-client/src/App.js
@@ -63,8 +63,8 @@ function App(props) {
 
   return (
     <div>
-      <Head />
-      <Header />
+      {props.next || <Head />}
+      <Header next={props.next} />
       <div {...getRootProps()}>
         {props.uploadViewOpen || isDragActive ? (
           <UploadGrid
diff --git a/packages/skin-museum-client/src/Header.js b/packages/skin-museum-client/src/Header.js
@@ -4,7 +4,7 @@ import * as Utils from "./utils";
 import * as Selectors from "./redux/selectors";
 import * as Actions from "./redux/actionCreators";
 import { useActionCreator, useWindowSize } from "./hooks";
-import { ReactComponent as AlgoliaLogo } from "./searchByAlgoliaDarkbBackground.svg";
+import AlgoliaLogo from "./searchByAlgoliaDarkbBackground.svg";
 import algoliaLogoSmallUrl from "./searchByAlgoliaSmall.png";
 import FeedbackIcon from "./components/icons/FeedbackIcon";
 import AboutIcon from "./components/icons/AboutIcon";
@@ -15,7 +15,7 @@ import UploadIcon from "./components/icons/UploadIcon";
 function SearchLogo() {
   const { windowWidth } = useWindowSize();
   if (windowWidth > 500) {
-    return <AlgoliaLogo />;
+    return <AlgoliaLogo.ReactComponent />;
   }
   return (
     <img
@@ -52,7 +52,7 @@ function useFocusOnSlash() {
   return setInput;
 }
 
-function Header() {
+function Header({ next }) {
   const searchQuery = useSelector(Selectors.getSearchQuery);
   const uploadViewOpen = useSelector(Selectors.getUploadViewOpen);
   const setSearchQuery = useActionCreator(Actions.searchQueryChanged);
@@ -89,7 +89,7 @@ function Header() {
               transition: "opacity ease-in 300ms",
             }}
           >
-            <SearchLogo />
+            {next || <SearchLogo />}
           </a>
           <input
             type="search"
diff --git a/packages/skin-museum-client/src/redux/epics.js b/packages/skin-museum-client/src/redux/epics.js
@@ -441,36 +441,6 @@ const uploadAllFilesEpic = (actions, state) =>
     })
   );
 
-const loggingEpic = (actions, state) =>
-  actions.pipe(
-    tap((action) => {
-      // ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
-      switch (action.type) {
-        case "CONCENTS_TO_NSFW":
-        case "DOES_NOT_CONCENT_TO_NSFW":
-        case "CLOSE_UPLOAD_FILES":
-        case "GOT_FILE_MD5":
-        case "ARCHIVED_SKIN":
-        case "TRY_TO_UPLOAD_FILE":
-        case "UPLOAD_FAILED":
-        case "STARTING_FILE_UPLOAD":
-        case "TRY_TO_UPLOAD_ALL_FILES":
-        case "INVALID_FILE_EXTENSION":
-        case "GOT_FILE":
-        case "GOT_MISSING_AND_FOUND_MD5S":
-        case "REQUESTED_RANDOM_SKIN":
-        case "MARK_NSFW":
-        case "INVALID_ARCHIVE":
-        case "SET_SCALE":
-          window.ga("send", "event", "redux", action.type);
-          break;
-        default: {
-        }
-      }
-    }),
-    ignoreElements()
-  );
-
 const urlEpic = (actions, state) => {
   return actions.pipe(
     map(() => Selectors.getUrl(state.value)),
@@ -492,8 +462,6 @@ const urlEpic = (actions, state) => {
 
       const newUrl = proposedUrl.toString();
 
-      window.ga("set", "page", newUrl);
-
       window.history.replaceState({}, Selectors.getPageTitle(state), newUrl);
     }),
     ignoreElements()
@@ -573,7 +541,6 @@ export default combineEpics(
   uploadSingleFileEpic,
   checkIfUploadsAreMissingEpic,
   urlEpic,
-  loggingEpic,
   skinDataEpic,
   markNsfwEpic,
   alertEpic
diff --git a/yarn.lock b/yarn.lock
@@ -3728,6 +3728,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.3.tgz#c0e33e069d7922dd0546cac77a0247ad81d4a1aa"
   integrity sha512-4QZG6F8enl9/S2+yIiOiju0iCTFd93d8VC1q9LZS4p/Xuk81W2QDjCFeoogmrWWkAD59z8ZxepBQap2dKS5ruw==
 
+"@next/third-parties@^15.3.3":
+  version "15.3.3"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-15.3.3.tgz#8637d3d9a8c1da4419f95cf74a97d171e7c44070"
+  integrity sha512-kwhDkK/3klTvW6SuNkmIMSqzEk9Rnc7PkpGeAi3x0mcbPJhFTwdC/qTEd/HZt53J2yFv73YohOBk6dUG3TEIkQ==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz"
@@ -15390,16 +15397,11 @@ graphql-yoga@^5.10.10:
     lru-cache "^10.0.0"
     tslib "^2.8.1"
 
-graphql@^16.8.1:
+graphql@16.8.1, graphql@^16.8.1, graphql@^16.9.0:
   version "16.8.1"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07"
   integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==
 
-graphql@^16.9.0:
-  version "16.10.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.10.0.tgz#24c01ae0af6b11ea87bf55694429198aaa8e220c"
-  integrity sha512-AjqGKbDGUFRKIRCP9tCKiIGHyriz2oHEbPIbEtcSLSs4YjReZOIPQQWek4+6hjw62H9QShXHyaGivGiYVLeYFQ==
-
 grats@^0.0.31:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/grats/-/grats-0.0.31.tgz#f094786584a0f2fb345b38e6c37330d3f4f391cd"
@@ -27526,6 +27528,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+third-party-capital@1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 throat@^6.0.1:
   version "6.0.2"
   resolved "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz"
