CFE-5 Merge branch 'feature/CFE-5_socket_provider' into 'develop'

example.env.local

@@ -7,6 +7,7 @@ NEXT_PUBLIC_PRIMARY_MAIN = "#1b4332"
 NEXT_PUBLIC_SECONDARY_MAIN = "#800e13"
 
 NEXT_PUBLIC_BASE_URL = "https://crm.witel.ir"
+NEXT_PUBLIC_SERVER_SOCKET_URL = "wss://crmws.witel.ir"
 NEXT_PUBLIC_POWERED_BY_URL = "https://witel.ir"
 
 NODE_ENV = "development"

package.json

@@ -46,6 +46,7 @@
     "react-dom": "^18.2.0",
     "react-toastify": "^9.1.3",
     "sass": "^1.62.0",
+    "socket.io-client": "^4.7.2",
     "stylis": "^4.1.3",
     "stylis-plugin-rtl": "^2.1.1",
     "swr": "^2.1.5",

src/lib/app/contexts/socket.jsx

@@ -0,0 +1,15 @@
+import {createContext, useMemo} from "react";
+import {io} from "socket.io-client";
+
+export const SocketContext = createContext()
+
+export const SocketProvider = ({children}) => {
+    const socket = useMemo(() => io(process.env.NEXT_PUBLIC_SERVER_SOCKET_URL, {
+        autoConnect: false,
+        auth: {
+            token: ""
+        }
+    }), [])
+
+    return <SocketContext.Provider value={{socket}}>{children}</SocketContext.Provider>
+}

src/lib/app/contexts/user.jsx

@@ -2,6 +2,7 @@ import {GET_USER_ROUTE} from "@/core/data/apiRoutes";
 import axios from "axios";
 import {createContext, useCallback, useEffect, useReducer} from "react";
 import {errorRequest, errorResponse, errorSetting} from "@/core/utils/errorHandler";
+import useSocket from "@/lib/app/hooks/useSocket";
 
 const initialUser = {
     isAuth: false,
@@ -39,6 +40,7 @@ const reducer = (state, action) => {
 export const UserContext = createContext();
 
 export const UserProvider = ({children}) => {
+    const socket = useSocket()
     const [state, dispatch] = useReducer(reducer, initialUser);
 
     const clearUser = useCallback(() => {
@@ -75,7 +77,7 @@ export const UserProvider = ({children}) => {
                     headers: {authorization: `Bearer ${state.token}`},
                 })
                 .then(({data}) => {
-                    if (typeof callback === "function") callback(data);
+                    if (typeof callback === "function") callback(data.data);
                 })
                 .catch(error => {
                     if (error.response) {
@@ -100,12 +102,16 @@ export const UserProvider = ({children}) => {
             clearUser();
             changeAuthState(false);
             changeLanguageState(false);
+
+            socket.auth.token = ""
             return;
         }
         getUser((data) => {
             changeUser(data);
             changeAuthState(true);
             changeLanguageState(true);
+
+            socket.auth.token = data.telephone_id
         });
     }, [state.token]);
 

src/lib/app/hooks/useSocket.jsx

@@ -0,0 +1,10 @@
+import {useContext} from "react";
+import {SocketContext} from "@/lib/app/contexts/socket";
+
+const useSocket = () => {
+    const {socket} = useContext(SocketContext)
+
+    return socket
+}
+
+export default useSocket

src/pages/_app.jsx

@@ -7,24 +7,27 @@ import {UserProvider} from "@/lib/app/contexts/user";
 import "moment/locale/fa";
 import {NextIntlProvider} from "next-intl";
 import TitlePage from "@/core/components/TitlePage";
+import {SocketProvider} from "@/lib/app/contexts/socket";
 
 const App = ({Component, pageProps}) => {
 
     return (<>
-        <UserProvider>
+        <SocketProvider>
-            <LanguageProvider>
+            <UserProvider>
-                <NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
+                <LanguageProvider>
-                    <MuiLayout isBot={pageProps.isBot}>
+                    <NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
-                        {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
+                        <MuiLayout isBot={pageProps.isBot}>
-                        <LoadingProvider>
+                            {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
-                            <AppLayout isBot={pageProps.isBot}>
+                            <LoadingProvider>
-                                <Component {...pageProps} />
+                                <AppLayout isBot={pageProps.isBot}>
-                            </AppLayout>
+                                    <Component {...pageProps} />
-                        </LoadingProvider>
+                                </AppLayout>
-                    </MuiLayout>
+                            </LoadingProvider>
-                </NextIntlProvider>
+                        </MuiLayout>
-            </LanguageProvider>
+                    </NextIntlProvider>
-        </UserProvider>
+                </LanguageProvider>
+            </UserProvider>
+        </SocketProvider>
     </>)
 };