added notification settings

src/api/notifications/settings.ts

@@ -0,0 +1,17 @@
+import { API } from '~/constants/api';
+import { api, cleanResult } from '~/utils/api';
+
+import {
+  ApiGetNotificationSettingsResponse,
+  ApiGetNotificationsResponse,
+} from './types';
+
+export const apiGetNotificationSettings = () =>
+  api
+    .get<ApiGetNotificationSettingsResponse>(API.NOTIFICATIONS.SETTINGS)
+    .then(cleanResult);
+
+export const apiGetNotifications = () =>
+  api
+    .get<ApiGetNotificationsResponse>(API.NOTIFICATIONS.LIST)
+    .then(cleanResult);

src/api/notifications/types.ts

@@ -0,0 +1,13 @@
+import { NotificationItem } from '~/types/notifications';
+
+export interface ApiGetNotificationSettingsResponse {
+  enabled: boolean;
+  flow: boolean;
+  comments: boolean;
+  last_seen?: string | null;
+  last_date?: string | null;
+}
+
+export interface ApiGetNotificationsResponse {
+  items?: NotificationItem[];
+}

src/constants/api.ts

@@ -62,4 +62,8 @@ export const API = {
     STATS: '/nodes/lab/stats',
     UPDATES: '/nodes/lab/updates',
   },
+  NOTIFICATIONS: {
+    LIST: '/notifications/',
+    SETTINGS: '/notifications/settings',
+  },
 };

src/hooks/notifications/useNotificationSettings.ts

@@ -0,0 +1,28 @@
+import { isAfter, isValid, parse, parseISO } from 'date-fns';
+
+import { useAuth } from '../auth/useAuth';
+
+import { useNotificationSettingsRequest } from './useNotificationSettingsRequest';
+
+export const useNotificationSettings = () => {
+  const { isUser } = useAuth();
+
+  const {
+    error: settingsError,
+    enabled: settingsEnabled,
+    lastSeen,
+    lastDate,
+    isLoading: isLoadingSettings,
+  } = useNotificationSettingsRequest();
+
+  const enabled = !isLoadingSettings && !settingsError && settingsEnabled;
+
+  const hasNew =
+    enabled && !!lastDate && (!lastSeen || isAfter(lastDate, lastSeen));
+
+  return {
+    enabled,
+    hasNew,
+    available: isUser,
+  };
+};

src/hooks/notifications/useNotificationSettingsRequest.ts

@@ -0,0 +1,36 @@
+import { isValid, parseISO } from 'date-fns';
+import useSWR from 'swr';
+
+import { apiGetNotificationSettings } from '~/api/notifications/settings';
+import { API } from '~/constants/api';
+
+import { useAuth } from '../auth/useAuth';
+
+const refreshInterval = 60e3; // 1min
+
+export const useNotificationSettingsRequest = () => {
+  const { isUser } = useAuth();
+  const {
+    data,
+    isValidating: isLoading,
+    error,
+  } = useSWR(
+    isUser ? API.NOTIFICATIONS.SETTINGS : null,
+    async () => apiGetNotificationSettings(),
+    { refreshInterval },
+  );
+
+  return {
+    isLoading,
+    error,
+    lastSeen:
+      data?.last_seen && isValid(parseISO(data.last_seen))
+        ? parseISO(data?.last_seen)
+        : undefined,
+    lastDate:
+      data?.last_date && isValid(parseISO(data.last_date))
+        ? parseISO(data?.last_date)
+        : undefined,
+    enabled: !!data?.enabled && (data.flow || data.comments),
+  };
+};

src/hooks/notifications/useNotificationsList.ts

@@ -0,0 +1,20 @@
+import useSWR from 'swr';
+
+import { apiGetNotifications } from '~/api/notifications/settings';
+import { API } from '~/constants/api';
+
+import { useAuth } from '../auth/useAuth';
+
+export const useNotificationsList = () => {
+  const { isUser } = useAuth();
+
+  const {
+    data,
+    isValidating: isLoading,
+    error,
+  } = useSWR(isUser ? API.NOTIFICATIONS.LIST : null, async () =>
+    apiGetNotifications(),
+  );
+
+  return { isLoading, error, ...data };
+};

