- updates dependencies and fixes nasty tabler-icons issue:

tabler/tabler-icons#1233
game-node-app · Nov 19, 2024 · 8c4944c · 8c4944c
1 parent ea258f1
commit 8c4944c
Show file tree

Hide file tree

Showing 43 changed files with 899 additions and 730 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -1,10 +1,10 @@
 apply plugin: 'com.android.application'
 
 android {
-    namespace "io.ionic.starter"
+    namespace "app.gamenode"
     compileSdk rootProject.ext.compileSdkVersion
     defaultConfig {
-        applicationId "io.ionic.starter"
+        applicationId "app.gamenode"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1

diff --git a/android/app/src/main/java/io/ionic/starter/MainActivity.java b/android/app/src/main/java/io/ionic/starter/MainActivity.java
@@ -1,4 +1,4 @@
-package io.ionic.starter;
+package app.gamenode;
 
 import com.getcapacitor.BridgeActivity;
 

diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
@@ -2,6 +2,6 @@
 <resources>
     <string name="app_name">game-node-mobile</string>
     <string name="title_activity_main">game-node-mobile</string>
-    <string name="package_name">io.ionic.starter</string>
-    <string name="custom_url_scheme">io.ionic.starter</string>
+    <string name="package_name">app.gamenode</string>
+    <string name="custom_url_scheme">app.gamenode</string>
 </resources>
diff --git a/capacitor.config.ts b/capacitor.config.ts
@@ -4,6 +4,11 @@ const config: CapacitorConfig = {
     appId: "app.gamenode",
     appName: "GameNode",
     webDir: "dist",
+    plugins: {
+        CapacitorCookies: {
+            enabled: true,
+        },
+    },
 };
 
 export default config;
diff --git a/package.json b/package.json
@@ -16,47 +16,51 @@
     "@capacitor/app": "6.0.0",
     "@capacitor/browser": "^6.0.1",
     "@capacitor/core": "6.1.1",
-    "@capacitor/haptics": "6.0.0",
+    "@capacitor/haptics": "^6.0.1",
     "@capacitor/keyboard": "6.0.1",
     "@capacitor/status-bar": "6.0.0",
     "@hookform/resolvers": "^3.9.0",
     "@ionic/react": "^8.0.0",
     "@ionic/react-router": "^8.0.0",
-    "@mantine/carousel": "^7.11.2",
-    "@mantine/charts": "^7.11.2",
-    "@mantine/core": "^7.11.2",
-    "@mantine/dates": "^7.11.2",
-    "@mantine/dropzone": "^7.11.2",
-    "@mantine/form": "^7.11.2",
-    "@mantine/hooks": "^7.11.2",
-    "@mantine/notifications": "^7.11.2",
-    "@mantine/nprogress": "^7.11.2",
-    "@mantine/tiptap": "^7.7.1",
-    "@tabler/icons-react": "^3.11.0",
-    "@tanstack/react-query": "^5.29.0",
-    "@tiptap/extension-link": "^2.2.6",
-    "@tiptap/extension-placeholder": "^2.5.8",
-    "@tiptap/pm": "^2.2.6",
-    "@tiptap/react": "^2.2.6",
-    "@tiptap/starter-kit": "^2.2.6",
-    "axios": "^1.7.2",
-    "dayjs": "^1.11.12",
-    "embla-carousel-react": "^8.1.8",
+    "@mantine/carousel": "^7.13.3",
+    "@mantine/charts": "^7.13.3",
+    "@mantine/core": "^7.13.3",
+    "@mantine/dates": "^7.13.3",
+    "@mantine/dropzone": "^7.13.3",
+    "@mantine/hooks": "^7.13.3",
+    "@mantine/notifications": "^7.13.3",
+    "@mantine/nprogress": "^7.13.3",
+    "@mantine/tiptap": "^7.13.3",
+    "@tabler/icons-react": "^3.22.0",
+    "@tanstack/react-query": "^5.59.15",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-mention": "^2.8.0",
+    "@tiptap/extension-placeholder": "^2.8.0",
+    "@tiptap/extension-text-style": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/react": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
+    "@tiptap/suggestion": "^2.8.0",
+    "axios": "1.7.4",
+    "dayjs": "^1.11.13",
+    "embla-carousel-react": "^8.3.0",
+    "html-to-image": "^1.11.11",
     "ionicons": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-easy-crop": "^5.0.6",
     "react-hook-form": "^7.51.2",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "recharts": "^2.12.7",
+    "recharts": "2.13.0",
     "supertokens-auth-react": "^0.44.0",
-    "supertokens-node": "^20.0.0",
-    "supertokens-web-js": "^0.13.0",
+    "supertokens-node": "^20.1.5",
+    "supertokens-web-js": "^0.13.1",
     "supertokens-website": "^20.1.4",
     "use-long-press": "^3.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "zod": "^3.21.4"
+    "vite-tsconfig-paths": "^5.1.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.25.1",
@@ -82,7 +86,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.9.0",
     "jsdom": "^22.1.0",
-    "openapi-typescript-codegen": "^0.28.0",
+    "@lamarcke/openapi-typescript-codegen": "^0.29.1",
     "postcss": "^8.4.40",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
@@ -91,8 +95,8 @@
     "terser": "^5.4.0",
     "typescript": "^5.4.4",
     "typescript-eslint": "^8.0.0",
-    "vite": "~5.2.0",
+    "vite": "^5.4.11",
     "vitest": "^0.34.6"
   },
-  "description": "An Ionic project"
+  "description": "GameNode's hybrid PWA/mobile app"
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,7 @@
-import React, { useState } from "react";
+import React, { Suspense, useState } from "react";
 
 import { Redirect, Route } from "react-router-dom";
-import * as reactRouterDom from "react-router-dom";
-import {
-    IonApp,
-    IonLabel,
-    IonPage,
-    IonRouterOutlet,
-    IonTabBar,
-    IonTabButton,
-    IonTabs,
-    setupIonicReact,
-} from "@ionic/react";
+import { IonApp, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, setupIonicReact } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MantineProvider } from "@mantine/core";
@@ -49,20 +39,18 @@ import "@ionic/react/css/palettes/dark.always.css";
 
 /* Theme variables */
 import "./theme/variables.css";
