fix: build + lint + progress for liveblocks

farirpgs · Sep 11, 2023 · d4b7e32 · d4b7e32
1 parent a3214ee
commit d4b7e32
Show file tree

Hide file tree

Showing 35 changed files with 349 additions and 230 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -28,8 +28,8 @@ jobs:
         run: |
           CONTEXT=production bun run build
         env:
-          VITE_GITHUB_RUN_NUMBER: ${{github.run_number}}
-          VITE_GITHUB_SHA: ${{github.sha}}
+          NEXT_PUBLIC__GITHUB_RUN_NUMBER: ${{github.run_number}}
+          NEXT_PUBLIC__GITHUB_SHA: ${{github.sha}}
       # Validate
       - name: Validate
         run: bun run validate

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -4,7 +4,6 @@
 
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
-    "bierner.comment-tagged-templates",
     "dbaeumer.vscode-eslint",
     "eamodio.gitlens",
     "yzhang.markdown-all-in-one",

diff --git a/app/bugs/page.tsx b/app/bugs/page.tsx
@@ -0,0 +1,20 @@
+{
+  /* <PageMeta
+title={pageTitle}
+description={t("bugs-route.meta.description")}
+/> */
+}
+
+import { BugsRoute } from "../../lib/routes/Bugs/BugsRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("bugs-route.title"),
+    description: t("bugs-route.description"),
+  };
+}
+
+export default function BugsPage() {
+  return <BugsRoute></BugsRoute>;
+}
diff --git a/app/data/page.tsx b/app/data/page.tsx
@@ -3,8 +3,8 @@ import { t } from "../i18n";
 
 export async function generateMetadata() {
   return {
-    title: t("data-route-route.title"),
-    description: t("data-route-route.description"),
+    title: t("data-route.title"),
+    description: t("data-route.description"),
   };
 }
 

diff --git a/app/i18n.tsx b/app/i18n.tsx
@@ -3,3 +3,7 @@ import englishTranslations from "../public/locales/en/translation.json";
 export function t(key: string) {
   return (englishTranslations as any)[key];
 }
