Add user notifications (#769)

Author: InfiniteStash

Makefile

@@ -74,6 +74,9 @@ generate-dataloaders:
 		go run github.com/vektah/dataloaden TagCategoryLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.TagCategory"; \
 		go run github.com/vektah/dataloaden SiteLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.Site"; \
 		go run github.com/vektah/dataloaden StudioLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.Studio"; \
+		go run github.com/vektah/dataloaden EditLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.Edit"; \
+		go run github.com/vektah/dataloaden EditCommentLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.EditComment"; \
+		go run github.com/vektah/dataloaden SceneLoader github.com/gofrs/uuid.UUID "*github.com/stashapp/stash-box/pkg/models.Scene"; \
 		go run github.com/vektah/dataloaden BoolsLoader github.com/gofrs/uuid.UUID "bool";
 
 test:

frontend/src/App.scss

@@ -94,3 +94,12 @@ div.react-select__menu {
   margin: auto;
   max-width: 1200px;
 }
+
+.NotificationBadge {
+  color: white;
+
+  &:active,
+  &:hover {
+    color: var(--bs-gray-500);
+  }
+}

frontend/src/Main.tsx

@@ -1,14 +1,15 @@
 import { FC, useEffect } from "react";
-import { Navbar, Nav } from "react-bootstrap";
-import { NavLink, useLocation, useNavigate } from "react-router-dom";
+import { Navbar, Nav, Button, Badge } from "react-bootstrap";
+import { NavLink, useLocation, useNavigate, Link } from "react-router-dom";
+import { faBell, faBook, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faBell as faBellOutlined } from "@fortawesome/free-regular-svg-icons";
 
 import SearchField, { SearchType } from "src/components/searchField";
-import { useConfig } from "src/graphql";
 import { getPlatformURL, getCredentialsSetting } from "src/utils/createClient";
 import { isAdmin, canEdit, userHref, setCachedUser } from "src/utils";
 import { useAuth } from "src/hooks";
 import { Icon } from "src/components/fragments";
-import { faBook, faUser } from "@fortawesome/free-solid-svg-icons";
+import { useConfig, useUnreadNotificationsCount } from "src/graphql";
 import {
   ROUTE_SCENES,
   ROUTE_PERFORMERS,
@@ -25,6 +26,7 @@ import {
   ROUTE_FORGOT_PASSWORD,
   ROUTE_SITES,
   ROUTE_DRAFTS,
+  ROUTE_NOTIFICATIONS,
 } from "src/constants/route";
 import AuthContext from "./AuthContext";
 
@@ -36,6 +38,9 @@ const Main: FC<Props> = ({ children }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { loading, user } = useAuth();
+  const { data: unreadNotifications } = useUnreadNotificationsCount();
+  const notificationCount =
+    unreadNotifications?.getUnreadNotificationCount || null;
   const { data: configData } = useConfig();
 
   const guidelinesURL = configData?.getConfig.guidelines_url;
@@ -83,6 +88,16 @@ const Main: FC<Props> = ({ children }) => {
     contextValue.authenticated &&
     contextValue.user && (
       <>
+        <Link to={ROUTE_NOTIFICATIONS}>
+          <Button variant="link" className="NotificationBadge">
+            <Icon icon={notificationCount ? faBell : faBellOutlined} />
+            {notificationCount && (
+              <Badge bg="danger" className="ms-1">
+                {notificationCount}
+              </Badge>
+            )}
+          </Button>
+        </Link>
         <NavLink
           to={userHref(contextValue.user)}
           className="nav-link ms-auto me-2"

frontend/src/constants/route.ts

@@ -51,3 +51,4 @@ export const ROUTE_SITE_EDIT = "/sites/:id/edit";
 export const ROUTE_SITES = "/sites";
 export const ROUTE_DRAFT = "/drafts/:id";
 export const ROUTE_DRAFTS = "/drafts";
+export const ROUTE_NOTIFICATIONS = "/notifications";

frontend/src/graphql/queries/QueryNotifications.gql

@@ -0,0 +1,73 @@
+#import "../fragments/SceneFragment.gql"
+#import "../fragments/EditFragment.gql"
+#import "../fragments/CommentFragment.gql"
+
+fragment NotificationCommentFragment on EditComment {
+  ...CommentFragment
+  edit {
+    ...EditFragment
+  }
+}
+
+query Notifications($input: QueryNotificationsInput!) {
+  queryNotifications(input: $input) {
+    count
+    notifications {
+      created
+      read
+      data {
+        __typename
+        ... on FavoritePerformerScene {
+          scene {
+            ...SceneFragment
+          }
+        }
+        ... on FavoritePerformerEdit {
+          edit {
+            ...EditFragment
+          }
+        }
+        ... on FavoriteStudioScene {
+          scene {
+            ...SceneFragment
+          }
+        }
+        ... on FavoriteStudioEdit {
+          edit {
+            ...EditFragment
+          }
+        }
+        ... on CommentOwnEdit {
+          comment {
+            ...NotificationCommentFragment
+          }
+        }
+        ... on CommentCommentedEdit {
+          comment {
+            ...NotificationCommentFragment
+          }
+        }
+        ... on CommentVotedEdit {
+          comment {
+            ...NotificationCommentFragment
+          }
+        }
+        ... on DownvoteOwnEdit {
+          edit {
+            ...EditFragment
+          }
+        }
+        ... on FailedOwnEdit {
+          edit {
+            ...EditFragment
+          }
+        }
+        ... on UpdatedEdit {
+          edit {
+            ...EditFragment
+          }
+        }
+      }
+    }
+  }
+}

frontend/src/graphql/queries/UnreadNotificationCount.gql

@@ -0,0 +1,3 @@
+query UnreadNotificationCount {
+  getUnreadNotificationCount
+}

frontend/src/graphql/queries/index.ts

@@ -73,6 +73,9 @@ import {
   StudioPerformersQueryVariables,
   VersionDocument,
   MeQueryVariables,
+  NotificationsDocument,
+  NotificationsQueryVariables,
+  UnreadNotificationCountDocument,
 } from "../types";
 
 export const useCategory = (variables: CategoryQueryVariables, skip = false) =>
@@ -291,3 +294,11 @@ export const useStudioPerformers = (
   useQuery(StudioPerformersDocument, {
     variables,
   });
+
+export const useNotifications = (variables: NotificationsQueryVariables) =>
+  useQuery(NotificationsDocument, {
+    variables,
+  });
+
+export const useUnreadNotificationsCount = () =>
+  useQuery(UnreadNotificationCountDocument);