CFE-25 change structure call widget

src/components/layouts/Dashboard/CallWidget/CallWidgetButton.jsx

@@ -1,15 +0,0 @@
-import PermPhoneMsgIcon from '@mui/icons-material/PermPhoneMsg';
-import StyledFab from "@/core/components/StyledFab";
-import useCallDialog from "@/lib/callWidget/hooks/useCallDialog";
-
-const CallWidgetButton = () => {
-    const {setOpenCallDialog} = useCallDialog()
-    return (
-        <StyledFab color="primary" aria-label="open-dialog"
-                   onClick={() => setOpenCallDialog(true)}>
-            <PermPhoneMsgIcon/>
-        </StyledFab>
-    )
-}
-
-export default CallWidgetButton

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx

@@ -0,0 +1,10 @@
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+const CallActions = () => {
+    const {answer} = useAnswers()
+    return (
+        <>CallActions - {answer.id}</>
+    )
+}
+
+export default CallActions

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx

@@ -0,0 +1,10 @@
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+const CallHistory = () => {
+    const {answer} = useAnswers()
+    return (
+        <>CallHistory - {answer.id}</>
+    )
+}
+
+export default CallHistory

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx

@@ -0,0 +1,18 @@
+import {Grid} from "@mui/material";
+import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions";
+import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory";
+
+const CallPanel = () => {
+    return (
+        <Grid container columns={{xs: 3}}>
+            <Grid item xs={2}>
+                <CallActions/>
+            </Grid>
+            <Grid item xs={1}>
+                <CallHistory/>
+            </Grid>
+        </Grid>
+    )
+}
+
+export default CallPanel

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx

@@ -1,7 +0,0 @@
-const CallActions = ({tab}) => {
-    return (
-        <>CallActions - {tab.id}</>
-    )
-}
-
-export default CallActions

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx

@@ -1,7 +0,0 @@
-const CallHistory = ({tab}) => {
-    return (
-        <>CallHistory - {tab.id}</>
-    )
-}
-
-export default CallHistory

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx

@@ -1,19 +0,0 @@
-import {Grid} from "@mui/material";
-import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions";
-import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory";
-
-const CallTabPanel = ({tab}) => {
-    return (
-        <Grid container columns={{xs: 3}} sx={{display: !tab.active && 'none'}} role="tabpanel"
-              id={`answer-tabpanel-${tab.id}`} aria-labelledby={`answer-tab-${tab.id}`}>
-            <Grid item xs={2}>
-                <CallActions tab={tab}/>
-            </Grid>
-            <Grid item xs={1}>
-                <CallHistory tab={tab}/>
-            </Grid>
-        </Grid>
-    )
-}
-
-export default CallTabPanel

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx

@@ -1,23 +0,0 @@
-import {IconButton, Stack, Typography, Zoom} from "@mui/material";
-import CloseIcon from '@mui/icons-material/Close';
-import useAnswers from "@/lib/callWidget/hooks/useAnswers";
-
-const CallTabLabel = ({tab}) => {
-    const {closeAnswerTab} = useAnswers()
-    const handleCloseClick = (id) => {
-        closeAnswerTab(id)
-    };
-
-    return (
-        <Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
-            <Typography>{tab.phone_number} - {tab.id}</Typography>
-            <Zoom in={tab.active}>
-                <IconButton onClick={() => handleCloseClick(tab.id)}>
-                    <CloseIcon/>
-                </IconButton>
-            </Zoom>
-        </Stack>
-    )
-}
-
-export default CallTabLabel

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx

