notifications: added list to profile

src/components/common/InlineUsername/index.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+
+import { useColorFromString } from '~/hooks/color/useColorFromString';
+
+import styles from './styles.module.scss';
+
+interface InlineUsernameProps {
+  children: string;
+}
+
+const InlineUsername: FC<InlineUsernameProps> = ({ children }) => {
+  const backgroundColor = useColorFromString(children);
+  return (
+    <span style={{ backgroundColor }} className={styles.username}>
+      ~{children}
+    </span>
+  );
+};
+
+export { InlineUsername };

src/components/common/InlineUsername/styles.module.scss

@@ -0,0 +1,6 @@
+.username {
+  font-size: 0.9em;
+  padding: 0 2px;
+  text-transform: lowercase;
+  border-radius: 0.2em;
+}

src/components/notifications/NotificationBadge/index.tsx

@@ -0,0 +1,77 @@
+import React, { FC } from 'react';
+
+import { Anchor } from '~/components/common/Anchor';
+import { InlineUsername } from '~/components/common/InlineUsername';
+import { Square } from '~/components/common/Square';
+import { Card } from '~/components/containers/Card';
+import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
+import { NotificationItem, NotificationType } from '~/types/notifications';
+import { formatText, getPrettyDate, getURLFromString } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+interface NotificationBadgeProps {
+  item: NotificationItem;
+}
+
+const getTitle = (item: NotificationItem) => {
+  if (!item.user.username) {
+    return '';
+  }
+
+  switch (item.type) {
+    case NotificationType.Comment:
+      return (
+        <span>
+          <InlineUsername>{item.user.username}</InlineUsername> пишет:
+        </span>
+      );
+    case NotificationType.Node:
+      return (
+        <span>
+          Новый пост от <InlineUsername>{item.user.username}</InlineUsername>:
+        </span>
+      );
+  }
+};
+
+const getContent = (item: NotificationItem) => {
+  switch (item.type) {
+    case NotificationType.Comment:
+      return (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: formatText(item.text),
+          }}
+        />
+      );
+    case NotificationType.Node:
+      return (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: formatText(item.text),
+          }}
+        />
+      );
+  }
+};
+
+const getIcon = (item: NotificationItem) => {
+  return <Square image={getURLFromString(item.thumbnail, 'avatar')} />;
+};
+
+const NotificationBadge: FC<NotificationBadgeProps> = ({ item }) => (
+  <Anchor href={item.url} className={styles.link}>
+    <div className={styles.message}>
+      <div className={styles.icon}>{getIcon(item)}</div>
+
+      <div>
+        <b className={styles.title}>{getTitle(item)}</b>
+        <div className={styles.text}>{getContent(item)}</div>
+        <div className={styles.time}>{getPrettyDate(item.created_at)}</div>
+      </div>
+    </div>
+  </Anchor>
+);
+
+export { NotificationBadge };

src/components/notifications/NotificationBadge/styles.module.scss

@@ -0,0 +1,33 @@
+@import 'src/styles/variables';
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.message {
+  font: $font_14_regular;
+  line-height: 1.3em;
+  padding: $gap/2 $gap/2 $gap/4 $gap/2;
+  min-height: calc(1.3em * 3 + $gap);
+  display: grid;
+  grid-template-columns: 40px auto;
+  column-gap: $gap;
+}
+
+.text {
+  @include clamp(2, 14px);
+  text-overflow: ellipsis;
+}
+
+.title {
+  font: $font_14_semibold;
+  margin-bottom: $gap / 2;
+}
+
+.time {
+  font: $font_10_regular;
+  text-align: right;
+  margin-top: 2px;
+  color: $gray_75;
+}

src/components/notifications/NotificationBubble/index.tsx

