From 681f892d635bf0a4ebbb3d301239149452d6cd3f Mon Sep 17 00:00:00 2001 From: Aditya Gupta Date: Sun, 7 Jun 2026 00:31:38 +0530 Subject: [PATCH] feat: Improve preparation method display and filtering --- server/db.js | 8 +- server/index.js | 84 +++++++++------ src/App.jsx | 194 +++++++++++++++++++++++++++++++--- src/components/BeanDetail.jsx | 9 ++ src/components/BrewCard.jsx | 2 +- src/components/BrewForm.jsx | 143 ++++++++++++++++++++++--- src/constants.js | 66 +++++++++++- src/index.css | 9 ++ 8 files changed, 452 insertions(+), 63 deletions(-) diff --git a/server/db.js b/server/db.js index 84e8c8b..d1fbffe 100644 --- a/server/db.js +++ b/server/db.js @@ -50,9 +50,15 @@ const initDb = async () => { rating INTEGER, created_at BIGINT, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, - is_deleted BOOLEAN DEFAULT FALSE + is_deleted BOOLEAN DEFAULT FALSE, + recipe_data JSONB DEFAULT '{}' ) `); + + // Ensure the recipe_data column exists on older db setups + await pool.query(` + ALTER TABLE brew_logs ADD COLUMN IF NOT EXISTS recipe_data JSONB DEFAULT '{}' + `); console.log('Database initialized'); } catch (err) { console.error('Error initializing database', err); diff --git a/server/index.js b/server/index.js index f2ded22..64b6b45 100644 --- a/server/index.js +++ b/server/index.js @@ -191,9 +191,16 @@ app.post('/api/sync', authenticateToken, async (req, res) => { // 2. Process incoming brew logs for (const log of brewLogs) { + const { id, beanId, method, notes, rating, createdAt, updatedAt, isDeleted, ...recipeFields } = log; + const grind = log.grindSize || log.grind || ''; + const waterTemp = log.waterTemp || ''; + const ratio = log.brewRatio || log.ratio || ''; + const yieldVal = log.yield || ''; + const time = log.brewTime || log.time || ''; + await client.query(` - INSERT INTO brew_logs (id, user_id, bean_id, method, grind, water_temp, ratio, yield, time, notes, rating, created_at, updated_at, is_deleted) - VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14) + INSERT INTO brew_logs (id, user_id, bean_id, method, grind, water_temp, ratio, yield, time, notes, rating, created_at, updated_at, is_deleted, recipe_data) + VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15) ON CONFLICT (id) DO UPDATE SET bean_id = EXCLUDED.bean_id, method = EXCLUDED.method, @@ -206,24 +213,26 @@ app.post('/api/sync', authenticateToken, async (req, res) => { rating = EXCLUDED.rating, created_at = EXCLUDED.created_at, updated_at = EXCLUDED.updated_at, - is_deleted = EXCLUDED.is_deleted + is_deleted = EXCLUDED.is_deleted, + recipe_data = EXCLUDED.recipe_data WHERE (EXCLUDED.updated_at > brew_logs.updated_at OR brew_logs.user_id IS NULL) AND (brew_logs.user_id = EXCLUDED.user_id OR brew_logs.user_id IS NULL) `, [ - log.id, + id, userId, - log.beanId, - log.method || '', - log.grind || '', - log.waterTemp || '', - log.ratio || '', - log.yield || '', - log.time || '', - log.notes || '', - log.rating || 0, - log.createdAt ? BigInt(log.createdAt) : BigInt(Date.now()), - log.updatedAt ? new Date(log.updatedAt) : new Date(), - log.isDeleted || false + beanId, + method || '', + grind, + waterTemp, + ratio, + yieldVal, + time, + notes || '', + rating || 0, + createdAt ? BigInt(createdAt) : BigInt(Date.now()), + updatedAt ? new Date(updatedAt) : new Date(), + isDeleted || false, + JSON.stringify(recipeFields) ]); } @@ -256,21 +265,34 @@ app.post('/api/sync', authenticateToken, async (req, res) => { isDeleted: b.is_deleted })); - const mappedLogs = serverLogs.rows.map(l => ({ - id: l.id, - beanId: l.bean_id, - method: l.method, - grind: l.grind, - waterTemp: l.water_temp, - ratio: l.ratio, - yield: l.yield, - time: l.time, - notes: l.notes, - rating: l.rating, - createdAt: Number(l.created_at), - updatedAt: l.updated_at.toISOString(), - isDeleted: l.is_deleted - })); + const mappedLogs = serverLogs.rows.map(l => { + const baseLog = { + id: l.id, + beanId: l.bean_id, + method: l.method, + notes: l.notes, + rating: l.rating, + createdAt: Number(l.created_at), + updatedAt: l.updated_at.toISOString(), + isDeleted: l.is_deleted + }; + + const recipeData = l.recipe_data || {}; + + // Fallback for old database rows that don't have recipe_data populated + const fallback = {}; + if (!recipeData.grindSize && l.grind) fallback.grindSize = l.grind; + if (!recipeData.waterTemp && l.water_temp) fallback.waterTemp = l.water_temp; + if (!recipeData.brewRatio && l.ratio) fallback.brewRatio = l.ratio; + if (!recipeData.yield && l.yield) fallback.yield = l.yield; + if (!recipeData.brewTime && l.time) fallback.brewTime = l.time; + + return { + ...baseLog, + ...fallback, + ...recipeData + }; + }); res.json({ serverTime, diff --git a/src/App.jsx b/src/App.jsx index dcea2b7..6731531 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -20,7 +20,7 @@ import SyncIndicator from "./components/SyncIndicator"; // Import constants -import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS } from "./constants"; +import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, getRoastAgingInfo } from "./constants"; // ─── Storage helpers ─── const STORAGE_KEY = "coffee-logbook-data"; @@ -62,6 +62,121 @@ const LoadingScreen = () => ( ); +function MethodIcon({ method, className }) { + const props = { + className: className || "w-8 h-8", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + strokeWidth: "1.5", + strokeLinecap: "round", + strokeLinejoin: "round" + }; + + switch (method) { + case "pourover": + return ( + + + + + + + ); + case "espresso": + return ( + + + + + + + ); + case "coldbrew": + return ( + + + + + + + ); + case "aeropress": + return ( + + + + + + + + ); + case "frenchpress": + return ( + + + + + + + + + ); + case "chemex": + return ( + + + + + + + ); + case "mokapot": + return ( + + + + + + + + + ); + case "v60": + return ( + + + + + + + ); + case "syphon": + return ( + + + + + + + + ); + case "dripbrew": + return ( + + + + + + + + + ); + default: + return ☕; + } +} + // ─── Main App ─── export default function CoffeeLogbook() { const { token, user, loading, logout } = useContext(AuthContext); @@ -79,8 +194,13 @@ export default function CoffeeLogbook() { const [syncing, setSyncing] = useState(false); const [showSyncedStatus, setShowSyncedStatus] = useState(false); + const [prepActivePage, setPrepActivePage] = useState(0); + useEffect(() => { loadData().then(setData); }, []); - useEffect(() => { setBrewSearchQuery(""); }, [view]); + useEffect(() => { + setBrewSearchQuery(""); + setPrepActivePage(0); + }, [view]); const dataRef = useRef(data); dataRef.current = data; @@ -212,7 +332,8 @@ export default function CoffeeLogbook() { return queryWords.every(word => searchableText.includes(word)); }) .sort((a, b) => b.createdAt - a.createdAt); - const methodCounts = { pourover: 0, espresso: 0, coldbrew: 0 }; + const methodCounts = {}; + METHODS.forEach(m => methodCounts[m] = 0); brewLogs.forEach(l => { if (methodCounts[l.method] !== undefined) methodCounts[l.method]++; }); const filterPillCls = (active) => `px-3.5 py-1.5 rounded-full border text-xs font-medium whitespace-nowrap cursor-pointer transition-all ${active ? "bg-[#2C1810] text-[#FAF6F1] border-[#2C1810] dark:bg-[#FAF6F1] dark:text-[#2C1810] dark:border-[#FAF6F1]" : "bg-white border-[#E8DFD3] text-[#6B5744] dark:bg-[#22120B] dark:border-[#3B2217] dark:text-[#C8B9A6]"}`; @@ -240,6 +361,53 @@ export default function CoffeeLogbook() { {/* ── Dashboard ── */} {view === "dashboard" && (
+ {/* Preparation Methods */} +
Preparation Methods
+
{ + const scrollLeft = e.target.scrollLeft; + const width = e.target.clientWidth; + const page = Math.round(scrollLeft / width); + setPrepActivePage(page); + }} + > + {(() => { + const chunks = []; + for (let i = 0; i < METHODS.length; i += 8) { + chunks.push(METHODS.slice(i, i + 8)); + } + return chunks.map((pageMethods, pageIdx) => ( +
+ {pageMethods.map(m => ( +
{ setBrewFilter(m); setView("brews"); }}> +
+ +
+
+ {METHOD_LABELS[m]} +
+
+ ))} +
+ )); + })()} +
+ {(() => { + const pagesCount = Math.ceil(METHODS.length / 8); + return pagesCount > 1 ? ( +
+ {Array.from({ length: pagesCount }).map((_, idx) => ( +
+ ))} +
+ ) :
; + })()} + + {/* Statistics */}
{[{ num: beans.length, label: "Beans" }, { num: brewLogs.length, label: "Brews" }, { num: new Set(brewLogs.map(l => l.beanId)).size, label: "Tried" }].map(s => (
@@ -248,16 +416,8 @@ export default function CoffeeLogbook() {
))}
-
By Method
-
- {METHODS.map(m => ( -
-
{METHOD_ICONS[m]}
-
{methodCounts[m]}
-
{METHOD_LABELS[m]}
-
- ))} -
+ + {/* Recent Brews */}
Recent Brews
{brewLogs.length === 0 ? (
@@ -304,6 +464,14 @@ export default function CoffeeLogbook() {
{bean.roastType && {bean.roastType}} {bean.roastDate && Roasted {bean.roastDate}} + {(() => { + const ageInfo = getRoastAgingInfo(bean.roastDate); + return ageInfo ? ( + + {ageInfo.label} + + ) : null; + })()}
); diff --git a/src/components/BeanDetail.jsx b/src/components/BeanDetail.jsx index 2d9f561..9e698fd 100644 --- a/src/components/BeanDetail.jsx +++ b/src/components/BeanDetail.jsx @@ -1,4 +1,5 @@ import BrewCard from "./BrewCard"; +import { getRoastAgingInfo } from "../constants"; export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) { const beanLogs = logs.filter(l => l.beanId === bean.id).sort((a, b) => b.createdAt - a.createdAt); @@ -17,6 +18,14 @@ export default function BeanDetail({ bean, logs, onBack, onEdit, onDelete }) {
{bean.roastType && {bean.roastType}} {bean.roastDate && Roasted {bean.roastDate}} + {(() => { + const ageInfo = getRoastAgingInfo(bean.roastDate); + return ageInfo ? ( + + {ageInfo.label} + + ) : null; + })()} {beanLogs.length} brew{beanLogs.length !== 1 ? "s" : ""}
diff --git a/src/components/BrewCard.jsx b/src/components/BrewCard.jsx index e88f272..35e4b50 100644 --- a/src/components/BrewCard.jsx +++ b/src/components/BrewCard.jsx @@ -5,7 +5,7 @@ export default function BrewCard({ log, beanName }) { const allFields = Object.entries(log) .filter(([k]) => !["id", "beanId", "method", "createdAt", "recipeDetails", "tasteNotes", "updatedAt", "isDeleted"].includes(k)) .filter(([, v]) => v !== "" && v != null); - const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep" }; + const fieldLabels = { grindSize: "Grind", waterTemp: "Temp", beanWeight: "Weight", brewRatio: "Ratio", brewTime: "Time", numPours: "Pours", dose: "Dose", yield: "Yield", waterVolume: "Water", steepTime: "Steep", inverted: "Inverted", filterType: "Filter" }; return (
diff --git a/src/components/BrewForm.jsx b/src/components/BrewForm.jsx index 3370a97..6b71ef0 100644 --- a/src/components/BrewForm.jsx +++ b/src/components/BrewForm.jsx @@ -2,10 +2,68 @@ import { useState } from "react"; import { METHODS, METHOD_LABELS, METHOD_ICONS, METHOD_COLORS, inputCls, labelCls } from "../constants"; import Modal from "./Modal"; +const parseRatio = (ratioStr) => { + if (!ratioStr) return null; + // Matches "1:15", "1/15", "15" + const match = ratioStr.match(/(?:1\s*[:/]\s*)?(\d+(?:\.\d+)?)/); + if (match) { + const val = parseFloat(match[1]); + return val > 0 ? val : null; + } + return null; +}; + export default function BrewForm({ beans, onSave, onClose }) { const [method, setMethod] = useState("pourover"); const [form, setForm] = useState({ beanId: beans[0]?.id || "" }); - const set = (k, v) => setForm(p => ({ ...p, [k]: v })); + + const handleFieldChange = (key, value) => { + setForm(prev => { + const next = { ...prev, [key]: value }; + + const getNum = (str) => { + if (!str) return null; + const val = parseFloat(str); + return isNaN(val) ? null : val; + }; + + const ratioKey = next.brewRatio !== undefined ? "brewRatio" : null; + const ratioVal = ratioKey ? parseRatio(next[ratioKey]) : null; + + if (ratioVal) { + if (key === "beanWeight" || key === "dose") { + const coffeeVal = getNum(value); + if (coffeeVal) { + const calculatedWater = Math.round(coffeeVal * ratioVal); + if (next.yield !== undefined) next.yield = `${calculatedWater}g`; + if (next.waterVolume !== undefined) next.waterVolume = `${calculatedWater}ml`; + } + } else if (key === "yield" || key === "waterVolume") { + const waterVal = getNum(value); + if (waterVal) { + const calculatedCoffee = Math.round((waterVal / ratioVal) * 10) / 10; + if (next.beanWeight !== undefined) next.beanWeight = `${calculatedCoffee}g`; + if (next.dose !== undefined) next.dose = `${calculatedCoffee}g`; + } + } else if (key === ratioKey) { + const coffeeStr = next.beanWeight || next.dose; + const coffeeVal = getNum(coffeeStr); + if (coffeeVal) { + const calculatedWater = Math.round(coffeeVal * ratioVal); + if (next.yield !== undefined) next.yield = `${calculatedWater}g`; + if (next.waterVolume !== undefined) next.waterVolume = `${calculatedWater}ml`; + } + } + } + + return next; + }); + }; + + const handleMethodChange = (m) => { + setMethod(m); + setForm({ beanId: form.beanId }); // Preserve selected bean but reset inputs + }; if (beans.length === 0) { return ( @@ -29,23 +87,82 @@ export default function BrewForm({ beans, onSave, onClose }) { pourover: [ { key: "grindSize", label: "Grind Size", placeholder: "e.g. 18 clicks", hint: "Relative to your grinder" }, { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" }, - { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 15g" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" }, { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 240ml", hint: "Calculated from ratio" }, { key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:30" }, { key: "numPours", label: "# of Pours", placeholder: "e.g. 4", type: "number" }, ], espresso: [ { key: "grindSize", label: "Grind Size", placeholder: "e.g. 8" }, - { key: "dose", label: "Dose", placeholder: "e.g. 18g" }, - { key: "yield", label: "Yield", placeholder: "e.g. 36g" }, + { key: "dose", label: "Coffee Dose", placeholder: "e.g. 18g" }, + { key: "brewRatio", label: "Target Ratio", placeholder: "e.g. 1:2" }, + { key: "yield", label: "Yield (Output)", placeholder: "e.g. 36g", hint: "Calculated from ratio" }, { key: "brewTime", label: "Brew Time", placeholder: "e.g. 28s" }, ], coldbrew: [ { key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" }, - { key: "beanWeight", label: "Bean Weight", placeholder: "e.g. 100g" }, - { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 700ml" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 100g" }, + { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:10" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 1000ml", hint: "Calculated from ratio" }, { key: "steepTime", label: "Steep Time", placeholder: "e.g. 18 hours" }, ], + aeropress: [ + { key: "grindSize", label: "Grind Size", placeholder: "e.g. 12 clicks" }, + { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 85°C" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" }, + { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 225ml", hint: "Calculated from ratio" }, + { key: "brewTime", label: "Steep Time", placeholder: "e.g. 2:00" }, + { key: "inverted", label: "Inverted?", placeholder: "e.g. Yes/No" }, + ], + frenchpress: [ + { key: "grindSize", label: "Grind Size", placeholder: "e.g. coarse" }, + { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 95°C" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 30g" }, + { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 450ml", hint: "Calculated from ratio" }, + { key: "brewTime", label: "Steep Time", placeholder: "e.g. 4:00" }, + ], + chemex: [ + { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium-coarse" }, + { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 93°C" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 30g" }, + { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 450ml", hint: "Calculated from ratio" }, + { key: "brewTime", label: "Brew Time", placeholder: "e.g. 4:00" }, + { key: "filterType", label: "Filter Type", placeholder: "e.g. Chemex Circle" }, + ], + mokapot: [ + { key: "grindSize", label: "Grind Size", placeholder: "e.g. fine-medium" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 150ml" }, + { key: "brewTime", label: "Extraction Time", placeholder: "e.g. 1:30" }, + ], + v60: [ + { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium-fine" }, + { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 92°C" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 15g" }, + { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 240ml", hint: "Calculated from ratio" }, + { key: "brewTime", label: "Brew Time", placeholder: "e.g. 3:00" }, + { key: "numPours", label: "# of Pours", placeholder: "e.g. 3", type: "number" }, + ], + syphon: [ + { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium" }, + { key: "waterTemp", label: "Water Temp", placeholder: "e.g. 94°C" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 20g" }, + { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:15" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 300ml", hint: "Calculated from ratio" }, + { key: "brewTime", label: "Brew Time", placeholder: "e.g. 2:10" }, + ], + dripbrew: [ + { key: "grindSize", label: "Grind Size", placeholder: "e.g. medium" }, + { key: "beanWeight", label: "Coffee Weight", placeholder: "e.g. 60g" }, + { key: "brewRatio", label: "Brew Ratio", placeholder: "e.g. 1:16" }, + { key: "waterVolume", label: "Water Volume", placeholder: "e.g. 960ml", hint: "Calculated from ratio" }, + { key: "brewTime", label: "Brew Time", placeholder: "e.g. 6:00" }, + ], }; return ( @@ -53,18 +170,18 @@ export default function BrewForm({ beans, onSave, onClose }) { {(close) => ( <>
Log a Brew
-
+
{METHODS.map(m => ( ))}
- handleFieldChange("beanId", e.target.value)}> {beans.map(b => )}
@@ -72,7 +189,7 @@ export default function BrewForm({ beans, onSave, onClose }) {
set(f.key, e.target.value)} /> + value={form[f.key] || ""} onChange={e => handleFieldChange(f.key, e.target.value)} /> {f.hint &&
{f.hint}
}
))} @@ -80,10 +197,10 @@ export default function BrewForm({ beans, onSave, onClose }) {