CFE-26 finall change and set real time
This commit is contained in:
@@ -90,21 +90,4 @@ export const handler = [
|
||||
),
|
||||
);
|
||||
}),
|
||||
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))
|
||||
|
||||
})
|
||||
]
|
||||
@@ -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 />
|
||||
<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>
|
||||
)
|
||||
|
||||
@@ -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
|
||||
@@ -2,9 +2,11 @@ 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
|
||||
id: 1,
|
||||
date: new Date()
|
||||
}
|
||||
|
||||
describe("Call Tab Details from Call Tan List", () => {
|
||||
@@ -20,31 +22,6 @@ describe("Call Tab Details from Call Tan List", ()=>{
|
||||
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()
|
||||
})
|
||||
});
|
||||
|
||||
})
|
||||
})
|
||||
@@ -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()
|
||||
})
|
||||
});
|
||||
})
|
||||
})
|
||||
@@ -21,7 +21,8 @@ const CallTabsList = () => {
|
||||
{answersList.map((answer, index) => (
|
||||
<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
|
||||
borderTopRightRadius: answer.active ? "16px" : 0,
|
||||
borderTopLeftRadius: answer.active ? "16px" : 0,
|
||||
}} label = {<CallTabLabel index = {index} tab = {answer}/>} key = {answer.id}/>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
@@ -17,35 +17,7 @@ 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 = {{
|
||||
|
||||
@@ -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;
|
||||
@@ -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]
|
||||
|
||||
Reference in New Issue
Block a user