Finish notifications (#872)

frontend/src/App.scss

@@ -2,6 +2,7 @@
 @import "./hooks/toast";
 @import "./pages/home/styles";
 @import "./pages/users/styles";
+@import "./pages/notifications/styles";
 @import "./pages/performers/styles";
 @import "./pages/scenes/styles";
 @import "./pages/scenes/sceneForm/styles";

frontend/src/components/editCard/EditCard.tsx

@@ -22,9 +22,14 @@ const CLASSNAME = "EditCard";
 interface Props {
   edit: EditFragment;
   showVotes?: boolean;
+  hideDiff?: boolean;
 }
 
-const EditCardComponent: FC<Props> = ({ edit, showVotes = false }) => {
+const EditCardComponent: FC<Props> = ({
+  edit,
+  showVotes = false,
+  hideDiff = false,
+}) => {
   const title = `${edit.operation.toLowerCase()} ${edit.target_type.toLowerCase()}`;
   const created = new Date(edit.created);
 
@@ -94,15 +99,21 @@ const EditCardComponent: FC<Props> = ({ edit, showVotes = false }) => {
       <hr />
       <Card.Body>
         <EditHeader edit={edit} />
-        {creation}
-        {modifications}
-        <Row className="mt-2">
-          <Col md={{ offset: 4, span: 8 }}>
-            {showVotes && <Votes edit={edit} />}
-            {comments}
-            <AddComment editID={edit.id} />
-          </Col>
-        </Row>
+        {!hideDiff ? (
+          <>
+            {creation}
+            {modifications}
+            <Row className="mt-2">
+              <Col md={{ offset: 4, span: 8 }}>
+                {showVotes && <Votes edit={edit} />}
+                {comments}
+                <AddComment editID={edit.id} />
+              </Col>
+            </Row>
+          </>
+        ) : (
+          showVotes && <Votes edit={edit} />
+        )}
       </Card.Body>
     </Card>
   );

frontend/src/components/sceneCard/styles.scss

@@ -6,12 +6,13 @@
   }
 
   &-body {
-    height: 150px;
+    min-height: 150px;
     padding: 0;
   }
 
   &-image {
     align-items: center;
+    aspect-ratio: 16/9;
     display: flex;
     height: 100%;
     justify-content: center;

frontend/src/constants/route.ts

@@ -53,3 +53,4 @@ export const ROUTE_SITES = "/sites";
 export const ROUTE_DRAFT = "/drafts/:id";
 export const ROUTE_DRAFTS = "/drafts";
 export const ROUTE_NOTIFICATIONS = "/notifications";
+export const ROUTE_NOTIFICATION_SUBSCRIPTIONS = "/users/:name/notifications";

frontend/src/graphql/mutations/MarkNotificationsRead.gql

@@ -0,0 +1,3 @@
+mutation MarkNotificationsRead {
+  markNotificationsRead
+}

frontend/src/graphql/mutations/UpdateNotificationSubscriptions.gql

@@ -0,0 +1,3 @@
+mutation UpdateNotificationSubscriptions($subscriptions: [NotificationEnum!]!) {
+  updateNotificationSubscriptions(subscriptions: $subscriptions)
+}

frontend/src/graphql/mutations/index.ts

@@ -132,6 +132,10 @@ import {
   ConfirmChangeEmailDocument,
   RequestChangeEmailDocument,
   RequestChangeEmailMutationVariables,
+  UpdateNotificationSubscriptionsDocument,
+  UpdateNotificationSubscriptionsMutation,
+  UpdateNotificationSubscriptionsMutationVariables,
+  MarkNotificationsReadDocument,
 } from "../types";
 
 export const useActivateUser = (
@@ -430,3 +434,30 @@ export const useRequestChangeEmail = (
     RequestChangeEmailMutationVariables
   >,
 ) => useMutation(RequestChangeEmailDocument, options);
+
+export const useUpdateNotificationSubscriptions = (
+  options?: MutationHookOptions<
+    UpdateNotificationSubscriptionsMutation,
+    UpdateNotificationSubscriptionsMutationVariables
+  >,
+) =>
+  useMutation(UpdateNotificationSubscriptionsDocument, {
+    update(cache, { data }) {
+      if (data?.updateNotificationSubscriptions) {
+        cache.evict({
+          fieldName: "queryNotifications",
+        });
+      }
+    },
+    ...options,
+  });
+
+export const useMarkNotificationsRead = () =>
+  useMutation(MarkNotificationsReadDocument, {
+    update(cache, { data }) {
+      if (data?.markNotificationsRead) {
+        cache.evict({ fieldName: "queryNotifications" });
+        cache.evict({ fieldName: "getUnreadNotificationCount" });
+      }
+    },
+  });

frontend/src/graphql/queries/User.gql

@@ -32,5 +32,6 @@ query User($name: String!) {
       canceled
       pending
     }
+    notification_subscriptions
   }
 }

frontend/src/graphql/types.ts

@@ -589,6 +589,8 @@ export type Mutation = {
   /** Update a pending tag edit */
   tagEditUpdate: Edit;
   tagUpdate?: Maybe<Tag>;
+  /** Update notification subscriptions for current user. */
+  updateNotificationSubscriptions: Scalars["Boolean"]["output"];
   userCreate?: Maybe<User>;
   userDestroy: Scalars["Boolean"]["output"];
   userUpdate?: Maybe<User>;
@@ -793,6 +795,10 @@ export type MutationTagUpdateArgs = {
   input: TagUpdateInput;
 };
 
+export type MutationUpdateNotificationSubscriptionsArgs = {
+  subscriptions: Array<NotificationEnum>;
+};
+
 export type MutationUserCreateArgs = {
   input: UserCreateInput;
 };
@@ -834,6 +840,19 @@ export type NotificationData =
   | FavoriteStudioScene
   | UpdatedEdit;
 
+export enum NotificationEnum {
+  COMMENT_COMMENTED_EDIT = "COMMENT_COMMENTED_EDIT",
+  COMMENT_OWN_EDIT = "COMMENT_OWN_EDIT",
+  COMMENT_VOTED_EDIT = "COMMENT_VOTED_EDIT",
+  DOWNVOTE_OWN_EDIT = "DOWNVOTE_OWN_EDIT",
+  FAILED_OWN_EDIT = "FAILED_OWN_EDIT",
+  FAVORITE_PERFORMER_EDIT = "FAVORITE_PERFORMER_EDIT",
+  FAVORITE_PERFORMER_SCENE = "FAVORITE_PERFORMER_SCENE",
+  FAVORITE_STUDIO_EDIT = "FAVORITE_STUDIO_EDIT",
+  FAVORITE_STUDIO_SCENE = "FAVORITE_STUDIO_SCENE",
+  UPDATED_EDIT = "UPDATED_EDIT",
+}
+
 export enum OperationEnum {
   CREATE = "CREATE",
   DESTROY = "DESTROY",
@@ -1390,6 +1409,8 @@ export type QueryExistingSceneResult = {
 export type QueryNotificationsInput = {
   page?: Scalars["Int"]["input"];
   per_page?: Scalars["Int"]["input"];
+  type?: InputMaybe<NotificationEnum>;
+  unread_only?: InputMaybe<Scalars["Boolean"]["input"]>;
 };
 
 export type QueryNotificationsResult = {
@@ -1966,6 +1987,7 @@ export type User = {
   invite_tokens?: Maybe<Scalars["Int"]["output"]>;
   invited_by?: Maybe<User>;
   name: Scalars["String"]["output"];
+  notification_subscriptions: Array<NotificationEnum>;
   /** Should not be visible to other users */
   roles?: Maybe<Array<RoleEnum>>;
   /**  Vote counts by type  */
@@ -4709,6 +4731,15 @@ export type GrantInviteMutation = {
   grantInvite: number;
 };
 
+export type MarkNotificationsReadMutationVariables = Exact<{
+  [key: string]: never;
+}>;
+
+export type MarkNotificationsReadMutation = {
+  __typename: "Mutation";
+  markNotificationsRead: boolean;
+};
+
 export type NewUserMutationVariables = Exact<{
   input: NewUserInput;
 }>;
@@ -13259,6 +13290,15 @@ export type UnmatchFingerprintMutation = {
   unmatchFingerprint: boolean;
 };
 
+export type UpdateNotificationSubscriptionsMutationVariables = Exact<{
+  subscriptions: Array<NotificationEnum> | NotificationEnum;
+}>;
+
+export type UpdateNotificationSubscriptionsMutation = {
+  __typename: "Mutation";
+  updateNotificationSubscriptions: boolean;
+};
+
 export type UpdateSceneMutationVariables = Exact<{
   updateData: SceneUpdateInput;
 }>;
@@ -30422,6 +30462,7 @@ export type UserQuery = {
     api_key?: string | null;
     api_calls: number;
     invite_tokens?: number | null;
+    notification_subscriptions: Array<NotificationEnum>;
     invited_by?: { __typename: "User"; id: string; name: string } | null;
     invite_codes?: Array<{
       __typename: "InviteKey";
@@ -37515,6 +37556,28 @@ export const GrantInviteDocument = {
     },
   ],
 } as unknown as DocumentNode<GrantInviteMutation, GrantInviteMutationVariables>;
+export const MarkNotificationsReadDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "mutation",
+      name: { kind: "Name", value: "MarkNotificationsRead" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "markNotificationsRead" },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  MarkNotificationsReadMutation,
+  MarkNotificationsReadMutationVariables
+>;
 export const NewUserDocument = {
   kind: "Document",
   definitions: [
@@ -50962,6 +51025,60 @@ export const UnmatchFingerprintDocument = {
   UnmatchFingerprintMutation,
   UnmatchFingerprintMutationVariables
 >;
+export const UpdateNotificationSubscriptionsDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "mutation",
+      name: { kind: "Name", value: "UpdateNotificationSubscriptions" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "subscriptions" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "ListType",
+              type: {
+                kind: "NonNullType",
+                type: {
+                  kind: "NamedType",
+                  name: { kind: "Name", value: "NotificationEnum" },
+                },
+              },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "updateNotificationSubscriptions" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "subscriptions" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "subscriptions" },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  UpdateNotificationSubscriptionsMutation,
+  UpdateNotificationSubscriptionsMutationVariables
+>;
 export const UpdateSceneDocument = {
   kind: "Document",
   definitions: [
@@ -67334,6 +67451,10 @@ export const UserDocument = {
                     ],
                   },
                 },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "notification_subscriptions" },
+                },
               ],
             },
           },

frontend/src/pages/notifications/CommentNotification.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import type { CommentNotificationType } from "./types";
+import EditComment from "src/components/editCard/EditComment";
+
+interface Props {
+  notification: CommentNotificationType;
+}
+
+export const CommentNotification: FC<Props> = ({ notification }) => (
+  <EditComment {...notification.data.comment} />
+);

frontend/src/pages/notifications/EditNotification.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import EditCard from "src/components/editCard";
+import type { EditNotificationType } from "./types";
+
+interface Props {
+  notification: EditNotificationType;
+}
+
+export const EditNotification: FC<Props> = ({ notification }) => {
+  return <EditCard edit={notification.data.edit} showVotes hideDiff />;
+};