+
+export function serverSideTranslations(key: string) {
+  return t(key);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,11 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+
 import Script from "next/script";
 import { Metadata } from "next/types";
 import React from "react";
 import { AppProviders } from "../lib/App";
+import NoSSR from "../lib/components/NoSSR/NoSSR";
 export const metadata: Metadata = {
   title: "Fari App VTT | The Free and Open-Source Virtual Tabletop",
   description: "",
@@ -65,7 +69,9 @@ export default function RootLayout(props: { children: React.ReactNode }) {
 
       <body>
         <div id="root">
-          <AppProviders>{props.children}</AppProviders>
+          <NoSSR>
+            <AppProviders>{props.children}</AppProviders>
+          </NoSSR>
         </div>
         <Script
           type="text/javaScript"

diff --git a/app/oracle/page.tsx b/app/oracle/page.tsx
@@ -0,0 +1,13 @@
+import { OracleRoute } from "../../lib/routes/Oracle/OracleRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("oracle-route.play-offline.title"),
+    description: t("oracle-route.play-offline.description"),
+  };
+}
+
+export default function OraclePage() {
+  return <OracleRoute></OracleRoute>;
+}
diff --git a/app/play-offline/page.tsx b/app/play-offline/page.tsx
@@ -0,0 +1,13 @@
+import { PlayOfflineRoute } from "../../lib/routes/Play/PlayOfflineRoute";
+import { t } from "../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("home-route.play-offline.title"),
+    description: t("home-route.play-offline.description"),
+  };
+}
+
+export default function PlayOfflinePage() {
+  return <PlayOfflineRoute></PlayOfflineRoute>;
+}
diff --git a/app/play/(components)/play.tsx b/app/play/(components)/play.tsx
@@ -0,0 +1,56 @@
+"use client";
+import { useParams } from "next/navigation";
+
+import { useContext } from "react";
+import { SettingsContext } from "../../../lib/contexts/SettingsContext/SettingsContext";
+import { JoinAGameRoute } from "../../../lib/routes/Play/JoinAGameRoute";
+import { PlayRoute } from "../../../lib/routes/Play/PlayRoute";
+import { RoomProvider } from "../../../lib/services/liveblocks/liveblocks.config";
+
+export function Play() {
+  const params = useParams();
+
+  const settingsManager = useContext(SettingsContext);
+  const idFromParams = params.id as string;
+  const userId = settingsManager.state.userId;
+
+  return (
+    <RoomProvider
+      id={idFromParams || userId}
+      initialPresence={{
+        rollOutput: null,
+        characterName: null,
+        color: null,
+        cursor: null,
+        message: null,
+        playerName: null,
+      }}
+    >
+      <PlayRoute></PlayRoute>
+    </RoomProvider>
+  );
+}
+
+export function Join() {
+  const params = useParams();
+
+  const settingsManager = useContext(SettingsContext);
+  const idFromParams = params.id as string;
+  const userId = settingsManager.state.userId;
+
+  return (
+    <RoomProvider
+      id={idFromParams || userId}
+      initialPresence={{
+        rollOutput: null,
+        characterName: null,
+        color: null,
+        cursor: null,
+        message: null,
+        playerName: null,
+      }}
+    >
+      <JoinAGameRoute></JoinAGameRoute>
+    </RoomProvider>
+  );
+}
diff --git a/app/play/[id]/page.tsx b/app/play/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { Play } from "../(components)/play";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("home-route.play-online.title"),
+    description: t("home-route.play-online.description"),
+  };
+}
+
+export default function PlayOnlinePage() {
+  return <Play></Play>;
+}
diff --git a/app/play/join/[id]/page.tsx b/app/play/join/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { Join } from "../../(components)/play";
+import { t } from "../../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("home-route.play-online.title"),
+    description: t("home-route.play-online.description"),
+  };
+}
+
+export default function PlayOnlinePage() {
+  return <Join></Join>;
+}
diff --git a/app/play/page.tsx b/app/play/page.tsx
@@ -0,0 +1,5 @@
+import { Play } from "./(components)/play";
+
+export default function PlayPage() {
+  return <Play></Play>;
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/lib/App.tsx b/lib/App.tsx
@@ -10,6 +10,7 @@ import ThemeRegistry from "../app/ThemeRegistry";
 import { previewContentEditable } from "./components/ContentEditable/ContentEditable";
 import { ErrorReport } from "./components/ErrorBoundary/ErrorReport";
 import { IManagerViewModel, MyBinder } from "./components/MyBinder/MyBinder";
+import { AppI18nProvider } from "./contexts/AppI18nContext/AppI18nContext";
 import {
   CharactersContext,
   useCharacters,
@@ -51,28 +52,30 @@ export function AppProviders(props: { children: ReactNode }) {
   const charactersManager = useCharacters();
   const scenesManager = useScenes();
   const indexCardCollectionsManager = useIndexCardCollections();
-  const diceManager = useDice({});
+  const diceManager = useDice();
   const myBinderManager = useMyBinder();
 
   return (
     <InjectionsContext.Provider value={injections}>
-      <DndProvider backend={HTML5Backend}>
-        <SettingsContext.Provider value={settingsManager}>
-          <CharactersContext.Provider value={charactersManager}>
-            <ScenesContext.Provider value={scenesManager}>
-              <IndexCardCollectionsContext.Provider
-                value={indexCardCollectionsManager}
-              >
-                <DiceContext.Provider value={diceManager}>
-                  <MyBinderContext.Provider value={myBinderManager}>
-                    <InternalProviders>{props.children}</InternalProviders>
-                  </MyBinderContext.Provider>
-                </DiceContext.Provider>
-              </IndexCardCollectionsContext.Provider>
-            </ScenesContext.Provider>
-          </CharactersContext.Provider>
-        </SettingsContext.Provider>
-      </DndProvider>
+      <AppI18nProvider>
+        <DndProvider backend={HTML5Backend}>
+          <SettingsContext.Provider value={settingsManager}>
+            <CharactersContext.Provider value={charactersManager}>
+              <ScenesContext.Provider value={scenesManager}>
+                <IndexCardCollectionsContext.Provider
+                  value={indexCardCollectionsManager}
+                >
+                  <DiceContext.Provider value={diceManager}>
+                    <MyBinderContext.Provider value={myBinderManager}>
+                      <InternalProviders>{props.children}</InternalProviders>
+                    </MyBinderContext.Provider>
+                  </DiceContext.Provider>
+                </IndexCardCollectionsContext.Provider>
+              </ScenesContext.Provider>
+            </CharactersContext.Provider>
+          </SettingsContext.Provider>
+        </DndProvider>
+      </AppI18nProvider>
     </InjectionsContext.Provider>
   );
 }
@@ -91,9 +94,7 @@ function MyBinderManager() {
     onDelete(element: IManagerViewModel): void;
     onDuplicate(element: IManagerViewModel): void;
     onUndo(element: IManagerViewModel): void;
-    onImport(
-      importPaths: FileList | null,
-    ): Promise<{ entity: any | undefined }>;
+    onImport(importPaths: any | null): Promise<{ entity: any | undefined }>;
     onImportAddAsNew(entity: any): void;
     onImportUpdateExisting(entity: any): void;
     onExport(element: IManagerViewModel): void;
@@ -214,6 +215,7 @@ function MyBinderManager() {
         myBinderManager.actions.close();
       },
       onSelectOnNewTab(element) {
+        if (typeof window === "undefined") return;
         window.open(`/scenes/${element.id}`);
       },
       onDelete(element) {

diff --git a/lib/components/MyBinder/MyBinder.tsx b/lib/components/MyBinder/MyBinder.tsx
@@ -397,8 +397,8 @@ export function MyBinder<TFolders extends string>(props: {
             <Grid item>
               <AppLink
                 color="secondary"
+                href="/data"
                 onClick={() => {
-                  router.push("/data");
                   props.onClose();
                 }}
               >

diff --git a/lib/components/NoSSR/NoSSR.tsx b/lib/components/NoSSR/NoSSR.tsx
@@ -0,0 +1,10 @@
+import dynamic from "next/dynamic";
+import React from "react";
+
+const NoSSR = (props: { children: React.ReactNode }) => (
+  <React.Fragment>{props.children}</React.Fragment>
+);
+
+export default dynamic(() => Promise.resolve(NoSSR), {
+  ssr: false,
+});
diff --git a/lib/components/Page/Page.tsx b/lib/components/Page/Page.tsx
@@ -48,11 +48,12 @@ import { MyBinderContext } from "../../contexts/MyBinderContext/MyBinderContext"
 import { SettingsContext } from "../../contexts/SettingsContext/SettingsContext";
 import { Icons } from "../../domains/Icons/Icons";
 import { useHighlight } from "../../hooks/useHighlight/useHighlight";
-import { useTranslate } from "../../hooks/useTranslate/useTranslate";
+
 import {
   IPossibleLanguages,
   PossibleLanguagesNames,
-} from "../../services/internationalization/InternationalizationService";
+} from "../../contexts/AppI18nContext/AppI18nContext";
+import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 import { AppButtonLink, AppLink } from "../AppLink/AppLink";
 import { CannyChangelog } from "../CannyChangelog/CannyChangelog";
 import { CookieConsent } from "../CookieConsent/CookieConsent";
@@ -104,12 +105,12 @@ export const Page: React.FC<{
   }, [props.gameId]);
 
   return (
-    <>
+    <React.Fragment>
       <ScrollToTop />
 
       {renderHeader()}
       {renderContent()}
-    </>
+    </React.Fragment>
   );
 
   function renderContent() {

diff --git a/lib/constants/env.ts b/lib/constants/env.ts
@@ -1,7 +1,7 @@
-const context = import.meta.env?.MODE ?? "development";
-const isDev = import.meta.env?.DEV;
-const buildNumber = import.meta.env?.VITE_GITHUB_RUN_NUMBER ?? "0";
-const hash = import.meta.env?.VITE_GITHUB_SHA ?? "0";
+const context = process.env.NODE_ENV ?? "development";
+const isDev = process.env.NODE_ENV !== "production";
+const buildNumber = process.env.NEXT_PUBLIC_GITHUB_RUN_NUMBER ?? "0";
+const hash = process.env.NEXT_PUBLIC_GITHUB_SHA ?? "0";
 const version = process.env.npm_package_version;
 const isTest = process.env.JEST_WORKER_ID;