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

better handling of textbox focus for mobile

Browse source
This commit is contained in:
fred 2025-08-21 09:45:42 -07:00
parent 798e879863
commit 737a28863e
3 changed files with 73 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

7
backend/src/models/recipeModel.ts
View file

@ -12,7 +12,7 @@ class RecipeModel {
async getAllRecipes(): Promise<any[]> {
try {
logger.info("index page view")
logger.info("index page view");
return await this.prisma.recipes.findMany();
} catch (err) {
console.error("Error fetching all recipes:", err);
@ -46,7 +46,10 @@ class RecipeModel {
instruction: step.instruction,
})),
};
logger.info("recipe page view", { recipe_id: data.details.id, recipe_name: data.details.name })
logger.info("recipe page view", {
recipe_id: data.details.id,
recipe_name: data.details.name,
});
return data;
} catch (err) {
console.log("Error finding recipe:", err);

41
frontend/src/components/AddBulkIngredients.tsx
View file

@ -1,20 +1,23 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect } from "react";
interface AddBulkIngredientsProps {
ingredients: string[];
onChange?: (ingredients: string[]) => void;
}
const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, onChange }) => {
const [textValue, setTextValue] = useState<string>('');
const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({
ingredients,
onChange,
}) => {
const [textValue, setTextValue] = useState<string>("");
useEffect(() => {
const textRepresentation = ingredients.join('\n');
const textRepresentation = ingredients.join("\n");
setTextValue(textRepresentation);
}, [ingredients]);
const parseAndUpdate = (value: string) => {
const lines = value.split('\n').filter(line => line.trim() !== '');
const lines = value.split("\n").filter((line) => line.trim() !== "");
if (onChange) onChange(lines);
};
@ -24,24 +27,48 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter') {
if (e.key === "Enter") {
parseAndUpdate(textValue);
}
};
const handleBlur = () => {
parseAndUpdate(textValue);
document.body.style.overflow = "";
};
const manageOverflow = () => {
const lineCount = textValue
.split("\n")
.filter((line) => line.trim() !== "").length;
if (lineCount > 8) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
};
const handleFocus = () => {
manageOverflow();
};
const handleTouchEnd = () => {
manageOverflow();
};
return (
<div>
<h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Ingredients:</h3>
<h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">
Ingredients:
</h3>
<textarea
rows={8}
value={textValue}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
onFocus={handleFocus}
onTouchEnd={handleTouchEnd}
placeholder="Enter ingredients separated by new line"
className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
/>

45
frontend/src/components/AddBulkSteps.tsx
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect } from "react";
interface Step {
step_number: number;
@ -11,12 +11,12 @@ interface AddBulkStepsProps {
}
const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
const [textValue, setTextValue] = useState<string>('');
const [textValue, setTextValue] = useState<string>("");
useEffect(() => {
const textRepresentation = steps.map(step =>
`${step.instruction}`
).join('\n');
const textRepresentation = steps
.map((step) => `${step.instruction}`)
.join("\n");
setTextValue(textRepresentation);
}, [steps]);
@ -24,36 +24,59 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
setTextValue(e.target.value);
};
const parseAndUpdate = (value: string) => {
const lines = value.split('\n').filter(line => line.trim() !== '');
const lines = value.split("\n").filter((line) => line.trim() !== "");
const parsedSteps: Step[] = lines.map((line, idx) => {
return { step_number: idx + 1, instruction: line }
})
return { step_number: idx + 1, instruction: line };
});
if (onChange) onChange(parsedSteps);
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter') {
if (e.key === "Enter") {
parseAndUpdate(textValue);
}
};
const handleBlur = () => {
parseAndUpdate(textValue);
document.body.style.overflow = "";
};
const manageOverflow = () => {
const lineCount = textValue
.split("\n")
.filter((line) => line.trim() !== "").length;
if (lineCount > 8) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
};
const handleFocus = () => {
manageOverflow();
};
const handleTouchEnd = () => {
manageOverflow();
};
return (
<div>
<h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Steps:</h3>
<h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">
Steps:
</h3>
<textarea
rows={8}
value={textValue}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
onFocus={handleFocus}
onTouchEnd={handleTouchEnd}
placeholder="Enter steps separated by new line"
className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
/>