From 9642f61c8d252c68992b5a90b20959a12ac4b73e Mon Sep 17 00:00:00 2001 From: Amin Ghasempoor Date: Tue, 17 Oct 2023 16:54:34 +0330 Subject: [PATCH] CFE-26 finall change and set real time --- mocks/handler.js | 31 ++++---------- .../CallTabs/callTabsList/CallTabDetails.jsx | 33 ++++----------- .../CallTabs/callTabsList/CallTabTime.jsx | 29 +++++++++++++ .../__test__/CallTabDetails.test.js | 41 ++++--------------- .../callTabsList/__test__/CallTabTime.test.js | 25 +++++++++++ .../__test__/CallTableLabel.test.js | 0 .../CallTabs/callTabsList/index.jsx | 19 +++++---- .../CallWidget/CallWidgetDialog/index.jsx | 4 +- src/lib/callWidget/contexts/answers.jsx | 32 +-------------- src/lib/callWidget/hooks/useAnswer.jsx | 24 ----------- src/lib/callWidget/hooks/useAnswers.jsx | 1 + 11 files changed, 93 insertions(+), 146 deletions(-) create mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabTime.jsx create mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabTime.test.js delete mode 100644 src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTableLabel.test.js delete mode 100644 src/lib/callWidget/hooks/useAnswer.jsx diff --git a/mocks/handler.js b/mocks/handler.js index 4610bec..91215d2 100644 --- a/mocks/handler.js +++ b/mocks/handler.js @@ -10,9 +10,9 @@ import {rest} from "msw"; export const handler = [ rest.get(GET_USER_ROUTE, (req, res, ctx) => { return res(ctx.json({ - data:{ + data: { id: 10, - permissions:[ + permissions: [ "manage_users" ], } @@ -26,7 +26,7 @@ export const handler = [ rest.get(GET_PERMISSIONS_LIST, (req, res, ctx) => { return res(ctx.json( { - data:[ + data: [ { id: 1, name: "manage_passenger_office_navgan", @@ -35,7 +35,7 @@ export const handler = [ { id: 2, name: "manage_province_working_group_navgan", - name_fa:"مدیریت کارتابل کارگروه استانی" + name_fa: "مدیریت کارتابل کارگروه استانی" } ] } @@ -45,7 +45,7 @@ export const handler = [ return res( ctx.json( { - data : [ + data: [ { created_at: "2023-10-01T07:20:07.000000Z", guard_name: "api", @@ -83,28 +83,11 @@ export const handler = [ updated_at: "2023-10-10T07:38:12.000000Z" } ], - meta : { - totalRowCount : 2 + meta: { + totalRowCount: 2 } } ), ); }), - rest.get(`${GET_TAB_DETAILS}/:id`, (req,res, ctx) =>{ - const {id} = req.params - if(id == 1){ - return res( - ctx.json( - { - data : { - phone_number : "09134849737", - date : "2023-10-10T13:03:18.000000Z" - } - } - ) - ) - } - return res(ctx.status(404)) - - }) ] \ No newline at end of file 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 dbd1e1d..c92d2df 100644 --- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx +++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx @@ -1,32 +1,15 @@ -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"; +import {Stack, Typography} from "@mui/material"; +import CallIcon from '@mui/icons-material/Call'; +import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabTime"; const CallTabDetails = ({tab}) => { - const t = useTranslations(); - const {data, isLoading, error} = useAnswer(tab.id) - const dateChange = (date) => { - moment.relativeTimeThreshold('s', 60); - return moment(date).locale("fa").fromNow() - } + return ( - - - + + + {tab.phone_number} - { - isLoading ? ( - - ):( - error ? ( - {t("CallTabDetails.error_use_answer")} - ): ( - 5 روز پیش //dateChange(data.date) - ) - ) - } + ) diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabTime.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabTime.jsx new file mode 100644 index 0000000..5d627e4 --- /dev/null +++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabTime.jsx @@ -0,0 +1,29 @@ +import {Typography} from "@mui/material"; +import {useEffect, useState} from "react"; +import moment from "jalali-moment"; +import useLanguage from "@/lib/app/hooks/useLanguage"; + +const CallTabTime = ({realTimeDate}) => { + const {languageApp} = useLanguage() + const [date, setDate] = useState('...') + const changeTabTime = (tabTime) => { + moment.relativeTimeThreshold('ss', 1) + return moment(tabTime).locale(languageApp).fromNow() + } + + useEffect(() => { + const timer = setInterval(() => { + setDate(changeTabTime(realTimeDate)) + }, 1000) + + return () => { + clearInterval(timer) + } + }, [realTimeDate]); + + return ( + {date} + ) +} +export default CallTabTime \ No newline at end of file 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 707ae3f..1cdf1fc 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 @@ -2,49 +2,26 @@ import {render, screen, waitFor} from "@testing-library/react"; import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider"; import CallTabDetails from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails"; + const tab = { - phone_number : "09134849737", - id : 1 + phone_number: "09134849737", + id: 1, + date: new Date() } -describe("Call Tab Details from Call Tan List", ()=>{ - describe("Rendering", ()=>{ +describe("Call Tab Details from Call Tan List", () => { + describe("Rendering", () => { it('Should see the phone number on tab detail', async () => { render( - + ) const phoneNumberElement = screen.getByText("09134849737") - await waitFor(()=>{ + await waitFor(() => { expect(phoneNumberElement).toHaveTextContent("09134849737") }) }); - it('Should see the date on tab detail', async () => { - render( - - - - ) - const dateElement = screen.queryByText("5 روز پیش") - await waitFor(()=>{ - expect(dateElement).toHaveTextContent("5 روز پیش") - }) - }); - it('Should see the error message if error happen', async () => { - const tab1 = { - phone_number : "09134849737", - id : 2 - } - render( - - - - ) - const errorElement = await screen.findByText("خطا در برقراری ارتباط") - await waitFor(()=>{ - expect(errorElement).toBeInTheDocument() - }) - }); + }) }) \ No newline at end of file diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabTime.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabTime.test.js new file mode 100644 index 0000000..3a32640 --- /dev/null +++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabTime.test.js @@ -0,0 +1,25 @@ +import {render, screen, waitFor} from "@testing-library/react"; +import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabTime"; +import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider"; + +const tab = { + phone_number: "09134849737", + id: 1, + date: new Date() +} + +describe("Call Tab Details from Call Tan List", () => { + describe("Rendering", () => { + it('Should see the date on tab detail', async () => { + render( + + + + ) + + await waitFor(() => { + expect(screen.getByText(/ثانیه پیش/i)).toBeInTheDocument() + }) + }); + }) +}) \ No newline at end of file diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTableLabel.test.js b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTableLabel.test.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx index 898e729..ff26544 100644 --- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx +++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx @@ -10,19 +10,20 @@ const CallTabsList = () => { }; return ( - + {answersList.map((answer, index) => ( - } key={answer.id}/> + borderTopRightRadius: answer.active ? "16px" : 0, + borderTopLeftRadius: answer.active ? "16px" : 0, + }} label = {} key = {answer.id}/> ))} diff --git a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx index 728f68d..e7d4278 100644 --- a/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx +++ b/src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx @@ -38,8 +38,8 @@ const CallWidgetDialog = () => { return ( diff --git a/src/lib/callWidget/contexts/answers.jsx b/src/lib/callWidget/contexts/answers.jsx index 86033b2..b5c9c0b 100644 --- a/src/lib/callWidget/contexts/answers.jsx +++ b/src/lib/callWidget/contexts/answers.jsx @@ -17,38 +17,10 @@ export const AnswersContext = createContext() export const AnswersProvider = ({children}) => { const [openCallDialog, setOpenCallDialog] = useState(false) const [activeTab, setActiveTab] = useState(0) - const [state, dispatch] = useReducer(reducer, [{ - id:45, - phone_number:'09120630676', - active:false - }, { - id:50, - phone_number:'09120630675', - active:false - }, { - id:55, - phone_number:'09120630672', - active:false - }, { - id:60, - phone_number:'09120630672', - active:false - }, { - id:65, - phone_number:'09120630672', - active:false - }, { - id:70, - phone_number:'09120630672', - active:false - }, { - id:75, - phone_number:'09120630672', - active:true - }]); + const [state, dispatch] = useReducer(reducer, []); return { - const requestServer = useRequest({auth: true, notification: false}) - const fetcher = (...args) => { - return requestServer(args, 'get').then((response) => { - return response.data.data; - }) - }; - - const {data, error, isLoading} = useSWR(`${GET_TAB_DETAILS}/${id}`, fetcher, { - revalidateIfStale: false, - revalidateOnFocus: false, - revalidateOnReconnect: false, - keepPreviousData : true - }) - //swr config - - // render data - return {data, isLoading, error} -} -export default useAnswer; \ No newline at end of file diff --git a/src/lib/callWidget/hooks/useAnswers.jsx b/src/lib/callWidget/hooks/useAnswers.jsx index f530e36..68f8b46 100644 --- a/src/lib/callWidget/hooks/useAnswers.jsx +++ b/src/lib/callWidget/hooks/useAnswers.jsx @@ -12,6 +12,7 @@ const useAnswers = () => { const newAnswer = { id: data.id, phone_number: data.phone_number, + date: new Date(), active: true } const newList = [...state, newAnswer]