fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

'add simple logging'

Browse source
This commit is contained in:
fred 2025-08-14 15:12:28 -07:00
parent 5dc89497c6
commit 6169274fe1
9 changed files with 140 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -4,3 +4,4 @@ postgres/db
.env
todo
sqldumps/
logs/

2
backend/src/controllers/recipeController.js
View file

@ -78,7 +78,7 @@ exports.deleteRecipe = async (req, res) => {
const id = parseInt(req.body.id, 10);
try {
await model.deleteRecipe(id);
res.status(204).send();
res.json({ success: "true" });
} catch (error) {
res.status(500).json({
msg: "Failed to delete recipe",

21
backend/src/models/recipeModel.js
View file

@ -1,4 +1,6 @@
const { PrismaClient } = require("@prisma/client");
const Logger = require("../utils/logger.js");
const logger = new Logger();
class recipeModel {
constructor() {
@ -21,6 +23,7 @@ class recipeModel {
include: { recipeSteps: true, recipeIngredients: true },
});
if (!recipe) {
logger.warn(`recipe with id ${id} cannot be found`);
return null;
}
const data = {
@ -41,7 +44,8 @@ class recipeModel {
};
return data;
} catch (err) {
console.error("Error finding recipe:", err);
console.log("Error finding recipe:", err);
logger.error("error finding recipe", err);
throw new Error(err.message);
}
}
@ -77,9 +81,14 @@ class recipeModel {
},
});
logger.info("new recipe created", {
id: createdRecipe.id,
name: createdRecipe.name,
});
return createdRecipe;
} catch (error) {
console.log(error);
logger.error("error creating recipe", err);
throw new Error("Failed to add recipe");
}
}
@ -93,6 +102,7 @@ class recipeModel {
return { message: "stars updated" };
} catch (err) {
console.error("Error updating stars:", err);
logger.error("error setting stars", err);
throw new Error(err.message);
}
}
@ -100,18 +110,23 @@ class recipeModel {
async deleteRecipe(id) {
try {
await this.prisma.recipe_ingredients.deleteMany({
where: { recipe_id: id }, // Ensure you have the right foreign key relation
where: { recipe_id: id },
});
await this.prisma.recipe_steps.deleteMany({
where: { recipe_id: id }, // Ensure you have the right foreign key relation
where: { recipe_id: id },
});
const deletedRecipe = await this.prisma.recipes.delete({
where: { id },
});
logger.info("recipe deleted", {
id: deletedRecipe.id,
name: deletedRecipe.name,
});
return { message: "Recipe deleted successfully" };
} catch (err) {
console.error("Error deleting recipe:", err);
logger.error("error deleting recipe", err);
throw new Error(err.message);
}
}

33
backend/src/utils/logger.js Normal file
View file

@ -0,0 +1,33 @@
const fs = require("fs");
class Logger {
constructor(filePath) {
this.filePath = "/logs/app.log";
}
log(level, message, params) {
const logEntry = {
timestamp: new Date().toISOString(),
level: level,
message: message,
params: params,
};
fs.appendFile(this.filePath, JSON.stringify(logEntry) + "\n", (err) => {
if (err) throw err;
});
}
info(message, params = {}) {
this.log("info", message, params);
}
warn(message, params = {}) {
this.log("warn", message, params);
}
error(message, params = {}) {
this.log("error", message, params);
}
}
module.exports = Logger;

1
backend/src/utils/logging.js
View file

@ -1 +0,0 @@
// todo

1
docker-compose.yaml
View file

@ -24,6 +24,7 @@ services:
- "${BACKEND_PORT}:3000"
volumes:
- ./backend:/usr/src/app
- ./logs:/logs
environment:
- NODE_ENV=${NODE_ENV}
- DB_USER=${DB_USER}

22
frontend/src/pages/RecipeIngredients.tsx
View file

@ -1,9 +1,7 @@
import { getRecipeIngredients } from "../services/frontendApi.js";
import { useState, useEffect } from "react";
import { type Ingredient } from "../types/Recipe.ts"
function RecipeIngredients() {
const [recipeIngredients, setRecipeIngredients] = useState<Ingredient[]>([]);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
@ -13,36 +11,32 @@ function RecipeIngredients() {
try {
const recipeIngredients = await getRecipeIngredients();
setRecipeIngredients(recipeIngredients);
console.log(recipeIngredients)
console.log(recipeIngredients);
} catch (err) {
console.log(err);
setError("Failed to load recipe ingredients...");
console.log(error)
console.log(error);
} finally {
setLoading(false);
}
};
loadRecipeIngredients();
}, []);
console.log(recipeIngredients)
console.log(recipeIngredients);
return (
// should this be a string[]? only if we are only returning raw. otherwise i will need to type and return the ingredient object. This template shoudl work for steps though, so maybe setting that up is a good first step
<div className='page-outer'>
<div className="page-outer">
{loading ? (
<div className="loading">Loading...</div>
) : (
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
{recipeIngredients.map(ing => (
<li key={ing.id}>
{ing.raw}
</li>
{recipeIngredients.map((ing) => (
<li key={ing.id}>{ing.raw}</li>
))}
</div>
</div>
)}
</div>
)
);
}
export default RecipeIngredients
export default RecipeIngredients;

101
frontend/src/pages/RecipePage.tsx
View file

@ -1,17 +1,21 @@
import { useParams, useNavigate, Link } from "react-router-dom";
import { useState, useEffect } from "react";
import { getRecipeById, deleteRecipe, setDBStars } from "../services/frontendApi.js";
import { type Recipe, type Ingredient } 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'
import {
getRecipeById,
deleteRecipe,
setDBStars,
} 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";
function RecipePage() {
const [recipe, setRecipe] = useState<Recipe>({
details: {},
ingredients: [],
steps: []
steps: [],
});
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
@ -20,16 +24,21 @@ function RecipePage() {
const [showConfirmModal, setShowConfirmModal] = useState(false);
const [showDemoModal, setShowDemoModal] = useState(false);
const { id } = useParams();
const isWebSource = recipe && recipe.details && recipe.details.author
const isWebSource =
recipe && recipe.details && recipe.details.author
? /http|com/.test(recipe.details.author) //etc
: false;
const navigate = useNavigate();
const openModal = () => { setShowConfirmModal(true) };
const closeModal = () => { setShowConfirmModal(false) };
const openModal = () => {
setShowConfirmModal(true);
};
const closeModal = () => {
setShowConfirmModal(false);
};
const confirmDelete = () => {
if (process.env.NODE_ENV === 'demo') {
if (process.env.NODE_ENV === "demo") {
closeModal();
setShowDemoModal(true);
} else {
@ -43,13 +52,13 @@ function RecipePage() {
try {
const recipe = await getRecipeById(id);
if (!recipe.details) {
setError("Sorry, this recipe no longer exists")
setError("Sorry, this recipe no longer exists");
} else {
setRecipe(recipe);
setStars(recipe.details?.stars ?? 0)
setStars(recipe.details?.stars ?? 0);
setInitialStars(recipe.details?.stars ?? 0);
if (process.env.NODE_ENV === 'dev') {
console.log(recipe)
if (process.env.NODE_ENV === "dev") {
console.log(recipe);
}
}
} catch (error) {
@ -77,38 +86,56 @@ function RecipePage() {
const handleDelete = async (id: number | void) => {
try {
await deleteRecipe(id);
navigate('/')
navigate("/");
} catch (error) {
console.error("Error deleting recipe:", error);
}
};
return (
<div className="recipe page-outer">
{loading ? (
<div className="loading">Loading...</div>
) : error ? (
<div>
<div className="error-message text-lg">{error}</div>
<div className="m-2">
<Link to="/" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
<Link
to="/"
className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700"
>
Return to Cookbook
</Link>
</div>
</div>
) : (
<div className="border-b-2 border-amber-300 pb-4">
<div className="recipe-card">
<div className="flex relative justify-between">
<button onClick={() => { }} className="invisible ar-button py-1 px-1 rounded self-start">🗑️</button>
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">{recipe.details.name}</h3>
<button onClick={openModal} className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start">🗑️</button>
<button
onClick={() => {}}
className="invisible ar-button py-1 px-1 rounded self-start"
>
🗑️
</button>
<h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">
{recipe.details.name}
</h3>
<button
onClick={openModal}
className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start"
>
🗑️
</button>
</div>
<div className="mt-1">
<p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
<p>prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} /> | cook: <TimeDisplay minutes={recipe.details.cook_minutes ?? 0} /></p>
<p className="text-amber-700 italic text-lg">
{recipe.details.cuisine}
</p>
<p>
prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} />{" "}
| cook:{" "}
<TimeDisplay minutes={recipe.details.cook_minutes ?? 0} />
</p>
</div>
</div>
@ -121,7 +148,7 @@ function RecipePage() {
{recipe.ingredients.map((ingredient: Ingredient, index) => (
<li key={index} className="text-gray-700 flex items-start">
<span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
<span className="font-medium text-left">{ingredient.raw}</span>
<span className="font-medium text-left">{ingredient}</span>
</li>
))}
</ul>
@ -132,12 +159,18 @@ function RecipePage() {
Instructions:
</h4>
<ol className="space-y-3">
{recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
<li key={stepNumber} className="text-gray-700 flex items-start">
{recipe.steps &&
Object.keys(recipe.steps || {}).map((stepNumber) => (
<li
key={stepNumber}
className="text-gray-700 flex items-start"
>
<span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
{recipe.steps[parseInt(stepNumber)].step_number}
</span>
<span className="leading-relaxed text-left">{recipe.steps[parseInt(stepNumber)].instruction}</span>
<span className="leading-relaxed text-left">
{recipe.steps[parseInt(stepNumber)].instruction}
</span>
</li>
))}
</ol>
@ -152,13 +185,15 @@ function RecipePage() {
<span>From the kitchen of {recipe.details.author}</span>
)}
<span>
<StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
<StarRating
rating={stars}
onRatingChange={(newRating: number) => setStars(newRating)}
/>
</span>
</div>
</div>
</div>
)
}
)}
<Modal
isOpen={showConfirmModal}
onClose={closeModal}
@ -173,7 +208,7 @@ function RecipePage() {
closeModal={() => setShowDemoModal(false)}
/>
)}
</div >
</div>
);
}

14
frontend/src/types/Recipe.ts
View file

@ -4,13 +4,6 @@ interface Step {
instruction: string;
}
interface Ingredient {
id?: number;
name?: string;
quantity?: number;
unit?: string;
raw?: string;
}
interface Recipe {
details: {
id?: number;
@ -20,8 +13,8 @@ interface Recipe {
cuisine?: string;
prep_minutes?: number;
cook_minutes?: number;
},
ingredients: Ingredient[],
};
ingredients: string[];
steps: Step[];
}
// smaller Recipe type returned by backend at /recipes for all
@ -34,5 +27,4 @@ interface RecipeSmall {
prep_minutes: number;
}
export type { Recipe, Ingredient, Step, RecipeSmall }
export type { Recipe, Step, RecipeSmall };