From f8c8688e786e29361db65a19e3e0c78f32d8d979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= <truite.berthail@gmail.com>
Date: Fri, 13 Sep 2024 22:24:45 +0200
Subject: [PATCH] feat(Messaging): now support anchor links

---
 src/components/app/Messaging/Inbox.css        |  1 +
 .../app/Messaging/MessageReader.jsx           |  2 +-
 src/components/app/Messaging/Messaging.jsx    | 41 ++++++++++++++++++-
 src/components/graphics/Arrow.jsx             |  2 +-
 src/components/graphics/AttachmentIcon.jsx    |  2 +-
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/components/app/Messaging/Inbox.css b/src/components/app/Messaging/Inbox.css
index bf3c17b..b5d3328 100644
--- a/src/components/app/Messaging/Inbox.css
+++ b/src/components/app/Messaging/Inbox.css
@@ -75,6 +75,7 @@
     flex-flow: row nowrap;
     justify-content: space-between;
     width: 100%;
+    gap: 5px;
 }
 
 #inbox .message-container .message-subject .author-name {
diff --git a/src/components/app/Messaging/MessageReader.jsx b/src/components/app/Messaging/MessageReader.jsx
index e819b8d..5da9e06 100644
--- a/src/components/app/Messaging/MessageReader.jsx
+++ b/src/components/app/Messaging/MessageReader.jsx
@@ -44,7 +44,7 @@ export default function MessageReader({ selectedMessage }) {
                                 <hr />
                                 <div className="email-footer">
                                     <ul className="attachments-container">
-                                        {message.files.map((file) => <li><button className="attachment"  onClick={() => file.download()}><DownloadIcon className="download-icon" />{file.name + "." + file.extension}</button></li>)}
+                                        {message.files.map((file) => <li key={file.id}><button className="attachment" onClick={() => file.download()}><DownloadIcon className="download-icon" />{file.name + "." + file.extension}</button></li>)}
                                     </ul>
                                 </div>
                             </>
diff --git a/src/components/app/Messaging/Messaging.jsx b/src/components/app/Messaging/Messaging.jsx
index 98c971a..452ac20 100644
--- a/src/components/app/Messaging/Messaging.jsx
+++ b/src/components/app/Messaging/Messaging.jsx
@@ -1,5 +1,7 @@
 
-import { useState, useEffect, useContext } from "react";
+import { useState, useRef, useEffect, useContext } from "react";
+import { useNavigate, useLocation, Navigate, Link } from "react-router-dom";
+
 import {
     WindowsContainer,
     WindowsLayout,
@@ -17,9 +19,14 @@ import MessageReader from "./MessageReader";
 
 export default function Messaging({ isLoggedIn, activeAccount, fetchMessages, fetchMessageContent, fetchMessageMarkAsUnread }) {
     // States
+    const navigate = useNavigate();
+    const location = useLocation();
+    
     const { useUserData } = useContext(AppContext);
-    const [selectedMessage, setSelectedMessage] = useState(null);
+    const [selectedMessage, setSelectedMessage] = useState(isNaN(parseInt(location.hash.slice(1))) ? null : parseInt(location.hash.slice(1)));
+    const oldSelectedMessage = useRef(selectedMessage);
     const messages = useUserData("sortedMessages");
+    
 
     // behavior
     useEffect(() => {
@@ -44,11 +51,41 @@ export default function Messaging({ isLoggedIn, activeAccount, fetchMessages, fe
         const controller = new AbortController();
         if (selectedMessage !== null) {
             fetchMessageContent(selectedMessage, controller);
+            const parsedHash = parseInt(location.hash.slice(1));
+            if (parsedHash !== selectedMessage) {
+                const newHash = "#" + selectedMessage;
+                navigate(newHash);
+            }
+        } else {
+            if (location.hash) {
+                navigate("#");
+            }
         }
 
         return () => {
             controller.abort();
         }
+    }, [location, selectedMessage]);
+
+    useEffect(() => {
+        if (oldSelectedMessage.current !== selectedMessage) {
+            return;
+        }
+        const parsedHash = parseInt(location.hash.slice(1));
+        if (!isNaN(parsedHash) && parsedHash !== selectedMessage) {
+            if (messages.get()) {
+                const doesMessageExist = messages.get()?.findIndex((item) => item.id === parsedHash) !== -1;
+                if (doesMessageExist) {
+                    setSelectedMessage(parsedHash);
+                } else {
+                    navigate("#");
+                }
+            }
+        }
+    }, [location, messages.get(), oldSelectedMessage.current, selectedMessage]);
+
+    useEffect(() => {
+        oldSelectedMessage.current = selectedMessage;
     }, [selectedMessage]);
 
     // JSX
diff --git a/src/components/graphics/Arrow.jsx b/src/components/graphics/Arrow.jsx
index a9894d5..39e4848 100644
--- a/src/components/graphics/Arrow.jsx
+++ b/src/components/graphics/Arrow.jsx
@@ -2,6 +2,6 @@
 import "./graphics.css"
 export default function Arrow({ className = "", id = "", alt, ...props }) {
     return (
-        <svg aria-label={alt} className={className} id={id} height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-62.7 -62.7 455.40 455.40" xml:space="preserve" stroke-width="33"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_337_" d="M253.858,234.26c-2.322-5.605-7.792-9.26-13.858-9.26h-60V15c0-8.284-6.716-15-15-15 c-8.284,0-15,6.716-15,15v210H90c-6.067,0-11.537,3.655-13.858,9.26c-2.321,5.605-1.038,12.057,3.252,16.347l75,75 C157.322,328.536,161.161,330,165,330s7.678-1.464,10.607-4.394l75-75C254.896,246.316,256.18,239.865,253.858,234.26z M165,293.787 L126.213,255h77.573L165,293.787z"></path> </g></svg>
+        <svg aria-label={alt} className={className} id={id} height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-62.7 -62.7 455.40 455.40" xml:space="preserve" strokeWidth="33"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_337_" d="M253.858,234.26c-2.322-5.605-7.792-9.26-13.858-9.26h-60V15c0-8.284-6.716-15-15-15 c-8.284,0-15,6.716-15,15v210H90c-6.067,0-11.537,3.655-13.858,9.26c-2.321,5.605-1.038,12.057,3.252,16.347l75,75 C157.322,328.536,161.161,330,165,330s7.678-1.464,10.607-4.394l75-75C254.896,246.316,256.18,239.865,253.858,234.26z M165,293.787 L126.213,255h77.573L165,293.787z"></path> </g></svg>
     )
 }
\ No newline at end of file
diff --git a/src/components/graphics/AttachmentIcon.jsx b/src/components/graphics/AttachmentIcon.jsx
index 78c722f..9d0acc9 100644
--- a/src/components/graphics/AttachmentIcon.jsx
+++ b/src/components/graphics/AttachmentIcon.jsx
@@ -4,7 +4,7 @@ import "./graphics.css"
 export default function AttachmentIcon({ className = "", id = "", alt, ...props }) {
     return (
         <svg aria-label={alt} className={className} id={id} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <path d="M20 10.9696L11.9628 18.5497C10.9782 19.4783 9.64274 20 8.25028 20C6.85782 20 5.52239 19.4783 4.53777 18.5497C3.55315 17.6211 3 16.3616 3 15.0483C3 13.7351 3.55315 12.4756 4.53777 11.547L12.575 3.96687C13.2314 3.34779 14.1217 3 15.05 3C15.9783 3 16.8686 3.34779 17.525 3.96687C18.1814 4.58595 18.5502 5.4256 18.5502 6.30111C18.5502 7.17662 18.1814 8.01628 17.525 8.63535L9.47904 16.2154C9.15083 16.525 8.70569 16.6989 8.24154 16.6989C7.77738 16.6989 7.33224 16.525 7.00403 16.2154C6.67583 15.9059 6.49144 15.4861 6.49144 15.0483C6.49144 14.6106 6.67583 14.1907 7.00403 13.8812L14.429 6.88674" className="stroke-text-main" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M20 10.9696L11.9628 18.5497C10.9782 19.4783 9.64274 20 8.25028 20C6.85782 20 5.52239 19.4783 4.53777 18.5497C3.55315 17.6211 3 16.3616 3 15.0483C3 13.7351 3.55315 12.4756 4.53777 11.547L12.575 3.96687C13.2314 3.34779 14.1217 3 15.05 3C15.9783 3 16.8686 3.34779 17.525 3.96687C18.1814 4.58595 18.5502 5.4256 18.5502 6.30111C18.5502 7.17662 18.1814 8.01628 17.525 8.63535L9.47904 16.2154C9.15083 16.525 8.70569 16.6989 8.24154 16.6989C7.77738 16.6989 7.33224 16.525 7.00403 16.2154C6.67583 15.9059 6.49144 15.4861 6.49144 15.0483C6.49144 14.6106 6.67583 14.1907 7.00403 13.8812L14.429 6.88674" className="stroke-text-main" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }
\ No newline at end of file