-import { AuthPage, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
-import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
-import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
 import SuperTokensProvider from "./components/auth/SuperTokensProvider";
 import { IconHome, IconLibrary, IconRouteAltLeft, IconUser } from "@tabler/icons-react";
 import { OpenAPI as ServerOpenAPI } from "@/wrapper/server";
 import { OpenAPI as SearchOpenAPI } from "@/wrapper/search";
-import ExplorePage from "@/pages/explore";
-import SearchResultsPage from "@/pages/search_results";
+import NotificationsManager from "./components/general/NotificationsManager";
+import CenteredLoading from "@/components/general/CenteredLoading";
+import { getCommonRoutes } from "@/pages/routes/getCommonRoutes";
 import HomePage from "./pages/home";
-import ProfilePage from "@/pages/profile/profile";
-import { getCommonRoutes } from "./pages/routes/getCommonRoutes";
+import ExplorePage from "./pages/explore";
+import SearchResultsPage from "./pages/search_results";
+import ProfilePage from "./pages/profile/profile";
 import LibraryPage from "./pages/library";
-import NotificationsManager from "./components/general/NotificationsManager";
 
 /**
  * Basic configuration for wrapper services
@@ -95,34 +83,36 @@ const App: React.FC = () => {
                         <IonReactRouter>
                             <IonTabs>
                                 <IonRouterOutlet>
-                                    {/* ---- HOME ROUTES ---- */}
-                                    <Route exact path="/">
-                                        <Redirect to="/home" />
-                                    </Route>
-                                    <Route exact path={"/home"}>
-                                        <HomePage />
-                                    </Route>
-                                    {getCommonRoutes("/home")}
+                                    <Suspense fallback={<CenteredLoading message={"Loading page..."} />}>
+                                        {/* ---- HOME ROUTES ---- */}
+                                        <Route exact path="/">
+                                            <Redirect to="/home" />
+                                        </Route>
+                                        <Route exact path={"/home"}>
+                                            <HomePage />
+                                        </Route>
+                                        {getCommonRoutes("/home")}
 
-                                    {/* ---- EXPLORE ROUTES ---- */}
-                                    <Route exact path={"/explore"}>
-                                        <ExplorePage />
-                                    </Route>
-                                    <Route exact path={`/explore/search_results`}>
-                                        <SearchResultsPage />
-                                    </Route>
-                                    {getCommonRoutes("/explore")}
+                                        {/* ---- EXPLORE ROUTES ---- */}
+                                        <Route exact path={"/explore"}>
+                                            <ExplorePage />
+                                        </Route>
+                                        <Route exact path={`/explore/search_results`}>
+                                            <SearchResultsPage />
+                                        </Route>
+                                        {getCommonRoutes("/explore")}
 
-                                    {/* ---- PROFILE ROUTES ---- */}
-                                    <Route exact path={"/profile"}>
-                                        <ProfilePage />
-                                    </Route>
-                                    {getCommonRoutes("/profile")}
-                                    {/* ---- LIBRARY ROUTES ---- */}
-                                    <Route exact path="/library">
-                                        <LibraryPage />
-                                    </Route>
-                                    {getCommonRoutes("/library")}
+                                        {/* ---- PROFILE ROUTES ---- */}
+                                        <Route exact path={"/profile"}>
+                                            <ProfilePage />
+                                        </Route>
+                                        {getCommonRoutes("/profile")}
+                                        {/* ---- LIBRARY ROUTES ---- */}
+                                        <Route exact path="/library">
+                                            <LibraryPage />
+                                        </Route>
+                                        {getCommonRoutes("/library")}
+                                    </Suspense>
                                 </IonRouterOutlet>
                                 <IonTabBar slot="bottom">
                                     <IonTabButton tab="home" href="/home">

diff --git a/src/components/auth/SuperTokensProvider.tsx b/src/components/auth/SuperTokensProvider.tsx
@@ -2,11 +2,13 @@ import SuperTokensReact, { SuperTokensWrapper } from "supertokens-auth-react";
 import React from "react";
 import Session from "supertokens-auth-react/recipe/session";
 import Passwordless from "supertokens-auth-react/recipe/passwordless";
-import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
 import { SuperTokensConfig } from "supertokens-auth-react/lib/build/types";
 import { Capacitor } from "@capacitor/core";
 import { getTabAwareHref } from "@/util/getTabAwareHref";
 
