devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the ability to view the expiry date on the profile page (as well as some warnings on the dashboard)

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-12 10:17:22 +01:00
parent 4c95d85cf9
commit da135d3e6f
2 changed files with 109 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Navbar.tsx
View File

@@ -6,6 +6,8 @@ import {useRouter} from "next/router";
import axios from "axios";
import {RiLogoutBoxFill} from "react-icons/ri";
import {BsPower} from "react-icons/bs";
import clsx from "clsx";
import moment from "moment";
interface Props {
user: User;
@@ -19,10 +21,22 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
const disableNavigation = preventNavigation(navDisabled, focusMode);
const router = useRouter();
const logout = async () => {
axios.post("/api/logout").finally(() => {
setTimeout(() => router.reload(), 500);
});
const expirationDateColor = (date: Date) => {
const momentDate = moment(date);
const today = moment(new Date());
if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
};
const showExpirationDate = () => {
if (!user.subscriptionExpirationDate) return false;
const momentDate = moment(user.subscriptionExpirationDate);
const today = moment(new Date());
return today.add(7, "days").isAfter(momentDate);
};
return (
@@ -31,12 +45,23 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
<img src="/logo.png" alt="EnCoach's Logo" className="w-12" />
<h1 className="font-bold text-2xl w-1/6 -lg:hidden">EnCoach</h1>
</Link>
<div className="flex justify-between lg:w-5/6 lg:mr-8">
<input
type="text"
placeholder="Search..."
className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none -lg:hidden"
/>
<div className="flex justify-end gap-4 lg:w-5/6 lg:mr-8">
{showExpirationDate() && (
<Link
href="https://encoach.com/join"
data-tip="Expiry date"
className={clsx(
"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out tooltip tooltip-bottom",
!user.subscriptionExpirationDate
? "bg-mti-green-ultralight border-mti-green-light"
: expirationDateColor(user.subscriptionExpirationDate),
"bg-white border-mti-gray-platinum",
)}>
{!user.subscriptionExpirationDate && "Unlimited"}
{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
</Link>
)}
<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end">
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
<span className="text-right -lg:hidden">{user.name}</span>