From a3ee52632f8d2affc006f7cffff2b0a54836a6b3 Mon Sep 17 00:00:00 2001
From: AmirHossein Mahmoodi <amir.mahmoodi74@gmail.com>
Date: Wed, 11 Oct 2023 13:10:30 +0330
Subject: [PATCH] CFE-25 change structure call widget

---
 .../Dashboard/CallWidget/CallWidgetButton.jsx | 15 --------
 .../CallPanel/CallActions/index.jsx           | 10 ++++++
 .../CallPanel/CallHistory/index.jsx           | 10 ++++++
 .../CallWidgetDialog/CallPanel/index.jsx      | 18 ++++++++++
 .../CallTabPanel/CallActions/index.jsx        |  7 ----
 .../CallTabPanel/CallHistory/index.jsx        |  7 ----
 .../CallTabs/CallTabPanel/index.jsx           | 19 ----------
 .../CallTabs/CallTabsList/CallTabLabel.jsx    | 23 ------------
 .../CallTabs/CallTabsList/index.jsx           | 27 --------------
 .../CallWidgetDialog/CallTabs/index.jsx       | 17 ---------
 .../CallWidget/CallWidgetDialog/index.jsx     | 23 ++++++------
 .../layouts/Dashboard/CallWidget/index.jsx    |  2 --
 src/core/components/LoadingHardPage.jsx       |  2 +-
 src/lib/callWidget/contexts/answers.jsx       | 16 +++------
 src/lib/callWidget/hooks/useAnswers.jsx       | 35 ++++---------------
 15 files changed, 64 insertions(+), 167 deletions(-)
 delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetButton.jsx
 create mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx
 create mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx
 create mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx
 delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx
 delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
 delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
 delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx
 delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx
 delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx

diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetButton.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetButton.jsx
deleted file mode 100644
index 76af95c..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetButton.jsx
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx
new file mode 100644
index 0000000..c7058fe
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx
new file mode 100644
index 0000000..ed053d2
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx
new file mode 100644
index 0000000..9fa1b72
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx
deleted file mode 100644
index 5b9326f..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-const CallActions = ({tab}) => {
-    return (
-        <>CallActions - {tab.id}</>
-    )
-}
-
-export default CallActions
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
deleted file mode 100644
index 292c640..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-const CallHistory = ({tab}) => {
-    return (
-        <>CallHistory - {tab.id}</>
-    )
-}
-
-export default CallHistory
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
deleted file mode 100644
index 79dc736..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/index.jsx
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx
deleted file mode 100644
index 7a9b703..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx
deleted file mode 100644
index 70fccd9..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx
deleted file mode 100644
index 4e1d2f1..0000000
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
index 5afb0a1..84e443c 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
+++ b/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) => {
-            newAnswerTab({
+        const answerCall = (_data, act) => {
+            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) {
-            setOpenCallDialog(false)
+        if (answer) {
+            setOpenCallDialog(true)
             return
         }
-        setOpenCallDialog(true)
-    }, [answersList.length]);
+        setOpenCallDialog(false)
+    }, [answer]);
 
     return (
         <Dialog
@@ -40,7 +41,9 @@ const CallWidgetDialog = () => {
             open={openCallDialog}
             TransitionComponent={DialogTransition}
         >
-            <CallTabs/>
+            {answer && (
+                <CallPanel/>
+            )}
         </Dialog>
     )
 }
diff --git a/src/components/layouts/Dashboard/CallWidget/index.jsx b/src/components/layouts/Dashboard/CallWidget/index.jsx
index d6fe5a0..1480498 100644
--- a/src/components/layouts/Dashboard/CallWidget/index.jsx
+++ b/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>
     )
diff --git a/src/core/components/LoadingHardPage.jsx b/src/core/components/LoadingHardPage.jsx
index c3b24d6..4bbdbf4 100644
--- a/src/core/components/LoadingHardPage.jsx
+++ b/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
diff --git a/src/lib/callWidget/contexts/answers.jsx b/src/lib/callWidget/contexts/answers.jsx
index a9f7ae2..adbca5c 100644
--- a/src/lib/callWidget/contexts/answers.jsx
+++ b/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":
-            return state.map((answer, index) => action.newValue === index ? {...answer, active: true} : {
-                ...answer,
-                active: false
-            });
-        case "CHANGE_LIST":
-            return [...action.newList]
+        case "CREATE_ANSWER":
+            return {...action.data}
+        case "DELETE_ANSWER":
+            return null
         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, []);
+    const [state, dispatch] = useReducer(reducer, null);
 
     return <AnswersContext.Provider
         value={{
@@ -25,7 +21,5 @@ export const AnswersProvider = ({children}) => {
             setOpenCallDialog,
             state,
             dispatch,
-            activeTab,
-            setActiveTab
         }}>{children}</AnswersContext.Provider>
 }
diff --git a/src/lib/callWidget/hooks/useAnswers.jsx b/src/lib/callWidget/hooks/useAnswers.jsx
index 2155cd7..ec606db 100644
--- a/src/lib/callWidget/hooks/useAnswers.jsx
+++ b/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) => {
-        dispatch({type: 'CHANGE_ACTIVE_TAB', newValue})
-        setActiveTab(newValue)
+    const newAnswer = (data) => {
+        dispatch({type: 'CREATE_ANSWER', data})
+    }
+    const deleteAnswer = () => {
+        dispatch({type: 'DELETE_ANSWER'})
     }
 
-    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}
+    return {answer: state, newAnswer, deleteAnswer}
 }
 
 export default useAnswers
\ No newline at end of file