From a4f3b5496a465f0778a85b579efd0a023a1599b1 Mon Sep 17 00:00:00 2001
From: Bartek Paczesny <bartek@paczesny.pl>
Date: Tue, 2 Jan 2024 15:03:09 +0100
Subject: [PATCH] Update styling and logic for subjects page, appointment
 modal, and sidebar

---
 app/dashboard/subjects/page.tsx               |  6 +--
 app/panel/myAppointments/modal.tsx            |  3 +-
 components/Sidebar.tsx                        | 51 ++++++++++++-------
 components/panel/appointmentRegisteration.tsx | 22 ++------
 4 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/app/dashboard/subjects/page.tsx b/app/dashboard/subjects/page.tsx
index 13a0274..bc3dc0a 100644
--- a/app/dashboard/subjects/page.tsx
+++ b/app/dashboard/subjects/page.tsx
@@ -128,13 +128,13 @@ function DashboardSubjects({}: Props) {
                         Dodaj przedmiot
                     </button>
                 </div>
-                <div className="flex flex-wrap items-start justify-start gap-10 w-full">
+                <div className="flex flex-wrap items-start justify-start gap-5 w-full">
                     {subjects.map((subject) => (
                         <div
-                            className="py-2 px-4 flex justify-between items-center rounded-lg border text-lg bg-neutral-50 border-neutral-200 max-w-[11rem] w-full"
+                            className="py-2 px-4 flex justify-between items-center rounded-lg border text-lg bg-neutral-50 border-neutral-200 w-fit gap-x-5"
                             key={subject.id}
                         >
-                            <p>{subject.name}</p>
+                            <p className="whitespace-nowrap">{subject.name}</p>
                             <button
                                 onClick={async () =>
                                     await handleDelete(subject.id)
diff --git a/app/panel/myAppointments/modal.tsx b/app/panel/myAppointments/modal.tsx
index 3ec10ad..dd8cb01 100644
--- a/app/panel/myAppointments/modal.tsx
+++ b/app/panel/myAppointments/modal.tsx
@@ -324,7 +324,8 @@ export const AppointmentModal = ({
                                                         ("poprawa_kartkówki" ||
                                                             "poprawa_sprawdzianu" ||
                                                             "nauka")
-                                                            ? studentAppointment
+                                                            ? studentAppointment.topic &&
+                                                              studentAppointment
                                                                   .topic
                                                                   .length > 25
                                                                 ? studentAppointment.topic.substring(
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 8483ffe..dd17af7 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -98,6 +98,7 @@ export function Sidebar({
     setNotifications,
 }: SidebarProps) {
     const userRole = user?.role;
+    const userId = user?.id;
     const [fillColor, setFillColor] = useState("");
 
     useEffect(() => {
@@ -117,8 +118,11 @@ export function Sidebar({
         useState(notifications);
 
     const [unreadNotifications, setUnreadNotifications] = useState(
-        notifications.filter((notification) => notification.read == false)
-            .length
+        notifications.filter(
+            (notification) =>
+                notification.read == false &&
+                notification.userId == Number(userId)
+        ).length
     );
 
     useEffect(() => {
@@ -128,17 +132,21 @@ export function Sidebar({
         ) {
             setFilteredNotifications(
                 notifications.filter(
-                    (notification) => notification.read == false
+                    (notification) =>
+                        notification.read == false &&
+                        notification.userId == Number(userId)
                 )
             );
         }
 
         setUnreadNotifications(
             filteredNotifications.filter(
-                (notification) => notification.read == false
+                (notification) =>
+                    notification.read == false &&
+                    notification.userId == Number(userId)
             ).length
         );
-    }, [notifications]);
+    }, [notifications, userId]);
 
     async function handleNotificationRead(id: number) {
         await fetch(`/api/notifications`, {
@@ -150,7 +158,11 @@ export function Sidebar({
         });
 
         const newNotifications = notifications
-            .filter((notification) => notification.read == false)
+            .filter(
+                (notification) =>
+                    notification.read == false &&
+                    notification.userId == Number(userId)
+            )
             .map((notification: any) => {
                 if (notification.id == id) {
                     notification.read = true;
@@ -198,19 +210,24 @@ export function Sidebar({
                                                     pathname == item.href
                                                         ? "bg-neutral-50 text-green-600"
                                                         : "text-neutral-700 hover:text-green-600 hover:bg-neutral-50",
-                                                    "group flex items-center gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold w-full"
+                                                    "group flex items-center gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold w-full",
+                                                    item.count &&
+                                                        "justify-between"
                                                 )}
                                             >
-                                                <item.icon
-                                                    className={clsx(
-                                                        pathname == item.href
-                                                            ? "text-green-600"
-                                                            : "text-neutral-400 group-hover:text-green-600",
-                                                        "h-8 w-8 shrink-0"
-                                                    )}
-                                                    aria-hidden="true"
-                                                />
-                                                <p>{item.name}</p>
+                                                <div className="flex items-center justify-center gap-x-3">
+                                                    <item.icon
+                                                        className={clsx(
+                                                            pathname ==
+                                                                item.href
+                                                                ? "text-green-600"
+                                                                : "text-neutral-400 group-hover:text-green-600",
+                                                            "h-8 w-8 shrink-0"
+                                                        )}
+                                                        aria-hidden="true"
+                                                    />
+                                                    <p>{item.name}</p>
+                                                </div>
                                                 {item.count && (
                                                     <div className="py-1 flex items-center justify-center w-1/6 h-fit bg-neutral-50 border border-neutral-200 rounded-xl">
                                                         <p className="text-xs font-semibold text-neutral-400 text-center">
diff --git a/components/panel/appointmentRegisteration.tsx b/components/panel/appointmentRegisteration.tsx
index 71f869d..db764fa 100644
--- a/components/panel/appointmentRegisteration.tsx
+++ b/components/panel/appointmentRegisteration.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { Input } from "@/components/ui/input";
+import { useSubjects } from "@/hooks/useSubjects";
 
 type Appointment = {
     subject: string;
@@ -26,25 +27,8 @@ interface Props {
     studentId?: string;
 }
 
-const options = [
-    { id: 1, name: "Matematyka" },
-    { id: 2, name: "Fizyka" },
-    { id: 3, name: "Chemia" },
-    { id: 4, name: "Biologia" },
-    { id: 5, name: "Geografia" },
-    { id: 6, name: "Historia" },
-    { id: 7, name: "Wiedza o społeczeństwie" },
-    { id: 8, name: "Język polski" },
-    { id: 9, name: "Język angielski" },
-    { id: 10, name: "Język niemiecki" },
-    { id: 13, name: "Język rosyjski" },
-    { id: 17, name: "Informatyka" },
-    { id: 18, name: "Wychowanie fizyczne" },
-    { id: 19, name: "Edukacja dla bezpieczeństwa" },
-    { id: 21, name: "Religia" },
-];
-
 export const SubjectSelection = ({ appointment, setAppointment }: Props) => {
+    const { subjects } = useSubjects();
     const { teachers } = useTeacher();
     const filteredTeachers =
         appointment.subject != ""
@@ -81,7 +65,7 @@ export const SubjectSelection = ({ appointment, setAppointment }: Props) => {
                             <SelectValue placeholder="Wybierz przedmiot" />
                         </SelectTrigger>
                         <SelectContent>
-                            {options.map((option) => (
+                            {subjects.map((option) => (
                                 <SelectItem key={option.id} value={option.name}>
                                     {option.name}
                                 </SelectItem>