From 096a10b9c1475e1251cd7b7c2b8f2fb1c2291f8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi?= Date: Sat, 4 Jan 2025 17:58:23 +0100 Subject: [PATCH] refactor: improve component formatting in Header, RoomCard, and ThemeSwitcher --- src/app/components/Header/index.tsx | 90 ++++++++-------- src/app/components/Room/Card.tsx | 102 +++++++++--------- .../ThemeSwitcher/ThemeSwitcher.tsx | 17 +-- 3 files changed, 111 insertions(+), 98 deletions(-) diff --git a/src/app/components/Header/index.tsx b/src/app/components/Header/index.tsx index 3fc1c19..2cfe046 100644 --- a/src/app/components/Header/index.tsx +++ b/src/app/components/Header/index.tsx @@ -1,4 +1,4 @@ -"use client"; +'use client'; import { Avatar, Button, @@ -9,24 +9,24 @@ import { Navbar, NavbarBrand, NavbarContent, - NavbarItem, -} from "@nextui-org/react"; -import { useSession } from "next-auth/react"; -import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"; -import { axiosInstance } from "@/app/lib/axios"; -import { useEffect, useState } from "react"; -import { useRouter } from "next/navigation"; + NavbarItem +} from '@nextui-org/react'; +import { useSession } from 'next-auth/react'; +import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher'; +import { axiosInstance } from '@/app/lib/axios'; +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/navigation'; const getInitials = (name: string) => { - if (!name) return ""; + if (!name) return ''; - const nameParts = name.split(" "); + const nameParts = name.split(' '); if (nameParts.length === 1) { return name; } - const firstInitial = nameParts[0]?.[0] || ""; - const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || ""; + const firstInitial = nameParts[0]?.[0] || ''; + const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || ''; return firstInitial + secondInitial; }; @@ -38,70 +38,76 @@ export const Header = () => { const [userProfile, setUserProfile] = useState<{ id: string; username: string; - role: "ADMIN" | "STUDENT"; + role: 'ADMIN' | 'STUDENT'; }>(); - const initials = session?.user?.name ? getInitials(session.user.name) : ""; + const initials = session?.user?.name ? getInitials(session.user.name) : ''; const fetchUserProfile = async () => { return await axiosInstance<{ id: string; username: string; - role: "ADMIN" | "STUDENT"; - }>("/@me"); + role: 'ADMIN' | 'STUDENT'; + }>('/@me'); }; useEffect(() => { - fetchUserProfile().then((r) => { + fetchUserProfile().then(r => { setUserProfile(r.data); }); }, []); return ( - + -

Toogether

+

Toogether

- - + + {userProfile?.role === 'ADMIN' ? ( + + + + ) : null} + + + + + - - + +

Signed in as

-

+

{session?.user?.name}

- Settings + Settings Logout
- - - - {userProfile?.role === "ADMIN" ? ( - - - - ) : null}
); diff --git a/src/app/components/Room/Card.tsx b/src/app/components/Room/Card.tsx index 5318902..8e68d08 100644 --- a/src/app/components/Room/Card.tsx +++ b/src/app/components/Room/Card.tsx @@ -1,6 +1,6 @@ -"use client"; +'use client'; -import { parseDate, Time } from "@internationalized/date"; +import { parseDate, Time } from '@internationalized/date'; import { Button, @@ -9,70 +9,72 @@ import { CardHeader, DateInput, Divider, - TimeInput, -} from "@nextui-org/react"; -import { Room } from "./Room"; -import moment from "moment"; -import { useRouter } from "next/navigation"; + TimeInput +} from '@nextui-org/react'; +import { Room } from './Room'; +import moment from 'moment'; +import { useRouter } from 'next/navigation'; export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => { const router = useRouter(); return ( - + -
-

{name}

-

+

+

{name}

+

{Presentator.username}

- {Times.map((time) => ( -
- -
- - - - +
+ + {Times.map(time => ( +
+
+ + - + +
-
- ))} + ))} +
{moment(date).dayOfYear() === moment().dayOfYear() && ( -
+
); };