From eba943b8457f4fa30bbd92e8371ac1ac8f023d8f Mon Sep 17 00:00:00 2001
From: Amin Ghasempoor <aminghasempoor79@gmail.com>
Date: Tue, 17 Oct 2023 10:44:27 +0330
Subject: [PATCH] CFE-26 add skeleton and related test

---
 mocks/handler.js                              |  1 +
 public/locales/fa/app.json                    |  3 +++
 .../CallTabs/callTabsList/CallTabDetails.jsx  | 20 +++++++++----------
 .../__test__/CallTabDetails.test.js           | 15 ++++++++++++++
 src/lib/callWidget/hooks/useAnswer.jsx        |  1 -
 5 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/mocks/handler.js b/mocks/handler.js
index 1f4a712..4610bec 100644
--- a/mocks/handler.js
+++ b/mocks/handler.js
@@ -104,6 +104,7 @@ export const handler = [
                 )
             )
         }
+        return res(ctx.status(404))
 
     })
 ]
\ No newline at end of file
diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 9e28007..aee579e 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -188,5 +188,8 @@
     "button-cancel": "انصراف",
     "typography": "آیا از حدف این مورد اطمینان دارید ؟",
     "button-delete": "حذف کردن"
+  },
+  "CallTabDetails": {
+    "error_use_answer" : "خطا در برقراری ارتباط"
   }
 }
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx
index 574d4ca..dbd1e1d 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx
@@ -2,8 +2,10 @@ import {Skeleton, Stack, Typography} from "@mui/material";
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import useAnswer from "@/lib/callWidget/hooks/useAnswer";
 import moment from "jalali-moment";
+import {useTranslations} from "next-intl";
 
 const CallTabDetails = ({tab}) => {
+    const t = useTranslations();
     const {data, isLoading, error} = useAnswer(tab.id)
     const dateChange = (date) => {
         moment.relativeTimeThreshold('s', 60);
@@ -15,17 +17,15 @@ const CallTabDetails = ({tab}) => {
             <Stack alignItems={"start"}>
                 <Typography>{tab.phone_number}</Typography>
                 {
-                    error ? (
-                        <Typography variant="body1" color="error">errror</Typography>
-                        ):
-                        (
-                            isLoading ? (
-                                    <Skeleton variant="text" animation="wave"/>
-                                )
-                                :(
-                                    <Typography variant="caption" color="gray">5 روز پیش</Typography> //dateChange(data.date)
-                                )
+                    isLoading ? (
+                        <Skeleton width={100} animation="wave"/>
+                    ):(
+                        error ? (
+                            <Typography variant="caption" color="error">{t("CallTabDetails.error_use_answer")}</Typography>
+                        ): (
+                            <Typography variant="caption" color="gray">5 روز پیش</Typography> //dateChange(data.date)
                         )
+                    )
                 }
             </Stack>
         </Stack>
diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js
index f81920a..707ae3f 100644
--- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js
+++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js
@@ -31,5 +31,20 @@ describe("Call Tab Details from Call Tan List", ()=>{
                 expect(dateElement).toHaveTextContent("5 روز پیش")
             })
         });
+        it('Should see the error message if error happen', async () => {
+            const tab1 = {
+                phone_number : "09134849737",
+                id : 2
+            }
+            render(
+                <MockAppWithProviders>
+                    <CallTabDetails tab={tab1}/>
+                </MockAppWithProviders>
+            )
+            const errorElement = await screen.findByText("خطا در برقراری ارتباط")
+            await  waitFor(()=>{
+                expect(errorElement).toBeInTheDocument()
+            })
+        });
     })
 })
\ No newline at end of file
diff --git a/src/lib/callWidget/hooks/useAnswer.jsx b/src/lib/callWidget/hooks/useAnswer.jsx
index d0cf0b2..eefecaa 100644
--- a/src/lib/callWidget/hooks/useAnswer.jsx
+++ b/src/lib/callWidget/hooks/useAnswer.jsx
@@ -7,7 +7,6 @@ const useAnswer = (id) => {
     const fetcher = (...args) => {
         return requestServer(args, 'get').then((response) => {
             return response.data.data;
-        }).catch(() => {
         })
     };