206 lines
11 KiB
TypeScript
206 lines
11 KiB
TypeScript
import React, { useState, useMemo, useCallback } from 'react';
|
|
import { Session } from '@supabase/supabase-js';
|
|
import type { ShoppingList, ShoppingListItem } from '../types';
|
|
import { UserIcon } from './icons/UserIcon';
|
|
import { ListBulletIcon } from './icons/ListBulletIcon';
|
|
import { LoadingSpinner } from './LoadingSpinner';
|
|
import { TrashIcon } from './icons/TrashIcon';
|
|
import { SpeakerWaveIcon } from './icons/SpeakerWaveIcon';
|
|
import { generateSpeechFromText } from '../services/geminiService';
|
|
import { decode, decodeAudioData } from '../utils/audioUtils';
|
|
|
|
interface ShoppingListComponentProps {
|
|
session: Session | null;
|
|
lists: ShoppingList[];
|
|
activeListId: number | null;
|
|
onSelectList: (listId: number) => void;
|
|
onCreateList: (name: string) => Promise<void>;
|
|
onDeleteList: (listId: number) => Promise<void>;
|
|
onAddItem: (item: { customItemName: string }) => Promise<void>;
|
|
onUpdateItem: (itemId: number, updates: Partial<ShoppingListItem>) => Promise<void>;
|
|
onRemoveItem: (itemId: number) => Promise<void>;
|
|
}
|
|
|
|
export const ShoppingListComponent: React.FC<ShoppingListComponentProps> = ({ session, lists, activeListId, onSelectList, onCreateList, onDeleteList, onAddItem, onUpdateItem, onRemoveItem }) => {
|
|
const [isCreatingList, setIsCreatingList] = useState(false);
|
|
const [customItemName, setCustomItemName] = useState('');
|
|
const [isAddingCustom, setIsAddingCustom] = useState(false);
|
|
const [isReadingAloud, setIsReadingAloud] = useState(false);
|
|
|
|
const activeList = useMemo(() => lists.find(list => list.id === activeListId), [lists, activeListId]);
|
|
const { neededItems, purchasedItems } = useMemo(() => {
|
|
if (!activeList) return { neededItems: [], purchasedItems: [] };
|
|
const neededItems: ShoppingListItem[] = [];
|
|
const purchasedItems: ShoppingListItem[] = [];
|
|
activeList.items.forEach(item => {
|
|
if (item.is_purchased) {
|
|
purchasedItems.push(item);
|
|
} else {
|
|
neededItems.push(item);
|
|
}
|
|
});
|
|
return { neededItems, purchasedItems };
|
|
}, [activeList]);
|
|
|
|
const handleCreateList = async () => {
|
|
const name = prompt("Enter a name for your new shopping list:");
|
|
if (name && name.trim()) {
|
|
setIsCreatingList(true);
|
|
await onCreateList(name.trim());
|
|
setIsCreatingList(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteList = async () => {
|
|
if (activeList && window.confirm(`Are you sure you want to delete the "${activeList.name}" list? This cannot be undone.`)) {
|
|
await onDeleteList(activeList.id);
|
|
}
|
|
};
|
|
|
|
const handleAddCustomItem = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!customItemName.trim()) return;
|
|
setIsAddingCustom(true);
|
|
await onAddItem({ customItemName: customItemName.trim() });
|
|
setCustomItemName('');
|
|
setIsAddingCustom(false);
|
|
};
|
|
|
|
const handleReadAloud = useCallback(async () => {
|
|
if (!activeList || neededItems.length === 0) return;
|
|
|
|
setIsReadingAloud(true);
|
|
try {
|
|
const listText = "Here is your shopping list: " + neededItems.map(item => item.custom_item_name || item.master_item?.name).join(', ');
|
|
const base64Audio = await generateSpeechFromText(listText);
|
|
|
|
// Play the audio
|
|
const audioContext = new (window.AudioContext)({ sampleRate: 24000 });
|
|
const audioBuffer = await decodeAudioData(decode(base64Audio), audioContext, 24000, 1);
|
|
const source = audioContext.createBufferSource();
|
|
source.buffer = audioBuffer;
|
|
source.connect(audioContext.destination);
|
|
source.start();
|
|
} catch (e: any) {
|
|
console.error("Failed to read list aloud:", e);
|
|
alert(`Could not read list aloud: ${e.message}`);
|
|
} finally {
|
|
setIsReadingAloud(false);
|
|
}
|
|
}, [activeList, neededItems]);
|
|
|
|
if (!session) {
|
|
return (
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-center">
|
|
<div className="flex flex-col items-center justify-center h-full min-h-[150px]">
|
|
<UserIcon className="w-10 h-10 text-gray-400 mb-3" />
|
|
<h4 className="font-semibold text-gray-700 dark:text-gray-300">Your Shopping Lists</h4>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
|
Please log in to manage your shopping lists.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-lg font-bold text-gray-800 dark:text-white flex items-center">
|
|
<ListBulletIcon className="w-6 h-6 mr-2 text-brand-primary" />
|
|
Shopping List
|
|
</h3>
|
|
<button
|
|
onClick={handleReadAloud}
|
|
disabled={isReadingAloud || !activeList || neededItems.length === 0}
|
|
className="p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 text-gray-500 dark:text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
title="Read list aloud"
|
|
>
|
|
{isReadingAloud ? <div className="w-5 h-5"><LoadingSpinner/></div> : <SpeakerWaveIcon className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-3 mb-4">
|
|
{lists.length > 0 && (
|
|
<select
|
|
value={activeListId || ''}
|
|
onChange={(e) => onSelectList(Number(e.target.value))}
|
|
className="block w-full pl-3 pr-8 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-brand-primary focus:border-brand-primary"
|
|
>
|
|
{lists.map(list => <option key={list.id} value={list.id}>{list.name}</option>)}
|
|
</select>
|
|
)}
|
|
<div className="flex space-x-2">
|
|
<button onClick={handleCreateList} disabled={isCreatingList} className="flex-1 text-sm bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 font-semibold py-2 px-3 rounded-md transition-colors">
|
|
New List
|
|
</button>
|
|
<button onClick={handleDeleteList} disabled={!activeList} className="flex-1 text-sm bg-red-100 hover:bg-red-200 text-red-700 dark:bg-red-900/40 dark:hover:bg-red-900/60 dark:text-red-300 font-semibold py-2 px-3 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
|
Delete List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{activeList ? (
|
|
<>
|
|
<form onSubmit={handleAddCustomItem} className="flex space-x-2 mb-4">
|
|
<input
|
|
type="text"
|
|
value={customItemName}
|
|
onChange={(e) => setCustomItemName(e.target.value)}
|
|
placeholder="Add a custom item..."
|
|
className="flex-grow block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm"
|
|
disabled={isAddingCustom}
|
|
/>
|
|
<button type="submit" disabled={isAddingCustom || !customItemName.trim()} className="bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 text-white font-bold py-2 px-3 rounded-lg flex items-center justify-center">
|
|
{isAddingCustom ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Add'}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="space-y-2 max-h-80 overflow-y-auto">
|
|
{neededItems.length > 0 ? neededItems.map(item => (
|
|
<div key={item.id} className="group flex items-center space-x-2 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
checked={item.is_purchased}
|
|
onChange={() => onUpdateItem(item.id, { is_purchased: !item.is_purchased })}
|
|
className="h-4 w-4 rounded border-gray-300 text-brand-primary focus:ring-brand-secondary"
|
|
/>
|
|
<span className="flex-grow text-gray-800 dark:text-gray-200">{item.custom_item_name || item.master_item?.name}</span>
|
|
<button onClick={() => onRemoveItem(item.id)} className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 p-1">
|
|
<TrashIcon className="w-4 h-4"/>
|
|
</button>
|
|
</div>
|
|
)) : (
|
|
<p className="text-sm text-gray-500 text-center py-4">This list is empty.</p>
|
|
)}
|
|
|
|
{purchasedItems.length > 0 && (
|
|
<div className="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Purchased</h4>
|
|
{purchasedItems.map(item => (
|
|
<div key={item.id} className="group flex items-center space-x-2 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
checked={item.is_purchased}
|
|
onChange={() => onUpdateItem(item.id, { is_purchased: !item.is_purchased })}
|
|
className="h-4 w-4 rounded border-gray-300 text-brand-primary focus:ring-brand-secondary"
|
|
/>
|
|
<span className="flex-grow text-gray-500 dark:text-gray-400 line-through">{item.custom_item_name || item.master_item?.name}</span>
|
|
<button onClick={() => onRemoveItem(item.id)} className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 p-1">
|
|
<TrashIcon className="w-4 h-4"/>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center py-10">
|
|
<p className="text-gray-500">No shopping lists found. Create one to get started!</p>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}; |