restructure useShoppingLists and shareList to distinguish shared list…

…s and updated icon for shared lists

src/api/firebase.js

@@ -37,11 +37,23 @@ export function useShoppingLists(userId, userEmail) {
 
 		onSnapshot(userDocRef, (docSnap) => {
 			if (docSnap.exists()) {
-				const listRefs = docSnap.data().sharedLists;
-				const newData = listRefs.map((listRef) => {
-					// We keep the list's id and path so we can use them later.
-					return { name: listRef.id, path: listRef.path };
-				});
+				const userData = docSnap.data();
+				const sharedLists = userData.sharedLists || []; // Lists created by the user
+				const sharedWithMeLists = userData.sharedWithMe || []; // Lists shared with the user
+
+				const sharedListsData = sharedLists.map((listRef) => ({
+					name: listRef.id,
+					path: listRef.path,
+					isShared: false, // These lists are created by the user
+				}));
+
+				const sharedWithMeData = sharedWithMeLists.map((listRef) => ({
+					name: listRef.id,
+					path: listRef.path,
+					isShared: true, // These lists are shared with the user
+				}));
+
+				const newData = [...sharedListsData, ...sharedWithMeData];
 				setData(newData);
 			}
 		});
@@ -140,6 +152,10 @@ export async function createList(userId, userEmail, listName) {
  * @param {string} listPath The path to the list to share.
  * @param {string} recipientEmail The email of the user to share the list with.
  */
+
+//for a user, is there a way to know which shopping list are the ones being shared with, not owning this list
+// if shared list, only unfollow when deleted
+// if owning this list, cascading deletion
 export async function shareList(listPath, currentUserId, recipientEmail) {
 	// Check if current user is owner.
 	if (!listPath.includes(currentUserId)) {
@@ -159,9 +175,13 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
 	const listDocumentRef = doc(db, listPath);
 	const userDocumentRef = doc(db, 'users', recipientEmail);
 	await updateDoc(userDocumentRef, {
-		sharedLists: arrayUnion(listDocumentRef),
+		sharedWithMe: arrayUnion(listDocumentRef),
 	});
 
+	const updatedRecipientDoc = await getDoc(userDocumentRef);
+	const updatedSharedLists = updatedRecipientDoc.data().sharedWithMe || [];
+	console.log('After update:', updatedSharedLists);
+
 	return {
 		response: `The shopping list "${listPath.split('/').pop()}" has been shared!`,
 	};

src/views/Home.jsx

@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { useVoiceToText } from '../utils';
 import DeleteIcon from '@mui/icons-material/Delete';
 import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice';
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'; //remove shopping list that are being shared with
 
 export function Home({ data, setListPath, setAllLists }) {
 	const [listName, setListName] = useState('');
@@ -57,6 +58,10 @@ export function Home({ data, setListPath, setAllLists }) {
 		}
 	};
 
+	const handleRemoveSharedList = async (list) => {
+		return;
+	};
+
 	return (
 		<div className="flex flex-col h-[80vh]  my-8 p-8 bg-white rounded-3xl shadow-xl overflow-hidden mx-auto">
 			<ul className="font-archivo flex-grow overflow-y-auto space-y-4">
@@ -72,9 +77,24 @@ export function Home({ data, setListPath, setAllLists }) {
 										path={list.path}
 									/>
 									<div className="flex items-center space-x-4">
-										<button onClick={() => handleDelete(list)} className="p-2">
-											<DeleteIcon />
-										</button>
+										{!list.isShared && (
+											<button
+												onClick={() => handleDelete(list)}
+												className="p-2"
+											>
+												<DeleteIcon />
+											</button>
+										)}
+
+										{/* Remove button for shared lists */}
+										{list.isShared && (
+											<button
+												onClick={() => handleRemoveSharedList(list)}
+												className="p-2"
+											>
+												<RemoveCircleIcon />
+											</button>
+										)}
 										<ShareListComponent
 											name={list.name}
 											setListPath={setListPath}