Merge pull request #44 from the-collab-lab/el-delete-list

Delete a shopping list

src/api/firebase.js

@@ -8,6 +8,7 @@ import {
 	onSnapshot,
 	updateDoc,
 	deleteDoc,
+	arrayRemove,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -134,6 +135,24 @@ export async function shareList(listPath, currentUserId, recipientEmail) {
 	return `The list has been successfully shared with ${recipientEmail}`;
 }
 
+/**
+ * Delete user's list from the Firestore.
+ * @param {string} listPath The path to the list to be deleted.
+ * @param {string} userEmail The email of the user who owns the list.
+ */
+export async function deleteList(listPath, userEmail) {
+	const listDocRef = doc(db, listPath);
+	const userDocRef = doc(db, 'users', userEmail);
+	try {
+		await deleteDoc(listDocRef);
+		await updateDoc(userDocRef, {
+			sharedLists: arrayRemove(listDocRef),
+		});
+	} catch (error) {
+		console.log(error);
+	}
+}
+
 /**
  * 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,17 +1,34 @@
 import './SingleList.css';
 import { useNavigate } from 'react-router-dom';
+import { deleteList } from '../api';
 
-export function SingleList({ name, path, setListPath }) {
+export function SingleList({ name, path, setListPath, userId, userEmail }) {
 	const navigate = useNavigate();
+	const isUsersList = userId === path.split('/')[0];
 
 	function handleClick() {
 		setListPath(path);
 		navigate('/list');
 	}
 
+	const handleDelete = async (path, userEmail) => {
+		if (window.confirm(`Do you really want to delete ${name}?`)) {
+			try {
+				await deleteList(path, userEmail);
+				setListPath(null);
+			} catch (error) {
+				console.log(error);
+				alert('Failed to delete the list. Please try again!');
+			}
+		}
+	};
+
 	return (
 		<li className="SingleList">
 			<button onClick={handleClick}>{name}</button>
+			{isUsersList && (
+				<button onClick={() => handleDelete(path, userEmail)}>X</button>
+			)}
 		</li>
 	);
 }

src/components/index.js

@@ -1,2 +1,4 @@
 export * from './ListItem';
 export * from './SingleList';
+export * from './AddItem';
+export * from './AddList';

src/views/Home.jsx

@@ -1,6 +1,5 @@
 import './Home.css';
-import { SingleList } from '../components';
-import { AddList } from '../components/AddList';
+import { SingleList, AddList } from '../components';
 import { auth } from '../api/config.js';
 import { SignInButton, useAuth } from '../api/useAuth';
 
@@ -11,12 +10,12 @@ export function Home({ data, setListPath, userId, userEmail }) {
 		<div className="Home">
 			{!!user ? (
 				<>
-					<p>Welcome back {auth.currentUser.displayName}!</p>
+					<p>Welcome back {auth.currentUser.displayName.split(' ')[0]}!</p>
 					{data.length === 0 && (
 						<p>
 							{' '}
-							It seems you don&apos;t have any lists yet, Please create a list
-							using the form below
+							You don&apos;t have any shopping lists yet. Start by creating your
+							first one!
 						</p>
 					)}
 					{data.length > 0 && (
@@ -27,6 +26,8 @@ export function Home({ data, setListPath, userId, userEmail }) {
 									name={list.name}
 									path={list.path}
 									setListPath={setListPath}
+									userId={userId}
+									userEmail={userEmail}
 								/>
 							))}
 						</ul>

src/views/List.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { ListItem } from '../components';
-import { AddItem } from '../components/AddItem';
+import { ListItem, AddItem } from '../components';
 import {
 	comparePurchaseUrgency,
 	updateItem,
@@ -12,7 +11,12 @@ export function List({ data, listPath, lists }) {
 	const [searchItem, setSearchItem] = useState('');
 	const [items, setItems] = useState([]);
 
-	const listTitle = listPath.split('/')[1];
+	const listTitle = listPath ? listPath.split('/')[1] : null;
+	const fixedListTitle = listTitle
+		? listTitle[listTitle.length - 1] === '}'
+			? listTitle.slice(0, -1)
+			: listTitle
+		: null;
 
 	useEffect(() => {
 		const fetchItems = async () => {
@@ -63,21 +67,33 @@ export function List({ data, listPath, lists }) {
 
 	return (
 		<>
-			<h2>{listTitle}</h2>
+			<h2>{fixedListTitle}</h2>
+			{!listPath && lists.length > 0 && data.length > 0 && (
+				<p>
+					Oops! No list selected yet. Head to the <Link to="/">home page</Link>{' '}
+					and select one!
+				</p>
+			)}
+			{!listPath && lists.length > 0 && data.length === 0 && (
+				<p>
+					Oops! No list selected yet. Head to the <Link to="/">home page</Link>{' '}
+					and select one!
+				</p>
+			)}
 			{lists.length === 0 && (
 				<p>
 					It looks like you don&apos;t have any shopping lists yet. Head to the{' '}
 					<Link to="/">home page</Link> to create your first list and start
 					organizing your shopping!
 				</p>
 			)}
-			{lists.length > 0 && data.length === 0 && (
+			{listPath && lists.length > 0 && data.length === 0 && (
 				<>
 					<AddItem data={data} listPath={listPath} />
 					<p>Your list is currently empty.</p>
 				</>
 			)}
-			{lists.length > 0 && data.length > 0 && (
+			{listPath && lists.length > 0 && data.length > 0 && (
 				<>
 					<AddItem data={data} listPath={listPath} />
 

src/views/ManageList.jsx

@@ -3,29 +3,23 @@ import { shareList } from '../api/firebase';
 
 export function ManageList({ listPath, userId }) {
 	const [formAddUser, setFormAddUser] = useState('');
-	const [messageUser, setMessageUser] = useState('');
 
 	const handleAddUserSubmit = async (e) => {
 		e.preventDefault();
-		if (!formAddUser) {
-			setMessageUser('Enter a recipient email');
-			return;
-		}
+
 		try {
 			const successMessage = await shareList(listPath, userId, formAddUser);
-			setMessageUser(successMessage);
+			alert(successMessage);
 		} catch (error) {
 			console.error('Error sharing a list', error);
 			if (
 				error.message === 'You do not have permission to share this list' ||
 				error.message === 'The user with the provided email does not exist'
 			) {
-				setMessageUser(error.message);
+				alert(error.message);
 			} else {
-				setMessageUser('Failed to share the list. Please try again!');
+				alert('Failed to share the list. Please try again!');
 			}
-		} finally {
-			setFormAddUser('');
 		}
 	};
 
@@ -44,8 +38,6 @@ export function ManageList({ listPath, userId }) {
 					required
 				/>
 
-				<p>{messageUser}</p>
-
 				<button>Invite</button>
 			</form>
 		</>