Skip to content

Commit 095cc78

Browse files
AdadieAdadie
authored
Merge pull request #19 from atlp-rwanda/ft-apt-date-filter
Feature: add appointment date filters
2 parents 63f4a4d + 33d73e1 commit 095cc78

File tree

9 files changed

+246
-232
lines changed

9 files changed

+246
-232
lines changed

Diff for: ‎.eslintrc.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"rules": {
44
"@next/next/no-img-element": "off",
55
"jsx-a11y/alt-text": "off",
6-
"react/no-unescaped-entities": "off"
6+
"react/no-unescaped-entities": "off",
7+
" react-hooks/exhaustive-deps": "off"
78
}
89
}

Diff for: ‎Dockerfile

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
# Adjust NODE_VERSION as desired
44
ARG NODE_VERSION=20.15.0
5+
ARG NEXT_PUBLIC_SUPABASE_URL
6+
ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
57
FROM node:${NODE_VERSION}-slim as base
68

79
LABEL fly_launch_runtime="Next.js"
@@ -27,6 +29,8 @@ RUN npm ci --include=dev
2729
# Copy application code
2830
COPY --link . .
2931

32+
ARG NEXT_PUBLIC_SUPABASE_URL
33+
ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
3034
# Build application
3135
RUN npm run build
3236

Diff for: ‎app/dashboard/appointments/page.tsx

+74-72
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import AppointmentRequests from "@/components/dashboard/appointments/appointmentRequests";
33
import CancelledAppointments from "@/components/dashboard/appointments/cancelledAppointments";
4+
import { AppointmentCalendarContext, DateValue } from "@/components/dashboard/appointments/helpers";
45
import UpcomingAppointments from "@/components/dashboard/appointments/upcomingAppointments";
56
import Navbar from "@/components/navbar";
67
import TopBar from "@/components/topbar";
@@ -10,91 +11,92 @@ import Calendar from "react-calendar";
1011
import "react-calendar/dist/Calendar.css";
1112
import { AuthContext } from "../layout";
1213

13-
type ValuePiece = Date | null;
14-
type DateValue = ValuePiece | [ValuePiece, ValuePiece];
14+
1515

