From be7fb08a728422068a32b199f5952057df3a8ee7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauritz=20Skog=C3=B8y?= <mauritzs@stud.ntnu.no>
Date: Sat, 2 Nov 2024 10:21:01 +0100
Subject: [PATCH] Debug: added logos to footer and did a quick update on the
 adminpage. Small changes.

---
 frontend/src/components/admin/booking.tsx | 122 ++++++++++++----------
 frontend/src/components/footer/footer.tsx |  35 ++++++-
 2 files changed, 100 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/admin/booking.tsx b/frontend/src/components/admin/booking.tsx
index c3ee120..538ed8b 100644
--- a/frontend/src/components/admin/booking.tsx
+++ b/frontend/src/components/admin/booking.tsx
@@ -171,68 +171,80 @@ const BookingComponent = () => {
         </div>
 
         {bookings.length > 0 ? (
-          bookings.map((item: Booking) => (
-            <div
-              key={item.id}
-              className="flex w-full border-b-2 border-[#25504E] p-2"
-            >
-              <div className="w-[25%]">{userIdToNameMap[item.userID]}</div>
-              <div className="w-[15%]">
-                {item.item === "ONE_SOUNDBOX" ? (
-                  <p>1 soundbox</p>
-                ) : (
-                  <p>2 soundbox</p>
-                )}
-              </div>
-              <div className="w-[10%]">
-                {new Date(item.bookedAt).toISOString().split("T")[0]}
-              </div>
-              <div className="w-[40%]">
-                {item.status === "PENDING" ? (
-                  <div className="flex gap-x-4">
-                    {item.status}
+          bookings
+            .sort(
+              (a, b) =>
+                new Date(a.bookedAt).getTime() - new Date(b.bookedAt).getTime(),
+            )
+            .map((item: Booking) => (
+              <div
+                key={item.id}
+                className="flex w-full border-b-2 border-[#25504E] p-2"
+              >
+                <div className="w-[25%]">{userIdToNameMap[item.userID]}</div>
+                <div className="w-[15%]">
+                  {item.item === "ONE_SOUNDBOX" ? (
+                    <p>1 soundbox</p>
+                  ) : (
+                    <p>2 soundbox</p>
+                  )}
+                </div>
+                <div className="w-[10%]">
+                  {new Date(item.bookedAt).toISOString().split("T")[0]}
+                </div>
+                <div className="w-[40%]">
+                  {item.status === "PENDING" ? (
                     <div className="flex gap-x-4">
-                      <Check
-                        onClick={() =>
-                          handleClick({ type: "confirm", data: item })
-                        }
-                        className="text-green-500 icon-hover cursor-pointer"
-                      />
-                      <X
-                        onClick={() =>
-                          handleClick({ type: "reject", data: item })
-                        }
-                        className="text-red-500 icon-hover cursor-pointer"
-                      />
+                      {item.status}
+                      <div className="flex gap-x-4">
+                        <Check
+                          onClick={() =>
+                            handleClick({ type: "confirm", data: item })
+                          }
+                          className="text-green-500 icon-hover cursor-pointer"
+                        />
+                        <X
+                          onClick={() =>
+                            handleClick({ type: "reject", data: item })
+                          }
+                          className="text-red-500 icon-hover cursor-pointer"
+                        />
+                      </div>
                     </div>
-                  </div>
-                ) : (
-                  <div>{item.status}</div>
-                )}
-              </div>
-              <div className="">
-                <button
-                  onClick={() => handleClick({ type: "rediger", data: item })}
-                  className="text-underscore px-2"
-                >
-                  Rediger?
-                </button>
-                <button
-                  onClick={() => handleClick({ type: "slett", data: item })}
-                  className="icon-hover"
-                >
-                  <Trash2 className="text-red-600 h-4 w-4" />
-                </button>
+                  ) : (
+                    <div>{item.status}</div>
+                  )}
+                </div>
+                <div className="">
+                  <button
+                    onClick={() => handleClick({ type: "rediger", data: item })}
+                    className="text-underscore px-2"
+                  >
+                    Rediger?
+                  </button>
+                  <button
+                    onClick={() => handleClick({ type: "slett", data: item })}
+                    className="icon-hover"
+                  >
+                    <Trash2 className="text-red-600 h-4 w-4" />
+                  </button>
+                </div>
               </div>
-            </div>
-          ))
+            ))
         ) : (
           <div>No bookings found</div>
         )}
         {openForm && booked && (
-          <Modal isOpen={openForm} children={
-            <EditBookingForm users={userIdToNameMap} item={booked} handleCloseForm={() => save("")}/>
-          }/>
+          <Modal
+            isOpen={openForm}
+            children={
+              <EditBookingForm
+                users={userIdToNameMap}
+                item={booked}
+                handleCloseForm={() => save("")}
+              />
+            }
+          />
         )}
       </div>
     </div>
diff --git a/frontend/src/components/footer/footer.tsx b/frontend/src/components/footer/footer.tsx
index 8698b4c..653feaa 100644
--- a/frontend/src/components/footer/footer.tsx
+++ b/frontend/src/components/footer/footer.tsx
@@ -9,11 +9,16 @@ import { Clover } from "lucide-react";
 import Modal from "../ui/modal";
 import { Button } from "../ui/button";
 import { Komite } from "@/schemas/komite";
+import { Hovedsamarbeidspartner } from "@prisma/client";
 
 interface dataProps {
   message: string;
   data: Samarbeidspartner[];
 }
+interface HSPProps {
+  data: Hovedsamarbeidspartner[];
+  message: string;
+}
 
 const Footer: FC = () => {
   const [openModal, setOpenModal] = useState<boolean>(false);
@@ -29,6 +34,13 @@ const Footer: FC = () => {
     error: komiteError,
   } = useFetch<Komite[] | null>("/api/komite");
 
+  const {
+    data: dataHSP,
+    loading: loadingHSP,
+    error: errorHSP,
+  } = useFetch<HSPProps>("api/hovedsamarbeidspartner");
+  const HSP = dataHSP ? dataHSP.data : [];
+
   const [styret, setStyret] = useState<Hovedstyret[]>([]);
   const [leder, setLeder] = useState<Hovedstyret | undefined>();
   const [komiteLeder, setKomiteLeder] = useState<Komite>();
@@ -202,7 +214,27 @@ const Footer: FC = () => {
           </div>
         </div>
       </div>
-
+      <div className="flex items-center gap-x-2 bg-green-darkest justify-center">
+        {loadingHSP ? (
+          // Maintain the space for the logos by wrapping in a fixed-size container
+          <div className="animate-ping h-8 lg:w-48 bg-blue-400 rounded-full"></div>
+        ) : (
+          HSP.map((index: any) => (
+            <div
+              key={index.navn}
+              className="hover:opacity-50 transition duration-300 ease-in-out w-20"
+            >
+              <a
+                href={index.hjemmeside}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={index.logo} alt={index.navn} className="w-24" />
+              </a>
+            </div>
+          ))
+        )}
+      </div>
       {/* Social media links */}
       <div className="bg-green-darkest color-white py-4">
         <div className="flex justify-center space-x-4">
@@ -252,7 +284,6 @@ const Footer: FC = () => {
           </a>
         </div>
       </div>
-
       <div className="flex max-w-screen items-center justify-center bg-[#001D21] p-2">
         <Clover
           onClick={toggleModal}