From 2ecda12513fc9da3ad17cf11e919ab3d1d3f934d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 18 Mar 2023 16:09:53 +0600
Subject: [PATCH] notifications: added boris notifications

---
 src/api/notifications/types.ts                |  1 +
 .../NotificationComment/index.tsx             | 19 ++++++++++++-------
 .../NotificationComment/styles.module.scss    | 14 +++++++++++++-
 .../notifications/NotificationNode/index.tsx  |  7 +++++--
 .../NotificationNode/styles.module.scss       | 11 +++++++++++
 .../NotificationSettingsForm/index.tsx        |  4 ++--
 .../styles.module.scss                        |  7 -------
 .../notifications/NotificationList/index.tsx  | 12 +++++++++---
 .../notifications/useNotificationSettings.ts  |  2 ++
 .../useNotificationSettingsForm.ts            |  1 +
 src/types/notifications/index.ts              |  2 ++
 .../notificationSettingsFromRequest.ts        |  2 ++
 src/utils/providers/NotificationProvider.tsx  |  1 +
 13 files changed, 61 insertions(+), 22 deletions(-)
 delete mode 100644 src/components/notifications/NotificationSettingsForm/styles.module.scss

diff --git a/src/api/notifications/types.ts b/src/api/notifications/types.ts
index c17c575d..9a5df86d 100644
--- a/src/api/notifications/types.ts
+++ b/src/api/notifications/types.ts
@@ -3,6 +3,7 @@ import { NotificationItem } from '~/types/notifications';
 export interface ApiGetNotificationSettingsResponse {
   enabled: boolean;
   flow: boolean;
+  boris: boolean;
   comments: boolean;
   send_telegram: boolean;
   show_indicator: boolean;
diff --git a/src/components/notifications/NotificationComment/index.tsx b/src/components/notifications/NotificationComment/index.tsx
index c4592f40..194a60bb 100644
--- a/src/components/notifications/NotificationComment/index.tsx
+++ b/src/components/notifications/NotificationComment/index.tsx
@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+import classNames from 'classnames';
+
 import { Anchor } from '~/components/common/Anchor';
 import { Avatar } from '~/components/common/Avatar';
 import { InlineUsername } from '~/components/common/InlineUsername';
@@ -11,11 +13,12 @@ import styles from './styles.module.scss';
 
 interface NotificationCommentProps {
   item: NotificationItem;
+  isNew?: boolean;
 }
 
-const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
+const NotificationComment: FC<NotificationCommentProps> = ({ item, isNew }) => (
   <Anchor href={item.url} className={styles.link}>
-    <div className={styles.message}>
+    <div className={classNames(styles.message, { [styles.new]: isNew })}>
       <div className={styles.icon}>
         <Avatar
           size={32}
@@ -31,11 +34,13 @@ const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
             <InlineUsername>{item.user.username}</InlineUsername>
           </span>
           <span>-</span>
-          <Square
-            className={styles.item_image}
-            size={16}
-            image={getURLFromString(item.thumbnail, 'avatar')}
-          />
+          {!!item.thumbnail && (
+            <Square
+              className={styles.item_image}
+              size={16}
+              image={getURLFromString(item.thumbnail, 'avatar')}
+            />
+          )}
           <div className={styles.item_title}>{item.title}</div>
         </b>
 
diff --git a/src/components/notifications/NotificationComment/styles.module.scss b/src/components/notifications/NotificationComment/styles.module.scss
index a0f60d6b..036d2604 100644
--- a/src/components/notifications/NotificationComment/styles.module.scss
+++ b/src/components/notifications/NotificationComment/styles.module.scss
@@ -12,6 +12,18 @@
   display: grid;
   grid-template-columns: 32px auto;
   column-gap: 0;
+  position: relative;
+
+  &.new::after {
+    content: ' ';
+    position: absolute;
+    top: $gap;
+    right: $gap;
+    background: $color_danger;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+  }
 }
 
 .content {
@@ -49,7 +61,6 @@
 
 .item_title {
   flex: 1;
-  padding-left: 5px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -58,6 +69,7 @@
 .item_image {
   flex: 0 0 16px;
   border-radius: 2px;
+  margin-right: 5px;
 }
 
 .time {
diff --git a/src/components/notifications/NotificationNode/index.tsx b/src/components/notifications/NotificationNode/index.tsx
index ce7deb0d..e72d8768 100644
--- a/src/components/notifications/NotificationNode/index.tsx
+++ b/src/components/notifications/NotificationNode/index.tsx
@@ -1,5 +1,7 @@
 import { FC, useMemo } from 'react';
 
+import classNames from 'classnames';
+
 import { NodeThumbnail } from '~/components/node/NodeThumbnail';
 import { NotificationItem } from '~/types/notifications';
 import { getPrettyDate } from '~/utils/dom';
@@ -8,9 +10,10 @@ import styles from './styles.module.scss';
 
 interface NotificationNodeProps {
   item: NotificationItem;
+  isNew?: boolean;
 }
 
-const NotificationNode: FC<NotificationNodeProps> = ({ item }) => {
+const NotificationNode: FC<NotificationNodeProps> = ({ item, isNew }) => {
   const thumbnail = useMemo(
     () => ({
       title: item.title,
@@ -21,7 +24,7 @@ const NotificationNode: FC<NotificationNodeProps> = ({ item }) => {
   );
 
   return (
-    <div className={styles.card}>
+    <div className={classNames(styles.card, { [styles.new]: isNew })}>
       <div className={styles.image}>
         <NodeThumbnail item={thumbnail} />
       </div>
diff --git a/src/components/notifications/NotificationNode/styles.module.scss b/src/components/notifications/NotificationNode/styles.module.scss
index 89672976..e9ed2a58 100644
--- a/src/components/notifications/NotificationNode/styles.module.scss
+++ b/src/components/notifications/NotificationNode/styles.module.scss
@@ -8,6 +8,17 @@
   justify-content: center;
   align-items: center;
   padding: $gap/2;
+
+  &.new::after {
+    content: ' ';
+    position: absolute;
+    top: $gap;
+    right: $gap;
+    background: $color_danger;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+  }
 }
 
 .text {
diff --git a/src/components/notifications/NotificationSettingsForm/index.tsx b/src/components/notifications/NotificationSettingsForm/index.tsx
index c9387ad4..3880db9a 100644
--- a/src/components/notifications/NotificationSettingsForm/index.tsx
+++ b/src/components/notifications/NotificationSettingsForm/index.tsx
@@ -9,8 +9,6 @@ import { Toggle } from '~/components/input/Toggle';
 import { useNotificationSettingsForm } from '~/hooks/notifications/useNotificationSettingsForm';
 import { NotificationSettings } from '~/types/notifications';
 
-import styles from './styles.module.scss';
-
 interface NotificationSettingsFormProps {
   value: NotificationSettings;
   onSubmit: (val: Partial<NotificationSettings>) => Promise<unknown>;
@@ -65,6 +63,8 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
           <InputRow input={toggle('comments', !values.enabled)}>
             Комментарии
           </InputRow>
+
+          <InputRow input={toggle('boris', !values.enabled)}>Борис</InputRow>
         </Group>
       </Zone>
 
diff --git a/src/components/notifications/NotificationSettingsForm/styles.module.scss b/src/components/notifications/NotificationSettingsForm/styles.module.scss
deleted file mode 100644
index 4aa76416..00000000
--- a/src/components/notifications/NotificationSettingsForm/styles.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'src/styles/variables';
-
-.grid {
-  display: grid;
-  grid-auto-flow: row;
-  row-gap: $gap;
-}
diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx
index 5c859f67..f71b36d2 100644
--- a/src/containers/notifications/NotificationList/index.tsx
+++ b/src/containers/notifications/NotificationList/index.tsx
@@ -1,6 +1,7 @@
 import { FC, useCallback, useEffect } from 'react';
 
 import classNames from 'classnames';
+import { isAfter, parseISO } from 'date-fns';
 
 import { Button } from '~/components/input/Button';
 import { InputRow } from '~/components/input/InputRow';
@@ -17,7 +18,7 @@ interface NotificationListProps {}
 
 const NotificationList: FC<NotificationListProps> = () => {
   const { isLoading, items } = useNotificationsList();
-  const { enabled, toggleEnabled } = useNotifications();
+  const { enabled, toggleEnabled, lastSeen } = useNotifications();
   const { markAsRead } = useNotifications();
 
   useEffect(() => {
@@ -25,11 +26,16 @@ const NotificationList: FC<NotificationListProps> = () => {
   }, []);
 
   const renderItem = useCallback((item: NotificationItem) => {
+    const isNew =
+      !lastSeen ||
+      !item.created_at ||
+      isAfter(parseISO(item.created_at), lastSeen);
     switch (item.type) {
       case NotificationType.Comment:
-        return <NotificationComment item={item} />;
+      case NotificationType.Boris:
+        return <NotificationComment item={item} isNew={isNew} />;
       case NotificationType.Node:
-        return <NotificationNode item={item} />;
+        return <NotificationNode item={item} isNew={isNew} />;
       default:
         return null;
     }
diff --git a/src/hooks/notifications/useNotificationSettings.ts b/src/hooks/notifications/useNotificationSettings.ts
index 356db9f8..c20bcbda 100644
--- a/src/hooks/notifications/useNotificationSettings.ts
+++ b/src/hooks/notifications/useNotificationSettings.ts
@@ -54,5 +54,7 @@ export const useNotificationSettings = () => {
     update,
     loading: isLoading,
     toggleEnabled,
+    lastSeen,
+    lastDate,
   };
 };
diff --git a/src/hooks/notifications/useNotificationSettingsForm.ts b/src/hooks/notifications/useNotificationSettingsForm.ts
index f01fabb7..5547d5c0 100644
--- a/src/hooks/notifications/useNotificationSettingsForm.ts
+++ b/src/hooks/notifications/useNotificationSettingsForm.ts
@@ -10,6 +10,7 @@ import { useFormAutoSubmit } from '../useFormAutosubmit';
 const validationSchema = object({
   enabled: boolean().default(false),
   flow: boolean().default(false),
+  boris: boolean().default(false),
   comments: boolean().default(false),
   sendTelegram: boolean().default(false),
   showIndicator: boolean().default(false),
diff --git a/src/types/notifications/index.ts b/src/types/notifications/index.ts
index a610089a..5a34538f 100644
--- a/src/types/notifications/index.ts
+++ b/src/types/notifications/index.ts
@@ -14,11 +14,13 @@ export interface NotificationItem {
 export enum NotificationType {
   Node = 'node',
   Comment = 'comment',
+  Boris = 'boris',
 }
 
 export interface NotificationSettings {
   enabled: boolean;
   flow: boolean;
+  boris: boolean;
   comments: boolean;
   sendTelegram: boolean;
   showIndicator: boolean;
diff --git a/src/utils/notifications/notificationSettingsFromRequest.ts b/src/utils/notifications/notificationSettingsFromRequest.ts
index 1f067a5d..d549c96f 100644
--- a/src/utils/notifications/notificationSettingsFromRequest.ts
+++ b/src/utils/notifications/notificationSettingsFromRequest.ts
@@ -8,6 +8,7 @@ export const notificationSettingsFromRequest = (
 ): NotificationSettings => ({
   enabled: req.enabled,
   flow: req.flow,
+  boris: req.boris,
   comments: req.comments,
   sendTelegram: req.send_telegram,
   showIndicator: req.show_indicator,
@@ -20,6 +21,7 @@ export const notificationSettingsToRequest = (
 ): ApiUpdateNotificationSettingsRequest => ({
   enabled: req.enabled,
   flow: req.flow,
+  boris: req.boris,
   comments: req.comments,
   send_telegram: req.sendTelegram,
   show_indicator: req.showIndicator,
diff --git a/src/utils/providers/NotificationProvider.tsx b/src/utils/providers/NotificationProvider.tsx
index 553be56e..b37e4bc2 100644
--- a/src/utils/providers/NotificationProvider.tsx
+++ b/src/utils/providers/NotificationProvider.tsx
@@ -14,6 +14,7 @@ const defaultValue = {
   toggleEnabled: () => {},
   markAsRead: () => {},
   refresh: () => Promise.resolve() as Promise<unknown>,
+  lastSeen: null as Date | null | undefined,
 };
 
 const NotificationContext = createContext(defaultValue);