convert CRA to Next

.gitignore

@@ -27,3 +27,7 @@ yarn-error.log*
 public/rounds/
 
 __pycache__/
+
+.next
+next-env.d.ts
+dist

.vercelignore

@@ -0,0 +1,2 @@
+.github
+automation

app/FaviconGenerator.jsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+
+const faviconTemplate = (icon) => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><text y="24" font-size="26">${icon}</text></svg>`;
+};
+
+function FaviconGenerator() {
+  useEffect(() => {
+    const emojis = [
+      "🍗",
+      "🍔",
+      "🍞",
+      "🥪",
+      "🥨",
+      "🍕",
+      "🌭",
+      "🌮",
+      "🌯",
+      "🍖",
+      "🥩",
+      "🥧",
+      "🥓",
+      "🦀",
+    ];
+
+    const linkForFavicon = document.querySelector(`head > link[rel='icon']`);
+
+    if (linkForFavicon) {
+      const favicon = faviconTemplate(
+        emojis[Math.floor(Math.random() * emojis.length)]
+      );
+
+      linkForFavicon.setAttribute("href", `data:image/svg+xml,${favicon}`);
+    }
+  }, []); // Empty dependency array ensures this runs only once
+
+  return null;
+}
+
+export default FaviconGenerator;

src/app/Footer.jsx → app/Footer.jsx

@@ -12,13 +12,13 @@ import {
   Flex,
 } from "@chakra-ui/react";
 import * as React from "react";
-import NeopointIcon from "./images/np-icon.svg";
+import NeopointIcon from "../public/images/np-icon.svg";
 import { VercelCredit } from "./components/VercelCredit";
 
 function Logo() {
   return (
     <Stack direction="row">
-      <Box as="img" src={NeopointIcon} height="1.5em" width="1.5em" />
+      <Box as="img" src={NeopointIcon.src} height="1.5em" width="1.5em" />
       <Heading as="h1" fontFamily="heading" fontWeight="bold" fontSize="xl">
         NeoFoodClub
       </Heading>

src/app/Header.jsx → app/Header.jsx

@@ -28,7 +28,7 @@ import Cookies from "universal-cookie";
 import Moment from "react-moment";
 import React, { useContext, useEffect, useState, useMemo } from "react";
 import moment from "moment";
-import NeopointIcon from "./images/np-icon.svg";
+import NeopointIcon from "../public/images/np-icon.svg";
 
 import {
   calculateBaseMaxBet,
@@ -211,14 +211,14 @@ function MaxBetInput() {
   );
 }
 
-function TitleHeading(props) {
+function TitleHeading() {
   return (
     <>
       <HStack display={{ base: "none", md: "block" }}>
         <Center>
           <Box
             as="img"
-            src={NeopointIcon}
+            src={NeopointIcon.src}
             height="1.5em"
             width="1.5em"
             display={{ base: "none", md: "inline-block" }}

src/app/RoundState.jsx → app/RoundState.jsx

@@ -11,16 +11,15 @@ import {
 } from "./util";
 import DropZone from "./DropZone";
 
-const RoundContext = createContext(null);
-const { Provider } = RoundContext;
+const RoundContext = createContext();
 
-const initialState = parseBetUrl(window.location.hash.slice(1));
+const StateProvider = ({ children }) => {
+  const initialState = parseBetUrl(global?.window?.location.hash.slice(1));
 
-const initialViewMode =
-  Object.values(initialState.bets).filter((x) => x.some((val) => val > 0))
-    .length > 0;
+  const initialViewMode =
+    Object.values(initialState.bets).filter((x) => x.some((val) => val > 0))
+      .length > 0;
 
-const StateProvider = ({ children }) => {
   const [roundState, setRoundState] = useReducer(reducer, {
     roundData: null,
     currentRound: null,
@@ -79,7 +78,7 @@ const StateProvider = ({ children }) => {
   };
 
   return (
-    <Provider
+    <RoundContext.Provider
       value={{
         roundState,
         setRoundState,
@@ -96,7 +95,7 @@ const StateProvider = ({ children }) => {
       }}
     >
       <DropZone>{children}</DropZone>
-    </Provider>
+    </RoundContext.Provider>
   );
 };
 

src/app/components/TableSettings.jsx → app/components/TableSettings.jsx

@@ -253,7 +253,7 @@ const CopyWithDomain = () => {
 
   return (
     <Tooltip
-      label={`Include domain when copying bets\n(${window.location.origin}/)`}
+      label={`Include domain when copying bets\n(${global?.window?.location.origin}/)`}
       openDelay="600"
     >
       <Button

app/layout.jsx

@@ -0,0 +1,19 @@
+export const metadata = {
+  title: "NeoFoodClub",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <link rel="icon" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}

src/app/App.jsx → app/page.jsx

@@ -1,12 +1,19 @@
+"use client";
+
 import "firebase/database";
 
 import React, { useEffect, useCallback, useContext, useMemo } from "react";
 import { initializeApp } from "firebase/app";
 
 import { makeBetURL, parseBetUrl } from "./util";
 import HomePage from "./HomePage";
-import { RoundContext } from "./RoundState";
 import useRoundData from "./useRoundData";
+import { ChakraProvider } from "@chakra-ui/react";
+import theme from "./theme";
+import FaviconGenerator from "./FaviconGenerator";
+import Head from "next/head";
+
+import { RoundContext, StateProvider } from "./RoundState";
 
 const config = {
   apiKey: "AIzaSyA1AJzRRbOTh7iVZi4DfK9lBuSJnfTTbr4",
@@ -21,7 +28,29 @@ const config = {
 
 const firebase = initializeApp(config);
 
-function App() {
+export default function App() {
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/service-worker.js");
+    }
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <link rel="icon" />
+      </Head>
+      <FaviconGenerator />
+      <ChakraProvider theme={theme}>
+        <StateProvider>
+          <Home />
+        </StateProvider>
+      </ChakraProvider>
+    </>
+  );
+}
+
+function Home() {
   const { roundState, setRoundState } = useContext(RoundContext);
 
   useRoundStateURLs();
@@ -111,5 +140,3 @@ function useRoundStateURLs() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [onHashChange]);
 }
-
-export default App;

src/theme.js → app/theme.js

@@ -26,6 +26,6 @@ const colors = {
   },
 };
 
-const theme = extendTheme(config, { colors });
+const theme = extendTheme({ config }, { colors });
 
 export default theme;

automation/run.sh

@@ -4,12 +4,12 @@ docker build -t nfc_values .
 # Run the docker container
 docker run --rm -v $(pwd):/app nfc_values
 
-# copy file from ./output/javascript.js to ../src/app/constants_logit.js
-cp ./output/javascript.js ../src/app/constants_logit.js
+# copy file from ./output/javascript.js to ../app/constants_logit.js
+cp ./output/javascript.js ../app/constants_logit.js
 
 # stage the changes
 git add ./output/
-git add ../src/app/constants_logit.js
+git add ../app/constants_logit.js
 
 # commit the changes
 git commit -m "Auto-update logit constants"

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export", // Outputs a Single-Page Application (SPA).
+  distDir: "./dist", // Changes the build output directory to `./dist/`.
+};
+
+export default nextConfig;