backend docker refactor and frontend cleanup

frontend/src/components/DemoModal.tsx

@@ -1,28 +0,0 @@
-import { Link } from 'react-router-dom';
-
-interface DemoModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  closeModal: () => void;
-}
-
-const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
-      <div className="modal-content bg-[var(--color-primaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-msg">
-          <p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>
-          <p><a className="text-[var(--color-textLink)]" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
-          <p>Find out more about this app <Link to={'/about'} className="text-blue-600">here</Link></p>
-        </div>
-        <div className="modal-buttons">
-          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DemoModal;

frontend/src/pages/AddRecipe.tsx

@@ -1,20 +1,12 @@
-import { useState } from "react";
 import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
 import RecipeForm from "../components/RecipeForm.tsx";
-import DemoModal from "../components/DemoModal.tsx";
 import { type Recipe } from "../types/Recipe.ts"
 
 function AddRecipe() {
-  const [showDemoModal, setShowDemoModal] = useState(false);
   const navigate = useNavigate();
 
   const addRecipeForm = async (recipeData: Recipe) => {
-    if (process.env.NODE_ENV === "demo") {
-      setShowDemoModal(true);
-      return;
-    }
-
     const data = await addRecipe(recipeData);
     navigate(`/recipe/${data.id}`);
   };
@@ -22,13 +14,6 @@ function AddRecipe() {
   return (
     <div className="add-recipe-card page-outer">
       <RecipeForm onSubmit={addRecipeForm} />
-      {showDemoModal && (
-        <DemoModal
-          isOpen={showDemoModal}
-          onClose={() => setShowDemoModal(false)}
-          closeModal={() => setShowDemoModal(false)}
-        />
-      )}
     </div>
   );
 }

frontend/src/pages/EditRecipe.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { getRecipeById, updateRecipe } from "../services/frontendApi.js";
 import RecipeForm from "../components/RecipeForm.tsx";
-import DemoModal from "../components/DemoModal.tsx";
 import { type Recipe } from "../types/Recipe.ts"
 
 function EditRecipe() {
@@ -10,7 +9,6 @@ function EditRecipe() {
   const navigate = useNavigate();
 
   const [recipe, setRecipe] = useState<Recipe>();
-  const [showDemoModal, setShowDemoModal] = useState(false);
 
   useEffect(() => {
     const fetchRecipe = async () => {
@@ -22,11 +20,6 @@ function EditRecipe() {
   }, [id]);
 
   const updateRecipeForm = async (recipeData: Recipe) => {
-    if (process.env.NODE_ENV === "demo") {
-      setShowDemoModal(true);
-      return;
-    }
-
     await updateRecipe(id, recipeData);
     navigate(`/recipe/${id}`);
   };
@@ -36,13 +29,6 @@ function EditRecipe() {
       {recipe && (
         <RecipeForm onSubmit={updateRecipeForm} initialData={recipe} />
       )}
-      {showDemoModal && (
-        <DemoModal
-          isOpen={showDemoModal}
-          onClose={() => setShowDemoModal(false)}
-          closeModal={() => setShowDemoModal(false)}
-        />
-      )}
     </div>
   );
 }

frontend/src/pages/RecipePage.tsx

@@ -7,7 +7,6 @@ import {
 } from "../services/frontendApi.js";
 import { type Recipe } from "../types/Recipe";
 import Modal from "../components/Modal.tsx";
-import DemoModal from "../components/DemoModal.tsx";
 import StarRating from "../components/StarRating.tsx";
 import TimeDisplay from "../components/TimeDisplay.tsx";
 
@@ -22,7 +21,6 @@ function RecipePage() {
   const [stars, setStars] = useState<number>(0);
   const [initialStars, setInitialStars] = useState<number | null>(null);
   const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [showDemoModal, setShowDemoModal] = useState(false);
   const { id } = useParams();
   const isWebSource =
     recipe && recipe.details && recipe.details.author
@@ -38,13 +36,8 @@ function RecipePage() {
   };
 
   const confirmDelete = () => {
-    if (process.env.NODE_ENV === "demo") {
-      closeModal();
-      setShowDemoModal(true);
-    } else {
-      handleDelete(recipe.details.id);
-      closeModal();
-    }
+    handleDelete(recipe.details.id);
+    closeModal();
   };
 
   useEffect(() => {
@@ -113,13 +106,13 @@ function RecipePage() {
             <div className="flex relative justify-between">
               <div className="invisible-buttons">
                 <button
-                  onClick={() => {}}
+                  onClick={() => { }}
                   className="invisible ar-button py-1 px-1 rounded mr-2 self-start"
                 >
                   🗑️
                 </button>
                 <button
-                  onClick={() => {}}
+                  onClick={() => { }}
                   className="invisible ar-button py-1 px-1 rounded self-start"
                 >
                   🗑️
@@ -220,13 +213,6 @@ function RecipePage() {
         confirmAction={confirmDelete}
         cancelAction={closeModal}
       />
-      {showDemoModal && (
-        <DemoModal
-          isOpen={showDemoModal}
-          onClose={() => setShowDemoModal(false)}
-          closeModal={() => setShowDemoModal(false)}
-        />
-      )}
     </div>
   );
 }