Merge pull request #34 from the-collab-lab/ju-vi-delete-list

Ju vi delete list

src/api/firebase.js

@@ -5,9 +5,12 @@ import {
 	deleteDoc,
 	doc,
 	getDoc,
+	getDocs,
 	onSnapshot,
+	query,
 	setDoc,
 	updateDoc,
+	where
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -160,6 +163,47 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
 	return userDocumentRef;
 }
 
+/**
+ * Delete a user's list only if the current user is the list owner.
+ * @param {string} userId The id of the user who owns the list.
+ * @param {string} userEmail The email of the current user.
+ * @param {string} listPath The path of the list to delete.
+ * @param {string} listId The id of the list to delete.
+ */
+export async function deleteList(userId, userEmail, listPath, listId) {
+	// Check if current user is owner.
+	if (!listPath.includes(userId)) {
+		const usersCollectionRef = collection(db, 'users');
+		const userDocumentRef = doc(usersCollectionRef, userEmail);
+		const userSharedLists = (await getDoc(userDocumentRef)).data().sharedLists;
+
+		// Remove list reference from user's sharedLists array
+		await updateDoc(userDocumentRef, {
+			sharedLists: userSharedLists.filter((list) => list.path !== listPath),
+		});
+		return;
+	}
+
+	// Delete list doc
+	const listCollectionRef = collection(db, userId);
+	const listDocumentRef = doc(listCollectionRef, listId);
+	await deleteDoc(listDocumentRef);
+
+	// Update users doc that include a list reference
+	const q = query(
+		collection(db, 'users'),
+		where('sharedLists', 'array-contains', listDocumentRef),
+	);
+	const querySnapshot = await getDocs(q);
+	querySnapshot.forEach(async (d) => {
+		await updateDoc(doc(db, 'users', d.data().email), {
+			sharedLists: d
+				.data()
+				.sharedLists.filter((list) => list.path !== listPath),
+		});
+	});
+}
+
 /**
  * Add a new item to the user's list in Firestore.
  * @param {string} listPath The path of the list we're adding to.

src/components/SingleList.jsx

@@ -1,16 +1,44 @@
 import { useNavigate } from 'react-router-dom';
 import './SingleList.css';
+import { deleteList } from '../api/firebase';
 
-export function SingleList({ name, path, setListPath }) {
+export function SingleList({ userEmail, name, path, setListPath, userId }) {
 	const navigate = useNavigate();
 	function handleClick() {
 		setListPath(path);
 		navigate(`/list/${path}`);
 	}
 
+	function handleDelete(user, email, listPath, listName) {
+		if (listPath.includes(user)) {
+			if (
+				window.confirm(
+					`Do you really want to delete ${listName.toUpperCase()} list?`,
+				)
+			) {
+				deleteList(user, email, listPath, listName);
+			}
+			return;
+		}
+		if (
+			window.confirm(
+				`Do you really want to stop using ${listName.toUpperCase()} list?`,
+			)
+		) {
+			deleteList(user, email, listPath, listName);
+		}
+		return;
+	}
+
 	return (
 		<li className="SingleList">
 			<button onClick={handleClick}>{name}</button>
+			<button
+				className="List__delete-button"
+				onClick={() => handleDelete(userId, userEmail, path, name)}
+			>
+				Delete List
+			</button>
 		</li>
 	);
 }

src/views/Home.jsx

@@ -28,6 +28,8 @@ export function Home({ data, setListPath, userId, userEmail }) {
 						name={list.name}
 						path={list.path}
 						setListPath={setListPath}
+						userId={userId}
+						userEmail={userEmail}
 					/>
 				))}
 			</ul>