+/**
+ * @see https://github.com/RobSchilderr/nextjs-native-starter/blob/main/apps/next-app/config/frontendConfig.ts
+ */
 export const frontendConfig = (): SuperTokensConfig => {
     const PARSED_WEBSITE_DOMAIN = Capacitor.isNativePlatform()
         ? `${window.location.protocol}//${window.location.host}`
@@ -43,15 +45,6 @@ export const frontendConfig = (): SuperTokensConfig => {
             Passwordless.init({
                 contactMethod: "EMAIL",
             }),
-            ThirdParty.init({
-                signInAndUpFeature: {
-                    providers: [
-                        // TODO: Enable once it's approved
-                        // ThirdPartyPasswordlessReact.Google.init(),
-                        ThirdParty.Discord.init(),
-                    ],
-                },
-            }),
             Session.init({
                 tokenTransferMethod: "header",
             }),

diff --git a/src/components/auth/hooks/useUserId.tsx → src/components/auth/hooks/useUserId.ts b/src/components/auth/hooks/useUserId.tsx → src/components/auth/hooks/useUserId.ts
diff --git a/src/components/game/info/playtime/GameInfoPlaytime.tsx b/src/components/game/info/playtime/GameInfoPlaytime.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { SyncHltbService } from "@/wrapper/server";
 import { DetailsBox } from "@/components/general/DetailsBox";
 import GameInfoPlaytimeItem from "@/components/game/info/playtime/GameInfoPlaytimeItem";
 import { Space, Stack, Text } from "@mantine/core";
 import CenteredLoading from "@/components/general/CenteredLoading";
+import { PlaytimeService } from "@/wrapper/server";
 
 interface Props {
     gameId: number;
@@ -14,7 +14,7 @@ const GameInfoPlaytime = ({ gameId }: Props) => {
     const playtimeQuery = useQuery({
         queryKey: ["game", "playtime", gameId],
         queryFn: () => {
-            return SyncHltbService.hltbControllerFindPlaytimeForGameId(gameId);
+            return PlaytimeService.playtimeControllerFindOneByGameIdV1(gameId);
         },
         enabled: !!gameId,
         staleTime: Infinity,
@@ -32,21 +32,13 @@ const GameInfoPlaytime = ({ gameId }: Props) => {
             enabled={playtimeQuery.isLoading || playtimeQuery.isSuccess}
         >
             <Space h={"0.8rem"} />
-            <GameInfoPlaytimeItem
-                name={"Main"}
-                isLoading={playtimeQuery.isLoading}
-                value={playtime?.timeMain}
-            />
+            <GameInfoPlaytimeItem name={"Main"} isLoading={playtimeQuery.isLoading} value={playtime?.timeMain} />
             <GameInfoPlaytimeItem
                 name={"Main + Extras"}
                 isLoading={playtimeQuery.isLoading}
                 value={playtime?.timePlus}
             />
-            <GameInfoPlaytimeItem
-                name={"100%"}
-                isLoading={playtimeQuery.isLoading}
-                value={playtime?.time100}
-            />
+            <GameInfoPlaytimeItem name={"100%"} isLoading={playtimeQuery.isLoading} value={playtime?.time100} />
             <Text className={"text-center text-xs mt-4"} c={"dimmed"}>
                 Data provided by <a href={"https://howlongtobeat.com"}>HLTB</a>
             </Text>

diff --git a/src/components/review/trending/TrendingReviewCarousel.tsx b/src/components/review/trending/TrendingReviewCarousel.tsx
@@ -5,6 +5,7 @@ import { DetailsBox } from "@/components/general/DetailsBox";
 import useOnMobile from "@/components/general/hooks/useOnMobile";
 import ReviewCard from "@/components/general/card/ReviewCard";
 import { useTrendingReviews } from "@/components/statistics/hooks/useTrendingReviews";
+import { FindStatisticsTrendingReviewsDto } from "@/wrapper/server";
 
 const buildSkeletons = () => {
     const skeletons = [];
@@ -24,6 +25,7 @@ const TrendingReviewCarousel = () => {
     const trendingReviews = useTrendingReviews({
         offset: 0,
         limit: 10,
+        period: FindStatisticsTrendingReviewsDto.period.MONTH,
     });
     const isEmpty = trendingReviews.isError || trendingReviews.data?.data.length === 0;
 

diff --git a/src/components/review/view/ReviewListItem.tsx b/src/components/review/view/ReviewListItem.tsx
@@ -16,10 +16,9 @@ import ItemLikesButton from "@/components/statistics/input/ItemLikesButton";
 interface IReviewListViewProps {
     review: Review;
     withGameInfo?: boolean;
-    onEditStart?: () => void;
 }
 
-const ReviewListItem = ({ review, onEditStart, withGameInfo }: IReviewListViewProps) => {
+const ReviewListItem = ({ review, withGameInfo }: IReviewListViewProps) => {
     const onMobile = useOnMobile();
     const [isReadMore, setIsReadMore] = useState<boolean>(false);
 
@@ -99,7 +98,7 @@ const ReviewListItem = ({ review, onEditStart, withGameInfo }: IReviewListViewPr
                                 sourceType={FindOneStatisticsDto.sourceType.REVIEW}
                             />
 
-                            <ReviewListItemDropdownButton review={review} onEditStart={onEditStart} />
+                            <ReviewListItemDropdownButton review={review} />
                         </Group>
                     </Group>
                 </Stack>

diff --git a/src/components/statistics/hooks/useInfiniteTrendingGames.ts b/src/components/statistics/hooks/useInfiniteTrendingGames.ts
@@ -3,11 +3,10 @@ import {
     GameStatisticsPaginatedResponseDto,
     StatisticsService,
 } from "@/wrapper/server";
-import { keepPreviousData, useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
+import { keepPreviousData, useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { ExtendedUseInfiniteQueryResult } from "@/util/types/ExtendedUseQueryResult";
-import { sleep } from "@/util/sleep";
 
-export interface InfiniteQueryTrendingGamesDto extends Omit<FindStatisticsTrendingGamesDto, "offset" | "search"> {}
+export type InfiniteQueryTrendingGamesDto = Omit<FindStatisticsTrendingGamesDto, "offset" | "search">;
 
 export function useInfiniteTrendingGames(
     dto: InfiniteQueryTrendingGamesDto,