548 lines
18 KiB
JavaScript
548 lines
18 KiB
JavaScript
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
|
|
import {
|
|
addItem,
|
|
getClassification,
|
|
getItemByName,
|
|
getList,
|
|
getRecentlyBought,
|
|
getSuggestions,
|
|
markBought,
|
|
updateItemImage,
|
|
updateItemWithClassification
|
|
} from "../api/list";
|
|
import FloatingActionButton from "../components/common/FloatingActionButton";
|
|
import SortDropdown from "../components/common/SortDropdown";
|
|
import AddItemForm from "../components/forms/AddItemForm";
|
|
import GroceryListItem from "../components/items/GroceryListItem";
|
|
import AddItemWithDetailsModal from "../components/modals/AddItemWithDetailsModal";
|
|
import EditItemModal from "../components/modals/EditItemModal";
|
|
import SimilarItemModal from "../components/modals/SimilarItemModal";
|
|
import { ZONE_FLOW } from "../constants/classifications";
|
|
import { ROLES } from "../constants/roles";
|
|
import { AuthContext } from "../context/AuthContext";
|
|
import { SettingsContext } from "../context/SettingsContext";
|
|
import "../styles/pages/GroceryList.css";
|
|
import { findSimilarItems } from "../utils/stringSimilarity";
|
|
|
|
|
|
export default function GroceryList() {
|
|
const { role } = useContext(AuthContext);
|
|
const { settings } = useContext(SettingsContext);
|
|
|
|
// === State === //
|
|
const [items, setItems] = useState([]);
|
|
const [recentlyBoughtItems, setRecentlyBoughtItems] = useState([]);
|
|
const [recentlyBoughtDisplayCount, setRecentlyBoughtDisplayCount] = useState(settings.recentlyBoughtCount);
|
|
const [sortMode, setSortMode] = useState(settings.defaultSortMode);
|
|
const [suggestions, setSuggestions] = useState([]);
|
|
const [showAddForm, setShowAddForm] = useState(true);
|
|
const [loading, setLoading] = useState(true);
|
|
const [buttonText, setButtonText] = useState("Add Item");
|
|
const [pendingItem, setPendingItem] = useState(null);
|
|
const [showAddDetailsModal, setShowAddDetailsModal] = useState(false);
|
|
const [showSimilarModal, setShowSimilarModal] = useState(false);
|
|
const [similarItemSuggestion, setSimilarItemSuggestion] = useState(null);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
const [editingItem, setEditingItem] = useState(null);
|
|
const [recentlyBoughtCollapsed, setRecentlyBoughtCollapsed] = useState(settings.recentlyBoughtCollapsed);
|
|
|
|
|
|
// === Data Loading ===
|
|
const loadItems = async () => {
|
|
setLoading(true);
|
|
const res = await getList();
|
|
console.log(res.data);
|
|
setItems(res.data);
|
|
setLoading(false);
|
|
};
|
|
|
|
|
|
const loadRecentlyBought = async () => {
|
|
try {
|
|
const res = await getRecentlyBought();
|
|
setRecentlyBoughtItems(res.data);
|
|
} catch (error) {
|
|
console.error("Failed to load recently bought items:", error);
|
|
setRecentlyBoughtItems([]);
|
|
}
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
loadItems();
|
|
loadRecentlyBought();
|
|
}, []);
|
|
|
|
|
|
// === Sorted Items Computation ===
|
|
const sortedItems = useMemo(() => {
|
|
const sorted = [...items];
|
|
|
|
if (sortMode === "az") sorted.sort((a, b) => a.item_name.localeCompare(b.item_name));
|
|
if (sortMode === "za") sorted.sort((a, b) => b.item_name.localeCompare(a.item_name));
|
|
if (sortMode === "qty-high") sorted.sort((a, b) => b.quantity - a.quantity);
|
|
if (sortMode === "qty-low") sorted.sort((a, b) => a.quantity - b.quantity);
|
|
if (sortMode === "zone") {
|
|
sorted.sort((a, b) => {
|
|
// Items without classification go to the end
|
|
if (!a.zone && b.zone) return 1;
|
|
if (a.zone && !b.zone) return -1;
|
|
if (!a.zone && !b.zone) return a.item_name.localeCompare(b.item_name);
|
|
|
|
// Sort by ZONE_FLOW order
|
|
const aZoneIndex = ZONE_FLOW.indexOf(a.zone);
|
|
const bZoneIndex = ZONE_FLOW.indexOf(b.zone);
|
|
|
|
// If zone not in ZONE_FLOW, put at end
|
|
const aIndex = aZoneIndex === -1 ? ZONE_FLOW.length : aZoneIndex;
|
|
const bIndex = bZoneIndex === -1 ? ZONE_FLOW.length : bZoneIndex;
|
|
|
|
const zoneCompare = aIndex - bIndex;
|
|
if (zoneCompare !== 0) return zoneCompare;
|
|
|
|
// Then by item_type
|
|
const typeCompare = (a.item_type || "").localeCompare(b.item_type || "");
|
|
if (typeCompare !== 0) return typeCompare;
|
|
|
|
// Then by item_group
|
|
const groupCompare = (a.item_group || "").localeCompare(b.item_group || "");
|
|
if (groupCompare !== 0) return groupCompare;
|
|
|
|
// Finally by name
|
|
return a.item_name.localeCompare(b.item_name);
|
|
});
|
|
}
|
|
|
|
return sorted;
|
|
}, [items, sortMode]);
|
|
|
|
|
|
// === Suggestion Handler ===
|
|
const handleSuggest = async (text) => {
|
|
if (!text.trim()) {
|
|
setSuggestions([]);
|
|
setButtonText("Add Item");
|
|
return;
|
|
}
|
|
|
|
const allItems = [...items, ...recentlyBoughtItems];
|
|
const lowerText = text.toLowerCase().trim();
|
|
const exactMatch = allItems.find(item => item.item_name.toLowerCase() === lowerText);
|
|
|
|
setButtonText(exactMatch ? "Add" : "Create + Add");
|
|
|
|
try {
|
|
const suggestions = await getSuggestions(text);
|
|
setSuggestions(suggestions.data.map(s => s.item_name));
|
|
} catch {
|
|
setSuggestions([]);
|
|
}
|
|
};
|
|
|
|
|
|
// === Item Addition Handlers ===
|
|
const handleAdd = useCallback(async (itemName, quantity) => {
|
|
if (!itemName.trim()) return;
|
|
|
|
let existingItem = null;
|
|
try {
|
|
const response = await getItemByName(itemName);
|
|
existingItem = response.data;
|
|
} catch {
|
|
existingItem = null;
|
|
}
|
|
|
|
if (existingItem) {
|
|
await processItemAddition(itemName, quantity);
|
|
return;
|
|
}
|
|
|
|
setItems(prevItems => {
|
|
const allItems = [...prevItems, ...recentlyBoughtItems];
|
|
const similar = findSimilarItems(itemName, allItems, 70);
|
|
if (similar.length > 0) {
|
|
setSimilarItemSuggestion({ originalName: itemName, suggestedItem: similar[0], quantity });
|
|
setShowSimilarModal(true);
|
|
return prevItems;
|
|
}
|
|
|
|
processItemAddition(itemName, quantity);
|
|
return prevItems;
|
|
});
|
|
}, [recentlyBoughtItems]);
|
|
|
|
|
|
const processItemAddition = useCallback(async (itemName, quantity) => {
|
|
let existingItem = null;
|
|
try {
|
|
const response = await getItemByName(itemName);
|
|
existingItem = response.data;
|
|
} catch {
|
|
existingItem = null;
|
|
}
|
|
|
|
if (existingItem?.bought === false) {
|
|
const currentQuantity = existingItem.quantity;
|
|
const newQuantity = currentQuantity + quantity;
|
|
const yes = window.confirm(
|
|
`Item "${itemName}" already exists in the list. Do you want to update its quantity from ${currentQuantity} to ${newQuantity}?`
|
|
);
|
|
if (!yes) return;
|
|
|
|
const response = await addItem(itemName, newQuantity, null);
|
|
setSuggestions([]);
|
|
setButtonText("Add Item");
|
|
|
|
if (response.data) {
|
|
setItems(prevItems =>
|
|
prevItems.map(item =>
|
|
item.id === existingItem.id ? { ...item, ...response.data } : item
|
|
)
|
|
);
|
|
}
|
|
} else if (existingItem) {
|
|
const response = await addItem(itemName, quantity, null);
|
|
setSuggestions([]);
|
|
setButtonText("Add Item");
|
|
|
|
if (response.data) {
|
|
setItems(prevItems => [...prevItems, response.data]);
|
|
setRecentlyBoughtItems(prevItems => prevItems.filter(item => item.id !== existingItem.id));
|
|
}
|
|
} else {
|
|
setPendingItem({ itemName, quantity });
|
|
setShowAddDetailsModal(true);
|
|
}
|
|
}, []);
|
|
|
|
|
|
// === Similar Item Modal Handlers ===
|
|
const handleSimilarCancel = useCallback(() => {
|
|
setShowSimilarModal(false);
|
|
setSimilarItemSuggestion(null);
|
|
}, []);
|
|
|
|
|
|
const handleSimilarNo = useCallback(async () => {
|
|
if (!similarItemSuggestion) return;
|
|
setShowSimilarModal(false);
|
|
await processItemAddition(similarItemSuggestion.originalName, similarItemSuggestion.quantity);
|
|
setSimilarItemSuggestion(null);
|
|
}, [similarItemSuggestion, processItemAddition]);
|
|
|
|
|
|
const handleSimilarYes = useCallback(async () => {
|
|
if (!similarItemSuggestion) return;
|
|
setShowSimilarModal(false);
|
|
await processItemAddition(similarItemSuggestion.suggestedItem.item_name, similarItemSuggestion.quantity);
|
|
setSimilarItemSuggestion(null);
|
|
}, [similarItemSuggestion, processItemAddition]);
|
|
|
|
|
|
// === Add Details Modal Handlers ===
|
|
const handleAddDetailsConfirm = useCallback(async (imageFile, classification) => {
|
|
if (!pendingItem) return;
|
|
|
|
try {
|
|
const addResponse = await addItem(pendingItem.itemName, pendingItem.quantity, imageFile);
|
|
let newItem = addResponse.data;
|
|
|
|
if (classification) {
|
|
const itemResponse = await getItemByName(pendingItem.itemName);
|
|
const itemId = itemResponse.data.id;
|
|
const updateResponse = await updateItemWithClassification(itemId, undefined, undefined, classification);
|
|
newItem = { ...newItem, ...updateResponse.data };
|
|
}
|
|
|
|
setShowAddDetailsModal(false);
|
|
setPendingItem(null);
|
|
setSuggestions([]);
|
|
setButtonText("Add Item");
|
|
|
|
if (newItem) {
|
|
setItems(prevItems => [...prevItems, newItem]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to add item:", error);
|
|
alert("Failed to add item. Please try again.");
|
|
}
|
|
}, [pendingItem]);
|
|
|
|
|
|
const handleAddDetailsSkip = useCallback(async () => {
|
|
if (!pendingItem) return;
|
|
|
|
try {
|
|
const response = await addItem(pendingItem.itemName, pendingItem.quantity, null);
|
|
|
|
setShowAddDetailsModal(false);
|
|
setPendingItem(null);
|
|
setSuggestions([]);
|
|
setButtonText("Add Item");
|
|
|
|
if (response.data) {
|
|
setItems(prevItems => [...prevItems, response.data]);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to add item:", error);
|
|
alert("Failed to add item. Please try again.");
|
|
}
|
|
}, [pendingItem]);
|
|
|
|
|
|
const handleAddDetailsCancel = useCallback(() => {
|
|
setShowAddDetailsModal(false);
|
|
setPendingItem(null);
|
|
setSuggestions([]);
|
|
setButtonText("Add Item");
|
|
}, []);
|
|
|
|
|
|
// === Item Action Handlers ===
|
|
const handleBought = useCallback(async (id, quantity) => {
|
|
await markBought(id);
|
|
setItems(prevItems => prevItems.filter(item => item.id !== id));
|
|
loadRecentlyBought();
|
|
}, []);
|
|
|
|
|
|
const handleImageAdded = useCallback(async (id, itemName, quantity, imageFile) => {
|
|
try {
|
|
const response = await updateItemImage(id, itemName, quantity, imageFile);
|
|
|
|
setItems(prevItems =>
|
|
prevItems.map(item =>
|
|
item.id === id ? { ...item, ...response.data } : item
|
|
)
|
|
);
|
|
|
|
setRecentlyBoughtItems(prevItems =>
|
|
prevItems.map(item =>
|
|
item.id === id ? { ...item, ...response.data } : item
|
|
)
|
|
);
|
|
} catch (error) {
|
|
console.error("Failed to add image:", error);
|
|
alert("Failed to add image. Please try again.");
|
|
}
|
|
}, []);
|
|
|
|
|
|
const handleLongPress = useCallback(async (item) => {
|
|
if (![ROLES.ADMIN, ROLES.EDITOR].includes(role)) return;
|
|
|
|
try {
|
|
const classificationResponse = await getClassification(item.id);
|
|
setEditingItem({
|
|
...item,
|
|
classification: classificationResponse.data
|
|
});
|
|
setShowEditModal(true);
|
|
} catch (error) {
|
|
console.error("Failed to load classification:", error);
|
|
setEditingItem({ ...item, classification: null });
|
|
setShowEditModal(true);
|
|
}
|
|
}, [role]);
|
|
|
|
|
|
// === Edit Modal Handlers ===
|
|
const handleEditSave = useCallback(async (id, itemName, quantity, classification) => {
|
|
try {
|
|
const response = await updateItemWithClassification(id, itemName, quantity, classification);
|
|
setShowEditModal(false);
|
|
setEditingItem(null);
|
|
|
|
const updatedItem = response.data;
|
|
setItems(prevItems =>
|
|
prevItems.map(item =>
|
|
item.id === id ? { ...item, ...updatedItem } : item
|
|
)
|
|
);
|
|
|
|
setRecentlyBoughtItems(prevItems =>
|
|
prevItems.map(item =>
|
|
item.id === id ? { ...item, ...updatedItem } : item
|
|
)
|
|
);
|
|
} catch (error) {
|
|
console.error("Failed to update item:", error);
|
|
throw error;
|
|
}
|
|
}, []);
|
|
|
|
|
|
const handleEditCancel = useCallback(() => {
|
|
setShowEditModal(false);
|
|
setEditingItem(null);
|
|
}, []);
|
|
|
|
|
|
// === Helper Functions ===
|
|
const groupItemsByZone = (items) => {
|
|
const groups = {};
|
|
items.forEach(item => {
|
|
const zone = item.zone || 'unclassified';
|
|
if (!groups[zone]) {
|
|
groups[zone] = [];
|
|
}
|
|
groups[zone].push(item);
|
|
});
|
|
return groups;
|
|
};
|
|
|
|
|
|
if (loading) return <p>Loading...</p>;
|
|
|
|
|
|
return (
|
|
<div className="glist-body">
|
|
<div className="glist-container">
|
|
<h1 className="glist-title">Costco Grocery List</h1>
|
|
|
|
|
|
{[ROLES.ADMIN, ROLES.EDITOR].includes(role) && showAddForm && (
|
|
<AddItemForm
|
|
onAdd={handleAdd}
|
|
onSuggest={handleSuggest}
|
|
suggestions={suggestions}
|
|
buttonText={buttonText}
|
|
/>
|
|
)}
|
|
|
|
<SortDropdown value={sortMode} onChange={setSortMode} />
|
|
|
|
{sortMode === "zone" ? (
|
|
(() => {
|
|
const grouped = groupItemsByZone(sortedItems);
|
|
return Object.keys(grouped).map(zone => (
|
|
<div key={zone} className="glist-classification-group">
|
|
<h3 className="glist-classification-header">
|
|
{zone === 'unclassified' ? 'Unclassified' : zone}
|
|
</h3>
|
|
<ul className="glist-ul">
|
|
{grouped[zone].map((item) => (
|
|
<GroceryListItem
|
|
key={item.id}
|
|
item={item}
|
|
allItems={sortedItems}
|
|
onClick={(id, quantity) =>
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) && handleBought(id, quantity)
|
|
}
|
|
onImageAdded={
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) ? handleImageAdded : null
|
|
}
|
|
onLongPress={
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) ? handleLongPress : null
|
|
}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
));
|
|
})()
|
|
) : (
|
|
<ul className="glist-ul">
|
|
{sortedItems.map((item) => (
|
|
<GroceryListItem
|
|
key={item.id}
|
|
item={item}
|
|
allItems={sortedItems}
|
|
onClick={(id, quantity) =>
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) && handleBought(id, quantity)
|
|
}
|
|
onImageAdded={
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) ? handleImageAdded : null
|
|
}
|
|
onLongPress={
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) ? handleLongPress : null
|
|
}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{recentlyBoughtItems.length > 0 && settings.showRecentlyBought && (
|
|
<>
|
|
<div className="glist-section-header">
|
|
<h2 className="glist-section-title">Recently Bought (24HR)</h2>
|
|
<button
|
|
className="glist-collapse-btn"
|
|
onClick={() => setRecentlyBoughtCollapsed(!recentlyBoughtCollapsed)}
|
|
>
|
|
{recentlyBoughtCollapsed ? "▼ Show" : "▲ Hide"}
|
|
</button>
|
|
</div>
|
|
|
|
{!recentlyBoughtCollapsed && (
|
|
<>
|
|
<ul className="glist-ul">
|
|
{recentlyBoughtItems.slice(0, recentlyBoughtDisplayCount).map((item) => (
|
|
<GroceryListItem
|
|
key={item.id}
|
|
item={item}
|
|
allItems={recentlyBoughtItems}
|
|
onClick={null}
|
|
onImageAdded={
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) ? handleImageAdded : null
|
|
}
|
|
onLongPress={
|
|
[ROLES.ADMIN, ROLES.EDITOR].includes(role) ? handleLongPress : null
|
|
}
|
|
/>
|
|
))}
|
|
</ul>
|
|
{recentlyBoughtDisplayCount < recentlyBoughtItems.length && (
|
|
<div style={{ textAlign: 'center', marginTop: '1rem' }}>
|
|
<button
|
|
className="glist-show-more-btn"
|
|
onClick={() => setRecentlyBoughtDisplayCount(prev => prev + 10)}
|
|
>
|
|
Show More ({recentlyBoughtItems.length - recentlyBoughtDisplayCount} remaining)
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{[ROLES.ADMIN, ROLES.EDITOR].includes(role) && (
|
|
<FloatingActionButton
|
|
isOpen={showAddForm}
|
|
onClick={() => setShowAddForm(!showAddForm)}
|
|
/>
|
|
)}
|
|
|
|
{showAddDetailsModal && pendingItem && (
|
|
<AddItemWithDetailsModal
|
|
itemName={pendingItem.itemName}
|
|
onConfirm={handleAddDetailsConfirm}
|
|
onSkip={handleAddDetailsSkip}
|
|
onCancel={handleAddDetailsCancel}
|
|
/>
|
|
)}
|
|
|
|
{showSimilarModal && similarItemSuggestion && (
|
|
<SimilarItemModal
|
|
originalName={similarItemSuggestion.originalName}
|
|
suggestedName={similarItemSuggestion.suggestedItem.item_name}
|
|
onCancel={handleSimilarCancel}
|
|
onNo={handleSimilarNo}
|
|
onYes={handleSimilarYes}
|
|
/>
|
|
)}
|
|
|
|
{showEditModal && editingItem && (
|
|
<EditItemModal
|
|
item={editingItem}
|
|
onSave={handleEditSave}
|
|
onCancel={handleEditCancel}
|
|
onImageUpdate={handleImageAdded}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|