Nextjs13 upgrade

pages/about.js → app/about/page.js

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useContext } from "react";
 import styled, { keyframes } from "styled-components";
 
@@ -26,7 +28,7 @@ const About = () => {
             className="bi bi-github"
             viewBox="0 0 16 16"
           >
-            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
           </svg>
         </GitHubLogo>
       </GitHubLink>

components/HotKeysMapping.js → app/components/HotKeysMapping.js

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useContext } from "react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { GlobalHotKeys, configure } from "react-hotkeys";
 import PropTypes from "prop-types";
 

components/context.js → app/components/context.js

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect } from "react";
 import { useReducer, createContext } from "react";
 import PropTypes from "prop-types";
@@ -172,8 +174,9 @@ const ContextProvider = ({ children }) => {
     localForage
       .getItem("context")
       .then((value) => {
-        if (value !== null)
+        if (value !== null) {
           dispatch({ type: "LOCALDATA_READY", localdata: value });
+        }
       })
       // FIXME: localForage will error with SSR rendering, what do if anything?
       .catch(() => {});

components/entry.js → app/components/entry.js

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useContext, useRef, useEffect } from "react";
 import styled from "styled-components";
 import { useForm } from "react-hook-form";

components/l10n.js → app/components/l10n.js

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useContext } from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";

components/page.js → app/components/page.js

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Head from "next/head";
 import PropTypes from "prop-types";

components/sidebar.js → app/components/sidebar.js

@@ -1,40 +1,42 @@
+"use client";
+
 import React, { useContext } from "react";
-import { withRouter } from "next/router";
+import { usePathname } from "next/navigation";
 import Link from "next/link";
-import PropTypes from "prop-types";
 import styled from "styled-components";
 
 import { Context } from "./context";
 import strings from "../l10n/sidebar";
 
