paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): show parsed recipe preview on URL import

This commit is contained in:
Paul Huliganga 2026-03-24 22:34:47 -04:00
parent 276e03cc87
commit d4aed475a2
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.md
View File

@ -32,7 +32,7 @@ MVP is functionally complete (core app + docs + tests).
### Phase 2: Import UI
- [x] Add “Import from URL” UI page/form in frontend
- [ ] Show parsed preview (title, ingredients, steps, source URL)
- [x] Show parsed preview (title, ingredients, steps, source URL)
- [ ] Allow edit-before-save flow, then save to existing create recipe API
- [ ] Add frontend error states (invalid URL, parse failure, timeout)

40
frontend/src/pages/ImportUrlPage.tsx
View File

@ -67,10 +67,42 @@ export function ImportUrlPage() {
)}
{result && (
<div className="mt-4 bg-green-50 border border-green-200 rounded-lg p-4">
<h3 className="font-semibold text-green-900 mb-1">Import fetched successfully</h3>
<p className="text-green-800 text-sm">Source: {result.source_url}</p>
<p className="text-green-800 text-sm">JSON-LD blocks found: {result.json_ld_blocks.length}</p>
<div className="mt-4 bg-white border border-gray-200 rounded-lg p-6 space-y-4">
<div>
<h3 className="font-semibold text-gray-900">Parsed Preview</h3>
<p className="text-sm text-gray-600">Source: {result.source_url}</p>
<p className="text-sm text-gray-600">JSON-LD blocks found: {result.json_ld_blocks.length}</p>
</div>
{result.draft_recipe ? (
<>
<div>
<h4 className="text-lg font-semibold text-gray-900">{result.draft_recipe.title}</h4>
</div>
<div>
<h5 className="text-sm font-semibold uppercase tracking-wide text-gray-700 mb-2">Ingredients</h5>
<ul className="list-disc list-inside space-y-1 text-gray-800">
{result.draft_recipe.ingredients.map((ingredient, index) => (
<li key={`${ingredient}-${index}`}>{ingredient}</li>
))}
</ul>
</div>
<div>
<h5 className="text-sm font-semibold uppercase tracking-wide text-gray-700 mb-2">Steps</h5>
<ol className="list-decimal list-inside space-y-1 text-gray-800">
{result.draft_recipe.instructions.map((instruction, index) => (
<li key={`${instruction}-${index}`}>{instruction}</li>
))}
</ol>
</div>
</>
) : (
<p className="text-amber-700 bg-amber-50 border border-amber-200 rounded p-3 text-sm">
Could not parse a recipe preview from this URL.
</p>
)}
</div>
)}
</div>