Ncto 155 make notifications system

README.md

@@ -25,6 +25,12 @@ bun run dev
 
 ## Docker
 
+for dev, with hot reload feature
+```bash
+docker compose -f docker-compose.dev.yml up
+```
+
+for prod
 ```bash
 docker compose up
 ```

docker-compose.dev.yml

@@ -0,0 +1,15 @@
+services:
+  frontend:
+    image: oven/bun:latest
+    working_dir: /app
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules
+    ports:
+      - "3001:3001"
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    command: sh -lc "bun install --frozen-lockfile && bun run dev --host 0.0.0.0 --port 3001"
+
+volumes:
+  node_modules: {}

package.json

@@ -57,7 +57,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "cypress": "^15.2.0",
     "eslint": "^9.24.0",
-    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.1.0",
@@ -69,4 +68,4 @@
     "vite": "^6.2.0"
   },
   "packageManager": "yarn@4.9.1+sha512.f95ce356460e05be48d66401c1ae64ef84d163dd689964962c6888a9810865e39097a5e9de748876c2e0bf89b232d583c33982773e9903ae7a76257270986538"
-}
+}

src/api/core/OpenAPI.ts

@@ -21,7 +21,7 @@ export type OpenAPIConfig = {
 };
 
 export const OpenAPI: OpenAPIConfig = {
-    BASE: import.meta.env.VITE_BACKEND_URL || 'none',
+    BASE: (import.meta.env.VITE_BACKEND_URL || "http://localhost:3000"),
     VERSION: '1.0',
     WITH_CREDENTIALS: true,
     CREDENTIALS: 'include',

src/api/index.ts

@@ -14,12 +14,14 @@ export type { CreateUserDto } from './models/CreateUserDto';
 export type { FetchWorkSessionDto } from './models/FetchWorkSessionDto';
 export type { KickWorkSessionDto } from './models/KickWorkSessionDto';
 export type { LoginDto } from './models/LoginDto';
+export type { NotificationTestDto } from './models/NotificationTestDto';
 export type { PaginationMetaDto } from './models/PaginationMetaDto';
 export type { ProjectResponseDto } from './models/ProjectResponseDto';
 export type { ProjectWithRelationsResponseDto } from './models/ProjectWithRelationsResponseDto';
 export type { RemoveCollaboratorDto } from './models/RemoveCollaboratorDto';
 export type { UpdateProjectDto } from './models/UpdateProjectDto';
 export type { UpdateUserDto } from './models/UpdateUserDto';
+export type { UpdateUserProfileDto } from './models/UpdateUserProfileDto';
 export type { UserBasicInfoDto } from './models/UserBasicInfoDto';
 export type { UserListResponseDto } from './models/UserListResponseDto';
 export type { UserProfileResponseDto } from './models/UserProfileResponseDto';
@@ -28,6 +30,7 @@ export type { UserRoleDto } from './models/UserRoleDto';
 export type { UserSingleResponseDto } from './models/UserSingleResponseDto';
 
 export { AuthService } from './services/AuthService';
+export { NotificationsService } from './services/NotificationsService';
 export { ProjectsService } from './services/ProjectsService';
 export { UsersService } from './services/UsersService';
 export { WorkSessionsService } from './services/WorkSessionsService';

src/api/models/AuthResponseDto.ts

@@ -4,6 +4,5 @@
 /* eslint-disable */
 export type AuthResponseDto = {
     access_token: string;
-    refresh_token: string;
 };
 

src/api/models/NotificationTestDto.ts

@@ -0,0 +1,19 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type NotificationTestDto = {
+    /**
+     * The title of the test notification
+     */
+    title: string;
+    /**
+     * The message content of the test notification
+     */
+    message: string;
+    /**
+     * The type of the notification (friend request, message, etc.)
+     */
+    type: string;
+};
+

src/api/services/NotificationsService.ts

@@ -0,0 +1,54 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { NotificationTestDto } from '../models/NotificationTestDto';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import { OpenAPI } from '../core/OpenAPI';
+import { request as __request } from '../core/request';
+export class NotificationsService {
+    /**
+     * Send a test notification to the current user
+     * @param requestBody
+     * @returns any Notification created and sent
+     * @throws ApiError
+     */
+    public static notificationsControllerSendTestNotification(
+        requestBody: NotificationTestDto,
+    ): CancelablePromise<any> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/notifications/test',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+    /**
+     * set one notification as read
+     * @param id
+     * @returns any Notification marked as read
+     * @throws ApiError
+     */
+    public static notificationsControllerMarkAsRead(
+        id: string,
+    ): CancelablePromise<any> {
+        return __request(OpenAPI, {
+            method: 'PATCH',
+            url: '/notifications/{id}/read',
+            path: {
+                'id': id,
+            },
+        });
+    }
+    /**
+     * set notifications as read
+     * @returns any All notifications as read
+     * @throws ApiError
+     */
+    public static notificationsControllerMarkAllAsRead(): CancelablePromise<any> {
+        return __request(OpenAPI, {
+            method: 'PATCH',
+            url: '/notifications/read-all',
+        });
+    }
+}

src/shared/authOverlay/AuthOverlay.tsx

@@ -91,8 +91,6 @@ const AuthOverlay: FC<AuthOverlayProps> = ({ isOpen, setIsOpen, onClose }) => {
       }
       // FIXME: put the token to httpOnly cookie using the backend
       LocalStorageManager.setToken(authResponse.access_token);
-      LocalStorageManager.setRefreshToken(authResponse.refresh_token);
-
       const userRes = await UsersService.userControllerGetProfile();
       LocalStorageManager.setUser({
         id: String(userRes.id),

src/shared/navbar/NavBar.tsx

@@ -6,6 +6,7 @@ import React, { useState } from "react";
 import { useUser } from "@providers/UserProvider";
 import { muiTheme } from "@theme/MUITheme";
 import { Login } from "@shared/navbar/login/Login";
+import { NotificationBox } from "@shared/navbar/notifications/NotificationBox";
 import * as Urls from "@shared/route";
 const Nav = styled("nav")(({ theme }) => ({
   display: "grid",
@@ -54,6 +55,7 @@ const NavBar: React.FC = () => {
 
       <Right>
         <NavElem to="/friends">Friends</NavElem>
+        <NotificationBox />
         {user ? <NavProfile /> : <Login forceShowAuthOverlay={forceShowAuthOverlay} setForceShowAuthOverlay={setForceShowAuthOverlay} />}
       </Right>
     </Nav >

src/shared/navbar/notifications/NotificationBox.tsx

@@ -0,0 +1,128 @@
+import { Badge, IconButton, styled } from "@mui/material";
+import { JSX, useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
+import InfoBoxIcon from "@assets/infoBox.svg?react";
+import { useUser } from "@providers/UserProvider";
+import { LocalStorageManager } from "@utils/LocalStorageManager";
+import { NotificationMenu } from "./NotificationMenu";
+import { NotificationItem } from "./types";
+import { NotificationsService } from "@api/services/NotificationsService";
+
+const NOTIFICATION_SOCKET_PATH = "/socket/notifications";
+const MAX_NOTIFICATIONS = 50;
+
+type NotificationWsMessage =
+  | { type: "notification"; payload: NotificationItem }
+  | { type: "notifications:init"; payload: NotificationItem[] };
+
+const NotificationButton = styled(IconButton)(({ theme }) => ({
+  margin: theme.spacing(2),
+  color: theme.palette.text.primary,
+}));
+
+const InfoIcon = styled(InfoBoxIcon)(({ theme }) => ({
+  width: 24,
+  height: 24,
+  color: theme.palette.text.primary,
+}));
+
+const mergeNotification = (
+  previous: NotificationItem[],
+  notification: NotificationItem,
+): NotificationItem[] => {
+  const withoutCurrent = previous.filter((item) => item.id !== notification.id);
+  return [notification, ...withoutCurrent].slice(0, MAX_NOTIFICATIONS);
+};
+
+export const NotificationBox = (): JSX.Element => {
+  const { user } = useUser();
+  const userId = user?.id;
+  const token = LocalStorageManager.getToken();
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const [showMenu, setShowMenu] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>(undefined);
+  const socketRef = useRef<WebSocket | null>(null);
+  const backendUrl = (import.meta.env.VITE_BACKEND_URL || "http://localhost:3000").trim();
+
+  const unreadCount = useMemo(
+    () => notifications.reduce((count, notification) => count + (notification.read ? 0 : 1), 0),
+    [notifications],
+  );
+
+  useEffect(() => {
+    if (!userId || !token || !backendUrl) {
+      if (socketRef.current) {
+        socketRef.current.close();
+        socketRef.current = null;
+      }
+      setNotifications([]);
+      return;
+    }
+
+    const wsBase = backendUrl.replace(/^http/i, "ws").replace(/\/$/, "");
+    const socketUrl = `${wsBase}${NOTIFICATION_SOCKET_PATH}?token=${encodeURIComponent(token)}`;
+    const socket = new WebSocket(socketUrl);
+
+    socketRef.current = socket;
+
+    socket.onmessage = (event: MessageEvent<string>) => {
+      try {
+        const message = JSON.parse(event.data) as NotificationWsMessage;
+
+        if (message.type === "notifications:init") {
+          setNotifications(message.payload.slice(0, MAX_NOTIFICATIONS));
+          return;
+        }
+
+        if (message.type === "notification") {
+          setNotifications((previous) => mergeNotification(previous, message.payload));
+        }
+      } catch {
+        // eslint
+      }
+    };
+
+    return () => {
+      socket.close();
+      socketRef.current = null;
+    };
+  }, [userId, token, backendUrl]);
+
+  const handleClick = useCallback((event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+    setShowMenu((previous) => {
+      const next = !previous;
+
+      return next;
+    });
+  }, []);
+
+  const handleClose = useCallback(() => setShowMenu(false), []);
+
+  const handleMarkAsRead = useCallback((notificationId: string) => {
+    setNotifications((current) =>
+      current.map((notification) =>
+        notification.id === notificationId ? { ...notification, read: true } : notification,
+      ),
+    );
+    NotificationsService.notificationsControllerMarkAsRead(notificationId);
+  }, []);
+
+  return (
+    <>
+      <NotificationButton onClick={handleClick} disabled={!userId}>
+        <Badge badgeContent={unreadCount} color="error">
+          <InfoIcon />
+        </Badge>
+      </NotificationButton>
+      {showMenu && (
+        <NotificationMenu
+          anchorEl={anchorEl}
+          open={showMenu}
+          onClose={handleClose}
+          notifications={notifications}
+          onMarkAsRead={handleMarkAsRead}
+        />
+      )}
+    </>
+  );
+};