mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
add fully styled author edits ui and tested logic
This commit is contained in:
Tom
@@ -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>
|
||||
|
||||
@@ -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 '';
|
||||
}
|
||||
}}
|
||||
`;
|
||||
+111
-100
@@ -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)
|
||||
|
||||
@@ -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 }),
|
||||
|
||||
|
||||
Reference in New Issue
Block a user