CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CFE-26 finall change and set real time

Browse Source
This commit is contained in:
Amin Ghasempoor
2023-10-17 16:54:34 +03:30
parent eba943b845
commit 9642f61c8d
11 changed files with 93 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
mocks/handler.js
View File

@@ -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))
})
]

33
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx
View File

@@ -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 (
<Stack direction="row" justifyContent="center" alignItems="center" spacing={3}>
<VisibilityIcon />
<Stack alignItems={"start"}>
<Stack direction = "row" justifyContent = "center" alignItems = "center" spacing = {3}>
<CallIcon/>
<Stack alignItems = {"start"}>
<Typography>{tab.phone_number}</Typography>
{
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)
)
)
}
<CallTabTime realTimeDate = {tab.date}/>
</Stack>
</Stack>
)

29
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabTime.jsx Normal file
View File

@@ -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 (
<Typography variant = "caption"
color = "gray">{date}</Typography>
)
}
export default CallTabTime

41
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js
View File

@@ -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(
<MockAppWithProviders>
<CallTabDetails tab={tab}/>
<CallTabDetails tab = {tab}/>
</MockAppWithProviders>
)
const phoneNumberElement = screen.getByText("09134849737")
await waitFor(()=>{
await waitFor(() => {
expect(phoneNumberElement).toHaveTextContent("09134849737")
})
});
it('Should see the date on tab detail', async () => {
render(
<MockAppWithProviders>
<CallTabDetails tab={tab}/>
</MockAppWithProviders>
)
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(
<MockAppWithProviders>
<CallTabDetails tab={tab1}/>
</MockAppWithProviders>
)
const errorElement = await screen.findByText("خطا در برقراری ارتباط")
await waitFor(()=>{
expect(errorElement).toBeInTheDocument()
})
});
})
})

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabTime.test.js Normal file
View File

@@ -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(
<MockAppWithProviders>
<CallTabTime realTimeDate = {tab.date}/>
</MockAppWithProviders>
)
await waitFor(() => {
expect(screen.getByText(/ثانیه پیش/i)).toBeInTheDocument()
})
});
})
})

0
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTableLabel.test.js
View File

19
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/index.jsx
View File

@@ -10,19 +10,20 @@ const CallTabsList = () => {
};
return (
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<Box sx = {{borderBottom: 1, borderColor: 'divider'}}>
<Tabs
value={activeTab}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
sx={{background: "#e0e0e0"}}
value = {activeTab}
onChange = {handleChange}
variant = "scrollable"
scrollButtons = "auto"
sx = {{background: "#e0e0e0"}}
>
{answersList.map((answer, index) => (
<Tab component={'div'} sx={{
<Tab component = {'div'} sx = {{
width: 350, p: 0, py: 0.5, background: answer.active ? "#fff" : null,
borderTopRightRadius: answer.active ? "16px" : 0, borderTopLeftRadius: answer.active ? "16px" : 0
}} label={<CallTabLabel index={index} tab={answer}/>} key={answer.id}/>
borderTopRightRadius: answer.active ? "16px" : 0,
borderTopLeftRadius: answer.active ? "16px" : 0,
}} label = {<CallTabLabel index = {index} tab = {answer}/>} key = {answer.id}/>
))}
</Tabs>
</Box>

4
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
View File

@@ -38,8 +38,8 @@ const CallWidgetDialog = () => {
return (
<Dialog
fullScreen
open={openCallDialog}
TransitionComponent={DialogTransition}
open = {openCallDialog}
TransitionComponent = {DialogTransition}
>
<CallTabs/>
</Dialog>

32
src/lib/callWidget/contexts/answers.jsx
View File

@@ -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 <AnswersContext.Provider
value={{
value = {{
openCallDialog,
setOpenCallDialog,
state,

24
src/lib/callWidget/hooks/useAnswer.jsx
View File

@@ -1,24 +0,0 @@
import useRequest from "@/lib/app/hooks/useRequest";
import useSWR from "swr";
import {GET_TAB_DETAILS} from "@/core/data/apiRoutes";
const useAnswer = (id) => {
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;

1
src/lib/callWidget/hooks/useAnswers.jsx
View File

@@ -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]