install and handle casle & prevent page dashboard & handle register and code verfication & get data in clinics page
This commit is contained in:
@@ -1,15 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
import List from "./list";
|
||||
import { searchOnList } from "@/helper";
|
||||
import SearchBar from "./head/SearchBar";
|
||||
import clinics from "@/data/clinics.json";
|
||||
import HeadPageList from "@/app/component/head";
|
||||
|
||||
function ClinicsPage({ matchedCity, matchedState }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
function ClinicsPage({ clinics, matchedCity, matchedState }) {
|
||||
const [filteredClinics, setFilteredClinics] = useState(clinics);
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
@@ -17,12 +15,6 @@ function ClinicsPage({ matchedCity, matchedState }) {
|
||||
city: matchedCity?.name || "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
const handleSearch = (value) => {
|
||||
const searchOnName = searchOnList(clinics, value, "title");
|
||||
const searchOnLocation = searchOnList(searchOnName, selected.city, "city");
|
||||
@@ -42,7 +34,7 @@ function ClinicsPage({ matchedCity, matchedState }) {
|
||||
handleSearch={handleSearch}
|
||||
/>
|
||||
</HeadPageList>
|
||||
<List loading={loading} selected={selected} clinics={filteredClinics} />
|
||||
<List selected={selected} clinics={filteredClinics} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,20 +7,25 @@ import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function ItemClinic({ data, loading }) {
|
||||
function ItemClinic({ data }) {
|
||||
return (
|
||||
<li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<CircularLoading loading={loading} width={60} height={60}>
|
||||
<Image width={60} height={60} src={data.img} alt="img clinic" />
|
||||
<CircularLoading width={60} height={60}>
|
||||
<Image
|
||||
width={60}
|
||||
height={60}
|
||||
src={data.clinic_logo.url || ""}
|
||||
alt="img clinic"
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-2">
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<TextLoading width={100} height={18}>
|
||||
<h3 className="text-[#3B3B3B] text-[14px] font-bold">
|
||||
{data.title}
|
||||
{data.label}
|
||||
</h3>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<TextLoading width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.doctors} پزشک
|
||||
</p>
|
||||
@@ -30,7 +35,7 @@ function ItemClinic({ data, loading }) {
|
||||
<div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
|
||||
<div className="flex items-start justify-start gap-0.5">
|
||||
<LocationClinic />
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<TextLoading width={150} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
{data.location}
|
||||
</p>
|
||||
@@ -38,7 +43,7 @@ function ItemClinic({ data, loading }) {
|
||||
</div>
|
||||
<div className="flex items-start justify-start gap-0.5 ml-[64px]">
|
||||
<ClockClinic />
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<TextLoading width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
ساعت کاری: {data.hours_of_work}
|
||||
</p>
|
||||
@@ -47,13 +52,8 @@ function ItemClinic({ data, loading }) {
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<Link href={loading ? "#" : `/clinic/${data.id}`}>
|
||||
<Button
|
||||
className={`${
|
||||
loading ? "!bg-[#E7E7E7]" : "!bg-[#5559CE]"
|
||||
} !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit`}
|
||||
disabled={loading}
|
||||
>
|
||||
<Link href={`/clinic/${data.id}`}>
|
||||
<Button className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit">
|
||||
<ArrowLeftD />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@@ -2,7 +2,7 @@ import Pageguide from "@/app/component/Pageguide";
|
||||
import ItemClinic from "./ItemClinic";
|
||||
import Pagination from "@/app/component/Pagination";
|
||||
|
||||
function List({ loading, selected, clinics }) {
|
||||
function List({ selected, clinics }) {
|
||||
const listPage = ["کلینیک ها", selected?.city || ""];
|
||||
|
||||
return (
|
||||
@@ -18,7 +18,7 @@ function List({ loading, selected, clinics }) {
|
||||
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
|
||||
>
|
||||
{clinics.map((item) => (
|
||||
<ItemClinic data={item} key={item.id} loading={loading} />
|
||||
<ItemClinic data={item} key={item.id} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import PlusB from "@/components/icons/PlusB";
|
||||
import { Button } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
function AddBtn() {
|
||||
return (
|
||||
<Button
|
||||
className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
<PlusB />
|
||||
اضافه کردن
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddBtn;
|
||||
@@ -1,20 +1,12 @@
|
||||
import PlusB from "@/components/icons/PlusB";
|
||||
import { Button } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
function Head({ text }) {
|
||||
function Head({ text, children }) {
|
||||
return (
|
||||
<div className="w-full flex mb-[40px] items-center justify-between">
|
||||
<p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
|
||||
{text}
|
||||
</p>
|
||||
<Button
|
||||
className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
<PlusB />
|
||||
اضافه کردن
|
||||
</Button>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -36,8 +36,7 @@ function ContentTabs({
|
||||
const [tab, setTab] = useState(0);
|
||||
const data = profileData[0];
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
// setValue(newValue);
|
||||
const handleChange = (_, newValue) => {
|
||||
setTab(newValue);
|
||||
};
|
||||
|
||||
@@ -48,16 +47,6 @@ function ContentTabs({
|
||||
}, []);
|
||||
|
||||
const components = [
|
||||
// <DetailUser user={user} />,
|
||||
// <Turns
|
||||
// user={user}
|
||||
// loading={loading}
|
||||
// setIsTurnsDetails={setIsTurnsDetails}
|
||||
// />,
|
||||
// <Transactions user={user} loading={loading} />,
|
||||
// <Comments user={user} loading={loading} />,
|
||||
// <Messages user={user} loading={loading} />,
|
||||
// <NotfoundDashboard />,
|
||||
<Disease data={data} />,
|
||||
<Allergies data={data} />,
|
||||
<Medications data={data} />,
|
||||
|
||||
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
|
||||
import TrashB from "@/components/icons/TrashB";
|
||||
import { Button, TableCell, TableRow } from "@mui/material";
|
||||
import Head from "../../components/Head";
|
||||
import AddBtn from "../../components/AddBtn";
|
||||
|
||||
function Allergies({ data }) {
|
||||
const tableHead = ["ردیف", "ماده آلرژیزا", "واکنش", "شدت", ""];
|
||||
@@ -11,7 +12,9 @@ function Allergies({ data }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head text="لیست آلرژی ها" />
|
||||
<Head text="لیست آلرژی ها">
|
||||
<AddBtn />
|
||||
</Head>
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import EditB from "@/components/icons/EditB";
|
||||
import TrashB from "@/components/icons/TrashB";
|
||||
import { Button, Switch, TableCell, TableRow } from "@mui/material";
|
||||
import Head from "../../components/Head";
|
||||
import UpdateList from "@/components/icons/UpdateList";
|
||||
import AddBtn from "../../components/AddBtn";
|
||||
|
||||
function Disease({ data }) {
|
||||
const tableHead = ["ردیف", "اسم", "وضعیت", ""];
|
||||
@@ -11,7 +11,18 @@ function Disease({ data }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head text="لیست بیماری ها" />
|
||||
<Head text="لیست بیماری ها" add={false}>
|
||||
<div className="flex items-center justify-end gap-4">
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!border-[#5559CE] !border-[2px] !flex !items-center !justify-center !gap-2 !text-[14px] md:!text-[14px] !font-medium"
|
||||
>
|
||||
<UpdateList />
|
||||
آپدیت کردن
|
||||
</Button>
|
||||
<AddBtn />
|
||||
</div>
|
||||
</Head>
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
@@ -37,23 +48,9 @@ function Disease({ data }) {
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{/* {row.status} */}
|
||||
<Switch defaultChecked={row.status === "true"} />
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<div className="flex items-center justify-center gap-[4px]">
|
||||
<Button className="!min-w-fit !p-1" variant="text">
|
||||
<TrashB />
|
||||
</Button>
|
||||
<Button className="!min-w-fit !p-1" variant="text">
|
||||
<EditB />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
|
||||
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
|
||||
import TrashB from "@/components/icons/TrashB";
|
||||
import { Button, TableCell, TableRow } from "@mui/material";
|
||||
import Head from "../../components/Head";
|
||||
import AddBtn from "../../components/AddBtn";
|
||||
|
||||
function FamilyHistory({ data }) {
|
||||
const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""];
|
||||
@@ -11,7 +12,9 @@ function FamilyHistory({ data }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head text="لیست سابقه خانوادگی بیماری" />
|
||||
<Head text="لیست سابقه خانوادگی بیماری">
|
||||
<AddBtn />
|
||||
</Head>
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
|
||||
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
|
||||
import TrashB from "@/components/icons/TrashB";
|
||||
import { Button, TableCell, TableRow } from "@mui/material";
|
||||
import Head from "../../components/Head";
|
||||
import AddBtn from "../../components/AddBtn";
|
||||
|
||||
function Medications({ data }) {
|
||||
const tableHead = ["ردیف", "نام دارو", "دوز مصرفی", "تعداد و زمان مصرف", ""];
|
||||
@@ -11,7 +12,9 @@ function Medications({ data }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head text="لیست دارو های مصرفی" />
|
||||
<Head text="لیست دارو های مصرفی">
|
||||
<AddBtn />
|
||||
</Head>
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
|
||||
@@ -4,14 +4,17 @@ import EditB from "@/components/icons/EditB";
|
||||
import TrashB from "@/components/icons/TrashB";
|
||||
import { Button, TableCell, TableRow, Tooltip } from "@mui/material";
|
||||
import Head from "../../components/Head";
|
||||
import AddBtn from "../../components/AddBtn";
|
||||
|
||||
function Relatives({ data }) {
|
||||
const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "ایمیل", "آدرس", ""];
|
||||
const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
|
||||
const centerTable = [0];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head text="لیست بستگان" />
|
||||
<Head text="لیست بستگان">
|
||||
<AddBtn />
|
||||
</Head>
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
@@ -46,19 +49,7 @@ function Relatives({ data }) {
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{row.contact.email}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
|
||||
<Tooltip title={row.contact.address || ""} arrow>
|
||||
<div className="truncate max-w-[150px] cursor-default">
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{(row.contact.address || "").substring(0, 15)}
|
||||
{row.contact.address?.length > 15 ? "…" : ""}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{row.contact.address}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
|
||||
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
|
||||
import TrashB from "@/components/icons/TrashB";
|
||||
import { Button, TableCell, TableRow } from "@mui/material";
|
||||
import Head from "../../components/Head";
|
||||
import AddBtn from "../../components/AddBtn";
|
||||
|
||||
function Surgeries({ data }) {
|
||||
const tableHead = [
|
||||
@@ -17,7 +18,9 @@ function Surgeries({ data }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head text="لیست جراحی ها" />
|
||||
<Head text="لیست جراحی ها">
|
||||
<AddBtn />
|
||||
</Head>
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
|
||||
@@ -9,8 +9,6 @@ const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق
|
||||
function Content({ data, setData }) {
|
||||
const router = useRouter();
|
||||
const { parentList, childrenList } = filterList(data);
|
||||
console.log('parentList', parentList);
|
||||
|
||||
|
||||
const changeUrl = (value) => {
|
||||
const current = new URLSearchParams(window.location.search);
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
function UpdateList() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7.59206 4.23333C8.31706 4.01667 9.11706 3.875 10.0004 3.875C13.9921 3.875 17.2254 7.10833 17.2254 11.1C17.2254 15.0917 13.9921 18.325 10.0004 18.325C6.00872 18.325 2.77539 15.0917 2.77539 11.1C2.77539 9.61667 3.22539 8.23333 3.99206 7.08333"
|
||||
stroke="#5559CE"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.55859 4.43317L8.96693 1.6665"
|
||||
stroke="#5559CE"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.55859 4.43311L9.36693 6.48311"
|
||||
stroke="#5559CE"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default UpdateList;
|
||||
@@ -6,11 +6,10 @@ import {
|
||||
} from "@/helper";
|
||||
import { request } from "@/services/response";
|
||||
import { InputAdornment, Button } from "@mui/material";
|
||||
import axios from "axios";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
|
||||
function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity }) {
|
||||
const [error, setError] = useState({ valid: true, text: "" });
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -18,39 +17,17 @@ function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
|
||||
const formatted = formatPhoneNumber(val);
|
||||
const checkedNum = validatePhoneNumber(formatted);
|
||||
setError(checkedNum);
|
||||
const digits = formatted.replace(/\D/g, "");
|
||||
setNum(formatted);
|
||||
// if (digits.length === 9) {
|
||||
// handleReq();
|
||||
// }
|
||||
};
|
||||
const handleReq = async () => {
|
||||
// try {
|
||||
// const res = await axios.post(
|
||||
// "https://back-dev.clinic-pro.ir/api/v1/user/auth?_format=json",
|
||||
// { mobile_number: changeNumToDefault(num) },
|
||||
// {
|
||||
// withCredentials: true,
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// },
|
||||
// }
|
||||
// );
|
||||
// console.log(res);
|
||||
// if (res.data) {
|
||||
// setIsSendMsg(true);
|
||||
// }
|
||||
// } catch (err) {
|
||||
// console.error("Request failed:", err);
|
||||
// }
|
||||
setLoading(true);
|
||||
request
|
||||
.sendCode(changeNumToDefault(num))
|
||||
.sendCode(changeNumToDefault(num), "")
|
||||
.then((response) => {
|
||||
setLoading(false);
|
||||
if (response) {
|
||||
// setNum("");
|
||||
if (response.uuid) {
|
||||
setIsSendMsg(true);
|
||||
setUuid(response.uuid);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
@@ -7,23 +7,26 @@ import LayoutRegister from "./LayoutRegister";
|
||||
|
||||
function RegisterPage({ matchedCity }) {
|
||||
const [isSendMsg, setIsSendMsg] = useState(false);
|
||||
const [uuid, setUuid] = useState("");
|
||||
const [num, setNum] = useState("");
|
||||
|
||||
return (
|
||||
<LayoutRegister matchedCity={matchedCity}>
|
||||
{isSendMsg ? (
|
||||
<VerificationPage
|
||||
num={num}
|
||||
setIsSendMsg={setIsSendMsg}
|
||||
setStep={false}
|
||||
link="/"
|
||||
num={num}
|
||||
uuid={uuid}
|
||||
setStep={false}
|
||||
setIsSendMsg={setIsSendMsg}
|
||||
/>
|
||||
) : (
|
||||
<LogInPage
|
||||
matchedCity={matchedCity}
|
||||
num={num}
|
||||
setNum={setNum}
|
||||
setStep={false}
|
||||
setUuid={setUuid}
|
||||
matchedCity={matchedCity}
|
||||
setIsSendMsg={setIsSendMsg}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Button } from "@mui/material";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { request } from "@/services/response";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
function SendReq({
|
||||
loading,
|
||||
setLoading,
|
||||
code,
|
||||
setIsSendMsg,
|
||||
setStep,
|
||||
setIsError,
|
||||
uuid,
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
const handleSetCookie = (response) => {
|
||||
const accessTokenExpires = new Date();
|
||||
accessTokenExpires.setSeconds(
|
||||
accessTokenExpires.getSeconds() + response.expires_in
|
||||
);
|
||||
const refreshTokenExpires = new Date();
|
||||
refreshTokenExpires.setDate(refreshTokenExpires.getDate() + 30);
|
||||
|
||||
Cookies.set("access_token", response.access_token, {
|
||||
expires: accessTokenExpires,
|
||||
path: "/",
|
||||
secure: true,
|
||||
sameSite: "strict",
|
||||
});
|
||||
|
||||
Cookies.set("refresh_token", response.refresh_token, {
|
||||
expires: refreshTokenExpires,
|
||||
path: "/",
|
||||
secure: true,
|
||||
sameSite: "strict",
|
||||
});
|
||||
};
|
||||
|
||||
const handleReq = async () => {
|
||||
setLoading(true);
|
||||
request
|
||||
.getToken(
|
||||
"mobile",
|
||||
process.env.NEXT_PUBLIC_CLIENT_ID,
|
||||
process.env.NEXT_PUBLIC_CLIENT_SECRET,
|
||||
uuid,
|
||||
code.join("")
|
||||
)
|
||||
.then((response) => {
|
||||
setLoading(false);
|
||||
if (response.access_token) {
|
||||
router.replace("/");
|
||||
handleSetCookie(response);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
fullWidth
|
||||
loading={loading}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setIsSendMsg && setIsSendMsg(true);
|
||||
setStep && setStep((prev) => prev + 1);
|
||||
if (code.join("").length !== 5) {
|
||||
setIsError(true);
|
||||
} else {
|
||||
handleReq();
|
||||
}
|
||||
}}
|
||||
className="!rounded-[8px] !bg-[#5559CE]"
|
||||
>
|
||||
تایید
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default SendReq;
|
||||
@@ -1,25 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
import { Button } from "@mui/material";
|
||||
import OTPForm from "../element/OTPForm";
|
||||
import EditLogin from "../../icons/EditLogin";
|
||||
import ArrowRightS from "../../icons/ArrowRightS";
|
||||
import { request } from "@/services/response";
|
||||
import { changeNumToDefault } from "@/helper";
|
||||
import Recode from "./Recode";
|
||||
import SendReq from "./SendReq";
|
||||
|
||||
function VerificationPage({ setIsSendMsg, link, num, setStep }) {
|
||||
function VerificationPage({ setIsSendMsg, uuid, link, num, setStep }) {
|
||||
const retryIcon = useRef();
|
||||
|
||||
const [timer, setTimer] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [code, setCode] = useState(["", "", "", ""]);
|
||||
const [code, setCode] = useState(["", "", "", "", ""]);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const inputRefs = Array.from({ length: 5 }, () => useRef());
|
||||
|
||||
const handleChange = (index, val) => {
|
||||
const newCode = [...code];
|
||||
|
||||
if (val === "backspace") {
|
||||
newCode[index] = "";
|
||||
setCode(newCode);
|
||||
@@ -28,64 +28,16 @@ function VerificationPage({ setIsSendMsg, link, num, setStep }) {
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
newCode[index] = val;
|
||||
|
||||
if (newCode.join("").length === 4 && isError) {
|
||||
if (newCode.join("").length === 5 && isError) {
|
||||
setIsError(false);
|
||||
}
|
||||
// if (newCode.join("").length === 4) {
|
||||
// handleReq();
|
||||
// }
|
||||
|
||||
setCode(newCode);
|
||||
|
||||
if (val && index < inputRefs.length - 1) {
|
||||
inputRefs[index + 1].current?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleReq = async () => {
|
||||
// const formData = new URLSearchParams();
|
||||
// formData.append("grant_type", "mobile");
|
||||
// formData.append("client_id", process.env.NEXT_PUBLIC_CLIENT_ID);
|
||||
// formData.append("client_secret", process.env.NEXT_PUBLIC_CLIENT_SECRET);
|
||||
// formData.append("mobile_number", changeNumToDefault(num));
|
||||
// formData.append("code", code.join(""));
|
||||
|
||||
// try {
|
||||
// const res = await axios.post(
|
||||
// "https://back-dev.clinic-pro.ir/oauth/token",
|
||||
// formData,
|
||||
// {
|
||||
// withCredentials: true,
|
||||
// headers: {
|
||||
// "Content-Type": "application/x-www-form-urlencoded",
|
||||
// },
|
||||
// }
|
||||
// );
|
||||
// console.log(res);
|
||||
// } catch (err) {
|
||||
// console.error("Request failed:", err);
|
||||
// }
|
||||
|
||||
setLoading(true);
|
||||
request
|
||||
.getToken(
|
||||
"mobile",
|
||||
process.env.NEXT_PUBLIC_CLIENT_ID,
|
||||
process.env.NEXT_PUBLIC_CLIENT_SECRET,
|
||||
changeNumToDefault(num),
|
||||
code.join("")
|
||||
)
|
||||
.then((response) => {
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="rounded-[16px] opacity-page mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
|
||||
@@ -150,23 +102,15 @@ function VerificationPage({ setIsSendMsg, link, num, setStep }) {
|
||||
<Recode retryIcon={retryIcon} timer={timer} setTimer={setTimer} />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
fullWidth
|
||||
<SendReq
|
||||
code={code}
|
||||
uuid={uuid}
|
||||
loading={loading}
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
setIsSendMsg && setIsSendMsg(true);
|
||||
setStep && setStep((prev) => prev + 1);
|
||||
if (code.join("").length !== 4) {
|
||||
setIsError(true);
|
||||
} else {
|
||||
handleReq();
|
||||
}
|
||||
}}
|
||||
className="!rounded-[8px] !bg-[#5559CE]"
|
||||
>
|
||||
تایید
|
||||
</Button>
|
||||
setStep={setStep}
|
||||
setIsError={setIsError}
|
||||
setLoading={setLoading}
|
||||
setIsSendMsg={setIsSendMsg}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user