From 8f0be5b3981a25853e794046cd59e8bbf66c85f5 Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Tue, 23 May 2023 14:56:25 +0200
Subject: [PATCH] add fully styled author edits ui and tested logic

---
 src/components/EditModal.jsx            |   8 +-
 src/components/styled/Thread.styled.jsx |  75 ++++++++-
 src/components/views/Thread.jsx         | 211 +++++++++++++-----------
 src/hooks/stores/useGeneralStore.js     |   3 +
 4 files changed, 188 insertions(+), 109 deletions(-)

diff --git a/src/components/EditModal.jsx b/src/components/EditModal.jsx
index e92220ba..4bcbdff9 100644
--- a/src/components/EditModal.jsx
+++ b/src/components/EditModal.jsx
@@ -7,6 +7,7 @@ import Draggable from 'react-draggable';
 
 const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
   const {
+    setEditedComment,
     selectedStyle,
   } = useGeneralStore(state => state);
 
@@ -27,6 +28,10 @@ const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
   }, [setIsMobile]);
 
 
+  const handleSaveEdit = () => {
+    setEditedComment(commentRef.current.value);
+    closeModal();
+  };
 
   return (
     <StyledModal
@@ -47,13 +52,14 @@ const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
             <div className="textarea-wrapper">
               <textarea className="textarea" 
               rows="4" 
+              style={{paddingTop: '0'}}
               placeholder="Comment" 
               defaultValue={originalCommentContent}
               wrap="soft" 
               ref={commentRef} />
             </div>
             <div>
-              <button id="next">Save</button>
+              <button id="next" onClick={handleSaveEdit}>Save</button>
             </div>
           </div>
         </div>
diff --git a/src/components/styled/Thread.styled.jsx b/src/components/styled/Thread.styled.jsx
index cfbd4af0..a55d2a3f 100644
--- a/src/components/styled/Thread.styled.jsx
+++ b/src/components/styled/Thread.styled.jsx
@@ -3208,17 +3208,76 @@ export const Footer = styled.div`
 
 export const AuthorDeleteAlert = styled.div`
   .author-delete-alert {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     padding: 20px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
+    border: 1px solid #ccc;
     position: absolute;
-    top: 50%;
+    top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
+
+    .author-delete-buttons {
+      display: flex;
+      justify-content: center;
+
+      & > button {
+        margin-top: 10px;
+      }
+    
+      & > button:first-child {
+        margin-right: 20px;
+      }
+    }
   }
+
+
+  
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+        .author-delete-alert {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }`;
+
+      case 'Yotsuba-B':
+        return `
+        .author-delete-alert {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }`;
+
+      case 'Futaba':
+        return `
+        .author-delete-alert {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }`;
+
+      case 'Burichan':
+        return `
+        .author-delete-alert {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }`;
+
+      case 'Tomorrow':
+        return `
+        .author-delete-alert {
+          background-color: #282a2e;
+          border: 1px solid #111;
+        }`;
+
+      case 'Photon':
+        return `
+        .author-delete-alert {
+          background-color: #ddd;
+          border: 1px solid #ccc;
+        }`; 
+        
+        default:
+          return '';
+      }
+  }}
 `;
\ No newline at end of file
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index cf2033f2..6f06787a 100644
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -37,6 +37,7 @@ const Thread = () => {
     captchaResponse, setCaptchaResponse,
     setChallengesArray,
     defaultSubplebbits,
+    editedComment,
     setIsCaptchaOpen,
     isModerationOpen, setIsModerationOpen,
     isSettingsOpen, setIsSettingsOpen,
@@ -78,7 +79,6 @@ const Thread = () => {
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
   const [isModerator, setIsModerator] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
-  const [editedComment, setEditedComment] = useState(null);
   
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
@@ -339,6 +339,7 @@ const Thread = () => {
 
   const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
     commentCid: commentCid,
+    content: editedComment || undefined,
     subplebbitAddress: selectedAddress,
     onChallenge,
     onChallengeVerification,
@@ -366,20 +367,22 @@ const Thread = () => {
           <AuthorDeleteAlert selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
-              <button onClick={onClose}>No</button>
-              <button
-                onClick={() => {
-                  setCommentCid(commentCid);
-                  setPublishCommentEditOptions(prevOptions => ({
-                    ...prevOptions,
-                    deleted: true,
-                  }));
-                  setTriggerPublishCommentEdit(true);
-                  onClose();
-                }}
-              >
-                Yes
-              </button>
+              <div className="author-delete-buttons">
+                <button onClick={onClose}>No</button>
+                <button
+                  onClick={() => {
+                    setCommentCid(commentCid);
+                    setPublishCommentEditOptions(prevOptions => ({
+                      ...prevOptions,
+                      deleted: true,
+                    }));
+                    setTriggerPublishCommentEdit(true);
+                    onClose();
+                  }}
+                >
+                  Yes
+                </button>
+              </div>
             </div>
           </AuthorDeleteAlert>
         );
@@ -399,8 +402,16 @@ const Thread = () => {
     setPublishCommentEditOptions((prevOptions) => ({
       ...prevOptions,
       commentCid: commentCid,
+      content: editedComment || undefined,
     }));
-  }, [commentCid]);
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment]);
 
   
   useEffect(() => {
@@ -777,93 +788,93 @@ const Thread = () => {
                           </>
                         ) : null}
                         <PostMenu 
-                              key={`pmb-${index}`} 
-                              title="Post menu"
-                              ref={el => threadMenuRefs.current[comment.cid] = el}
-                              className='post-menu-button' 
-                              rotated={rotatedStates[comment.cid]}
-                              onClick={() => {
-                                const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
-                                const menu = document.querySelector(`.post-menu-thread-${comment.cid}`);
-                                menu.style.top = `calc(${rect.top}px + 17px)`;
-                                menu.style.left = `${rect.left}px`;
-                              
-                                setRotatedStates(prevState => ({
-                                  ...prevState,
-                                  [comment.cid]: !prevState[comment.cid]
-                                }));
-                              }}                              
-                            >
-                              ▶
-                            </PostMenu>
-                            <div id="post-menu" className={`post-menu-thread post-menu-thread-${comment.cid}`}
-                              style={{ display: rotatedStates[comment.cid] ? 'block' : 'none' }}>
-                              <ul>
-                                <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
+                          key={`pmb-${index}`} 
+                          title="Post menu"
+                          ref={el => threadMenuRefs.current[comment.cid] = el}
+                          className='post-menu-button' 
+                          rotated={rotatedStates[comment.cid]}
+                          onClick={() => {
+                            const rect = threadMenuRefs.current[comment.cid].getBoundingClientRect();
+                            const menu = document.querySelector(`.post-menu-thread-${comment.cid}`);
+                            menu.style.top = `calc(${rect.top}px + 17px)`;
+                            menu.style.left = `${rect.left}px`;
+                          
+                            setRotatedStates(prevState => ({
+                              ...prevState,
+                              [comment.cid]: !prevState[comment.cid]
+                            }));
+                          }}                              
+                        >
+                          ▶
+                        </PostMenu>
+                        <div id="post-menu" className={`post-menu-thread post-menu-thread-${comment.cid}`}
+                          style={{ display: rotatedStates[comment.cid] ? 'block' : 'none' }}>
+                          <ul>
+                            <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
+                            {comment?.author?.shortAddress === account?.author?.shortAddress ? (
+                              <>
+                                <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
+                                <li onClick={() => handleAuthorDeleteClick(comment.cid, selectedStyle)}>Delete post</li>
+                              </>
+                            ) : null}
+                            {isModerator ? (
+                              <>
                                 {comment?.author?.shortAddress === account?.author?.shortAddress ? (
-                                  <>
-                                    <li onClick={() => handleAuthorEditClick(comment)}>Edit post</li>
-                                    <li onClick={() => handleAuthorDeleteClick(comment.cid)}>Delete post</li>
-                                  </>
-                                ) : null}
-                                {isModerator ? (
-                                  <>
-                                    {comment?.author?.shortAddress === account?.author?.shortAddress ? (
-                                      null
-                                    ) : (
-                                      <li onClick={() => {
-                                        setModeratingCommentCid(comment.cid)
-                                        setIsModerationOpen(true); 
-                                        handleOptionClick(comment.cid);
-                                        setDeletePost(true);
-                                      }}>
-                                      Delete post
-                                      </li>
-                                    )}
-                                    <li
-                                    onClick={() => {
-                                      setModeratingCommentCid(comment.cid)
-                                      setIsModerationOpen(true); 
-                                      handleOptionClick(comment.cid);
-                                    }}>
-                                      Mod tools
+                                  null
+                                ) : (
+                                  <li onClick={() => {
+                                    setModeratingCommentCid(comment.cid)
+                                    setIsModerationOpen(true); 
+                                    handleOptionClick(comment.cid);
+                                    setDeletePost(true);
+                                  }}>
+                                  Delete post
+                                  </li>
+                                )}
+                                <li
+                                onClick={() => {
+                                  setModeratingCommentCid(comment.cid)
+                                  setIsModerationOpen(true); 
+                                  handleOptionClick(comment.cid);
+                                }}>
+                                  Mod tools
+                                </li>
+                              </>
+                            ) : null}
+                            {(commentMediaInfo && (
+                              commentMediaInfo.type === 'image' || 
+                              (commentMediaInfo.type === 'webpage' && 
+                              commentMediaInfo.thumbnail))) ? ( 
+                                <li 
+                                onMouseOver={() => {setIsImageSearchOpen(true)}}
+                                onMouseLeave={() => {setIsImageSearchOpen(false)}}>
+                                  Image search »
+                                  <ul className="dropdown-menu"
+                                    style={{display: isImageSearchOpen ? 'block': 'none'}}>
+                                    <li onClick={() => handleOptionClick(comment.cid)}>
+                                      <a 
+                                      href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
+                                      target="_blank" rel="noreferrer"
+                                      >Google</a>
                                     </li>
-                                  </>
-                                ) : null}
-                                {(commentMediaInfo && (
-                                  commentMediaInfo.type === 'image' || 
-                                  (commentMediaInfo.type === 'webpage' && 
-                                  commentMediaInfo.thumbnail))) ? ( 
-                                    <li 
-                                    onMouseOver={() => {setIsImageSearchOpen(true)}}
-                                    onMouseLeave={() => {setIsImageSearchOpen(false)}}>
-                                      Image search »
-                                      <ul className="dropdown-menu"
-                                        style={{display: isImageSearchOpen ? 'block': 'none'}}>
-                                        <li onClick={() => handleOptionClick(comment.cid)}>
-                                          <a 
-                                          href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
-                                          target="_blank" rel="noreferrer"
-                                          >Google</a>
-                                        </li>
-                                        <li onClick={() => handleOptionClick(comment.cid)}>
-                                          <a
-                                          href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
-                                          target="_blank" rel="noreferrer"
-                                          >Yandex</a>
-                                        </li>
-                                        <li onClick={() => handleOptionClick(comment.cid)}>
-                                          <a
-                                          href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
-                                          target="_blank" rel="noreferrer"
-                                          >SauceNAO</a>
-                                        </li>
-                                      </ul>
+                                    <li onClick={() => handleOptionClick(comment.cid)}>
+                                      <a
+                                      href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
+                                      target="_blank" rel="noreferrer"
+                                      >Yandex</a>
                                     </li>
-                                  ) : null
-                                }
-                              </ul>
-                            </div>
+                                    <li onClick={() => handleOptionClick(comment.cid)}>
+                                      <a
+                                      href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
+                                      target="_blank" rel="noreferrer"
+                                      >SauceNAO</a>
+                                    </li>
+                                  </ul>
+                                </li>
+                              ) : null
+                            }
+                          </ul>
+                        </div>
                         <div id="backlink-id" className="backlink">
                           {comment?.replies?.pages?.topAll.comments
                             .sort((a, b) => a.timestamp - b.timestamp)
diff --git a/src/hooks/stores/useGeneralStore.js b/src/hooks/stores/useGeneralStore.js
index 34a4be61..2940bc78 100644
--- a/src/hooks/stores/useGeneralStore.js
+++ b/src/hooks/stores/useGeneralStore.js
@@ -20,6 +20,9 @@ const useGeneralStore = create((set) => ({
   defaultSubplebbits: [],
   setDefaultSubplebbits: (subplebbits) => set({ defaultSubplebbits: subplebbits }),
 
+  editedComment: '',
+  setEditedComment: (comment) => set({ editedComment: comment }),
+
   isCaptchaOpen: false,
   setIsCaptchaOpen: (isOpen) => set({ isCaptchaOpen: isOpen }),