- resolves tiptap issue related to prosemirror

ueberdosis/tiptap#577 - added activity tabs to change view target in home page's activities
game-node-app · Nov 21, 2024 · 08fdd4f · 08fdd4f
1 parent e2a8864
commit 08fdd4f
Show file tree

Hide file tree

Showing 21 changed files with 147 additions and 603 deletions.
diff --git a/package.json b/package.json
@@ -98,5 +98,8 @@
     "vite": "^5.4.11",
     "vitest": "^0.34.6"
   },
+  "resolutions": {
+    "prosemirror-model": "1.23.0"
+  },
   "description": "GameNode's hybrid PWA/mobile app"
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -54,6 +54,7 @@ import ProfilePage from "./pages/profile/profile";
 import LibraryPage from "./pages/library";
 import NotificationsPage from "@/pages/notifications";
 import PreferencesPage from "@/pages/preferences";
+import NotificationsIcon from "@/components/notifications/NotificationsIcon";
 
 /**
  * Basic configuration for wrapper services
@@ -115,6 +116,11 @@ const App: React.FC = () => {
                                             <LibraryPage />
                                         </Route>
                                         {getCommonRoutes("/library")}
+                                        {/* ---- LIBRARY ROUTES ---- */}
+                                        <Route exact path="/notifications">
+                                            <NotificationsPage />
+                                        </Route>
+                                        {getCommonRoutes("/notifications")}
                                         {/* ---- PREFERENCES ROUTES ---- */}
                                         <Route exact path="/preferences">
                                             <PreferencesPage />
@@ -136,6 +142,9 @@ const App: React.FC = () => {
                                     <IonTabButton tab="profile" href="/profile">
                                         <IconUser aria-hidden={"true"} />
                                     </IonTabButton>
+                                    <IonTabButton tab="notifications" href="/notifications">
+                                        <NotificationsIcon />
+                                    </IonTabButton>
                                     <IonTabButton tab="preferences" href="/preferences">
                                         <IconSettings aria-hidden={"true"} />
                                     </IonTabButton>

diff --git a/src/components/activity/ActivityFeed.tsx b/src/components/activity/ActivityFeed.tsx
@@ -4,9 +4,10 @@ import { Skeleton, Stack } from "@mantine/core";
 import CenteredErrorMessage from "@/components/general/CenteredErrorMessage";
 import { useIntersection } from "@mantine/hooks";
 import ActivityList from "@/components/activity/ActivityList";
+import { ActivityFeedTabValue } from "@/components/activity/ActivityFeedLayout";
 
 interface Props {
-    criteria: "following" | "all";
+    criteria: ActivityFeedTabValue;
 }
 
 const ActivityFeed = ({ criteria }: Props) => {
@@ -41,24 +42,17 @@ const ActivityFeed = ({ criteria }: Props) => {
     }, []);
 
     useEffect(() => {
-        const lastElement =
-            activityQuery.data?.pages[activityQuery.data?.pages.length - 1];
+        const lastElement = activityQuery.data?.pages[activityQuery.data?.pages.length - 1];
         const hasNextPage =
-            lastElement != undefined &&
-            lastElement.data.length > 0 &&
-            lastElement.pagination.hasNextPage;
+            lastElement != undefined && lastElement.data.length > 0 && lastElement.pagination.hasNextPage;
 
         const canFetchNextPage = !isFetching && !isLoading && hasNextPage;
 
         // Minimum amount of time (ms) since document creation for
         // intersection to be considered valid
         const minimumIntersectionTime = 3000;
 
-        if (
-            canFetchNextPage &&
-            entry?.isIntersecting &&
-            entry.time > minimumIntersectionTime
-        ) {
+        if (canFetchNextPage && entry?.isIntersecting && entry.time > minimumIntersectionTime) {
             activityQuery.fetchNextPage({ cancelRefetch: false });
         }
     }, [activityQuery, entry, isFetching, isLoading]);
@@ -67,15 +61,11 @@ const ActivityFeed = ({ criteria }: Props) => {
         <Stack className={"w-full h-full"}>
             {activityQuery.isLoading && buildSkeletons()}
             {!isLoading && isEmpty && (
-                <CenteredErrorMessage
-                    message={"No activities to show. Try a different filter."}
-                />
+                <CenteredErrorMessage message={"No activities to show. Try a different filter."} />
             )}
             {isError && (
                 <CenteredErrorMessage
-                    message={
-                        "Error while fetching activities. Please try again or contact support."
-                    }
+                    message={"Error while fetching activities. Please try again or contact support."}
                 />
             )}
             <ActivityList items={items} />

diff --git a/src/components/activity/ActivityFeedLayout.tsx b/src/components/activity/ActivityFeedLayout.tsx
@@ -1,29 +1,37 @@
 import React, { PropsWithChildren } from "react";
 import { Box, Divider, Stack, Tabs } from "@mantine/core";
 import useUserId from "@/components/auth/hooks/useUserId";
-import Link from "next/link";
+
+export type ActivityFeedTabValue = "following" | "all";
 
 interface Props extends PropsWithChildren {
-    currentTab: "following" | "all";
+    currentTab: ActivityFeedTabValue;
+    onChange: (value: ActivityFeedTabValue) => void;
 }
 
-const ActivityFeedLayout = ({ children, currentTab }: Props) => {
+const ActivityFeedLayout = ({ children, currentTab, onChange }: Props) => {
     const userId = useUserId();
     return (
         <Stack className={"w-full h-full"}>
             <Tabs value={currentTab}>
-                <Tabs.List>
-                    <Link href={"/activity/following"}>
-                        <Tabs.Tab
-                            value={"following"}
-                            disabled={userId == undefined}
-                        >
-                            Following
-                        </Tabs.Tab>
-                    </Link>
-                    <Link href={"/activity/all"}>
-                        <Tabs.Tab value={"all"}>All</Tabs.Tab>
-                    </Link>
+                <Tabs.List grow>
+                    <Tabs.Tab
+                        value={"following"}
+                        disabled={userId == undefined}
+                        onClick={() => {
+                            onChange("following");
+                        }}
+                    >
+                        Following
+                    </Tabs.Tab>
+                    <Tabs.Tab
+                        value={"all"}
+                        onClick={() => {
+                            onChange("all");
+                        }}
+                    >
+                        All
+                    </Tabs.Tab>
                 </Tabs.List>
             </Tabs>
             <Box>{children}</Box>

diff --git a/src/components/collection/collection-entry/form/CollectionEntryAddOrUpdateForm.tsx b/src/components/collection/collection-entry/form/CollectionEntryAddOrUpdateForm.tsx
@@ -108,7 +108,7 @@ const CollectionEntryAddOrUpdateForm = ({ gameId, onClose, showGameInfo = true }
             platforms: true,
         },
     });
-    const gamePlatformsQuery = useGamesResource<GamePlatform>("platforms");
+    const gamePlatformsQuery = useGamesResource("platforms");
 
     const game = gameQuery.data;
     const userId = useUserId();

diff --git a/src/components/game/explore/ExploreScreenFilters.tsx b/src/components/game/explore/ExploreScreenFilters.tsx