Skip to content

Commit

Permalink
various changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anas-025
Anas-025 committed May 23, 2023
1 parent 7b43929 commit be29ff2
Show file tree
Hide file tree
Showing 25 changed files with 5,771 additions and 4,980 deletions.
6 changes: 4 additions & 2 deletions components/UserContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,15 @@ export const UserContext = createContext<ContextType>({
export const UserProvider = ({ children }: UserProviderProps) => {
const [user, setUser] = useState<any>(null);
const [loggedIn, setLoggedIn] = useState<boolean>(false);
const [userLoading, setUserLoading] = useState<string | null>(null);
const [userLoading, setUserLoading] = useState<string | null>('');

useEffect(() => {
setUserLoading("loading");
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
setUserLoading("loaded");
if(currentUser) {
setUserLoading("loaded");
}
});
}, []);

Expand Down
88 changes: 52 additions & 36 deletions components/general/AppStructure/AppStructure.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const closedMixin = (theme) => ({
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
}),
overflowX: "hidden",
width: `calc(${theme.spacing(7)} + 1px)`,
[theme.breakpoints.up("sm")]: {
Expand Down Expand Up @@ -78,14 +78,13 @@ export default function MiniDrawer() {
{ id: 1, label: "Manage Posts", link: "/app/blogs" },
{ id: 2, label: "Manage Posts", link: "/app/talk" },
{ id: 3, label: "Manage Posts", link: "/app/profile" },
{ id: 4, label: "Manage Posts", link: "/app/more" }
{ id: 4, label: "Manage Posts", link: "/app/more" },
];

useEffect(()=>{
const activeMenu = menuItems.find((menu) => menu.link === router.pathname)
activeElement(activeMenu.id)
}, [router.pathname])

useEffect(() => {
const activeMenu = menuItems.find((menu) => menu.link === router.pathname);
activeElement(activeMenu.id);
}, [router.pathname]);

const handleDrawerOpen = () => {
let drawerBtn = document.getElementById("drawerBtn");
Expand Down Expand Up @@ -261,48 +260,65 @@ export default function MiniDrawer() {

<div className={sidebar.bottomNav}>
<div className={sidebar.view2Bar} id="view2Bar"></div>
<Button
className={sidebar.view2Item}
onClick={() => activeElement(1)}
>
<ImportContactsIcon
id={`view2Item${1}`}
className={sidebar.view2Icn}
/>
</Button>
<Link href="/app/blogs">
<Button
className={sidebar.view2Item}
onClick={() => activeElement(1)}
>
<ImportContactsIcon
id={`view2Item${1}`}
className={sidebar.view2Icn}
/>
</Button>
</Link>

<Link href="/app/talk">
<Button
className={sidebar.view2Item}
onClick={() => activeElement(2)}
>
<PhoneIcon id={`view2Item${2}`} className={sidebar.view2Icn} />
</Button>
<Button
className={sidebar.view2Item}
onClick={() => activeElement(0)}
>
<CalendarMonthIcon
id={`view2Item${0}`}
sx={{ color: "white" }}
className={sidebar.view2Icn}
/>
</Button>
<Button
className={sidebar.view2Item}
onClick={() => activeElement(3)}
>
<PermIdentityIcon
id={`view2Item${3}`}
className={sidebar.view2Icn}
/>
</Button>
</Link>


<Link href="/app">
<Button
className={sidebar.view2Item}
onClick={() => activeElement(0)}
>
<CalendarMonthIcon
id={`view2Item${0}`}
sx={{ color: "white" }}
className={sidebar.view2Icn}
/>
</Button>
</Link>

<Link href="/app/profile">
<Button
className={sidebar.view2Item}
onClick={() => activeElement(3)}
>
<PermIdentityIcon
id={`view2Item${3}`}
className={sidebar.view2Icn}
/>
</Button>
</Link>


<Link href="/app/more">
<Button
className={sidebar.view2Item}
onClick={() => activeElement(4)}
>
<MenuIcon id={`view2Item${4}`} className={sidebar.view2Icn} />
</Button>
</Link>

</div>
</div>
</>
);
}
}
96 changes: 84 additions & 12 deletions components/general/Appointments/AppointmentCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,46 @@
import { Alert, Button, IconButton, Modal, Snackbar } from "@mui/material";
import {
Alert,
Button,
IconButton,
Modal,
Popover,
Snackbar,
Typography,
} from "@mui/material";
import React, { FC, useState } from "react";
import Image from "next/image";
import appoinmentcss from "./Appoinments.module.css";
import qrSample from "./qrSample.png";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import SlotBooking from "./SlotBooking/SlotBooking.js";
import RefreshIcon from '@mui/icons-material/Refresh';
import RefreshIcon from "@mui/icons-material/Refresh";
import CurrentCaseContent from "./CurrentCaseContent/CurrentCaseContent";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { Delete } from "@material-ui/icons";
import { deleteDoc, doc } from "firebase/firestore";
import { db } from "../firebase-config";

interface AppointmentCardProps {
number: number;
id: string;
name: string;
time?: string;
date?: string;
setState: any;
setErrorDialog: any;
setErrorMsg: any;
user: any;
}

const AppointmentCard: FC<AppointmentCardProps> = ({
number,
id,
name,
time,
date,
setState,
setErrorDialog,
setErrorMsg,
user
}) => {
const [open, setOpen] = React.useState(false);
const [slot, setSlot] = React.useState(false);
Expand All @@ -44,6 +59,32 @@ const AppointmentCard: FC<AppointmentCardProps> = ({
const handleCloseSnackbar = () => {
setSnackbarOpen(false);
};

const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
null
);

const handlePopoverClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};

const handlePopoverClose = () => {
setAnchorEl(null);
};

const popoverOpen = Boolean(anchorEl);
const popoverId = open ? "simple-popover" : undefined;


const handleCaseDelete = async () => {
try {
await deleteDoc(doc(db, `Userdata/${user.uid}/cases`, id));
} catch (err: any) {
setErrorMsg(err.message);
setErrorDialog(true);
}
};

return (
<>
<Snackbar
Expand All @@ -60,16 +101,42 @@ const AppointmentCard: FC<AppointmentCardProps> = ({
Copied to clipboard
</Alert>
</Snackbar>

<div className="hover:outline hover:outline-[1px] transition ease-in-out flex flex-col w-[240px] h-[270px] border-[1px] border-[#000] rounded-[15px] cursor-pointer px-5 py-5 relative justify-items-start">
<div onClick={handleOpen} style={{position: "relative"}}>
<div style={{marginBottom: "15px"}}>
<span className="text-[24px] mr-2">{number}.</span>
<span className="">{name}</span>
<IconButton
onClick={handlePopoverClick}
className="absolute top-4 right-1 z-50"
>
<MoreVertIcon />
</IconButton>

<Popover
id={popoverId}
open={popoverOpen}
anchorEl={anchorEl}
onClose={handlePopoverClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
transformOrigin={{
vertical: "top",
horizontal: "left",
}}
>
<Button sx={{ m: 2 }} onClick={handleCaseDelete}>
<Delete color="error" />
<Typography sx={{ px: 2, py: 1 }} color={'black'}>Delete</Typography>
</Button>
</Popover>

<div onClick={handleOpen} style={{ position: "relative" }}>
<div style={{ marginBottom: "15px" }}>
<span className="text-[20px] mr-2">{number}.</span>
<span className="text-[26px] mr-2">{name}</span>
</div>

<div style={{marginBottom: "15px"}} className="font-medium mb-5">Time: {time || "12:00 am"}</div>

<span className="font-light">Appointment at: </span>

<span className="font-light">Created at: </span>
<span className="font-light">{date || "2nd of January, 2023"}</span>
<Image
src="/appointmentCardBg.svg"
Expand Down Expand Up @@ -101,7 +168,11 @@ const AppointmentCard: FC<AppointmentCardProps> = ({
aria-describedby="modal-modal-description"
>
<div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] rounded-[15px] justify-center items-center h-[80vh] w-[95%] bg-[#fff] m-auto md:w-[80%]">
<CurrentCaseContent handleClose={handleClose} />
<CurrentCaseContent
toggleSlot={toggleSlot}
handleClose={handleClose}
id={id}
/>
</div>
</Modal>

Expand Down Expand Up @@ -146,6 +217,7 @@ const AppointmentCard: FC<AppointmentCardProps> = ({
>
<div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] rounded-[15px] justify-center items-center h-[80vh] w-[97%] bg-[#fff] m-auto sm:w-[80%]">
<SlotBooking
id={id}
setErrorMsg={setErrorMsg}
setErrorDialog={setErrorDialog}
setState={setState}
Expand Down
48 changes: 31 additions & 17 deletions components/general/Appointments/Appointments.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import AppointmentCard from "./AppointmentCard";
import NewAppointmentCard from "./NewAppointmentCard";
import Button from "@mui/material/Button";
Expand All @@ -11,12 +11,9 @@ import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { Alert } from "@mui/material";
const appointmentsData = [
{ number: 1, name: "Dr. Piyush Goyel", time: "", date: "" },
{ number: 2, name: "Dr. Piyush Goyel", time: "", date: "" },
{ number: 3, name: "Dr. Piyush Goyel", time: "", date: "" },
{ number: 4, name: "Dr. Piyush Goyel", time: "", date: "" },
];
import { collection, getDoc, getDocs } from "firebase/firestore";
import { db } from "../firebase-config";
import { useUser } from "components/UserContext";

const Appointments = () => {
const [state, setState] = React.useState<{
Expand All @@ -31,18 +28,31 @@ const Appointments = () => {
Transition: Grow,
});
const [errorDialog, setErrorDialog] = useState(false);
const [errorMsg, setErrorMsg] = useState('');
const [errorMsg, setErrorMsg] = useState("");
const {user, userLoading} = useUser();
const [appointmentsData, setAppointmentsData] = useState<any[]>([]);

const handleErrorDialog = () => {
setErrorDialog(false);
}
};
const handleClose = () => {
setState({
...state,
openSnackbar: false,
});
};

const getAppointmentData = async ()=>{
const appoinments = await getDocs(collection(db, `Userdata/${user.uid}/cases`));
const appointmentsData = appoinments.docs.map((doc) => {
return { ...doc.data(), id: doc.id };
});
setAppointmentsData(appointmentsData);
}

useEffect(() => {
getAppointmentData();
}, []);
return (
<>
<Dialog
Expand All @@ -51,9 +61,7 @@ const Appointments = () => {
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
Try again
</DialogTitle>
<DialogTitle id="alert-dialog-title">Try again</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{errorMsg}
Expand All @@ -72,18 +80,24 @@ const Appointments = () => {
key={state.Transition.name}
autoHideDuration={3000}
>
<Alert variant="filled" severity="success" >Your slot is booked successfully...</Alert>
<Alert variant="filled" severity="success">
Your slot is booked successfully...
</Alert>
</Snackbar>

<div
className={`flex flex-row flex-wrap justify-center md:justify-start gap-8 text-[#000] px-8 py-8`}
>
{appointmentsData?.map((appointment) => {
{appointmentsData?.map((appointment, index) => {
return (
<AppointmentCard
key={appointment.number}
name={appointment.name}
number={appointment.number}
key={index + 1}
id = {appointment.id}
user = {user}
number={index + 1}
name={appointment.caseName}
date={appointment.createdAt.toDate().toDateString()}
time={appointment.time}
setState={setState}
setErrorDialog={setErrorDialog}
setErrorMsg={setErrorMsg}
Expand Down
Loading

0 comments on commit be29ff2

Please sign in to comment.