1616
export default function AppointmentsPage() {
1717
const currentUser = useContext(AuthContext);
1818
const [date, setDate] = useState<DateValue>(new Date());
1919

2020
return (
21-
<main className=" bg-primary-500 flex">
22-
<div className="py-[30px] w-[230px]">
23-
<Navbar />
24-
</div>
25-
<div className="bg-[#F8F8F8] p-8 rounded-l-[50px] w-full overflow-hidden">
26-
<TopBar
27-
firstName={currentUser?.firstName ?? ""}
28-
image={currentUser?.image ?? ""}
29-
/>
30-
<div className="flex mb-12 mt-6 gap-8">
31-
<div className="col flex-[2] overflow-hidden flex flex-col">
32-
<h1 className="text-xl mb-6">
33-
Good morning &nbsp;
34-
<span className="font-semibold text-3xl text-primary-500">
35-
Dr. {currentUser?.firstName}!
36-
</span>
37-
</h1>
38-
<UpcomingAppointments />
39-
</div>
40-
<div className="col max-w-[320px]">
41-
<div className="bg-white rounded-xl shadow-md p-5 mb-3">
42-
<div className="flex justify-between items-center mb-3">
43-
<h5 className="font-semibold">Calendar</h5>
44-
<svg
45-
width="18"
46-
height="18"
47-
viewBox="0 0 18 18"
48-
fill="none"
49-
xmlns="http://www.w3.org/2000/svg"
50-
>
51-
<path
52-
d="M4.73976 7.68237C5.08716 7.3325 5.65273 7.3315 6.00137 7.68014L8.68446 10.3632C9.10984 10.7886 9.79952 10.7886 10.2249 10.3632L12.908 7.68014C13.2566 7.3315 13.8222 7.3325 14.1696 7.68237V7.68237C14.5153 8.0305 14.5143 8.59263 14.1674 8.93953L10.2249 12.882C9.79952 13.3074 9.10984 13.3074 8.68446 12.882L4.74198 8.93953C4.39507 8.59263 4.39408 8.0305 4.73976 7.68237V7.68237Z"
53-
fill="#5F647E"
54-
/>
55-
</svg>
56-
</div>
57-
<div>
58-
<Calendar
59-
className={"calendar"}
60-
locale="en-US"
61-
onChange={setDate}
62-
/>
63-
</div>
64-
<div className="flex justify-between items-center pt-4">
65-
<p className="font-bold">Upcoming</p>
66-
<Link
67-
href={""}
68-
className="text-[12px] text-[#1A71FF] mr-[10px]"
69-
>
70-
View all
71-
</Link>
72-
</div>
73-
<div className="flex gap-[30px] items-center mt-[20px] p-1 bg-[#F0F9FD] rounded-xl">
74-
<div className="ml-1 p-2 bg-gradient-to-tr from-[#1A71FF45] to-[#1A71FF] rounded-full h-[40px] w-[40px] flex items-center justify-center">
75-
<p className="font-bold text-white">M</p>
21+
<AppointmentCalendarContext.Provider value={{ date, setDate }}>
22+
<main className=" bg-primary-500 flex">
23+
<div className="py-[30px] w-[230px]">
24+
<Navbar />
25+
</div>
26+
<div className="bg-[#F8F8F8] p-8 rounded-l-[50px] w-full overflow-hidden">
27+
<TopBar
28+
firstName={currentUser?.firstName ?? ""}
29+
image={currentUser?.image ?? ""}
30+
/>
31+
<div className="flex mb-12 mt-6 gap-8">
32+
<div className="col flex-[2] overflow-hidden flex flex-col">
33+
<h1 className="text-xl mb-6">
34+
Good morning &nbsp;
35+
<span className="font-semibold text-3xl text-primary-500">
36+
Dr. {currentUser?.firstName}!
37+
</span>
38+
</h1>
39+
<UpcomingAppointments />
40+
</div>
41+
<div className="col max-w-[320px]">
42+
<div className="bg-white rounded-xl shadow-md p-5 mb-3">
43+
<div className="flex justify-between items-center mb-3">
44+
<h5 className="font-semibold">Calendar</h5>
45+
<svg
46+
width="18"
47+
height="18"
48+
viewBox="0 0 18 18"
49+
fill="none"
50+
xmlns="http://www.w3.org/2000/svg"
51+
>
52+
<path
53+
d="M4.73976 7.68237C5.08716 7.3325 5.65273 7.3315 6.00137 7.68014L8.68446 10.3632C9.10984 10.7886 9.79952 10.7886 10.2249 10.3632L12.908 7.68014C13.2566 7.3315 13.8222 7.3325 14.1696 7.68237V7.68237C14.5153 8.0305 14.5143 8.59263 14.1674 8.93953L10.2249 12.882C9.79952 13.3074 9.10984 13.3074 8.68446 12.882L4.74198 8.93953C4.39507 8.59263 4.39408 8.0305 4.73976 7.68237V7.68237Z"
54+
fill="#5F647E"
55+
/>
56+
</svg>
7657
</div>
7758
<div>
78-
<p className="text-[14px] font-semibold">
79-
Monthly doctor's meet
80-
</p>
81-
<p className="text-[12px] text-[#0D0D0D60]">
82-
8 April, 2021 | 04:00 PM
83-
</p>
59+
<Calendar
60+
className={"calendar"}
61+
locale="en-US"
62+
onChange={setDate}
63+
/>
64+
</div>
65+
<div className="flex justify-between items-center pt-4">
66+
<p className="font-bold">Upcoming</p>
67+
<Link
68+
href={""}
69+
className="text-[12px] text-[#1A71FF] mr-[10px]"
70+
>
71+
View all
72+
</Link>
73+
</div>
74+
<div className="flex gap-[30px] items-center mt-[20px] p-1 bg-[#F0F9FD] rounded-xl">
75+
<div className="ml-1 p-2 bg-gradient-to-tr from-[#1A71FF45] to-[#1A71FF] rounded-full h-[40px] w-[40px] flex items-center justify-center">
76+
<p className="font-bold text-white">M</p>
77+
</div>
78+
<div>
79+
<p className="text-[14px] font-semibold">
80+
Monthly doctor's meet
81+
</p>
82+
<p className="text-[12px] text-[#0D0D0D60]">
83+
8 April, 2021 | 04:00 PM
84+
</p>
85+
</div>
8486
</div>
8587
</div>
8688
</div>
8789
</div>
88-
</div>
89-
<div className="flex gap-8 mb-8">
90-
<div className="col flex-[1] overflow-hidden">
91-
<AppointmentRequests />
92-
</div>
93-
<div className="col flex-[1] overflow-hidden">
94-
<CancelledAppointments />
90+
<div className="flex gap-8 mb-8">
91+
<div className="col flex-[1] overflow-hidden">
92+
<AppointmentRequests />
93+
</div>
94+
<div className="col flex-[1] overflow-hidden">
95+
<CancelledAppointments />
96+
</div>
9597
</div>
9698
</div>
97-
</div>
98-
</main>
99+
</main>
100+
</AppointmentCalendarContext.Provider>
99101
);
100102
}