src/pages/_app.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import App from 'next/app';
 import Head from 'next/head';
 
@@ -16,14 +14,15 @@ import { UserContextProvider } from '~/utils/context/UserContextProvider';
 import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider';
 import { AuthProvider } from '~/utils/providers/AuthProvider';
 import { MetadataProvider } from '~/utils/providers/MetadataProvider';
+import { NotificationProvider } from '~/utils/providers/NotificationProvider';
 import { SWRConfigProvider } from '~/utils/providers/SWRConfigProvider';
 import { SearchProvider } from '~/utils/providers/SearchProvider';
 import { SidebarProvider } from '~/utils/providers/SidebarProvider';
 import { ThemeProvider } from '~/utils/providers/ThemeProvider';
 import { ToastProvider } from '~/utils/providers/ToastProvider';
 
-import '~/styles/main.scss';
 import 'tippy.js/dist/tippy.css';
+import '~/styles/main.scss';
 
 const mobxStore = getMOBXStore();
 
@@ -45,26 +44,28 @@ export default class MyApp extends App {
                     <AudioPlayerProvider>
                       <MetadataProvider>
                         <AuthProvider>
-                          <SidebarProvider>
-                            <Head>
-                              <meta
-                                name="viewport"
-                                content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0"
-                              />
+                          <NotificationProvider>
+                            <SidebarProvider>
+                              <Head>
+                                <meta
+                                  name="viewport"
+                                  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0"
+                                />
 
-                              {!!canonicalURL && (
-                                <link rel="canonical" href={canonicalURL} />
-                              )}
-                            </Head>
+                                {!!canonicalURL && (
+                                  <link rel="canonical" href={canonicalURL} />
+                                )}
+                              </Head>
 
-                            <MainLayout>
-                              <ToastProvider />
-                              <Modal />
-                              <Sprites />
-                              <Component {...pageProps} />
-                            </MainLayout>
-                            <BottomContainer />
-                          </SidebarProvider>
+                              <MainLayout>
+                                <ToastProvider />
+                                <Modal />
+                                <Sprites />
+                                <Component {...pageProps} />
+                              </MainLayout>
+                              <BottomContainer />
+                            </SidebarProvider>
+                          </NotificationProvider>
                         </AuthProvider>
                       </MetadataProvider>
                     </AudioPlayerProvider>

src/types/auth/index.ts

@@ -28,3 +28,9 @@ export interface ISocialAccount {
   name: string;
   photo: string;
 }
+
+export interface ShallowUser {
+  id: number;
+  username: string;
+  photo: string;
+}

src/types/notifications/index.ts

@@ -0,0 +1,16 @@
+import { ShallowUser } from '../auth';
+
+export interface NotificationItem {
+  id: number;
+  url: string;
+  type: NotificationType;
+  text: string;
+  user: ShallowUser;
+  thumbnail: string;
+  created_at: string;
+}
+
+export enum NotificationType {
+  Node = 'node',
+  Comment = 'comment',
+}

src/utils/providers/NotificationProvider.tsx

@@ -0,0 +1,31 @@
+import { createContext, FC, useContext } from 'react';
+
+import { observer } from 'mobx-react-lite';
+
+import { useNotificationSettings } from '~/hooks/notifications/useNotificationSettings';
+
+interface NotificationProviderProps {}
+
+const defaultValue = {
+  available: false,
+  enabled: false,
+  hasNew: false,
+};
+
+const NotificationContext = createContext(defaultValue);
+
+const NotificationProvider: FC<NotificationProviderProps> = observer(
+  ({ children }) => {
+    const value = useNotificationSettings();
+
+    return (
+      <NotificationContext.Provider value={value}>
+        {children}
+      </NotificationContext.Provider>
+    );
+  },
+);
+
+export const useNotifications = () => useContext(NotificationContext);
+
+export { NotificationProvider };