- lots of changes

game-node-app · Aug 9, 2024 · 979e536 · 979e536
1 parent 2a6a1df
commit 979e536
Show file tree

Hide file tree

Showing 52 changed files with 853 additions and 1,033 deletions.
diff --git a/.env.production b/.env.production
@@ -1 +1,8 @@
-NODE_ENV=production
+# DO NOT ADD ACTUAL SECRETS HERE!!!
+VITE_PUBLIC_DOMAIN_SERVER=https://server.gamenode.app
+VITE_PUBLIC_DOMAIN_WEBSITE=https://gamenode.app
+VITE_PUBLIC_SEARCH_URL=https://search.gamenode.app
+VITE_PUBLIC_SERVER_URL=https://server.gamenode.app
+VITE_PUBLIC_MATOMO_URL=https://matomo.gamenode.app/
+VITE_PUBLIC_MATOMO_SITE_ID=1
+# DO NOT ADD ACTUAL SECRETS HERE!!!
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
+    implementation project(':capacitor-browser')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-status-bar')

diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-browser'
+project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/browser/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@capacitor/android": "6.1.1",
     "@capacitor/app": "6.0.0",
+    "@capacitor/browser": "^6.0.1",
     "@capacitor/core": "6.1.1",
     "@capacitor/haptics": "6.0.0",
     "@capacitor/keyboard": "6.0.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -44,7 +44,7 @@ import { 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, IconRouteAltLeft, IconUser } from "@tabler/icons-react";
+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";
@@ -53,6 +53,8 @@ import GamePage from "@/pages/game";
 import HomePage from "./pages/home";
 import ProfilePage from "@/pages/profile";
 import { getCommonRoutes } from "./pages/routes/getCommonRoutes";
+import LibraryPage from "./pages/library";
+import NotificationsManager from "./components/general/NotificationsManager";
 
 /**
  * Basic configuration for wrapper services
@@ -86,6 +88,7 @@ const App: React.FC = () => {
             <MantineProvider theme={theme} forceColorScheme={"dark"}>
                 <QueryClientProvider client={queryClient}>
                     <SuperTokensProvider>
+                        <NotificationsManager />
                         <IonReactRouter>
                             <IonTabs>
                                 <IonRouterOutlet>
@@ -117,6 +120,11 @@ const App: React.FC = () => {
                                         <ProfilePage />
                                     </Route>
                                     {getCommonRoutes("/profile")}
+                                    {/* ---- LIBRARY ROUTES ---- */}
+                                    <Route exact path="/library">
+                                        <LibraryPage />
+                                    </Route>
+                                    {getCommonRoutes("/library")}
                                 </IonRouterOutlet>
                                 <IonTabBar slot="bottom">
                                     <IonTabButton tab="home" href="/home">
