chore: Project end of life stuff (#298)

* ci: Remove dependency updates (except security) * fix: Remove duplicated imports * fix: Cleanup regex * fix: Remove duplicated type * fix: Remove redundant return * fix: Use ?? instead of || for nullish * fix: Do not use index in key * fix: Don't pass the children prop * fix: Remove useless <></> * chore(deps): Patch CVE-2024-4067 --- Signed-off-by: AlexNg <[email protected]>
caffeine-addictt · Aug 26, 2024 · 20b7816 · 20b7816
2 parents bbf4b15 + 638dc2b
commit 20b7816
Show file tree

Hide file tree

Showing 17 changed files with 92 additions and 226 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
diff --git a/.github/settings.yml b/.github/settings.yml
diff --git a/client/src/components/navbar.tsx b/client/src/components/navbar.tsx
@@ -136,10 +136,10 @@ const Navbar: PageComponent = (): React.JSX.Element => {
                 {/* Load notifications */}
                 {notifications &&
                   notifications.length > 0 &&
-                  notifications.map((notification, i) => (
+                  notifications.map((notification) => (
                     <DropdownMenuItem
                       className="flex-row items-start"
-                      key={`notification-${i}`}
+                      key={`notification-${notification.id}`}
                     >
                       {/* left */}
                       <div className="flex w-fit flex-col gap-2">

diff --git a/client/src/components/ui/pieChart.tsx b/client/src/components/ui/pieChart.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { Pie } from 'react-chartjs-2';
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
-import { TooltipItem } from 'chart.js';
+import {
+  Chart as ChartJS,
+  TooltipItem,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from 'chart.js';
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 

diff --git a/client/src/lib/api-types/food.ts b/client/src/lib/api-types/food.ts
@@ -40,7 +40,6 @@ export type FoodGenerateFailAPI = ErrorResponse<
   | 'Could not access image!'
   | 'Could not identify food from image!'
   | 'Could not get nutrition info!'
-  | 'Could not access image!'
 >;
 
 /**

diff --git a/client/src/lib/api-types/schemas/auth.ts b/client/src/lib/api-types/schemas/auth.ts
@@ -105,7 +105,7 @@ export const registerFormSchema = z.object({
     .min(1, { message: 'Please provide a username!' })
     .min(3, { message: 'Username needs to be at least 3 characters!' })
     .max(20, { message: 'Username cannot be longer than 20 characters!' })
-    .regex(/^[\w\d-_]+$/, {
+    .regex(/^[\w-_]+$/, {
       message: 'Username may only contain alphanumeric characters and (-_)',
     }),
   email: z
@@ -131,7 +131,7 @@ export const registerFormSchema = z.object({
       message:
         'Password needs to contain at least 1 upper case character! (A-Z)',
     })
-    .regex(/[\d]/, {
+    .regex(/[0-9]/, {
       message: 'Password needs to contain at least 1 digit! (0-9)',
     })
     .regex(/[!#$%&?'"]/, {

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -98,9 +98,9 @@ export const Layout = (): JSX.Element => {
         <Navbar />
 
         <Routes location={location}>
-          {Object.entries(routes).map(([path, details], i) => (
+          {Object.entries(routes).map(([path, details]) => (
             <Route
-              key={i}
+              key={path}
               path={path}
               element={
                 <WrappedComponent {...details} path={location.pathname} />

diff --git a/client/src/pages/food/food.tsx b/client/src/pages/food/food.tsx
@@ -47,7 +47,7 @@ const FoodPage: PageComponent = (props) => {
   const { toast } = useToast();
 
   const [query, setQuery] = useState<string>(
-    new URLSearchParams(window.location.search).get('query') || '',
+    new URLSearchParams(window.location.search).get('query') ?? '',
   );
   const [showModal, setShowModal] = useState<boolean>(false);
   const [selectedIndex, setSelectedIndex] = useState(-1);
@@ -59,10 +59,10 @@ const FoodPage: PageComponent = (props) => {
     const currParams = new URLSearchParams(window.location.search);
     params.q = query || currParams.get('query') || '';
 
-    params.page = parseInt(currParams.get('page') || '') ?? params.page;
+    params.page = parseInt(currParams.get('page') ?? '') ?? params.page;
     if (isNaN(params.page) || params.page < 1) params.page = 1;
 
-    params.limit = parseInt(currParams.get('limit') || '') ?? params.limit;
+    params.limit = parseInt(currParams.get('limit') ?? '') ?? params.limit;
     if (isNaN(params.limit) || params.limit < 1) params.limit = 20;
 
     const newParams = new URLSearchParams();
@@ -264,7 +264,7 @@ const FoodPage: PageComponent = (props) => {
                         className="flex h-fit w-full flex-col gap-2"
                         disabled={i === selectedIndex}
                         variant={i === selectedIndex ? 'outline' : 'default'}
-                        key={`food-item-${i}`}
+                        key={`food-item-${item.id}`}
                         onClick={() => setSelectedIndex(i)}
                       >
                         <h3 className="text-2xl font-bold capitalize">

diff --git a/client/src/pages/user/events-me.tsx b/client/src/pages/user/events-me.tsx
@@ -74,74 +74,72 @@ const EventView: PageComponent = () => {
       {events.length > 0 ? (
         <div className="mb-5 flex flex-col items-center">
           {events.map((event) => (
-            <>
-              <div key={event.id} className="relative mx-auto mt-10 flex">
-                <div
-                  key={event.id}
-                  className="mb-6 w-full max-w-4xl rounded-lg bg-surface-light/5 p-6"
-                >
-                  <div className="px-10 py-5 text-left">
-                    <h2 className="mb-4 text-center text-2xl font-semibold">
-                      Event Name: {event.title}
-                    </h2>
-                    <p className="mb-4">Description: {event.description}</p>
-                    <p className="mb-4">Date: {`${event.date}`}</p>
-                    <p className="mb-4">Time: {`${event.time}`}</p>
-                    <p className="mb-4">Location: {event.location}</p>
-                    {user ? (
-                      <>
-                        <Button
-                          variant="destructive"
-                          className="mx-auto mt-5 px-6 py-5 text-base font-semibold !text-text-dark"
-                          onClick={() => setShowModal(true)}
-                        >
-                          Leave
-                        </Button>
-                        <div
-                          className={cn(
-                            'left-1/2 -translate-x-1/2 top-1/2 transition-all flex -translate-y-1/2 flex-col items-center justify-center rounded-md bg-accent-dark drop-shadow w-4/5',
-                            {
-                              absolute: showModal,
-                              hidden: !showModal,
-                              'opatity-0': !showModal,
-                              'opacity-100': showModal,
-                            },
-                          )}
-                        >
-                          <div className="relative flex size-fit flex-col items-center justify-center rounded-lg p-10">
-                            <h2 className="mb-4 text-lg font-semibold underline">
-                              Leaving Event
-                            </h2>
-                            <p className="mb-6 text-center">
-                              Are you sure you want to leave the event:{' '}
-                              {event.title}?
-                            </p>
-                            <Button
-                              variant="destructive"
-                              className="font-semibold"
-                              onClick={() => leaveEvent(event.id, user.id)}
-                            >
-                              Confirm
-                            </Button>
-                            {/* Close button */}
-                            <Button
-                              onClick={() => setShowModal(false)}
-                              className="absolute right-1 top-1"
-                              size="icon"
-                              variant="ghost"
-                            >
-                              <X className="size-6 text-red-500 drop-shadow" />
-                            </Button>
-                          </div>
+            <div key={event.id} className="relative mx-auto mt-10 flex">
+              <div
+                key={event.id}
+                className="mb-6 w-full max-w-4xl rounded-lg bg-surface-light/5 p-6"
+              >
+                <div className="px-10 py-5 text-left">
+                  <h2 className="mb-4 text-center text-2xl font-semibold">
+                    Event Name: {event.title}
+                  </h2>
+                  <p className="mb-4">Description: {event.description}</p>
+                  <p className="mb-4">Date: {`${event.date}`}</p>
+                  <p className="mb-4">Time: {`${event.time}`}</p>
+                  <p className="mb-4">Location: {event.location}</p>
+                  {user ? (
+                    <>
+                      <Button
+                        variant="destructive"
+                        className="mx-auto mt-5 px-6 py-5 text-base font-semibold !text-text-dark"
+                        onClick={() => setShowModal(true)}
+                      >
+                        Leave
+                      </Button>
+                      <div
+                        className={cn(
+                          'left-1/2 -translate-x-1/2 top-1/2 transition-all flex -translate-y-1/2 flex-col items-center justify-center rounded-md bg-accent-dark drop-shadow w-4/5',
+                          {
+                            absolute: showModal,
+                            hidden: !showModal,
+                            'opatity-0': !showModal,
+                            'opacity-100': showModal,
+                          },
+                        )}
+                      >
+                        <div className="relative flex size-fit flex-col items-center justify-center rounded-lg p-10">
+                          <h2 className="mb-4 text-lg font-semibold underline">
+                            Leaving Event
+                          </h2>
+                          <p className="mb-6 text-center">
+                            Are you sure you want to leave the event:{' '}
+                            {event.title}?
+                          </p>
+                          <Button
+                            variant="destructive"
+                            className="font-semibold"
+                            onClick={() => leaveEvent(event.id, user.id)}
+                          >
+                            Confirm
+                          </Button>
+                          {/* Close button */}
+                          <Button
+                            onClick={() => setShowModal(false)}
+                            className="absolute right-1 top-1"
+                            size="icon"
+                            variant="ghost"
+                          >
+                            <X className="size-6 text-red-500 drop-shadow" />
+                          </Button>
                         </div>
-                      </>
-                    ) : (
-                      <p>Cannot leave when u are not logged in</p>
-                    )}
-                  </div>
+                      </div>
+                    </>
+                  ) : (
+                    <p>Cannot leave when u are not logged in</p>
+                  )}
                 </div>
               </div>
-            </>
+            </div>
           ))}
         </div>
       ) : (

diff --git a/client/src/pages/user/settings.tsx b/client/src/pages/user/settings.tsx
@@ -231,9 +231,9 @@ export const AccountPasskeys = () => {
       )}
 
       {data &&
-        data.map((p, i) => (
+        data.map((p) => (
           <div
-            key={`passkey-${i}`}
+            key={`passkey-${p.id}`}
             className="flex w-full items-center justify-between rounded-md bg-secondary-light p-4 text-sm text-text-light dark:text-text-light"
           >
             <div className="flex w-1/3 flex-col">