From 169d703b7a1eba10a8b0777614b4afc1ec0e3dc2 Mon Sep 17 00:00:00 2001 From: BehshadBabai Date: Sat, 14 Oct 2023 01:13:56 -0700 Subject: [PATCH] add patients/dentists page, add booking tour, fix router routes to catch all invalid routes, enhance dentist account loggedin/signup, make booking cards effect --- assets/app.css | 9 + src/App.tsx | 32 ++- src/Components/AccountParts/DentistFrom.tsx | 63 ++--- src/Components/AccountParts/DentistSignup.tsx | 177 ++++++-------- src/Components/AccountParts/PatientForm.tsx | 58 +++-- src/Components/BookingParts/DentistCard.tsx | 162 +++++++++---- src/Components/BookingParts/PatientCard.tsx | 108 ++++++++- src/Components/ContactsParts/Dentists.tsx | 217 ++++++++++++++++++ src/Components/ContactsParts/Patients.tsx | 100 ++++++++ src/Pages/Booking.tsx | 9 +- src/Pages/Contacts.tsx | 6 +- src/Pages/Feedback.tsx | 4 +- src/Redux/features/account/account-slice.ts | 124 +++++++++- src/Redux/features/app/app-slice.ts | 138 ++++++++++- src/Redux/features/dentist/dentist-slice.ts | 59 ++++- src/Redux/features/patient/patient-slice.ts | 25 +- src/Utilities/Constants.ts | 75 ++++++ src/index.html | 1 + 18 files changed, 1119 insertions(+), 248 deletions(-) create mode 100644 src/Components/ContactsParts/Dentists.tsx create mode 100644 src/Components/ContactsParts/Patients.tsx diff --git a/assets/app.css b/assets/app.css index 81a1c74..876c9e7 100644 --- a/assets/app.css +++ b/assets/app.css @@ -1,3 +1,12 @@ .ant-drawer-close { color: white !important; } + +.customCard { + border-radius: 5px; + box-shadow: 1px 2px 3px 4px rgba(12, 12, 12, 0.2); +} + +.customCard:hover { + transform: scale(1.05); +} diff --git a/src/App.tsx b/src/App.tsx index 993d7fb..b758045 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,13 +9,41 @@ import CustomHeader from './Components/CustomHeader'; import Contacts from './Pages/Contacts'; import Booking from './Pages/Booking'; import Feedback from './Pages/Feedback'; -import { Constants } from './Utilities/Constants'; +import { Constants, LocalStorageKeys } from './Utilities/Constants'; const { Content } = Layout; const App = () => { const screenSize = useScreenSize(); const [collapsed, setCollapsed] = React.useState(false); + + const bookingTourDentist = { + shown: false + }; + const bookingTourPatient = { + shown: false + }; + if (localStorage) { + const dentistObj = JSON.parse( + localStorage.getItem(LocalStorageKeys.tours.dentist) + ); + if (!dentistObj) { + localStorage.setItem( + LocalStorageKeys.tours.dentist, + JSON.stringify(bookingTourDentist) + ); + } + const patientObj = JSON.parse( + localStorage.getItem(LocalStorageKeys.tours.dentist) + ); + if (!patientObj) { + localStorage.setItem( + LocalStorageKeys.tours.patient, + JSON.stringify(bookingTourPatient) + ); + } + } + const { token: { colorBgContainer } } = theme.useToken(); @@ -45,7 +73,7 @@ const App = () => { } /> } /> } /> - } /> + } /> diff --git a/src/Components/AccountParts/DentistFrom.tsx b/src/Components/AccountParts/DentistFrom.tsx index df36844..99bd039 100644 --- a/src/Components/AccountParts/DentistFrom.tsx +++ b/src/Components/AccountParts/DentistFrom.tsx @@ -5,12 +5,16 @@ import { DentistInfo, changeDentistInfo } from '../../Redux/features/dentist/dentist-slice'; +import { provinces, states } from '../../Utilities/Constants'; const DentistForm: React.FC = () => { const [form] = Form.useForm(); const dispatch = useAppDispatch(); const account = useAppSelector((state) => state.account); const dentistInfo = useAppSelector((state) => state.dentist.info); + const [country, setCountry] = React.useState('Canada'); + const [provState, setProvState] = React.useState(dentistInfo?.province); + const options = country === 'Canada' ? provinces : states; const onFinish = (values: DentistInfo) => { // on save, change db first @@ -63,16 +67,13 @@ const DentistForm: React.FC = () => { - - + + - - - - + @@ -80,33 +81,41 @@ const DentistForm: React.FC = () => { - + - { + if (newValue === 'Canada') { + setProvState('Alberta'); + } else { + setProvState('Alabama'); + } + setCountry(newValue); + }} + > + Canada + United States - - - { + setProvState(newValue); + }} + > + {options.map((option) => ( + + {option} + + ))} - + @@ -129,6 +138,8 @@ const DentistForm: React.FC = () => { type='default' onClick={() => { form.resetFields(); + setProvState(dentistInfo?.province); + setCountry(dentistInfo?.country); }} > Reset diff --git a/src/Components/AccountParts/DentistSignup.tsx b/src/Components/AccountParts/DentistSignup.tsx index 8031057..00c67cd 100644 --- a/src/Components/AccountParts/DentistSignup.tsx +++ b/src/Components/AccountParts/DentistSignup.tsx @@ -1,38 +1,21 @@ -import { Button, Card, Col, Row, RowProps, Space, Typography } from 'antd'; +import { Button, Col, List, Row, Space, Typography } from 'antd'; import React from 'react'; -import { MdBadge, MdPlace, MdLabel, MdEmail } from 'react-icons/md'; -import { PiCertificateFill } from 'react-icons/pi'; -import { AiFillHome, AiFillPhone } from 'react-icons/ai'; -import { FaGlobeAmericas } from 'react-icons/fa'; -import useScreenSize from '../../Hooks/useScreenSize'; +import { CiLocationOn } from 'react-icons/ci'; +import { FaRegAddressCard } from 'react-icons/fa'; +import { GrCertificate } from 'react-icons/gr'; +import { IoHomeOutline } from 'react-icons/io5'; +import { BsGlobe, BsPhone, BsSignpost } from 'react-icons/bs'; +import { GoMail } from 'react-icons/go'; import { useAppDispatch } from '../../Redux/hooks'; import { toggleHasAccount } from '../../Redux/features/account/account-slice'; const AccountRadio: React.FC = () => { - const screenSize = useScreenSize(); const dispatch = useAppDispatch(); - - const gridStyleDesktop: React.CSSProperties = { - width: '25%', - textAlign: 'center' - }; - const gridStyleMobile: React.CSSProperties = { - width: '50%', - textAlign: 'center' - }; - const cardRowProps: RowProps = { - justify: 'center', - align: 'middle', - gutter: 10, - style: { - height: '100%' - } - }; return ( Want to join SMARDEN as a dentist? We're exicted to have you on board! We are commited to make the registration process as smooth @@ -42,89 +25,69 @@ const AccountRadio: React.FC = () => { mbabai110@yahoo.com with the email title of "SMARDEN Dentist Registration": - - - {' '} - - - Full Name - - - - - - Certificate - - - - - - Address - - - - - - Country - - - - - - Province/State - - - - - - Postal Code - - - - - - Phone Number - - - + }, + { + title: 'Certificate', + description: + 'Your certificate of dentistry in the country of your residence', + icon: + }, + { + title: 'Address', + description: + 'Your address where you provide services to patients', + icon: + }, + { + title: 'Country', + description: + 'Your country where you provide services to patients', + icon: + }, + { + title: 'Province/State', + description: + 'Your province/state where you provide services to patients', + icon: + }, + { + title: 'Postal/Zip Code', + description: + 'Your postal/zip code where you provide services to patients', + icon: + }, + { + title: 'Postal/Zip Code', + description: + 'Your phone number for signing up with SMARDEN (not shared with patients)', + icon: + }, + { + title: 'Business Email', + description: + 'Your email for signing up with SMARDEN (not shared with patients)', + icon: } - > - - - Business Email - - - + ]} + renderItem={(item, _index) => ( + + + + )} + /> diff --git a/src/Components/AccountParts/PatientForm.tsx b/src/Components/AccountParts/PatientForm.tsx index e94f661..2724725 100644 --- a/src/Components/AccountParts/PatientForm.tsx +++ b/src/Components/AccountParts/PatientForm.tsx @@ -22,6 +22,7 @@ import { } from '../../Redux/features/patient/patient-slice'; import { useNavigate } from 'react-router-dom'; import { changeRoute } from '../../Redux/features/app/app-slice'; +import { provinces, states } from '../../Utilities/Constants'; const { Option } = Select; @@ -33,6 +34,9 @@ const PatientForm: React.FC = () => { const dispatch = useAppDispatch(); const account = useAppSelector((state) => state.account); const patientInfo = useAppSelector((state) => state.patient.info); + const [country, setCountry] = React.useState('Canada'); + const [provState, setProvState] = React.useState(patientInfo?.province); + const options = country === 'Canada' ? provinces : states; const onFinish = (values: any) => { // update dob date field of values @@ -73,7 +77,7 @@ const PatientForm: React.FC = () => { prefix: 1, dob: patientInfo.dob ? dayjs(patientInfo.dob, dateFormat) : null } - : { prefix: 1, province: 'ab' } + : { prefix: 1, province: 'Alberta', country: 'Canada' } } > @@ -235,33 +239,41 @@ const PatientForm: React.FC = () => { - - - { + if (newValue === 'Canada') { + setProvState('Alberta'); + } else { + setProvState('Alabama'); + } + setCountry(newValue); + }} + > + Canada + United States - - - { + setProvState(newValue); + }} + > + {options.map((option) => ( + + {option} + + ))} - + @@ -312,6 +324,8 @@ const PatientForm: React.FC = () => { type='default' onClick={() => { form.resetFields(); + setProvState(patientInfo?.province); + setCountry(patientInfo?.country); }} > Reset diff --git a/src/Components/BookingParts/DentistCard.tsx b/src/Components/BookingParts/DentistCard.tsx index 74a357b..0939955 100644 --- a/src/Components/BookingParts/DentistCard.tsx +++ b/src/Components/BookingParts/DentistCard.tsx @@ -22,6 +22,8 @@ import { Space, Tag, Tooltip, + Tour, + TourProps, Typography, notification } from 'antd'; @@ -39,10 +41,19 @@ import Meta from 'antd/es/card/Meta'; import dayjs from 'dayjs'; import { v4 as uuidv4 } from 'uuid'; import { openNotificationWithIcon } from '../../Utilities/Util'; +import { LocalStorageKeys } from '../../Utilities/Constants'; +import { FcCalendar } from 'react-icons/fc'; const DentistCard: React.FC = () => { const { Option } = Select; + const ref1 = React.useRef(null); + const ref2 = React.useRef(null); + const ref3 = React.useRef(null); + const ref4 = React.useRef(null); + const ref5 = React.useRef(null); + + const [tourOpen, setTourOpen] = React.useState(false); const [descModalOpen, setDescModalOpen] = React.useState(false); const [replyModalOpen, setReplyModalOpen] = React.useState(false); const [editModalOpen, setEditModalOpen] = React.useState(false); @@ -63,6 +74,51 @@ const DentistCard: React.FC = () => { const [api, contextHolder] = notification.useNotification(); + React.useEffect(() => { + if (bookings?.length > 0 && localStorage) { + const shown = JSON.parse( + localStorage.getItem(LocalStorageKeys.tours.dentist) + )?.shown; + if (!shown) { + // do something + localStorage.setItem( + LocalStorageKeys.tours.dentist, + JSON.stringify({ shown: true }) + ); + setTourOpen(true); + } + } + }, [bookings]); + + const tourSteps: TourProps['steps'] = [ + { + title: 'Your Booking', + description: 'Your bookings will appear in card formats.', + target: () => ref1.current! + }, + { + title: 'View Reply', + description: 'View the reply from your dentist for this booking.', + target: () => ref2.current! + }, + { + title: 'Edit Description', + description: 'Edit the description of your booking.', + target: () => ref3.current! + }, + { + title: 'Delete Booking', + description: 'Delete your booking.', + target: () => ref4.current! + }, + { + title: 'Booking Status', + description: + 'View the status of your booking. This will be chnaged by your dentist.', + target: () => ref5.current! + } + ]; + return ( <> @@ -75,20 +131,18 @@ const DentistCard: React.FC = () => { > - Add a Booking - - + + + Add a Booking + + + + + } + headStyle={{ borderBottom: '2px solid lightgray' }} style={{ width: 300, textAlign: 'center', cursor: 'pointer' }} + className='customCard' onClick={() => { if (dentists.length > 0) { setNewModalOpen(true); @@ -101,11 +155,10 @@ const DentistCard: React.FC = () => { } }} > - + - {/* {booking card template, have to render from array} */} - {bookings.map((myBooking) => { + {bookings.map((myBooking, index) => { return ( { key={myBooking.id} > @@ -138,28 +194,34 @@ const DentistCard: React.FC = () => { } style={{ width: 300 }} actions={[ - { - if (myBooking.reply) { + + { + if (myBooking.reply) { + setBooking(myBooking); + setReplyModalOpen(true); + } else { + Modal.info({ + title: 'No Reply Yet!', + content: `There is no text reply from Dr. ${myBooking.dentist.name} ${myBooking.dentist.surname} for this booking right now, check back later to see their reply.` + }); + } + }} + /> + , + + { setBooking(myBooking); - setReplyModalOpen(true); - } else { - Modal.info({ - title: 'No Reply Yet!', - content: `There is no text reply from Dr. ${myBooking.dentist.name} ${myBooking.dentist.surname} for this booking right now, check back later to see their reply.` - }); - } - }} - />, - { - setBooking(myBooking); - setDescText(myBooking.description); - setEditModalOpen(true); - }} - />, + setDescText(myBooking.description); + setEditModalOpen(true); + }} + /> + , } @@ -174,7 +236,12 @@ const DentistCard: React.FC = () => { okText={'Yes'} cancelText={'No'} > - + + + ]} > @@ -202,14 +269,19 @@ const DentistCard: React.FC = () => { > {myBooking.status === 'approved' ? ( - + ) : myBooking.status === 'pending' ? ( ) : ( )} @@ -351,7 +423,7 @@ const DentistCard: React.FC = () => { layout='vertical' name='form_in_modal' initialValues={{ - dentist: dentists[0].id, + dentist: dentists[0]?.id, date: dayjs(), severity: 'low' }} @@ -431,6 +503,18 @@ const DentistCard: React.FC = () => { + + {/* Tour */} + setTourOpen(false)} + steps={tourSteps} + indicatorsRender={(current, total) => ( + + {current + 1} / {total} + + )} + /> ); }; diff --git a/src/Components/BookingParts/PatientCard.tsx b/src/Components/BookingParts/PatientCard.tsx index f2f44ab..df1e28b 100644 --- a/src/Components/BookingParts/PatientCard.tsx +++ b/src/Components/BookingParts/PatientCard.tsx @@ -15,6 +15,8 @@ import { Space, Tag, Tooltip, + Tour, + TourProps, Typography, notification } from 'antd'; @@ -28,6 +30,7 @@ import { changeBookingStatus } from '../../Redux/features/account/account-slice'; import { openNotificationWithIcon } from '../../Utilities/Util'; +import { LocalStorageKeys } from '../../Utilities/Constants'; const DentistCard: React.FC = () => { const dispatch = useDispatch(); @@ -48,6 +51,59 @@ const DentistCard: React.FC = () => { const [api, contextHolder] = notification.useNotification(); + const ref1 = React.useRef(null); + const ref2 = React.useRef(null); + const ref3 = React.useRef(null); + const ref4 = React.useRef(null); + const ref5 = React.useRef(null); + const [tourOpen, setTourOpen] = React.useState(false); + + React.useEffect(() => { + if (bookings?.length > 0 && localStorage) { + const shown = JSON.parse( + localStorage.getItem(LocalStorageKeys.tours.patient) + )?.shown; + if (!shown) { + // do something + localStorage.setItem( + LocalStorageKeys.tours.patient, + JSON.stringify({ shown: true }) + ); + setTourOpen(true); + } + } + }, [bookings]); + + const tourSteps: TourProps['steps'] = [ + { + title: 'Your Booking', + description: 'Your bookings will appear in card formats.', + target: () => ref1.current! + }, + { + title: 'Write/Edit Reply', + description: + 'Write or edit a reply to send to your patient for this booking.', + target: () => ref2.current! + }, + { + title: 'Reject Booking', + description: 'Reject the proposed booking by your patient.', + target: () => ref3.current! + }, + { + title: 'Approve Booking', + description: 'Approve the proposed booking by your patient.', + target: () => ref4.current! + }, + { + title: 'Booking Status', + description: + 'View the status of your booking. You can change this with the approve/reject buttons', + target: () => ref5.current! + } + ]; + return ( <> @@ -60,7 +116,7 @@ const DentistCard: React.FC = () => { /> ) : ( - bookings.map((myBooking) => { + bookings.map((myBooking, index) => { return ( { key={myBooking.id} > @@ -92,14 +151,17 @@ const DentistCard: React.FC = () => { } style={{ width: 300 }} actions={[ - { - setBooking(myBooking); - setReplyText(myBooking.reply); - setReplyModalOpen(true); - }} - />, + + { + setBooking(myBooking); + setReplyText(myBooking.reply); + setReplyModalOpen(true); + }} + /> + , } @@ -119,7 +181,12 @@ const DentistCard: React.FC = () => { okText={'Yes'} cancelText={'No'} > - + + + , { okText={'Yes'} cancelText={'No'} > - + + + ]} > @@ -170,14 +242,17 @@ const DentistCard: React.FC = () => { {myBooking.status === 'approved' ? ( ) : myBooking.status === 'pending' ? ( ) : ( )} @@ -264,6 +339,17 @@ const DentistCard: React.FC = () => { )} + {/* Tour */} + setTourOpen(false)} + steps={tourSteps} + indicatorsRender={(current, total) => ( + + {current + 1} / {total} + + )} + /> ); }; diff --git a/src/Components/ContactsParts/Dentists.tsx b/src/Components/ContactsParts/Dentists.tsx new file mode 100644 index 0000000..f64aa93 --- /dev/null +++ b/src/Components/ContactsParts/Dentists.tsx @@ -0,0 +1,217 @@ +import { FilterOutlined } from '@ant-design/icons'; +import { + Checkbox, + Col, + Input, + Popconfirm, + Row, + Select, + Space, + Table +} from 'antd'; +import React from 'react'; +import { provinces, states } from '../../Utilities/Constants'; +import { ColumnsType } from 'antd/es/table'; +import { useAppDispatch, useAppSelector } from '../../Redux/hooks'; +import { changePatientDentists } from '../../Redux/features/patient/patient-slice'; +import { DentistInfo } from '../../Redux/features/dentist/dentist-slice'; + +const { Option } = Select; + +type ColType = { + key: string; + name: string; + address: string; +}; + +export const Dentists: React.FC = () => { + const dispatch = useAppDispatch(); + const [showMyDentists, setShowMyDentists] = React.useState(true); + const [showOtherDentists, setShowOtherDentists] = React.useState(true); + const [country, setCountry] = React.useState(null); + const [provstate, setProvstate] = React.useState(null); + const [nameFilter, setNameFilter] = React.useState(null); + const provStateOptions = country === 'United States' ? states : provinces; + const allDentists = useAppSelector((state) => state.app.allDentists); + const patientDentists = useAppSelector((state) => state.patient.dentists); + const otherDentists = allDentists.filter( + (el) => !patientDentists.some((pEl) => el.id === pEl.id) + ); + const dentists: DentistInfo[] = []; + if (showMyDentists) { + dentists.push(...patientDentists); + } + if (showOtherDentists) { + dentists.push(...otherDentists); + } + + const filteredName = !nameFilter + ? dentists + : dentists.filter( + (el) => + el.name.toLowerCase().includes(nameFilter.toLowerCase()) || + el.surname.toLowerCase().includes(nameFilter.toLowerCase()) + ); + + const countrySorted = + !country || country === 'All' + ? filteredName + : filteredName.filter((el) => el.country === country); + + const tableData: ColType[] = + !provstate || provstate === 'All' + ? countrySorted.map((el) => { + return { + key: el.id, + name: `Dr. ${el.name} ${el.surname}`, + address: `${el.address1}, ${el.address2}, ${el.country}, ${el.province}, ${el.postalCode}` + }; + }) + : countrySorted + .filter((el) => el.province === provstate) + .map((el) => { + return { + key: el.id, + name: `Dr. ${el.name} ${el.surname}`, + address: `${el.address1}, ${el.address2}, ${el.country}, ${el.province}, ${el.postalCode}` + }; + }); + + const columns: ColumnsType = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name' + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address' + }, + { + title: 'Action', + key: 'action', + render: (_, record) => { + const shouldRemove = patientDentists.some((el) => el.id === record.key); + return ( + { + if (shouldRemove) { + dispatch( + changePatientDentists( + patientDentists.filter((el) => el.id !== record.key) + ) + ); + } else { + const dentistToAdd = otherDentists.find( + (el) => el.id === record.key + ); + dispatch( + changePatientDentists([dentistToAdd, ...patientDentists]) + ); + } + }} + > + {shouldRemove ? 'Remove' : 'Add'} + + ); + } + } + ]; + + return ( + + + + { + setShowMyDentists(!showMyDentists); + }} + > + Show My Dentists + + + + { + setShowOtherDentists(!showOtherDentists); + }} + > + Show Other Dentists + + + + + + } + style={{ width: '225px' }} + allowClear={true} + placeholder='Filter By Dentist Name' + value={nameFilter} + onChange={(e) => { + setNameFilter(e.target.value); + }} + /> + + + + + + + + + + + ); +}; + +export default Dentists; diff --git a/src/Components/ContactsParts/Patients.tsx b/src/Components/ContactsParts/Patients.tsx new file mode 100644 index 0000000..b1bcb31 --- /dev/null +++ b/src/Components/ContactsParts/Patients.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { Avatar, Empty, Input, List, Space } from 'antd'; +import { FilterOutlined } from '@ant-design/icons'; +import { useAppSelector } from '../../Redux/hooks'; +import { getInitials } from '../../Utilities/Util'; +import { FcPhoneAndroid } from 'react-icons/fc'; +import { BsGenderMale } from 'react-icons/bs'; +import { FiMail } from 'react-icons/fi'; +import { AiOutlineIdcard } from 'react-icons/ai'; + +export const Patients: React.FC = () => { + const allPatients = useAppSelector((state) => state.dentist.patients); + const [patients, setPatients] = React.useState(allPatients); + const filteredDisabled = !(allPatients.length > 0); + return ( + + { + const term = e.target.value; + if (term) { + const filtered = allPatients.filter( + (info) => + info.name.toLowerCase().includes(term.toLowerCase()) || + info.surname.toLowerCase().includes(term.toLowerCase()) + ); + setPatients(filtered); + } else { + setPatients(allPatients); + } + }} + style={{ width: 200 }} + addonAfter={} + disabled={filteredDisabled} + /> + {allPatients?.length > 0 ? ( + ( + + + {getInitials(item.name, item.surname)} + + } + title={`${item.name} ${item.surname}`} + description={ + + + +

{item.email}

+ + + +

{item.phone}

+ + {item.gender && ( + + +

{item.gender}

+ + )} + {item.dob && ( + + +

{item.dob}

+ + )} + + } + /> + + )} + /> + ) : ( + + )} + + ); +}; + +export default Patients; diff --git a/src/Pages/Booking.tsx b/src/Pages/Booking.tsx index ac28278..ffc1ca4 100644 --- a/src/Pages/Booking.tsx +++ b/src/Pages/Booking.tsx @@ -8,14 +8,7 @@ const Booking: React.FC = () => { const account = useAppSelector((state) => state.account); const type = account.type; - return ( -
- - Your Bookings - {type === 'patient' ? : } - -
- ); + return type === 'patient' ? : ; }; export default Booking; diff --git a/src/Pages/Contacts.tsx b/src/Pages/Contacts.tsx index 3b8ec09..b1a5f13 100644 --- a/src/Pages/Contacts.tsx +++ b/src/Pages/Contacts.tsx @@ -1,7 +1,11 @@ import React from 'react'; +import { useAppSelector } from '../Redux/hooks'; +import Patients from '../Components/ContactsParts/Patients'; +import Dentists from '../Components/ContactsParts/Dentists'; const Contacts: React.FC = () => { - return <>; + const type = useAppSelector((state) => state.account.type); + return type === 'dentist' ? : ; }; export default Contacts; diff --git a/src/Pages/Feedback.tsx b/src/Pages/Feedback.tsx index 8bbeb15..2cae72b 100644 --- a/src/Pages/Feedback.tsx +++ b/src/Pages/Feedback.tsx @@ -47,7 +47,7 @@ const FeedBack: React.FC = () => ( fontSize: '1.1em' }} > - Send Us Your Feedback: + Share Your Feedback With Us: @@ -83,7 +83,7 @@ const FeedBack: React.FC = () => ( - + diff --git a/src/Redux/features/account/account-slice.ts b/src/Redux/features/account/account-slice.ts index 98be1ba..f4db132 100644 --- a/src/Redux/features/account/account-slice.ts +++ b/src/Redux/features/account/account-slice.ts @@ -31,6 +31,41 @@ const initialState: AccountState = { loggedIn: true, hasAccount: true, bookings: [ + { + patient: { + name: 'Behshad', + surname: 'Babai', + email: 'b@b.com', + id: '8', + phone: '2366888933', + address1: '4720', + address2: '4205', + country: 'Canada', + dob: '2001-04-09', + gender: 'male', + province: 'British Columbia', + postalCode: 'V5C0M8' + }, + dentist: { + name: 'Reza', + surname: 'BT', + email: 'mbabai110@yahoo.com', + id: '5', + address1: '8181', + address2: 'chester', + country: 'Canada', + phone: '778', + province: 'British Columbia', + postalCode: 'V5X0J9' + }, + severity: 'high', + title: 'My Face Hurts', + description: '', + reply: '', + time: '2023-10-10', + id: '2', + status: 'pending' + }, { patient: { name: 'Behbod', @@ -40,10 +75,10 @@ const initialState: AccountState = { phone: '2366888933', address1: '4720', address2: '4205', - country: 'canada', + country: 'Canada', dob: '2001-04-09', gender: 'male', - province: 'bc', + province: 'British Columbia', postalCode: 'V5C0M8' }, dentist: { @@ -53,9 +88,9 @@ const initialState: AccountState = { id: '3', address1: '8181', address2: 'chester', - country: 'canada', + country: 'Canada', phone: '778', - province: 'bc', + province: 'British Columbia', postalCode: 'V5X0J9' }, severity: 'high', @@ -76,10 +111,81 @@ const initialState: AccountState = { phone: '2366888933', address1: '4720', address2: '4205', - country: 'canada', + country: 'Canada', + dob: '2001-04-09', + gender: 'male', + province: 'British Columbia', + postalCode: 'V5C0M8' + }, + dentist: { + name: 'Reza', + surname: 'BT', + email: 'mbabai110@yahoo.com', + id: '5', + address1: '8181', + address2: 'chester', + country: 'Canada', + phone: '778', + province: 'British Columbia', + postalCode: 'V5X0J9' + }, + severity: 'low', + title: 'My Face Hurts', + description: '', + reply: '', + time: '2023-10-10', + id: '3', + status: 'pending' + }, + { + patient: { + name: 'Behbod', + surname: 'Babai', + email: 'b@b.com', + id: '8', + phone: '2366888933', + address1: '4720', + address2: '4205', + country: 'Canada', + dob: '2001-04-09', + gender: 'male', + province: 'British Columbia', + postalCode: 'V5C0M8' + }, + dentist: { + name: 'Mohammad', + surname: 'Babai', + email: 'mbabai110@yahoo.com', + id: '3', + address1: '8181', + address2: 'chester', + country: 'Canada', + phone: '778', + province: 'British Columbia', + postalCode: 'V5X0J9' + }, + severity: 'high', + title: 'My Teeth Hurt and this is the', + description: + 'They Just Hurt IDK why honestly, it happened since I ate honey and apple pie together!', + reply: 'This is my reply', + time: '2023-10-10', + id: '4', + status: 'pending' + }, + { + patient: { + name: 'Behshad', + surname: 'Babai', + email: 'b@b.com', + id: '8', + phone: '2366888933', + address1: '4720', + address2: '4205', + country: 'Canada', dob: '2001-04-09', gender: 'male', - province: 'bc', + province: 'British Columbia', postalCode: 'V5C0M8' }, dentist: { @@ -89,9 +195,9 @@ const initialState: AccountState = { id: '5', address1: '8181', address2: 'chester', - country: 'canada', + country: 'Canada', phone: '778', - province: 'bc', + province: 'British Columbia', postalCode: 'V5X0J9' }, severity: 'medium', @@ -99,7 +205,7 @@ const initialState: AccountState = { description: '', reply: '', time: '2023-10-10', - id: '2', + id: '5', status: 'pending' } ] diff --git a/src/Redux/features/app/app-slice.ts b/src/Redux/features/app/app-slice.ts index 43b1f7e..6059b03 100644 --- a/src/Redux/features/app/app-slice.ts +++ b/src/Redux/features/app/app-slice.ts @@ -1,14 +1,150 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { DentistInfo } from '../dentist/dentist-slice'; interface AppState { route: string; + allDentists: DentistInfo[]; } const splitArray = window.location.href.split('/'); const path = splitArray[splitArray.length - 1] || '/'; const initialState: AppState = { - route: path + route: path, + allDentists: [ + { + name: 'John', + surname: 'Smith', + email: 'jsmith@yahoo.com', + id: '1', + address1: '879 6th Street', + address2: 'Unit 321', + country: 'Canada', + phone: '7781235665', + province: 'British Columbia', + postalCode: 'V5Y0J9' + }, + { + name: 'Mohammad', + surname: 'Babai', + email: 'mbabai110@yahoo.com', + id: '2', + address1: '8181 Chester', + address2: 'Unit 1007', + country: 'Canada', + phone: '7781195442', + province: 'Alberta', + postalCode: 'A5X0J9' + }, + { + name: 'Brian', + surname: 'Wang', + email: 'bwang@yahoo.com', + id: '3', + address1: '9021 Hastings', + address2: 'Unit 8090', + country: 'Canada', + phone: '778', + province: 'Northwest Territories', + postalCode: 'N5T0J9' + }, + { + name: 'Jay', + surname: 'Rog', + email: 'jrog@yahoo.com', + id: '4', + address1: '891 Jarvis Street', + address2: '', + country: 'Canada', + phone: '778', + province: 'Ontario', + postalCode: 'O5X1J9' + }, + { + name: 'Paul', + surname: 'Kennedy', + email: 'pkennedy@yahoo.com', + id: '5', + address1: '892 Victory Way', + address2: 'Unit 1010', + country: 'United States', + phone: '1235558907', + province: 'Idaho', + postalCode: 'NY1J9' + }, + { + name: 'Nina', + surname: 'Bloom', + email: 'nbloom@yahoo.com', + id: '6', + address1: '123 US Blvd', + address2: 'Unit 509', + country: 'United States', + phone: '1675558932', + province: 'California', + postalCode: 'W5XY7' + }, + { + name: 'Lisa', + surname: 'Graham', + email: 'lgraham@yahoo.com', + id: '7', + address1: '100 Canada Way', + address2: '', + country: 'Canada', + phone: '7788909765', + province: 'Northwest Territories', + postalCode: 'N1O0R9' + }, + { + name: 'Vivek', + surname: 'Rami', + email: 'vrami@yahoo.com', + id: '8', + address1: '8756 Whiting Road', + address2: '', + country: 'United States', + phone: '3325559801', + province: 'New York', + postalCode: 'N0J8T' + }, + { + name: 'Mohit', + surname: 'Wadhwa', + email: 'mwadhwa@gmail.com', + id: '9', + address1: '1023 Marine Drive', + address2: 'Unit 101', + country: 'Canada', + phone: '7788965731', + province: 'British Columbia', + postalCode: 'V6Q1D4' + }, + { + name: 'Frank', + surname: 'Adams', + email: 'fadams@yahoo.com', + id: '10', + address1: '1076 Shipyards', + address2: '', + country: 'Canada', + phone: '7789038979', + province: 'Yukon', + postalCode: 'Y5X0W9' + }, + { + name: 'Andrew', + surname: 'Tang', + email: 'atang@hotmail.com', + id: '11', + address1: '1071 Shipyards', + address2: 'Unit 32', + country: 'Canada', + phone: '7789038973', + province: 'Yukon', + postalCode: 'Y5X0W7' + } + ] }; const appSlice = createSlice({ diff --git a/src/Redux/features/dentist/dentist-slice.ts b/src/Redux/features/dentist/dentist-slice.ts index 0ea746e..9deec6d 100644 --- a/src/Redux/features/dentist/dentist-slice.ts +++ b/src/Redux/features/dentist/dentist-slice.ts @@ -27,12 +27,65 @@ const initialState: DentistState = { id: '5', address1: '8181', address2: 'chester', - country: 'canada', + country: 'Canada', phone: '778', - province: 'bc', + province: 'British Columbia', postalCode: 'V5X0J9' }, - patients: [] + patients: [ + { + name: 'Zak', + surname: 'Babai', + email: 'b@b.com', + id: '8', + phone: '2366888933', + address1: '4720', + address2: '4205', + country: 'Canada', + dob: '2001-04-09', + gender: 'other', + province: 'British Columbia', + postalCode: 'V5C0M8' + }, + { + name: 'Zain', + surname: 'Babai', + email: 'b@b.com', + id: '8', + phone: '2366888933', + address1: '4720', + address2: '4205', + country: 'Canada', + province: 'British Columbia', + postalCode: 'V5C0M8' + }, + { + name: 'Behshad', + surname: 'Babai', + email: 'b@b.com', + id: '8', + phone: '2366888933', + address1: '4720', + address2: '4205', + country: 'Canada', + dob: '2001-04-09', + province: 'British Columbia', + postalCode: 'V5C0M8' + }, + { + name: 'Majid', + surname: 'Zaniar', + email: 'b@b.com', + id: '8', + phone: '2366888933', + address1: '4720', + address2: '4205', + country: 'Canada', + gender: 'male', + province: 'British Columbia', + postalCode: 'V5C0M8' + } + ] }; const dentistSlice = createSlice({ diff --git a/src/Redux/features/patient/patient-slice.ts b/src/Redux/features/patient/patient-slice.ts index 6f08a0b..70c8204 100644 --- a/src/Redux/features/patient/patient-slice.ts +++ b/src/Redux/features/patient/patient-slice.ts @@ -30,26 +30,13 @@ const initialState: PatientState = { phone: '2366888933', address1: '4720', address2: '4205', - country: 'canada', + country: 'Canada', dob: '2001-04-09', gender: 'male', - province: 'bc', + province: 'British Columbia', postalCode: 'V5C0M8' }, - dentists: [ - { - id: '2', - name: 'Mohammad', - surname: 'Babai', - email: 'mbabai110@yahoo.com', - phone: '7781010101', - address1: '8181', - address2: '1007', - country: 'canada', - province: 'bc', - postalCode: 'v5x0j9' - } - ] + dentists: [] }; const patientSlice = createSlice({ @@ -58,9 +45,13 @@ const patientSlice = createSlice({ reducers: { changePatientInfo(state, action: PayloadAction) { state.info = action.payload; + }, + changePatientDentists(state, action: PayloadAction) { + state.dentists = action.payload; } } }); -export const { changePatientInfo } = patientSlice.actions; +export const { changePatientInfo, changePatientDentists } = + patientSlice.actions; export default patientSlice.reducer; diff --git a/src/Utilities/Constants.ts b/src/Utilities/Constants.ts index 9cc7af2..462651c 100644 --- a/src/Utilities/Constants.ts +++ b/src/Utilities/Constants.ts @@ -1,3 +1,78 @@ export const Constants = { breakpoint: 600 }; + +export const LocalStorageKeys = { + tours: { + dentist: 'dentistTour', + patient: 'patientTour' + } +}; + +export const states = [ + 'Alabama', + 'Alaska', + 'Arizona', + 'Arkansas', + 'California', + 'Colorado', + 'Connecticut', + 'Delaware', + 'Florida', + 'Georgia', + 'Hawaii', + 'Idaho', + 'Illinois', + 'Indiana', + 'Iowa', + 'Kansas', + 'Kentucky', + 'Louisiana', + 'Maine', + 'Maryland', + 'Massachusetts', + 'Michigan', + 'Minnesota', + 'Mississippi', + 'Missouri', + 'Montana', + 'Nebraska', + 'Nevada', + 'New Hampshire', + 'New Jersey', + 'New Mexico', + 'New York', + 'North Carolina', + 'North Dakota', + 'Ohio', + 'Oklahoma', + 'Oregon', + 'Pennsylvania', + 'Rhode Island', + 'South Carolina', + 'South Dakota', + 'Tennessee', + 'Texas', + 'Utah', + 'Vermont', + 'Virginia', + 'Washington', + 'West Virginia', + 'Wisconsin', + 'Wyoming' +]; +export const provinces = [ + 'Alberta', + 'British Columbia', + 'Manitoba', + 'New Brunswick', + 'New Foundland and Labrador', + 'Northwest Territories', + 'Nova Scotia', + 'Nunavut', + 'Ontario', + 'Prince Edward Island', + 'Quebec', + 'Saskatchewan', + 'Yukon' +]; diff --git a/src/index.html b/src/index.html index eeb4af2..e693c66 100644 --- a/src/index.html +++ b/src/index.html @@ -9,6 +9,7 @@ Smarden +