Merge pull request #16 from Harrylever/dev

Dev

src/AppRoutes.tsx

@@ -1,6 +1,6 @@
+import Layout from './components/layout/Layout';
 import { Routes, Route } from 'react-router-dom';
 import { ChatView, RegisterView, LoginView, NotFoundView } from './views';
-import Layout from './components/layout/Layout';
 
 export default function AppRoutes() {
   return (

src/app/features/requests.ts

@@ -1,16 +1,12 @@
 import { AxiosInstance } from 'axios';
+import { INotification } from '../../../typings';
 
-export class PrivateRequestConstruct {
-  axiosInstance: AxiosInstance;
-
+// Users
+export class UserRequests {
   // Constructor
-  constructor(axiosInstance: AxiosInstance) {
-    this.axiosInstance = axiosInstance;
-  }
+  constructor(private readonly axiosInstance: AxiosInstance) {}
 
   // Methods
-
-  // Users
   async useGetUserByIdQuery(userid: string) {
     const fetch = await this.axiosInstance.get(`/users/${userid}`);
     return fetch.data;
@@ -26,8 +22,12 @@ export class PrivateRequestConstruct {
     const fetch = await this.axiosInstance.get('/users/');
     return fetch.data;
   }
+}
+
+// Chats
+export class ChatRequests {
+  constructor (private readonly axiosInstance: AxiosInstance) {}
 
-  // Chats
   /**
    * Fetches all the chats for the currently login user
    * @param userid
@@ -58,8 +58,12 @@ export class PrivateRequestConstruct {
     });
     return fetch.data;
   }
+}
+
+// Messages
+export class MessageRequests {
+  constructor (private readonly axiosInstance: AxiosInstance) {}
 
-  // Messages
   /**
    * Gets chat messages by chat id
    * @param chatid
@@ -83,4 +87,25 @@ export class PrivateRequestConstruct {
     });
     return fetch.data;
   }
+
+  async useGetLastChatMessage(chatId: string) {
+    const fetch = await this.axiosInstance.get(
+      `/messages/chat/${chatId}/last-message`
+    );
+    return fetch.data;
+  }
 }
+
+export class NotificationRequests {
+  constructor(private readonly axiosInstance: AxiosInstance) {}
+
+  async usePostModifyNotificationsMutation(notifications: INotification[]) {
+    const fetch = await this.axiosInstance.post(
+      '/notifications/mutate-with-sender',
+      {
+        notifications,
+      }
+    );
+    return fetch.data;
+  }
+}

src/app/index.ts

@@ -1,5 +1,5 @@
 export * from './hooks/hooks';
+export * from './store/store';
 export * from './constants/const';
 export * from './slices/authSlice';
-export * from './store/store';
 export { default as useAxiosPrivate } from './hooks/useAxiosPrivate';

src/app/slices/notificationSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { INotification } from '../../../typings';
+
+interface INotificationSlice {
+  notifications: Array<INotification>;
+}
+
+const initState: INotificationSlice = {
+  notifications: [],
+};
+
+const notificationSlice = createSlice({
+  name: 'notificationSlice',
+  initialState: initState,
+  reducers: {
+    setReduxNotifications: (
+      state: INotificationSlice,
+      action: PayloadAction<INotificationSlice>
+    ) => {
+      state.notifications = action.payload.notifications;
+    },
+  },
+});
+
+export const { setReduxNotifications } = notificationSlice.actions;
+export default notificationSlice.reducer;

src/app/store/store.ts

@@ -1,13 +1,14 @@
-import { configureStore } from '@reduxjs/toolkit';
-import { authApiSlice } from '../slices/authApiSlice';
 import authReducer from '../slices/authSlice';
 import userReducer from '../slices/userSlice';
-import userChatsReducer from '../slices/userChatsSlice';
-import potentialChatsReducer from '../slices/potentialChatsSlice';
 import chatReducer from '../slices/chatSlice';
+import { configureStore } from '@reduxjs/toolkit';
+import socketReducer from '../slices/socketSlice';
 import messageReducer from '../slices/messagesSlice';
+import { authApiSlice } from '../slices/authApiSlice';
+import userChatsReducer from '../slices/userChatsSlice';
 import appUIStateReducer from '../slices/appUIStateSlice';
-import socketReducer from '../slices/socketSlice';
+import notificationReducer from '../slices/notificationSlice';
+import potentialChatsReducer from '../slices/potentialChatsSlice';
 
 const store = configureStore({
   reducer: {
@@ -19,6 +20,7 @@ const store = configureStore({
     messageReduce: messageReducer,
     appUIStateReduce: appUIStateReducer,
     socketReduce: socketReducer,
+    notificationReduce: notificationReducer,
     [authApiSlice.reducerPath]: authApiSlice.reducer,
   },
 

src/components/layout/Layout.tsx

@@ -1,38 +1,64 @@
-import { Outlet } from 'react-router-dom';
-import { NavBarComponent, SideBarChatList } from '../sections';
-import { useEffect, useState } from 'react';
+import axios from 'axios';
 import { IUser } from '../../../typings';
+import { Outlet } from 'react-router-dom';
 import { useAppSelector } from '../../app';
+import React, { useEffect, useState } from 'react';
+import LoadingPlayer from '../atoms/LoadingPlayer';
+import { NavBarComponent, SideBarChatList } from '../sections';
 
 export default function Layout() {
   const user = useAppSelector((state) => state.userReduce);
-  const sideBarChatListIsOpen = useAppSelector((state) => state.appUIStateReduce.sideBarChatOpen);
+  const sideBarChatListIsOpen = useAppSelector(
+    (state) => state.appUIStateReduce.sideBarChatOpen
+  );
 
   const [localuser, setLocalUser] = useState<IUser | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     if (user && user._id !== '') {
       setLocalUser(user);
     }
   }, [user]);
 
+  useEffect(() => {
+    (async () => {
+      const handleGetAPIIndex = async () => {
+        const BASE_URL = import.meta.env.VITE_BE_URL;
+        const fetch = await axios.get(BASE_URL);
+        return fetch.data;
+      };
+
+      const response = await handleGetAPIIndex();
+      if (response.success) {
+        setIsLoading(false);
+      }
+    })();
+  }, []);
+
   return (
-    <div className="w-full text-white font-nunito">
-      <div className="w-full relative">
-        {/*  */}
-        {sideBarChatListIsOpen && <SideBarChatList />}
+    <React.Fragment>
+      {isLoading ? (
+        <LoadingPlayer />
+      ) : (
+        <div className="w-full text-white font-nunito">
+          <div className="w-full relative">
+            {/*  */}
+            {sideBarChatListIsOpen && <SideBarChatList />}
 
-        <div className="relative z-[20] w-full bg-slate-900 shadow-xl">
-          <div className="mx-auto px-6 sm:px-8">
-            <NavBarComponent props={{ user: localuser }} />
-          </div>
-        </div>
-        <div className="relative z-[10] w-full pt-5">
-          <div className=" max-w-6xl mx-auto px-6 sm:px-8 xl:px-0">
-            <Outlet />
+            <div className="relative z-[20] w-full bg-slate-900 shadow-xl">
+              <div className="mx-auto px-6 sm:px-8">
+                <NavBarComponent props={{ user: localuser }} />
+              </div>
+            </div>
+            <div className="relative z-[10] w-full pt-5">
+              <div className=" max-w-6xl mx-auto px-6 sm:px-8 xl:px-0">
+                <Outlet />
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      )}
+    </React.Fragment>
   );
 }