feat: refactor Share List into a separate component

src/views/ManageList.jsx

@@ -1,15 +1,16 @@
 import { useState, useMemo } from 'react';
-import { addItem, shareList } from '../api/firebase';
+import { addItem } from '../api/firebase';
 import { FaPlusSquare } from 'react-icons/fa';
 import { IconButton } from '../components/IconButton';
-import { FaEnvelope } from 'react-icons/fa6';
+import { Share } from './Share';
 
 export function ManageList({ listPath, user, data }) {
 	const currentUserId = user?.uid;
 	const [itemName, setItemName] = useState('');
 	const [daysUntilNextPurchase, setDaysUntilNextPurchase] = useState(7);
 	const [message, setMessage] = useState('');
-	const [recipientEmail, setRecipientEmail] = useState('');
+
+	const [isModalDialogOpen, setIsModalDialogOpen] = useState(false);
 
 	const messages = {
 		added: 'Your item was successfully added!',
@@ -59,18 +60,6 @@ export function ManageList({ listPath, user, data }) {
 		}
 	};
 
-	const handleShare = (event) => {
-		event.preventDefault();
-		shareList(listPath, currentUserId, recipientEmail)
-			.then((result) => {
-				alert(result);
-				setRecipientEmail('');
-			})
-			.catch((error) => {
-				alert(error);
-			});
-	};
-
 	return (
 		<div>
 			<h1>Manage Your Shopping List for {extractedListName}</h1>
@@ -129,27 +118,7 @@ export function ManageList({ listPath, user, data }) {
 					{messages[message] || ''}
 				</p>
 			)}
-
-			<div>
-				<form onSubmit={handleShare}>
-					<label htmlFor="recipientEmail"> Recipient Email: </label>
-					<input
-						type="email"
-						id="recipientEmail"
-						value={recipientEmail}
-						onChange={(e) => setRecipientEmail(e.target.value)}
-						required
-					/>
-					<IconButton
-						aria-label="Share with an email"
-						as="button"
-						className="share-email"
-						label="Share"
-						IconComponent={FaEnvelope}
-						type="submit"
-					/>
-				</form>
-			</div>
+			<Share />
 		</div>
 	);
 }

src/views/Share.jsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { shareList } from '../api/firebase';
+import { IconButton } from '../components/IconButton';
+import { FaEnvelope } from 'react-icons/fa6';
+
+export function Share() {
+	const [recipientEmail, setRecipientEmail] = useState('');
+
+	const handleShare = (event) => {
+		event.preventDefault();
+		shareList(listPath, currentUserId, recipientEmail)
+			.then((result) => {
+				alert(result);
+				setRecipientEmail('');
+			})
+			.catch((error) => {
+				alert(error);
+			});
+	};
+
+	return (
+		<div>
+			<form onSubmit={handleShare}>
+				<label htmlFor="recipientEmail"> Recipient Email: </label>
+				<input
+					type="email"
+					id="recipientEmail"
+					value={recipientEmail}
+					onChange={(e) => setRecipientEmail(e.target.value)}
+					required
+				/>
+				<IconButton
+					aria-label="Share with an email"
+					as="button"
+					className="share-email"
+					label="Share"
+					IconComponent={FaEnvelope}
+					type="submit"
+				/>
+			</form>
+		</div>
+	);
+}