(FEAT): Worked on dockerization

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  app:
+    build: ./web/.
+    container_name: potion.frontend
+    ports:
+      - "3002:3002" # host:container

web/Dockerfile

@@ -0,0 +1,22 @@
+# Build stage
+FROM node:18-alpine AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Runtime stage
+FROM node:18-alpine
+WORKDIR /app
+
+# Install static file server
+RUN npm install -g serve
+
+# Copy build output only
+COPY --from=build /app/dist ./dist
+
+EXPOSE 3002
+CMD ["serve", "-s", "dist", "-l", "3002"]

web/src/components/inputs/RecipeSearchBar.tsx

@@ -1,4 +1,4 @@
-import { use, useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+import { use, useEffect, useState, type ChangeEvent, type Dispatch, type FormEvent, type SetStateAction } from "react";
 import type { SearchFilters } from "../../types/search";
 import FilterButton from "../buttons/FilterButton";
 import RecipeSearchFilterDropdown from "./RecipeSearchFilterDropdown";
@@ -14,11 +14,11 @@ interface RecipeSearchBarProps {
   redirect: boolean;
   searchOnLoad: boolean;
   favorites: boolean;
-  setRecipes: React.Dispatch<React.SetStateAction<Recipe[]>> | null;
+  setRecipes: Dispatch<SetStateAction<Recipe[]>> | null;
 
   // Loading is optional
   loading?: boolean;
-  setLoading?: React.Dispatch<React.SetStateAction<boolean>>;
+  setLoading?: Dispatch<SetStateAction<boolean>>;
 };
 
 export default function RecipeSearchBar({ redirect, searchOnLoad, favorites, setRecipes, loading, setLoading }: RecipeSearchBarProps) {

web/src/components/inputs/RecipeSearchFilterDropdown.tsx

@@ -4,7 +4,7 @@ import DropdownButton from "../buttons/DropdownButton";
 
 interface RecipeSearchFilterDropdownProps {
   filters: SearchFilters;
-  setFilters: React.Dispatch<React.SetStateAction<SearchFilters>>;
+  setFilters: (filters: SearchFilters) => void;
   display: boolean;
 };
 

web/src/components/items/IngredientList.tsx

@@ -24,7 +24,7 @@ export default function IngredientList({ ingredients }: IngredientListProps) {
                   ></path>
                 </svg>
               </span>
-              <span className="font-semibold mr-2">{ingredient.Quantity}: </span> {ingredient.Name}
+              <span className="font-semibold mr-2">{ingredient.Amount}: </span> {ingredient.Name}
             </li>
           ))}
         </ul>

web/src/context/ProtectedRoute.tsx

@@ -1,2 +0,0 @@
-
-export function ProtectedRoute

web/src/pages/Login.tsx

@@ -6,7 +6,7 @@ import { useSearchParams } from "react-router-dom";
 
 export default function LoginPage() {
   const [error, setError] = useState<string>("");
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, ] = useSearchParams();
 
   const clickHandler = async (): Promise<void> => {
     const result: string | ApiError = await GetGoogleAuthUrl();