DEV-358 Fix Deployment Issues to Prepare for Release (#24)

* Fix typing and package errors in order to deploy

* Update react versions

* Fix more types

* Remove package-lock.json in favor of bun's lock file

* Switch to ES6 modules in package.json

Author: Spencer04Hire

frontend/app/api/dining/nutrition/route.ts

@@ -30,6 +30,7 @@ import DiningLocations from '@/examples/locations';
 import getDiningLocationsServerSide from '@/examples/locationsServerSide';
 import { useGetMenu } from '@/hooks/use-endpoints';
 import DiningHallCard from '@/components/DiningHallCard';
+import { AllergenKey, DietKey } from '@/types/dining';
 
 type MealType = 'Breakfast' | 'Lunch' | 'Dinner';
 
@@ -159,8 +160,8 @@ export default function Index() {
     'Graduate College',
   ];
   const [halls] = useState<string[]>(initialHalls);
-  const DIETARY = ['Vegetarian', 'Vegan', 'Halal', 'Kosher'];
-  const ALLERGENS = [
+  const DIETARY: DietKey[] = ['Vegetarian', 'Vegan', 'Halal', 'Kosher'];
+  const ALLERGENS: AllergenKey[] = [
     'Peanut',
     'Tree nut',
     'Egg',
@@ -180,16 +181,16 @@ export default function Index() {
 
   // temporary UI selections
   const [tempHalls, setTempHalls] = useState<string[]>(initialHalls);
-  const [tempDietary, setTempDietary] = useState<string[]>([...DIETARY]);
-  const [tempAllergens, setTempAllergens] = useState<string[]>([...ALLERGENS]);
+  const [tempDietary, setTempDietary] = useState<DietKey[]>([...DIETARY]);
+  const [tempAllergens, setTempAllergens] = useState<AllergenKey[]>([...ALLERGENS]);
 
   const [filterOpen, setFilterOpen] = useState(false);
   const [modalHall, setModalHall] = useState<UIVenue | null>(null);
 
-  const toggle = (
-    val: string,
-    arr: string[],
-    setter: React.Dispatch<React.SetStateAction<string[]>>
+  const toggle = <T,>(
+    val: T,
+    arr: T[],
+    setter: React.Dispatch<React.SetStateAction<T[]>>
   ) => setter(arr.includes(val) ? arr.filter((x) => x !== val) : [...arr, val]);
 
   // reset only the temp selections

frontend/app/feature1/page.tsx

@@ -744,13 +744,14 @@ export default function DietPlanner() {
       let bestScore = Infinity;
       let bestFoodIndex = -1;
       // We loop through our available foods to find the one that gets us closest to our targets.
-      remainingFoods.forEach((food, index) => {
+      for (let j = 0; j < remainingFoods.length; j++) {
+        const food = remainingFoods[j];
         const newCalories = currentTotals.calories + food.nutrition.calories;
         const newProtein = currentTotals.protein + food.nutrition.protein;
         const newFat = currentTotals.fat + food.nutrition.fat;
         const newCarbs = currentTotals.carbohydrates + food.nutrition.carbohydrates;
 
-        if (newCalories > targetCalories * 1.25) return; // Don't go too far over the target.
+        if (newCalories > targetCalories * 1.25) continue; // Don't go too far over the target.
         const calError = (newCalories - targetCalories) / (targetCalories || 1);
         const proError = (newProtein - targetProtein) / (targetProtein || 1);
         const fatError = (newFat - targetFat) / (targetFat || 1);
@@ -760,13 +761,13 @@ export default function DietPlanner() {
         if (score < bestScore) {
           bestScore = score;
           bestFood = food;
-          bestFoodIndex = index;
+          bestFoodIndex = j;
         }
-      });
+      }
       if (bestFood && bestFoodIndex > -1) {
         mealCombination.push(bestFood);
         Object.keys(bestFood.nutrition).forEach((key) => {
-          currentTotals[key as keyof Nutrients] += bestFood!.nutrition[key as keyof Nutrients];
+          currentTotals[key as keyof Nutrients] += bestFood.nutrition[key as keyof Nutrients];
         });
         remainingFoods.splice(bestFoodIndex, 1);
       } else {
@@ -931,7 +932,7 @@ export default function DietPlanner() {
         padding={majorScale(3)}
         backgroundColor='white'
         boxShadow='0px 10px 15px -3px rgba(0,0,0,0.07), 0px 4px 6px -2px rgba(0,0,0,0.05)'
-        onSubmit={(e) => {
+        onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
           e.preventDefault();
           handleGeneratePlan(currentDateObj);
         }}

frontend/app/feature2/page.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 // --- Helper Components & Data ---
 
 // Icon for social media links
-const SocialIcon = ({ href, children }) => (
+const SocialIcon = ({ href, children }: { href: string; children: React.ReactNode }) => (
   <a
     href={href}
     target='_blank'

frontend/app/feature3/page.tsx

@@ -44,7 +44,7 @@ export const metadata = {
  * @param children - The child components to render within the layout.
  * @returns JSX Element representing the content area.
  */
-async function Content({ children }: { children: ReactNode }): Promise<JSX.Element> {
+async function Content({ children }: { children: ReactNode }): Promise<React.JSX.Element> {
   const session = await getSession();
   const user = session?.user;
 
@@ -73,7 +73,7 @@ async function Content({ children }: { children: ReactNode }): Promise<JSX.Eleme
  * @param children - The child components to render within the layout.
  * @returns JSX Element representing the root HTML structure.
  */
-export default function RootLayout({ children }: { children: ReactNode }): JSX.Element {
+export default function RootLayout({ children }: { children: ReactNode }): React.JSX.Element {
   return (
     <html lang='en' className={`bg-hoagiemeal-dark-green ${poppins.className}`}>
       <head>

frontend/app/layout.tsx

@@ -22,6 +22,7 @@ import matheyBanner from '../public/images/banners/rockybanner.png';
 import yehBanner from '../public/images/banners/yehbanner.png';
 import cjlBanner from '../public/images/banners/cjl-banner.png';
 import gradBanner from '../public/images/banners/gradbanner.png';
+import { StaticImageData } from 'next/image';
 
 interface UIMenuItem {
   name: string;
@@ -43,7 +44,7 @@ interface DiningHallCardProps {
   showNutrition: boolean;
 }
 
-const hallImages: Record<string, string> = {
+const hallImages: Record<string, StaticImageData> = {
   'Rockefeller College': rockyBanner,
   'Forbes College': forbesBanner,
   'Mathey College': matheyBanner,

frontend/bun.lock

@@ -5,7 +5,6 @@
 import React, { useEffect, useState } from 'react';
 import { Pane, Heading, Text, Spinner, majorScale, minorScale } from 'evergreen-ui';
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
-import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 
 const diningHalls = [