@@ -131,6 +139,10 @@ const App: React.FC = () => {
                                         <IconUser aria-hidden={"true"} />
                                         <IonLabel>Profile</IonLabel>
                                     </IonTabButton>
+                                    <IonTabButton tab="library" href="/library">
+                                        <IconLibrary aria-hidden={"true"} />
+                                        <IonLabel>Library</IonLabel>
+                                    </IonTabButton>
                                 </IonTabBar>
                             </IonTabs>
                         </IonReactRouter>

diff --git a/src/components/collection/collection-entry/form/CollectionEntriesMoveForm.tsx b/src/components/collection/collection-entry/form/CollectionEntriesMoveForm.tsx
@@ -1,23 +1,8 @@
 import React, { useMemo } from "react";
 import { useCollectionEntriesForCollectionId } from "@/components/collection/collection-entry/hooks/useCollectionEntriesForCollectionId";
 import { z } from "zod";
-import {
-    CancelablePromise,
-    CollectionsEntriesService,
-    Game,
-    GamePlatform,
-} from "@/wrapper/server";
-import {
-    Button,
-    Combobox,
-    ComboboxItem,
-    MultiSelect,
-    Stack,
-    Text,
-    TextInput,
-    Title,
-    useCombobox,
-} from "@mantine/core";
+import { CancelablePromise, CollectionsEntriesService, Game, GamePlatform } from "@/wrapper/server";
+import { Button, Combobox, ComboboxItem, MultiSelect, Stack, Text, TextInput, Title, useCombobox } from "@mantine/core";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import useUserId from "@/components/auth/hooks/useUserId";
@@ -26,23 +11,16 @@ import { BaseModalChildrenProps } from "@/util/types/modal-props";
 import { useMutation } from "@tanstack/react-query";
 import { notifications } from "@mantine/notifications";
 import { useGames } from "@/components/game/hooks/useGames";
-import { useRouter } from "next/router";
 
 const CollectionEntriesMoveFormSchema = z.object({
-    gameIds: z
-        .array(z.number())
-        .min(1, "At least one game must be selected.")
-        .default([]),
+    gameIds: z.array(z.number()).min(1, "At least one game must be selected.").default([]),
     targetCollectionIds: z.array(z.string(), {
         required_error: "At least one collection must be selected",
-        invalid_type_error:
-            "Target collections returned as string. Please contact support.",
+        invalid_type_error: "Target collections returned as string. Please contact support.",
     }),
 });
 
-type CollectionEntriesMoveFormValues = z.infer<
-    typeof CollectionEntriesMoveFormSchema
->;
+type CollectionEntriesMoveFormValues = z.infer<typeof CollectionEntriesMoveFormSchema>;
 interface ISelectionOptionProps {
     game: Game;
     ownedPlatforms: GamePlatform[];
@@ -67,16 +45,11 @@ interface ICollectionEntriesMoveFormProps extends BaseModalChildrenProps {
  * Similar to CollectionEntryAddOrUpdateForm, except that this one offers multiple games as input.
  * @constructor
  */
-const CollectionEntriesMoveForm = ({
-    collectionId,
-    onClose,
-}: ICollectionEntriesMoveFormProps) => {
-    const router = useRouter();
-    const { register, handleSubmit, setValue, watch, formState, setError } =
-        useForm<CollectionEntriesMoveFormValues>({
-            mode: "onSubmit",
-            resolver: zodResolver(CollectionEntriesMoveFormSchema),
-        });
+const CollectionEntriesMoveForm = ({ collectionId, onClose }: ICollectionEntriesMoveFormProps) => {
+    const { register, handleSubmit, setValue, watch, formState, setError } = useForm<CollectionEntriesMoveFormValues>({
+        mode: "onSubmit",
+        resolver: zodResolver(CollectionEntriesMoveFormSchema),
+    });
     const userId = useUserId();
     const libraryQuery = useUserLibrary(userId);
     const collectionsEntriesQuery = useCollectionEntriesForCollectionId({
@@ -85,9 +58,7 @@ const CollectionEntriesMoveForm = ({
             createdAt: "DESC",
         },
     });
-    const gameIds = collectionsEntriesQuery.data?.data.map(
-        (entry) => entry.gameId,
-    );
+    const gameIds = collectionsEntriesQuery.data?.data.map((entry) => entry.gameId);
     const gamesQuery = useGames({
         gameIds: gameIds!,
         relations: {
@@ -128,36 +99,22 @@ const CollectionEntriesMoveForm = ({
         mutationFn: (data: CollectionEntriesMoveFormValues) => {
             const gameIds = data.gameIds;
             const targetCollectionsIds = data.targetCollectionIds;
-            const relevantCollectionEntries =
-                collectionsEntriesQuery.data?.data.filter((entry) => {
-                    return (
-                        entry.gameId != undefined &&
-                        gameIds.includes(entry.gameId)
-                    );
-                });
-            if (
-                relevantCollectionEntries == undefined ||
-                relevantCollectionEntries.length === 0
-            ) {
-                throw new Error(
-                    "Relevant collection entry filtering is failing. Please contact support.",
-                );
+            const relevantCollectionEntries = collectionsEntriesQuery.data?.data.filter((entry) => {
+                return entry.gameId != undefined && gameIds.includes(entry.gameId);
+            });
+            if (relevantCollectionEntries == undefined || relevantCollectionEntries.length === 0) {
+                throw new Error("Relevant collection entry filtering is failing. Please contact support.");
             }
 
             const promises: Promise<CancelablePromise<any>>[] = [];
             for (const entry of relevantCollectionEntries) {
-                const ownedPlatformsIds = entry.ownedPlatforms.map(
-                    (platform) => platform.id,
-                );
-                const replacePromise =
-                    CollectionsEntriesService.collectionsEntriesControllerCreateOrUpdate(
-                        {
-                            isFavorite: entry.isFavorite,
-                            platformIds: ownedPlatformsIds as unknown as any,
-                            collectionIds: targetCollectionsIds,
-                            gameId: entry.gameId,
-                        },
-                    );
+                const ownedPlatformsIds = entry.ownedPlatforms.map((platform) => platform.id);
+                const replacePromise = CollectionsEntriesService.collectionsEntriesControllerCreateOrUpdate({
+                    isFavorite: entry.isFavorite,
+                    platformIds: ownedPlatformsIds as unknown as any,
+                    collectionIds: targetCollectionsIds,
+                    gameId: entry.gameId,
+                });
                 promises.push(replacePromise);
             }
             return Promise.all(promises);
@@ -189,16 +146,9 @@ const CollectionEntriesMoveForm = ({
 
     const finishedGamesCollectionSelected = useMemo(() => {
         const userCollections = libraryQuery.data?.collections;
-        if (
-            userCollections != undefined &&
-            targetCollectionIds != undefined &&
-            targetCollectionIds.length > 0
-        ) {
+        if (userCollections != undefined && targetCollectionIds != undefined && targetCollectionIds.length > 0) {
             for (const collection of userCollections) {
-                if (
-                    collection.isFinished &&
-                    targetCollectionIds.includes(`${collection.id}`)
-                ) {
+                if (collection.isFinished && targetCollectionIds.includes(`${collection.id}`)) {
                     return true;
                 }
             }
@@ -208,30 +158,21 @@ const CollectionEntriesMoveForm = ({
     }, [libraryQuery.data?.collections, targetCollectionIds]);
 
     return (
-        <form
-            className={"w-full h-full"}
-            onSubmit={handleSubmit((data) => collectionsMutation.mutate(data))}
-        >
+        <form className={"w-full h-full"} onSubmit={handleSubmit((data) => collectionsMutation.mutate(data))}>
             <Stack w={"100%"} h={"100%"} p={0} align={"center"}>
                 <MultiSelect
                     w={"100%"}
                     data={gamesSelectOptions}
                     label={"Games to move"}
-                    description={
-                        "Select which games you want to move. You can search by typing a game's name."
-                    }
+                    description={"Select which games you want to move. You can search by typing a game's name."}
                     searchable
                     {...register("gameIds")}
                     onChange={(values) => {
-                        const valuesNumbers = values.map((v) =>
-                            Number.parseInt(v),
-                        );
+                        const valuesNumbers = values.map((v) => Number.parseInt(v));
                         setValue("gameIds", valuesNumbers);
                     }}
                     error={formState.errors.gameIds?.message}
-                    placeholder={
-                        gamesQuery.isLoading ? "Loading..." : undefined
-                    }
+                    placeholder={gamesQuery.isLoading ? "Loading..." : undefined}
                 />
                 <MultiSelect
                     mt={"1rem"}
@@ -247,14 +188,12 @@ const CollectionEntriesMoveForm = ({
                     onChange={(values) => {
                         setValue("targetCollectionIds", values);
                     }}
-                    placeholder={
-                        gamesQuery.isLoading ? "Loading..." : undefined
-                    }
+                    placeholder={gamesQuery.isLoading ? "Loading..." : undefined}
                 />
                 {finishedGamesCollectionSelected && (
                     <Text c={"yellow"} fz={"sm"}>
-                        These games will be marked as "Finished" because a
-                        "Finished Games" collection has been selected.
+                        These games will be marked as "Finished" because a "Finished Games" collection has been
+                        selected.
                     </Text>
                 )}
                 <Button type={"submit"} loading={collectionsMutation.isPending}>

diff --git a/src/components/collection/collection-entry/form/modal/CollectionEntriesMoveModal.tsx b/src/components/collection/collection-entry/form/modal/CollectionEntriesMoveModal.tsx
@@ -2,25 +2,29 @@ import React from "react";
 import { BaseModalProps } from "@/util/types/modal-props";
 import { Container, Modal } from "@mantine/core";
 import CollectionEntriesMoveForm from "@/components/collection/collection-entry/form/CollectionEntriesMoveForm";
+import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from "@ionic/react";
 
 interface Props extends BaseModalProps {
     collectionId: string;
 }
 
-const CollectionEntriesMoveModal = ({
-    opened,
-    onClose,
-    collectionId,
-}: Props) => {
+const CollectionEntriesMoveModal = ({ opened, onClose, collectionId }: Props) => {
     return (
-        <Modal opened={opened} onClose={onClose} title={"Move entries"}>
-            <Modal.Body>
-                <CollectionEntriesMoveForm
-                    collectionId={collectionId}
-                    onClose={onClose}
-                />
-            </Modal.Body>
-        </Modal>
+        <IonModal isOpen={opened} onDidDismiss={onClose} initialBreakpoint={0.75} breakpoints={[0, 0.25, 0.5, 0.75, 1]}>
+            <IonHeader>
+                <IonToolbar>
+                    <IonTitle>Move entries between collections</IonTitle>
+                    <IonButtons slot="end">
+                        <IonButton onClick={() => onClose()}>Cancel</IonButton>
+                    </IonButtons>
+                </IonToolbar>
+            </IonHeader>
+            <IonContent>
+                <Container fluid className="my-4">
+                    <CollectionEntriesMoveForm collectionId={collectionId} onClose={onClose} />
+                </Container>
+            </IonContent>
+        </IonModal>
     );
 };
 

diff --git a/src/components/collection/collection-entry/form/modal/CollectionEntryAddOrUpdateModal.tsx b/src/components/collection/collection-entry/form/modal/CollectionEntryAddOrUpdateModal.tsx
@@ -5,16 +5,19 @@ import { BaseModalProps } from "@/util/types/modal-props";
 import { useUserLibrary } from "@/components/library/hooks/useUserLibrary";
 import useUserId from "@/components/auth/hooks/useUserId";
 import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from "@ionic/react";
+import { useOwnCollectionEntryForGameId } from "../../hooks/useOwnCollectionEntryForGameId";
 
 interface IGameAddModalProps extends BaseModalProps {
     id: number;
 }
 
 const CollectionEntryAddOrUpdateModal = ({ opened, onClose, id }: IGameAddModalProps) => {
     const userId = useUserId();
-    useUserLibrary(userId);
+    const collectionEntryQuery = useOwnCollectionEntryForGameId(id);
     const [isExpanded, setIsExpanded] = useState(false);
 
+    const isInLibrary = collectionEntryQuery.data != undefined;
+
     return (
         <IonModal
             onIonBreakpointDidChange={(evt) => {
@@ -27,7 +30,7 @@ const CollectionEntryAddOrUpdateModal = ({ opened, onClose, id }: IGameAddModalP
         >
             <IonHeader>
                 <IonToolbar>
-                    <IonTitle>Add to your library</IonTitle>
+                    <IonTitle>{isInLibrary ? "Edit in your library" : "Add to your library"}</IonTitle>
                     <IonButtons slot="end">
                         <IonButton onClick={() => onClose()}>Cancel</IonButton>
                     </IonButtons>