Merge pull request #56 from engagingnewsproject/feature-help-requests…

…-view Help Requests View Enhanced Features
engagingnewsproject · Oct 29, 2024 · 71b9b99 · 71b9b99
2 parents f833565 + 7b463be
commit 71b9b99
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 47 deletions.
diff --git a/components/HelpRequests.jsx b/components/HelpRequests.jsx
@@ -93,6 +93,24 @@ const HelpRequests = () => {
 		getData()
 	}, [])
 
+	const getMailtoLink = (helpRequestInfo) => {
+		const formattedBody =
+			`Hi [NAME],%0A%0A%0A%0A%0A%0A` +
+			`Best Regards,%0A` +
+			`[YOUR NAME]%0A` +
+			`Truth Sleuth Support Team%0A%0A` +
+			`---%0A%0AForwarded Help Request:%0A%0A` +
+			`User ID: ${helpRequestInfo.userID}%0A` +
+			`Email: ${helpRequestInfo.email}%0A` +
+			`Subject: ${helpRequestInfo.subject}%0A` +
+			`Message: ${helpRequestInfo.message}%0A` +
+			`Created Date: ${helpRequestInfo.createdDate}%0A` +
+			`Images: ${helpRequestInfo.images.join(', ')}%0A`
+
+		const mailtoLink = `mailto:${helpRequestInfo.email}?subject=${encodeURIComponent(helpRequestInfo.subject)}%20-%20Truth%20Sleuth%20Help%20Request&body=${formattedBody}`
+		return mailtoLink
+	}
+
 	return (
 		<>
 			<div className={style.section_container}>
@@ -130,50 +148,54 @@ const HelpRequests = () => {
 							)}
 
 							{helpRequests.length > 0 &&
-								helpRequests.map((request) => (
-									<tr
-										onClick={() => {
-											const { id, ...data } = request
-											handleRequestModalShow(data)
-										}}
-										key={request.id}
-										className={style.table_tr}>
-										<td className={style.table_td}>{request.subject}</td>
-										<td className={style.table_td}>{request.message}</td>
-										<td className={style.table_td}>
-											<Link
-												onClick={(e) => {
-													e.stopPropagation()
-												}}
-												className="underline"
-												href={`mailto:${request.email}`}
-												target="_blank">
-												{request.email}
-											</Link>
-										</td>
-										<td className={style.table_td}>{request.createdDate}</td>
-										<td
-											className={`${style.table_td} text-center`}
-											onClick={(e) => e.stopPropagation()}>
-											<button
-												onClick={async () => {
-													await handleDeleteRequest(request.id)
-												}}
-												className={`${style.icon} tooltip-delete-user`}>
-												<IoTrash
-													size={20}
-													className="fill-gray-400 hover:fill-red-600"
-												/>
-												<Tooltip
-													anchorSelect=".tooltip-delete-user"
-													place="top"
-													delayShow={500}>
-													Delete Request
-												</Tooltip>
-											</button>
-										</td>
-									</tr>
-								))}
+								helpRequests
+									.sort(
+										(a, b) => new Date(b.createdDate) - new Date(a.createdDate),
+									)
+									.map((request) => (
+										<tr
+											onClick={() => {
+												const { id, ...data } = request
+												handleRequestModalShow(data)
+											}}
+											key={request.id}
+											className={style.table_tr}>
+											<td className={style.table_td}>{request.subject}</td>
+											<td className={style.table_td}>{request.message}</td>
+											<td className={style.table_td}>
+												<Link
+													onClick={(e) => {
+														e.stopPropagation()
+													}}
+													className="underline"
+													href={getMailtoLink(request)}
+													target="_blank">
+													{request.email}
+												</Link>
+											</td>
+											<td className={style.table_td}>{request.createdDate}</td>
+											<td
+												className={`${style.table_td} text-center`}
+												onClick={(e) => e.stopPropagation()}>
+												<button
+													onClick={async () => {
+														await handleDeleteRequest(request.id)
+													}}
+													className={`${style.icon} tooltip-delete-user`}>
+													<IoTrash
+														size={20}
+														className="fill-gray-400 hover:fill-red-600"
+													/>
+													<Tooltip
+														anchorSelect=".tooltip-delete-user"
+														place="top"
+														delayShow={500}>
+														Delete Request
+													</Tooltip>
+												</button>
+											</td>
+										</tr>
+									))}
 						</tbody>
 					</table>
 				</div>
@@ -183,6 +205,7 @@ const HelpRequests = () => {
 				<HelpRequestsModal
 					helpRequestInfo={selectedHelpRequest}
 					handleClose={handleRequestModalClose}
+					mailtoLink={getMailtoLink(selectedHelpRequest)}
 				/>
 			)}
 		</>

diff --git a/components/modals/HelpRequestsModal.jsx b/components/modals/HelpRequestsModal.jsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-tailwind/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import React, { Fragment } from 'react'
@@ -34,7 +35,7 @@ const formatLabel = (label) => {
 	return label.replace(/([a-z])([A-Z])/g, '$1 $2')
 }
 
-const HelpRequestsModal = ({ helpRequestInfo, handleClose }) => {
+const HelpRequestsModal = ({ helpRequestInfo, handleClose, mailtoLink }) => {
 	return (
 		<div className={style.modal_background} onClick={handleClose}>
 			<div className={style.modal_container}>
@@ -50,7 +51,7 @@ const HelpRequestsModal = ({ helpRequestInfo, handleClose }) => {
 						</div>
 					</div>
 
-					<div>
+					<div className="mb-8">
 						<form>
 							<div className={style.modal_form_container}>
 								{Object.entries(helpRequestInfo).map(([key, value], index) => (
@@ -81,7 +82,7 @@ const HelpRequestsModal = ({ helpRequestInfo, handleClose }) => {
 												</div>
 											) : key === 'email' ? (
 												<Link
-													href={`mailto:${value}`}
+													href={mailtoLink}
 													target="_blank"
 													className="underline">
 													{value}
@@ -95,6 +96,20 @@ const HelpRequestsModal = ({ helpRequestInfo, handleClose }) => {
 							</div>
 						</form>
 					</div>
+
+					<Link href={mailtoLink} target="_blank">
+						<Button
+							color="blue"
+							buttonType="filled"
+							size="regular"
+							rounded={false}
+							block={false}
+							iconOnly={false}
+							ripple="light"
+							className={style.modal_form_button}>
+							Reply
+						</Button>
+					</Link>
 				</div>
 			</div>
 		</div>