-const Sidebar = ({ router }) => {
+const Sidebar = () => {
+  const pathname = usePathname();
   const { state } = useContext(Context);
   strings.setLanguage(state.language);
 
   return (
     <Side>
       <Title>{strings.name}</Title>
       <Pages>
-        <Link href="/" passHref>
-          <Page active={router.pathname === "/"} aria-label={strings.timer}>
+        <Link href="/" passHref legacyBehavior>
+          <Page active={pathname === "/" ? 1 : 0} aria-label={strings.timer}>
             <TimerIcon />
           </Page>
         </Link>
-        <Link href="/log" passHref>
-          <Page active={router.pathname === "/log"} aria-label={strings.log}>
+        <Link href="/log" passHref legacyBehavior>
+          <Page active={pathname === "/log" ? 1 : 0} aria-label={strings.log}>
             <LogIcon />
           </Page>
         </Link>
-        <Link href="/summary" passHref>
+        <Link href="/summary" passHref legacyBehavior>
           <Page
-            active={router.pathname === "/summary"}
+            active={pathname === "/summary" ? 1 : 0}
             aria-label={strings.summary}
           >
             <SummaryIcon />
           </Page>
         </Link>
       </Pages>
-      <Link href="/about" passHref>
+      <Link href="/about" passHref legacyBehavior>
         <About aria-label={strings.about}>
           <HelpIcon />
         </About>
@@ -43,12 +45,8 @@ const Sidebar = ({ router }) => {
   );
 };
 
-Sidebar.propTypes = {
-  router: PropTypes.object,
-  language: PropTypes.string,
-};
-
-export default withRouter(Sidebar);
+export default Sidebar;
+//export default withRouter(Sidebar);
 
 const Side = styled.div`
   position: fixed;

components/timer.js → app/components/timer.js

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, useEffect, useContext, useRef } from "react";
 import styled from "styled-components";
 

app/globals.css

@@ -0,0 +1,107 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

l10n/about.js → app/l10n/about.js

@@ -3,7 +3,8 @@ import LocalizedStrings from "react-localization";
 const strings = new LocalizedStrings({
   en: {
     title: "Timelite?",
-    quote: "Why is it 5 AM? Isn't there something simple I can use to track what I'm doing with all this time?",
+    quote:
+      "Why is it 5 AM? Isn't there something simple I can use to track what I'm doing with all this time?",
     name: "Isaac Bythewood",
     sectionTimer: "Timer",
     sectionNavigation: "Navigation",
@@ -22,7 +23,8 @@ const strings = new LocalizedStrings({
   // TODO: None of this is accurate past this line, someone please help me translate...
   jp: {
     title: "タイムライト？",
-    quote: "なぜ午前5時ですか。常に行っていることを追跡するために使用できる簡単なものはありますか？",
+    quote:
+      "なぜ午前5時ですか。常に行っていることを追跡するために使用できる簡単なものはありますか？",
     name: "アイザックバイザウッド",
     sectionTimer: "タイマー",
     sectionNavigation: "ナビゲーション",
@@ -40,7 +42,8 @@ const strings = new LocalizedStrings({
   },
   pl: {
     title: "Timelite?",
-    quote: "Czemu jest piąta rano? Nie ma czegoś prostego, co mógłbym użyć do śledzenia uciekającego czasu?",
+    quote:
+      "Czemu jest piąta rano? Nie ma czegoś prostego, co mógłbym użyć do śledzenia uciekającego czasu?",
     name: "Isaac Bythewood",
     sectionTimer: "Zegar",
     sectionNavigation: "Nawigacja",

pages/_app.js → app/layout.js

@@ -1,53 +1,58 @@
+"use client";
+
 import React from "react";
-import App from "next/app";
+import PropTypes from "prop-types";
 import styled, { ThemeProvider, createGlobalStyle } from "styled-components";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
-import { ContextProvider } from "../components/context";
+import { ContextProvider } from "./components/context";
 
-import HotKeysMapping from "../components/HotKeysMapping";
-import L10n from "../components/l10n";
-import Sidebar from "../components/sidebar";
+import HotKeysMapping from "./components/HotKeysMapping";
+import L10n from "./components/l10n";
+import Sidebar from "./components/sidebar";
 import { theme } from "../site.config";
 
-class MyApp extends App {
-  render() {
-    const { Component, pageProps } = this.props;
-
-    return (
-      <ThemeProvider theme={theme}>
-        <ContextProvider>
-          <HotKeysMapping>
-            <GlobalStyle />
-            <ToastContainer position={toast.POSITION.TOP_RIGHT} />
-            <L10n />
-            <TransitionGroup component={null}>
-              <CSSTransition
-                key={this.props.router.route}
-                appear
-                timeout={{
-                  appear: 500,
-                  enter: 500,
-                  exit: 250,
-                }}
-                classNames="page-transition"
-              >
-                <Transition>
-                  <Component {...pageProps} />
-                </Transition>
-              </CSSTransition>
-            </TransitionGroup>
-            <Sidebar />
-          </HotKeysMapping>
-        </ContextProvider>
-      </ThemeProvider>
-    );
-  }
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeProvider theme={theme}>
+          <ContextProvider>
+            <HotKeysMapping>
+              <GlobalStyle />
+              <ToastContainer position={toast.POSITION.TOP_RIGHT} />
+              <L10n />
+              <TransitionGroup component={null}>
+                <CSSTransition
+                  key={children.key}
+                  appear
+                  timeout={{
+                    appear: 500,
+                    enter: 500,
+                    exit: 250,
+                  }}
+                  classNames="page-transition"
+                >
+                  <Transition>{children}</Transition>
+                </CSSTransition>
+              </TransitionGroup>
+              <Sidebar />
+            </HotKeysMapping>
+          </ContextProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
 }
 
-export default MyApp;
+RootLayout.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]),
+};
 
 const GlobalStyle = createGlobalStyle`
   body {

pages/log.js → app/log/page.js

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useContext, useState } from "react";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import styled from "styled-components";

pages/index.js → app/page.js

@@ -1,8 +1,10 @@
+"use client";
+
 import React from "react";
 import styled, { keyframes } from "styled-components";
 
-import Page from "../components/page";
-import Timer from "../components/timer";
+import Page from "./components/page";
+import Timer from "./components/timer";
 
 const Index = () => {
   return (