feat(Messaging): now support anchor links

Magic-Fishes · Sep 13, 2024 · f8c8688 · f8c8688
1 parent 754ceef
commit f8c8688
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     )
 }
diff --git 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>
     )
 }