cal.pub0.org/pages/availability/troubleshoot.tsx

130 lines
4.1 KiB
TypeScript
Raw Normal View History

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { GetServerSidePropsContext } from "next";
2021-08-09 09:24:39 +00:00
import { useEffect, useState } from "react";
import { getSession } from "@lib/auth";
import prisma from "@lib/prisma";
import { inferSSRProps } from "@lib/types/inferSSRProps";
import Loader from "@components/Loader";
import Shell from "@components/Shell";
dayjs.extend(utc);
export default function Troubleshoot({ user }: inferSSRProps<typeof getServerSideProps>) {
2021-08-09 09:24:39 +00:00
const [loading, setLoading] = useState(true);
const [availability, setAvailability] = useState([]);
const [selectedDate, setSelectedDate] = useState(dayjs());
function convertMinsToHrsMins(mins: number) {
let h = Math.floor(mins / 60);
let m = mins % 60;
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
return `${h}:${m}`;
}
const fetchAvailability = (date) => {
2021-08-09 09:24:39 +00:00
const dateFrom = date.startOf("day").utc().format();
const dateTo = date.endOf("day").utc().format();
fetch(`/api/availability/${user.username}?dateFrom=${dateFrom}&dateTo=${dateTo}`)
.then((res) => {
return res.json();
})
2021-08-09 09:24:39 +00:00
.then((availableIntervals) => {
setAvailability(availableIntervals.busy);
2021-08-09 09:24:39 +00:00
setLoading(false);
})
.catch((e) => {
console.error(e);
});
};
2021-08-09 09:24:39 +00:00
useEffect(() => {
fetchAvailability(selectedDate);
}, [selectedDate]);
2021-08-09 09:24:39 +00:00
if (loading) {
return <Loader />;
}
return (
<div>
<Shell
heading="Troubleshoot"
subtitle="Understand why certain times are available and others are blocked.">
<div className="bg-white max-w-xl overflow-hidden shadow rounded-sm">
<div className="px-4 py-5 sm:p-6">
Here is an overview of your day on{" "}
<input
type="date"
className="inline border-none h-8 p-0"
defaultValue={selectedDate.format("YYYY-MM-DD")}
onBlur={(e) => {
setSelectedDate(dayjs(e.target.value));
}}
/>
<small className="block text-neutral-400">
Tip: Hover over the bold times for a full timestamp
</small>
<div className="mt-4 space-y-4">
<div className="bg-black overflow-hidden rounded-sm">
<div className="px-4 sm:px-6 py-2 text-white">
Your day starts at {convertMinsToHrsMins(user.startTime)}
</div>
</div>
{availability.map((slot) => (
2021-07-30 23:05:38 +00:00
<div key={slot.start} className="bg-neutral-100 overflow-hidden rounded-sm">
<div className="px-4 py-5 sm:p-6 text-black">
Your calendar shows you as busy between{" "}
<span className="font-medium text-neutral-800" title={slot.start}>
{dayjs(slot.start).format("HH:mm")}
</span>{" "}
and{" "}
<span className="font-medium text-neutral-800" title={slot.end}>
{dayjs(slot.end).format("HH:mm")}
</span>{" "}
on {dayjs(slot.start).format("D MMMM YYYY")}
</div>
</div>
))}
2021-08-02 20:57:58 +00:00
{availability.length === 0 && <Loader />}
<div className="bg-black overflow-hidden rounded-sm">
<div className="px-4 sm:px-6 py-2 text-white">
Your day ends at {convertMinsToHrsMins(user.endTime)}
</div>
</div>
</div>
</div>
</div>
</Shell>
</div>
);
}
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
const session = await getSession(context);
if (!session?.user?.id) {
return { redirect: { permanent: false, destination: "/auth/login" } };
}
const user = await prisma.user.findFirst({
where: {
2021-08-09 09:24:39 +00:00
id: session.user.id,
},
select: {
startTime: true,
endTime: true,
2021-08-09 09:24:39 +00:00
username: true,
},
});
if (!user) return { redirect: { permanent: false, destination: "/auth/login" } };
return {
props: { session, user },
};
};