2021-08-09 09:24:39 +00:00
|
|
|
import Loader from "@components/Loader";
|
|
|
|
|
import prisma from "@lib/prisma";
|
2021-07-08 09:23:22 +00:00
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
import utc from "dayjs/plugin/utc";
|
|
|
|
|
import { GetServerSideProps } from "next";
|
2021-08-09 09:24:39 +00:00
|
|
|
import { getSession } from "next-auth/client";
|
|
|
|
|
import Head from "next/head";
|
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
import Shell from "../../components/Shell";
|
2021-08-02 20:51:57 +00:00
|
|
|
|
2021-07-08 09:23:22 +00:00
|
|
|
dayjs.extend(utc);
|
|
|
|
|
|
|
|
|
|
export default function Troubleshoot({ user }) {
|
2021-08-05 11:36:24 +00:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
2021-08-09 09:24:39 +00:00
|
|
|
const [loading, setLoading] = useState(true);
|
2021-07-08 09:23:22 +00:00
|
|
|
const [availability, setAvailability] = useState([]);
|
2021-08-08 19:21:33 +00:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
2021-07-08 09:23:22 +00:00
|
|
|
const [selectedDate, setSelectedDate] = useState(dayjs());
|
|
|
|
|
|
|
|
|
|
function convertMinsToHrsMins(mins) {
|
|
|
|
|
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}`)
|
2021-07-08 09:23:22 +00:00
|
|
|
.then((res) => {
|
|
|
|
|
return res.json();
|
|
|
|
|
})
|
2021-08-09 09:24:39 +00:00
|
|
|
.then((availableIntervals) => {
|
|
|
|
|
setAvailability(availableIntervals);
|
|
|
|
|
setLoading(false);
|
|
|
|
|
})
|
2021-07-08 09:23:22 +00:00
|
|
|
.catch((e) => {
|
|
|
|
|
console.error(e);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2021-08-09 09:24:39 +00:00
|
|
|
useEffect(() => {
|
|
|
|
|
fetchAvailability(selectedDate);
|
2021-08-10 09:00:05 +00:00
|
|
|
});
|
2021-08-09 09:24:39 +00:00
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
|
return <Loader />;
|
|
|
|
|
}
|
2021-07-08 09:23:22 +00:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Troubleshoot | Calendso</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
2021-08-02 17:16:20 +00:00
|
|
|
<Shell
|
|
|
|
|
heading="Troubleshoot"
|
|
|
|
|
subtitle="Understand why certain times are available and others are blocked.">
|
2021-08-02 14:10:24 +00:00
|
|
|
<div className="bg-white max-w-md overflow-hidden shadow rounded-sm">
|
2021-07-08 09:23:22 +00:00
|
|
|
<div className="px-4 py-5 sm:p-6">
|
|
|
|
|
Here is an overview of your day on {selectedDate.format("D MMMM YYYY")}:
|
2021-08-02 14:10:24 +00:00
|
|
|
<small className="block text-neutral-400">
|
|
|
|
|
Tip: Hover over the bold times for a full timestamp
|
|
|
|
|
</small>
|
2021-07-08 09:23:22 +00:00
|
|
|
<div className="mt-4 space-y-4">
|
2021-08-02 14:10:24 +00:00
|
|
|
<div className="bg-black overflow-hidden rounded-sm">
|
2021-07-08 09:23:22 +00:00
|
|
|
<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">
|
2021-08-02 14:10:24 +00:00
|
|
|
<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")}
|
2021-07-08 09:23:22 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
2021-08-02 20:57:58 +00:00
|
|
|
{availability.length === 0 && <Loader />}
|
2021-08-02 14:10:24 +00:00
|
|
|
<div className="bg-black overflow-hidden rounded-sm">
|
2021-07-08 09:23:22 +00:00
|
|
|
<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: GetServerSideProps = async (context) => {
|
|
|
|
|
const session = await getSession(context);
|
|
|
|
|
if (!session) {
|
|
|
|
|
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,
|
2021-07-08 09:23:22 +00:00
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
startTime: true,
|
|
|
|
|
endTime: true,
|
2021-08-09 09:24:39 +00:00
|
|
|
username: true,
|
2021-07-08 09:23:22 +00:00
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
props: { user },
|
|
|
|
|
};
|
|
|
|
|
};
|