@@ -1,47 +0,0 @@
-import React, { createElement, FC } from 'react';
-
-import { Icon } from '~/components/input/Icon';
-import { useRandomPhrase } from '~/constants/phrases';
-import { INotification, NOTIFICATION_TYPES } from '~/types';
-
-import { NotificationMessage } from '../NotificationMessage';
-
-import styles from './styles.module.scss';
-
-interface IProps {
-  notifications: INotification[];
-  onClick: (notification: INotification) => void;
-}
-
-const NOTIFICATION_RENDERERS = {
-  [NOTIFICATION_TYPES.message]: NotificationMessage,
-};
-
-const NotificationBubble: FC<IProps> = ({ notifications, onClick }) => {
-  const placeholder = useRandomPhrase('NOTHING_HERE');
-
-  return (
-    <div className={styles.wrap}>
-      <div className={styles.list}>
-        {notifications.length === 0 && (
-          <div className={styles.placeholder}>
-            <Icon icon="bell_ring" />
-            <div>{placeholder}</div>
-          </div>
-        )}
-        {notifications.length > 0 &&
-          notifications
-            .filter(notification => notification.type && NOTIFICATION_RENDERERS[notification.type])
-            .map(notification =>
-              createElement(NOTIFICATION_RENDERERS[notification.type], {
-                notification,
-                onClick,
-                key: notification.content.id,
-              })
-            )}
-      </div>
-    </div>
-  );
-};
-
-export { NotificationBubble };

src/components/notifications/NotificationBubble/styles.module.scss

