CFE-3 Merging

src/lib/app/contexts/socket.jsx

@@ -1,9 +1,18 @@
-import {createContext, useMemo} from "react";
+import {createContext, useEffect, useMemo, useRef, useState} from "react";
 import {io} from "socket.io-client";
+import useUser from "@/lib/app/hooks/useUser";
+import {useTranslations} from "next-intl";
+import {toast} from "react-toastify";
+import PowerIcon from "@mui/icons-material/Power";
+import PowerOffIcon from "@mui/icons-material/PowerOff";
 
 export const SocketContext = createContext()
 
 export const SocketProvider = ({children}) => {
+    const {user, isAuth} = useUser()
+    const [connectionError, setConnectionError] = useState(false)
+    const socketToastId = useRef(null);
+    const t = useTranslations()
     const socket = useMemo(() => io(process.env.NEXT_PUBLIC_SERVER_SOCKET_URL, {
         autoConnect: false,
         auth: {
@@ -11,5 +20,48 @@ export const SocketProvider = ({children}) => {
         }
     }), [])
 
+    useEffect(() => {
+        if (isAuth) {
+            socket.auth.token = user.telephone_id
+            return
+        }
+        socket.auth.token = ''
+    }, [isAuth]);
+
+    useEffect(() => {
+        const connectErrorHandler = () => {
+            setConnectionError(true)
+        }
+        const connectHandler = () => {
+            setConnectionError(false)
+        }
+        socket.on("connect_error", connectErrorHandler);
+        socket.on("connect", connectHandler);
+
+        return () => {
+            socket.off("connect_error", connectErrorHandler);
+            socket.off("connect", connectHandler);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (!connectionError) {
+            toast.update(socketToastId.current, {
+                type: toast.TYPE.SUCCESS,
+                render: t('socket_is_connect_message'),
+                autoClose: 2000,
+                closeButton: true,
+                closeOnClick: true,
+                icon: <PowerIcon/>
+            });
+            return
+        }
+        socketToastId.current = toast.warn(t('socket_is_not_connect_message'), {
+            draggable: false,
+            autoClose: false, closeButton: false, closeOnClick: false, icon: <PowerOffIcon/>
+        })
+
+    }, [connectionError]);
+
     return <SocketContext.Provider value={{socket}}>{children}</SocketContext.Provider>
 }

src/lib/app/contexts/user.jsx

@@ -2,7 +2,6 @@ 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,
@@ -40,7 +39,6 @@ const reducer = (state, action) => {
 export const UserContext = createContext();
 
 export const UserProvider = ({children}) => {
-    const socket = useSocket()
     const [state, dispatch] = useReducer(reducer, initialUser);
 
     const clearUser = useCallback(() => {
@@ -102,16 +100,12 @@ 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/useNetwork.jsx

@@ -1,29 +1,5 @@
 import {useEffect, useState} from "react";
 
-function getNetworkConnection() {
-    return (
-        navigator.connection ||
-        navigator.mozConnection ||
-        navigator.webkitConnection ||
-        null
-    );
-}
-
-function getNetworkConnectionInfo() {
-    const connection = getNetworkConnection();
-    if (!connection) {
-        return {};
-    }
-    return {
-        rtt: connection.rtt,
-        type: connection.type,
-        saveData: connection.saveData,
-        downLink: connection.downLink,
-        downLinkMax: connection.downLinkMax,
-        effectiveType: connection.effectiveType,
-    };
-}
-
 function useNetwork() {
     const [state, setState] = useState(() => {
         return {
@@ -51,7 +27,7 @@ function useNetwork() {
             window.removeEventListener("offline", handleOffline);
         };
     }, []);
-    
+
     return state;
 }
 

src/lib/app/hooks/usePermissions.jsx

@@ -0,0 +1,26 @@
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+import {GET_PERMISSIONS_LIST} from "@/core/data/apiRoutes";
+
+const usePermissions = () => {
+    const requestServer = useRequest({auth: true, notification: false})
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then((response) => {
+            return response.data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, isLoading} = useSWR(GET_PERMISSIONS_LIST, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        keepPreviousData : true
+    })
+    const permissions_list = data
+    //swr config
+
+    // render data
+    return {permissions_list, isLoading}
+}
+export default usePermissions;

src/lib/callWidget/contexts/answers.jsx

@@ -0,0 +1,31 @@
+import {createContext, useReducer, useState} from "react";
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case "CHANGE_ACTIVE_TAB":
+            return state.map((answer, index) => action.newValue === index ? {...answer, active: true} : {
+                ...answer,
+                active: false
+            });
+        case "CHANGE_LIST":
+            return [...action.newList]
+        default:
+            return state;
+    }
+}
+export const AnswersContext = createContext()
+export const AnswersProvider = ({children}) => {
+    const [openCallDialog, setOpenCallDialog] = useState(false)
+    const [activeTab, setActiveTab] = useState(0)
+    const [state, dispatch] = useReducer(reducer, []);
+
+    return <AnswersContext.Provider
+        value={{
+            openCallDialog,
+            setOpenCallDialog,
+            state,
+            dispatch,
+            activeTab,
+            setActiveTab
+        }}>{children}</AnswersContext.Provider>
+}

src/lib/callWidget/hooks/useAnswers.jsx

@@ -0,0 +1,37 @@
+import {useContext} from "react";
+import {AnswersContext} from "@/lib/callWidget/contexts/answers";
+
+const useAnswers = () => {
+    const {state, dispatch, activeTab, setActiveTab} = useContext(AnswersContext)
+
+    const changeActiveTabAnswers = (newValue) => {
+        dispatch({type: 'CHANGE_ACTIVE_TAB', newValue})
+        setActiveTab(newValue)
+    }
+    const newAnswerTab = (data) => {
+        const newAnswer = {
+            id: data.id,
+            phone_number: data.phone_number,
+            active: true
+        }
+        const newList = [...state, newAnswer]
+        dispatch({type: 'CHANGE_LIST', newList})
+        changeActiveTabAnswers(newList.length - 1)
+    }
+
+    const closeAnswerTab = (id) => {
+        const index = state.findIndex(answer => answer.id === id)
+        const newIndex = index === 0 ? 0 : index - 1
+        const newList = [...state]
+        newList.splice(index, 1);
+        if (newList.length !== 0) {
+            newList[newIndex].active = true
+            setActiveTab(newIndex)
+        }
+        dispatch({type: 'CHANGE_LIST', newList})
+    }
+
+    return {answersList: state, activeTab, setActiveTab, changeActiveTabAnswers, closeAnswerTab, newAnswerTab}
+}
+
+export default useAnswers

src/lib/callWidget/hooks/useCallDialog.jsx

@@ -0,0 +1,10 @@
+import {useContext} from "react";
+import {AnswersContext} from "@/lib/callWidget/contexts/answers";
+
+const useCallDialog = () => {
+    const {openCallDialog, setOpenCallDialog} = useContext(AnswersContext)
+
+    return {openCallDialog, setOpenCallDialog}
+}
+
+export default useCallDialog