backend docker refactor and frontend cleanup
This commit is contained in:
parent
96443b6afe
commit
63e33a45b4
14 changed files with 130 additions and 113 deletions
13
frontend/Dockerfile.dev
Normal file
13
frontend/Dockerfile.dev
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
FROM node:22-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm install;
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD npm run dev
|
||||
20
frontend/package-lock.json
generated
20
frontend/package-lock.json
generated
|
|
@ -87,6 +87,7 @@
|
|||
"integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.0",
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
|
|
@ -1471,6 +1472,7 @@
|
|||
"integrity": "sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~7.10.0"
|
||||
}
|
||||
|
|
@ -1481,6 +1483,7 @@
|
|||
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
|
|
@ -1541,6 +1544,7 @@
|
|||
"integrity": "sha512-FuYgkHwZLuPbZjQHzJXrtXreJdFMKl16BFYyRrLxDhWr6Qr7Kbcu2s1Yhu8tsiMXw1S0W1pjfFfYEt+R604s+Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.36.0",
|
||||
"@typescript-eslint/types": "8.36.0",
|
||||
|
|
@ -1792,6 +1796,7 @@
|
|||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -1992,6 +1997,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"caniuse-lite": "^1.0.30001726",
|
||||
"electron-to-chromium": "^1.5.173",
|
||||
|
|
@ -2026,9 +2032,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001727",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
|
||||
"integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
|
||||
"version": "1.0.30001766",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
|
||||
"integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -2320,6 +2326,7 @@
|
|||
"integrity": "sha512-zmxXPNMOXmwm9E0yQLi5uqXHs7uq2UIiqEKo3Gq+3fwo1XrJ+hijAZImyF7hclW3E6oHz43Yk3RP8at6OTKflQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
|
|
@ -3392,6 +3399,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
|
|
@ -3568,6 +3576,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
|
||||
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -3577,6 +3586,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.26.0"
|
||||
},
|
||||
|
|
@ -4094,6 +4104,7 @@
|
|||
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
@ -4153,6 +4164,7 @@
|
|||
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
|
|
@ -4245,6 +4257,7 @@
|
|||
"integrity": "sha512-y2L5oJZF7bj4c0jgGYgBNSdIu+5HF+m68rn2cQXFbGoShdhV1phX9rbnxy9YXj82aS8MMsCLAAFkRxZeWdldrQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.4.6",
|
||||
|
|
@ -4335,6 +4348,7 @@
|
|||
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
"react-router-dom": "^7.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.2.0",
|
||||
"@eslint/js": "^9.29.0",
|
||||
"@types/node": "^24.2.0",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"@vitejs/plugin-react": "^4.5.2",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue