feat: ✨ create sidebar (#114)

* add: 🍱 add unregistered user image to public

* add: 🍱 icons

* fix: git stash

* feat: ✨ add types for user, team, role, notification

* git stash

* git stash

* feat: ✨ add sidebar

* fix: 🩹 fix build

* fix: 🩹 fix build

* docs: 📝 add storybook for notification-item and notification-content

* docs: 📝 JSDoc for notification-content

* docs: 📝 JSDoc for notification-list, add stories, add tests for sort-notifications

* fix: save changes

* refactor: with new types `notification-item`

* refactor: with new types `notification-list`

* refactor: with new types `notification-modal`

* refactor: with new types `sidebar`

* refactor: with new types `sidebar-profile`

* fix save

* refactor(sidebar): 📦♻️ update typings to use `@teameights/types`

* refactor code

* save changes

* refactor: ♻️ replace hardcoded mock data with generateMockUser and other mock data generators in sidebar and notification components

* refactor(sidebar): 🎨 update styles and typography in sidebar components

* feat(icons): ✨ update burger-clo se icon in shared assets

* feat(sidebar): ✨ add user state and image loading skeleton in sidebar-profile

* feat(sidebar-profile): ✨ replace Image with ImageLoader in sidebar-profile component

* feat: merged develop

* fix: storybook

* feat: added server

* fix: linter

* fix: reading notifications issues

* fix: small issues

* feat: added websocket

* fix: socket issue

* fix: linter issue

* fix: sockets / timings issues

---------

Co-authored-by: Nikita Mashchenko <[email protected]>

client/next.config.js

@@ -3,7 +3,12 @@ const path = require('path');
 
 module.exports = {
   images: {
-    domains: ['picsum.photos', 'source.unsplash.com'],
+    domains: [
+      'teameights-production.s3.amazonaws.com',
+      'localhost',
+      'picsum.photos',
+      'source.unsplash.com',
+    ],
     remotePatterns: [
       {
         protocol: 'https',

client/package.json

@@ -26,7 +26,7 @@
     "@storybook/addon-styling": "^1.3.6",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-query-devtools": "^5.0.1",
-    "@teameights/types": "^1.1.24",
+    "@teameights/types": "^1.1.27",
     "@types/js-cookie": "^3.0.5",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "20.4.8",
@@ -35,6 +35,7 @@
     "@uiball/loaders": "^1.3.0",
     "add": "^2.0.6",
     "axios": "^1.5.1",
+    "bufferutil": "^4.0.8",
     "clsx": "^2.0.0",
     "eslint": "8.46.0",
     "eslint-config-next": "13.4.12",
@@ -52,9 +53,11 @@
     "react-select": "^5.7.4",
     "react-tooltip": "^5.21.3",
     "sass": "^1.64.2",
+    "socket.io-client": "^4.7.2",
     "sonner": "^1.0.3",
     "tsparticles": "^2.12.0",
     "typescript": "5.1.6",
+    "utf-8-validate": "^6.0.3",
     "yarn": "^1.22.19"
   },
   "devDependencies": {

client/src/app/(auth)/login/page.tsx

@@ -59,7 +59,7 @@ export default function LoginPage() {
               placeholder='Password'
               {...register('password', {
                 required: 'Password is required!',
-                minLength: { value: 8, message: 'Minimum length is 8!' },
+                minLength: { value: 6, message: 'Minimum length is 8!' },
               })}
               error={errors?.password ? errors.password.message : undefined}
               value={password}

client/src/app/(main)/layout.module.scss

@@ -0,0 +1,22 @@
+.container {
+  height: 100dvh;
+  width: 100%;
+  padding: 48px 55px;
+
+  @media (width <= 1120px) {
+    padding: 48px 24px;
+  }
+
+  @media (width <= 580px) {
+    padding: 24px;
+  }
+}
+
+.children {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}

client/src/app/(main)/layout.tsx

@@ -0,0 +1,22 @@
+'use client';
+import styles from './layout.module.scss';
+
+import { Sidebar } from '@/widgets/sidebar';
+import { useGetMe } from '@/entities/session';
+import { useGetNotifications } from '@/entities/session/api/useGetNotifications';
+import { useSocketConnection } from '@/widgets/sidebar/lib/hooks/useListenToNotifications';
+import { ReactNode } from 'react';
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+  const { data: user } = useGetMe();
+  const { data: notifications } = useGetNotifications();
+
+  useSocketConnection(user);
+
+  return (
+    <div className={styles.container}>
+      <Sidebar user={user} notifications={notifications} />
+      <div className={styles.children}>{children}</div>
+    </div>
+  );
+}

client/src/app/(main)/page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { Typography } from '@/shared/ui';
+import { useGetScreenWidth } from '@/shared/lib';
+
+export default function Home() {
+  const width = useGetScreenWidth();
+
+  return (
+    <>
+      <Typography size='heading_l' variant='h6'>
+        We are working hard to deliver teameights on NextJS/TS soon!
+      </Typography>
+
+      <div> The screen width is: {width} </div>
+
+      <a href='/login' style={{ color: 'green' }}>
+        Get to login
+      </a>
+    </>
+  );
+}

client/src/entities/session/api/useGetNotifications.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import { InfinityPaginationResultType, NotificationType } from '@teameights/types';
+import { API } from '@/shared/api';
+import { API_NOTIFICATIONS } from '@/shared/constant';
+
+export const useGetNotifications = () => {
+  return useQuery({
+    queryKey: ['useGetNotifications'],
+    queryFn: async () => {
+      const { data } =
+        await API.get<InfinityPaginationResultType<NotificationType>>(API_NOTIFICATIONS);
+      return data;
+    },
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  });
+};

client/src/entities/session/api/useReadNotifications.tsx

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { API_NOTIFICATIONS } from '@/shared/constant';
+
+export const useReadNotifications = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    // TODO: add types here and change to read all notifications
+    mutationFn: async (data: string[]) =>
+      await API.patch(API_NOTIFICATIONS, { notification_ids: data }),
+    onSuccess: () => {
+      // Invalidate and refetch
+      queryClient
+        .invalidateQueries({ queryKey: ['useGetNotifications'] })
+        .then(() => console.log('invalidated'));
+    },
+  });
+};

client/src/shared/api/socket.ts

@@ -0,0 +1,21 @@
+import { io, Socket } from 'socket.io-client';
+
+class SocketSingleton {
+  private static instance: Socket | null = null;
+
+  private constructor() {
+    // Private constructor to prevent instantiation
+  }
+
+  public static getInstance(): Socket {
+    if (!this.instance) {
+      // Create a new socket instance if it doesn't exist
+      this.instance = io('ws://localhost:3001', {
+        autoConnect: false,
+      });
+    }
+    return this.instance;
+  }
+}
+
+export const socket = SocketSingleton.getInstance();

client/src/shared/assets/icons/bell.tsx

@@ -0,0 +1,27 @@
+import { FC, SVGProps } from 'react';
+
+export const BellIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg width='24' height='24' viewBox='0 0 24 24' fill='none' {...props}>
+    <g clipPath='url(#clip0_1101_19052)'>
+      <path
+        d='M9 18C9 18.7956 9.31607 19.5587 9.87868 20.1213C10.4413 20.6839 11.2044 21 12 21C12.7956 21 13.5587 20.6839 14.1213 20.1213C14.6839 19.5587 15 18.7956 15 18'
+        stroke='white'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M5.25001 9.75C5.25001 7.95979 5.96116 6.2429 7.22703 4.97703C8.4929 3.71116 10.2098 3 12 3C13.7902 3 15.5071 3.71116 16.773 4.97703C18.0388 6.2429 18.75 7.95979 18.75 9.75C18.75 13.1081 19.5281 15.8063 20.1469 16.875C20.2126 16.9888 20.2472 17.1179 20.2474 17.2493C20.2475 17.3808 20.2131 17.5099 20.1475 17.6239C20.082 17.7378 19.9877 17.8325 19.8741 17.8985C19.7604 17.9645 19.6314 17.9995 19.5 18H4.50001C4.36874 17.9992 4.23997 17.964 4.12659 17.8978C4.0132 17.8317 3.91916 17.7369 3.85387 17.6231C3.78858 17.5092 3.75432 17.3801 3.75452 17.2489C3.75472 17.1176 3.78937 16.9887 3.85501 16.875C4.47282 15.8063 5.25001 13.1072 5.25001 9.75Z'
+        stroke='white'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_1101_19052'>
+        <rect width='24' height='24' fill='white' />
+      </clipPath>
+    </defs>
+  </svg>
+);

client/src/shared/assets/icons/burger-close.tsx

@@ -0,0 +1,48 @@
+import { FC, SVGProps } from 'react';
+
+export const BurgerCloseIcon: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
+    fill='none'
+    {...props}
+  >
+    <g clipPath='url(#clip0_827_18332)'>
+      <path
+        d='M10.5 12H20.25'
+        stroke='#5BD424'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M10.5 6H20.25'
+        stroke='#5BD424'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M3.75 18H20.25'
+        stroke='#5BD424'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6.75 5.25L3 9L6.75 12.75'
+        stroke='#5BD424'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_827_18332'>
+        <rect width='24' height='24' fill='white' />
+      </clipPath>
+    </defs>
+  </svg>
+);