@@ -1,27 +0,0 @@
-import {Box, Tab, Tabs} from "@mui/material";
-import CallTabLabel
-    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel";
-import useAnswers from "@/lib/callWidget/hooks/useAnswers";
-
-const CallTabsList = () => {
-    const {answersList, changeActiveTabAnswers, activeTab} = useAnswers()
-    const handleChange = (event, newValue) => {
-        changeActiveTabAnswers(newValue)
-    };
-
-    return (
-        <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
-            <Tabs
-                value={activeTab}
-                onChange={handleChange}
-                variant={'fullWidth'}
-            >
-                {answersList.map((answer) => (
-                    <Tab component={'div'} sx={{py: 0.5, pr: 0,}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
-                ))}
-            </Tabs>
-        </Box>
-    )
-}
-
-export default CallTabsList

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx

@@ -1,17 +0,0 @@
-import CallTabsList from "src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList";
-import CallTabPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel";
-import useAnswers from "@/lib/callWidget/hooks/useAnswers";
-
-const CallTabs = () => {
-    const {answersList} = useAnswers()
-
-    return (
-        <>
-            <CallTabsList/>
-            {answersList.map((answer) => (
-                <CallTabPanel key={answer.id} tab={answer}/>
-            ))}
-        </>
-    )
-}
-export default CallTabs

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx

@@ -2,18 +2,19 @@ import {Dialog} from "@mui/material";
 import {DialogTransition} from "@/core/components/DialogTransition";
 import {useEffect} from "react";
 import useCallDialog from "@/lib/callWidget/hooks/useCallDialog";
-import CallTabs from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs";
 import useAnswers from "@/lib/callWidget/hooks/useAnswers";
 import useSocket from "@/lib/app/hooks/useSocket";
+import CallPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel";
 
 const CallWidgetDialog = () => {
     const {openCallDialog, setOpenCallDialog} = useCallDialog()
-    const {answersList, newAnswerTab} = useAnswers()
+    const {answer, newAnswer} = useAnswers()
     const socket = useSocket()
 
     useEffect(() => {
-        const answerCall = (data, act) => {
+        const answerCall = (_data, act) => {
-            newAnswerTab({
+            const data = JSON.parse(_data)
+            newAnswer({
                 id: data.id,
                 phone_number: data.phone_number
             })
@@ -24,15 +25,15 @@ const CallWidgetDialog = () => {
         return () => {
             socket.off('answer', answerCall)
         }
-    }, []);
+    });
 
     useEffect(() => {
-        if (answersList.length === 0) {
+        if (answer) {
-            setOpenCallDialog(false)
+            setOpenCallDialog(true)
             return
         }
-        setOpenCallDialog(true)
+        setOpenCallDialog(false)
-    }, [answersList.length]);
+    }, [answer]);
 
     return (
         <Dialog
@@ -40,7 +41,9 @@ const CallWidgetDialog = () => {
             open={openCallDialog}
             TransitionComponent={DialogTransition}
         >
-            <CallTabs/>
+            {answer && (
+                <CallPanel/>
+            )}
         </Dialog>
     )
 }

src/components/layouts/Dashboard/CallWidget/index.jsx

@@ -1,4 +1,3 @@
-import CallWidgetButton from "@/components/layouts/Dashboard/CallWidget/CallWidgetButton";
 import CallWidgetDialog from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog";
 import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
 import useSocket from "@/lib/app/hooks/useSocket";
@@ -19,7 +18,6 @@ const CallWidget = () => {
 
     return (
         <AnswersProvider>
-            <CallWidgetButton/>
             <CallWidgetDialog/>
         </AnswersProvider>
     )

src/core/components/LoadingHardPage.jsx

@@ -23,7 +23,7 @@ const LoadingHardPage = ({children, loading}) => {
     return (
         <>
             <Backdrop
-                sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1}}
+                sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.modal + 1}}
                 open={loading}
             >
                 <LoadingImage

src/lib/callWidget/contexts/answers.jsx

@@ -2,13 +2,10 @@ import {createContext, useReducer, useState} from "react";
 
 const reducer = (state, action) => {
     switch (action.type) {
-        case "CHANGE_ACTIVE_TAB":
+        case "CREATE_ANSWER":
-            return state.map((answer, index) => action.newValue === index ? {...answer, active: true} : {
+            return {...action.data}
-                ...answer,
+        case "DELETE_ANSWER":
-                active: false
+            return null
-            });
-        case "CHANGE_LIST":
-            return [...action.newList]
         default:
             return state;
     }
@@ -16,8 +13,7 @@ const reducer = (state, action) => {
 export const AnswersContext = createContext()
 export const AnswersProvider = ({children}) => {
     const [openCallDialog, setOpenCallDialog] = useState(false)
-    const [activeTab, setActiveTab] = useState(0)
+    const [state, dispatch] = useReducer(reducer, null);
-    const [state, dispatch] = useReducer(reducer, []);
 
     return <AnswersContext.Provider
         value={{
@@ -25,7 +21,5 @@ export const AnswersProvider = ({children}) => {
             setOpenCallDialog,
             state,
             dispatch,
-            activeTab,
-            setActiveTab
         }}>{children}</AnswersContext.Provider>
 }

src/lib/callWidget/hooks/useAnswers.jsx

@@ -2,37 +2,16 @@ import {useContext} from "react";
 import {AnswersContext} from "@/lib/callWidget/contexts/answers";
 
 const useAnswers = () => {
-    const {state, dispatch, activeTab, setActiveTab} = useContext(AnswersContext)
+    const {state, dispatch} = useContext(AnswersContext)
 
-    const changeActiveTabAnswers = (newValue) => {
+    const newAnswer = (data) => {
-        dispatch({type: 'CHANGE_ACTIVE_TAB', newValue})
+        dispatch({type: 'CREATE_ANSWER', data})
-        setActiveTab(newValue)
+    }
+    const deleteAnswer = () => {
+        dispatch({type: 'DELETE_ANSWER'})
     }
 
-    const newAnswerTab = (data) => {
+    return {answer: state, newAnswer, deleteAnswer}
-        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