@@ -1,106 +0,0 @@
-@import 'src/styles/variables';
-
-$notification_color: $content_bg_dark;
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.wrap {
-  position: absolute;
-  background: $notification_color;
-  top: 42px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  border-radius: $radius;
-  animation: appear 0.25s forwards;
-  z-index: 2;
-
-  &::before {
-    content: ' ';
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 0 16px 16px;
-    border-color: transparent transparent $notification_color transparent;
-    position: absolute;
-    left: 50%;
-    top: -16px;
-    transform: translate(-20px, 0);
-  }
-}
-
-.list {
-  width: 300px;
-  max-width: 100vw;
-  min-width: 0;
-  max-height: 400px;
-  overflow: auto;
-}
-
-.item {
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  flex-direction: column;
-  padding: $gap;
-  min-width: 0;
-  cursor: pointer;
-
-  svg {
-    fill: white;
-    margin-right: $gap;
-  }
-}
-
-.item_head {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-.item_title {
-  flex: 1;
-  white-space: nowrap;
-  font: $font_14_semibold;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  // text-transform: none;
-}
-
-.item_text {
-  font: $font_14_regular;
-  max-height: 2.4em;
-  padding-left: 30px;
-  overflow: hidden;
-}
-
-.placeholder {
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  text-transform: uppercase;
-  font: $font_16_semibold;
-  box-sizing: border-box;
-  padding: 80px;
-  text-align: center;
-  line-height: 1.6em;
-
-  svg {
-    width: 120px;
-    height: 120px;
-    opacity: 0.05;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}

src/components/notifications/NotificationMessage/index.tsx

@@ -1,32 +0,0 @@
-import React, { FC, useCallback } from 'react';
-
-import { Icon } from '~/components/input/Icon';
-import styles from '~/components/notifications/NotificationBubble/styles.module.scss';
-import { IMessageNotification, INotification } from '~/types';
-
-interface IProps {
-  notification: IMessageNotification;
-  onClick: (notification: INotification) => void;
-}
-
-const NotificationMessage: FC<IProps> = ({
-  notification,
-  notification: {
-    content: { text, from },
-  },
-  onClick,
-}) => {
-  const onMouseDown = useCallback(() => onClick(notification), [onClick, notification]);
-
-  return (
-    <div className={styles.item} onMouseDown={onMouseDown}>
-      <div className={styles.item_head}>
-        <Icon icon="message" />
-        <div className={styles.item_title}>Сообщение от ~{from?.username}:</div>
-      </div>
-      <div className={styles.item_text}>{text}</div>
-    </div>
-  );
-};
-
-export { NotificationMessage };

src/components/profile/ProfileSidebarNotes/styles.module.scss

@@ -1,7 +0,0 @@
-@import "src/styles/variables";
-
-.scroller {
-  flex: 1;
-  overflow: auto;
-  padding: $gap;
-}

src/components/profile/ProfileSidebarNotifications/index.tsx

@@ -0,0 +1,27 @@
+import { VFC } from 'react';
+
+import { useStackContext } from '~/components/sidebar/SidebarStack';
+import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
+
+import { NotificationList } from '../../../containers/notifications/NotificationList/index';
+
+interface ProfileSidebarNotificationsProps {}
+
+const ProfileSidebarNotifications: VFC<
+  ProfileSidebarNotificationsProps
+> = () => {
+  const { closeAllTabs } = useStackContext();
+
+  return (
+    <SidebarStackCard
+      width={400}
+      headerFeature="back"
+      title="Уведомления"
+      onBackPress={closeAllTabs}
+    >
+      <NotificationList />
+    </SidebarStackCard>
+  );
+};
+
+export { ProfileSidebarNotifications };

src/containers/notifications/NotificationList/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { NotificationBadge } from '~/components/notifications/NotificationBadge';
+import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
+
+import styles from './styles.module.scss';
+
+interface NotificationListProps {}
+
+const NotificationList: FC<NotificationListProps> = () => {
+  const { isLoading, items } = useNotificationsList();
+
+  if (isLoading) {
+    return <LoaderCircle />;
+  }
+
+  return (
+    <div className={styles.grid}>
+      {/* <div className={styles.head}>HEAD</div> */}
+      <div className={styles.list}>
+        <div className={styles.items}>
+          {items?.map((item) => (
+            <div className={styles.item} key={item.created_at}>
+              <NotificationBadge item={item} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { NotificationList };

src/containers/notifications/NotificationList/styles.module.scss

@@ -0,0 +1,41 @@
+@import 'src/styles/variables';
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 4;
+  height: 100%;
+}
+
+.head {
+  @include row_shadow;
+
+  width: 100%;
+  padding: $gap;
+}
+
+.list {
+  @include row_shadow;
+
+  overflow-y: auto;
+  flex: 1 1;
+  overflow: auto;
+  width: 100%;
+}
+
+.items {
+  display: grid;
+  grid-auto-flow: row;
+}
+
+.item {
+  @include row_shadow;
+  padding-right: $gap;
+  transition: background-color 0.25s;
+
+  &:hover {
+    background-color: $content_bg_lighter;
+  }
+}

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, VFC } from 'react';
 
 import classNames from 'classnames';
 
+import { Superpower } from '~/components/boris/Superpower';
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
 import { Zone } from '~/components/containers/Zone';
@@ -45,6 +46,10 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
             </VerticalMenu.Item>
 
             <VerticalMenu.Item onClick={() => setActiveTab(1)}>
+              Уведомления
+            </VerticalMenu.Item>
+
+            <VerticalMenu.Item onClick={() => setActiveTab(2)}>
               Заметки
             </VerticalMenu.Item>
           </VerticalMenu>

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, VFC } from 'react';
 
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { ProfileSidebarNotes } from '~/components/profile/ProfileSidebarNotes';
+import { ProfileSidebarNotifications } from '~/components/profile/ProfileSidebarNotifications';
 import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
 import { SidebarStack } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
@@ -13,7 +14,7 @@ import { useUser } from '~/hooks/auth/useUser';
 import type { SidebarComponentProps } from '~/types/sidebar';
 import { isNil } from '~/utils/ramda';
 
-const tabs = ['profile', 'bookmarks'] as const;
+const tabs = ['profile', 'notifications', 'bookmarks'] as const;
 type TabName = typeof tabs[number];
 
 interface SettingsSidebarProps
@@ -71,6 +72,7 @@ const SettingsSidebar: VFC<SettingsSidebarProps> = ({
 
         <SidebarStack.Cards>
           <ProfileSidebarSettings />
+          <ProfileSidebarNotifications />
           <ProfileSidebarNotes />
         </SidebarStack.Cards>
       </SidebarStack>

src/utils/dom.ts

@@ -88,10 +88,8 @@ export const getURL = (
   return file?.url ? getURLFromString(file.url, size) : '';
 };
 
-export const formatText = pipe(
-  formatTextSanitizeYoutube,
+export const formatTextWithoutImages = pipe(
   formatTextComments,
-  formatTextTodos,
   formatExclamations,
   formatTextDash,
   formatTextMarkdown,
@@ -99,6 +97,12 @@ export const formatText = pipe(
   formatTextClickableUsernames,
 );
 
+export const formatText = pipe(
+  formatTextSanitizeYoutube,
+  formatTextTodos,
+  formatTextWithoutImages,
+);
+
 export const formatTextParagraphs = (text: string): string =>
   (text && formatText(text)) || '';