Diff for: ‎components/MainSection.tsx

+23-19
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import "react-calendar/dist/Calendar.css";
99
import {
1010
Appointment,
1111
getColorByPackage,
12-
Patient,
13-
} from "./dashboard/appointments/upcomingAppointments";
12+
getDate,
13+
getPatientName,
14+
} from "./dashboard/appointments/helpers";
1415
import ListItem from "./listItem";
16+
import Loading from "./Loading";
1517
import TopBar from "./topbar";
1618

1719
type ValuePiece = Date | null;
@@ -20,12 +22,12 @@ type Value = ValuePiece | [ValuePiece, ValuePiece];
2022
export default function MainSection() {
2123
const currentUser = useContext(AuthContext);
2224
const [appointments, setAppointments] = useState<Appointment[]>([]);
23-
24-
const getPatientName = (patient: Patient) =>
25-
patient.full_name + " " + patient.nickname;
25+
const [date, setDate] = useState<Value>(new Date());
26+
const [loading, setLoading] = useState(true);
2627

2728
useEffect(() => {
2829
if (!currentUser) return;
30+
setLoading(true);
2931
const supabase = createClient();
3032
const fetchAppointments = async () => {
3133
const { data, error } = await supabase
@@ -35,10 +37,12 @@ export default function MainSection() {
3537
)
3638
.eq("doctor_id", currentUser.id)
3739
.eq("status", "Approved")
38-
.gt("appointment_date", new Date().toISOString())
40+
.gt("appointment_date", getDate(date).toISOString())
3941
.order("appointment_date", { ascending: true })
4042
.limit(5);
4143

44+
setLoading(false);
45+
4246
if (error) {
4347
console.log(error);
4448
}
@@ -48,9 +52,7 @@ export default function MainSection() {
4852
}
4953
};
5054
fetchAppointments();
51-
}, [currentUser]);
52-
53-
const [dateValue, setDateValue] = useState<Value>(new Date());
55+
}, [currentUser, date]);
5456

5557
return (
5658
<div className="bg-[#F8F8F8] rounded-l-[50px] ps-[30px] pt-[30px] overflow-x-hidden w-[100%]">
@@ -121,22 +123,24 @@ export default function MainSection() {
121123
<div className="w-[50%] max-[720px]:w-[80%] p-2">
122124
<div className="flex justify-between items-center pb-2 text-[18px]">
123125
<p className="font-medium my-2">Upcoming appointments</p>
124-
<div className="flex gap-2 items-center ">
125-
<p className=" text-gray-500 font-light">Today</p>
126-
<Image
127-
src={require("../assets/icons/accordion.svg")}
128-
alt="accordion"
129-
/>
130-
</div>
131126
</div>
132127

133128
<div className="flex flex-col gap-[20px]">
134-
{appointments.length === 0 && (
129+
{loading && appointments.length == 0 && (
130+
<div className="mt-12">
131+
<Loading
132+
loading={loading}
133+
label="Loading upcoming appointments"
134+
/>
135+
</div>
136+
)}
137+
{!loading && appointments.length === 0 && (
135138
<p className="text-center text-gray-500 py-12">
136139
No appointments found
137140
</p>
138141
)}
139-
{appointments.length > 0 &&
142+
{!loading &&
143+
appointments.length > 0 &&
140144
appointments.map((appointment) => (
141145
<ListItem
142146
key={appointment.id}
@@ -249,7 +253,7 @@ export default function MainSection() {
249253
<Calendar
250254
className={"calendar"}
251255
locale="en-US"
252-
onChange={setDateValue}
256+
onChange={setDate}
253257
/>
254258
</div>
255259
<div className="flex justify-between items-center pt-4">

0 commit comments

Comments
 (0)