External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(Post Form): use defaultValue for Name when displayName is defined

Browse Source
This commit is contained in:
plebeius.eth
2023-09-22 21:43:10 +02:00
parent a7a845eada
commit c779c34243
4 changed files with 276 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/ReplyModal.jsx
+36 -58
View File
@@ -8,10 +8,10 @@ import useError from '../../hooks/useError';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore'; import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
const ReplyModal = ({ isOpen, closeModal }) => { const ReplyModal = ({ isOpen, closeModal }) => {
const { const {
captchaResponse, setCaptchaResponse, captchaResponse,
setCaptchaResponse,
setChallengesArray, setChallengesArray,
setIsCaptchaOpen, setIsCaptchaOpen,
setPendingComment, setPendingComment,
@@ -22,9 +22,10 @@ const ReplyModal = ({ isOpen, closeModal }) => {
selectedParentCid, selectedParentCid,
selectedShortCid, selectedShortCid,
selectedStyle, selectedStyle,
selectedText, setSelectedText, selectedText,
setSelectedText,
triggerInsertion, triggerInsertion,
} = useGeneralStore(state => state); } = useGeneralStore((state) => state);
const { anonymousMode } = useAnonModeStore(); const { anonymousMode } = useAnonModeStore();
@@ -43,7 +44,6 @@ const ReplyModal = ({ isOpen, closeModal }) => {
useAnonMode(selectedParentCid, anonymousMode && executeAnonMode); useAnonMode(selectedParentCid, anonymousMode && executeAnonMode);
useEffect(() => { useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth <= 480); const handleResize = () => setIsMobile(window.innerWidth <= 480);
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
@@ -54,7 +54,6 @@ const ReplyModal = ({ isOpen, closeModal }) => {
}; };
}, [setIsMobile]); }, [setIsMobile]);
const onModalOpen = () => { const onModalOpen = () => {
if (commentRef.current) { if (commentRef.current) {
if (selectedText) { if (selectedText) {
@@ -66,13 +65,12 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}; };
const insertAtCursor = (inputElement, valueToInsert) => { const insertAtCursor = (inputElement, valueToInsert) => {
const startPos = inputElement.selectionStart || inputElement.value.length; const startPos = inputElement.selectionStart || inputElement.value.length;
const endPos = startPos + valueToInsert.length; const endPos = startPos + valueToInsert.length;
inputElement.setRangeText(valueToInsert, startPos, startPos, 'end'); inputElement.setRangeText(valueToInsert, startPos, startPos, 'end');
inputElement.setSelectionRange(endPos, endPos); inputElement.setSelectionRange(endPos, endPos);
} };
useEffect(() => { useEffect(() => {
if (replyQuoteCid && commentRef.current) { if (replyQuoteCid && commentRef.current) {
@@ -81,13 +79,11 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}, [triggerInsertion, replyQuoteCid]); }, [triggerInsertion, replyQuoteCid]);
const getSelectedText = useCallback(() => { const getSelectedText = useCallback(() => {
const text = document.getSelection().toString(); const text = document.getSelection().toString();
setSelectedText(text ? `>${text}\n` : ''); setSelectedText(text ? `>${text}\n` : '');
}, [setSelectedText]); }, [setSelectedText]);
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
setTimeout(getSelectedText, 0); setTimeout(getSelectedText, 0);
@@ -96,7 +92,6 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}, [isOpen, getSelectedText, setSelectedText]); }, [isOpen, getSelectedText, setSelectedText]);
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { if (challengeVerification.challengeSuccess === true) {
return; return;
@@ -106,23 +101,21 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}; };
const onChallenge = async (challenges, comment) => { const onChallenge = async (challenges, comment) => {
setPendingComment(comment); setPendingComment(comment);
let challengeAnswers = []; let challengeAnswers = [];
try { try {
challengeAnswers = await getChallengeAnswersFromUser(challenges) challengeAnswers = await getChallengeAnswersFromUser(challenges);
} } catch (error) {
catch (error) { setNewErrorMessage(error.message);
setNewErrorMessage(error.message); console.log(error); console.log(error);
} }
if (challengeAnswers) { if (challengeAnswers) {
await comment.publishChallengeAnswers(challengeAnswers) await comment.publishChallengeAnswers(challengeAnswers);
} }
}; };
useEffect(() => { useEffect(() => {
setPublishCommentOptions((prevPublishCommentOptions) => ({ setPublishCommentOptions((prevPublishCommentOptions) => ({
...prevPublishCommentOptions, ...prevPublishCommentOptions,
@@ -130,17 +123,16 @@ const ReplyModal = ({ isOpen, closeModal }) => {
})); }));
}, [selectedAddress]); }, [selectedAddress]);
const [publishCommentOptions, setPublishCommentOptions] = useState({ const [publishCommentOptions, setPublishCommentOptions] = useState({
subplebbitAddress: selectedAddress, subplebbitAddress: selectedAddress,
onChallenge, onChallenge,
onChallengeVerification, onChallengeVerification,
onError: (error) => { onError: (error) => {
setNewErrorMessage(error.message); console.log(error); setNewErrorMessage(error.message);
console.log(error);
}, },
}); });
const { publishComment, index } = usePublishComment(publishCommentOptions); const { publishComment, index } = usePublishComment(publishCommentOptions);
useEffect(() => { useEffect(() => {
@@ -149,7 +141,6 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}, [index, setPendingCommentIndex]); }, [index, setPendingCommentIndex]);
const resetFields = useCallback(() => { const resetFields = useCallback(() => {
if (nameRef.current) { if (nameRef.current) {
nameRef.current.value = ''; nameRef.current.value = '';
@@ -162,15 +153,11 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}, []); }, []);
const handleSubmit = async (event) => { const handleSubmit = async (event) => {
event.preventDefault(); event.preventDefault();
if ( if (commentRef.current.value === '' && linkRef.current.value === '') {
commentRef.current.value === "" && setNewErrorMessage('Please enter a comment or link.');
linkRef.current.value === ""
) {
setNewErrorMessage("Please enter a comment or link.");
return; return;
} }
@@ -178,7 +165,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
...prevPublishCommentOptions, ...prevPublishCommentOptions,
author: { author: {
displayName: nameRef.current.value || undefined, displayName: nameRef.current.value || undefined,
...(anonymousMode ? {} : {address: account?.author.address}), ...(anonymousMode ? {} : { address: account?.author.address }),
}, },
content: commentRef.current.value || undefined, content: commentRef.current.value || undefined,
link: linkRef.current.value || undefined, link: linkRef.current.value || undefined,
@@ -188,7 +175,6 @@ const ReplyModal = ({ isOpen, closeModal }) => {
setTriggerPublishComment(true); setTriggerPublishComment(true);
}; };
const updateSigner = useCallback(async () => { const updateSigner = useCallback(async () => {
if (anonymousMode) { if (anonymousMode) {
setExecuteAnonMode(true); setExecuteAnonMode(true);
@@ -204,13 +190,13 @@ const ReplyModal = ({ isOpen, closeModal }) => {
const signerPrivateKey = storedSigners[selectedParentCid].privateKey; const signerPrivateKey = storedSigners[selectedParentCid].privateKey;
try { try {
signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
} }
setPublishCommentOptions(prevPublishCommentOptions => { setPublishCommentOptions((prevPublishCommentOptions) => {
const newPublishCommentOptions = { const newPublishCommentOptions = {
...prevPublishCommentOptions, ...prevPublishCommentOptions,
signer, signer,
@@ -235,7 +221,6 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}, [updateSigner, anonymousMode]); }, [updateSigner, anonymousMode]);
useEffect(() => { useEffect(() => {
if (publishCommentOptions && triggerPublishComment) { if (publishCommentOptions && triggerPublishComment) {
(async () => { (async () => {
@@ -248,7 +233,6 @@ const ReplyModal = ({ isOpen, closeModal }) => {
} }
}, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, closeModal]); }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, closeModal]);
const getChallengeAnswersFromUser = async (challenges) => { const getChallengeAnswersFromUser = async (challenges) => {
setChallengesArray(challenges); setChallengesArray(challenges);
@@ -283,49 +267,43 @@ const ReplyModal = ({ isOpen, closeModal }) => {
}); });
}; };
return ( return (
<StyledModal <StyledModal
isOpen={isOpen} isOpen={isOpen}
onAfterOpen={onModalOpen} onAfterOpen={onModalOpen}
onRequestClose={closeModal} onRequestClose={closeModal}
contentLabel="Reply Modal" contentLabel='Reply Modal'
shouldCloseOnEsc={true} shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={isMobile} shouldCloseOnOverlayClick={isMobile}
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
overlayClassName="overlay" overlayClassName='overlay'
style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }}) style={isMobile ? { overlay: { backgroundColor: 'rgba(0,0,0,.25)' } } : { overlay: { backgroundColor: 'rgba(0,0,0,0)' } }}
}
> >
<Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}> <Draggable handle='.modal-header' nodeRef={nodeRef} disabled={isMobile}>
<div className="modal-content" ref={nodeRef}> <div className='modal-content' ref={nodeRef}>
<div className="modal-header"> <div className='modal-header'>
Reply to c/{selectedShortCid} Reply to c/{selectedShortCid}
<button className="icon" onClick={() => closeModal()} title="close" /> <button className='icon' onClick={() => closeModal()} title='close' />
</div> </div>
<div id="form"> <div id='form'>
<div> <div>
{account && account?.author && account?.author.displayName ? ( {account?.author.displayName ? (
<input id="name" type="text" value={account?.author?.displayName} ref={nameRef} disabled /> <input id='name' type='text' defaultValue={account?.author?.displayName} ref={nameRef} />
) : ( ) : (
<input id="name" type="text" placeholder="Anonymous" ref={nameRef} /> <input id='name' type='text' placeholder='Anonymous' ref={nameRef} />
)} )}
</div> </div>
<div> <div>
<input id="name" type="text" placeholder="Embed link" ref={linkRef} /> <input id='name' type='text' placeholder='Embed link' ref={linkRef} />
</div> </div>
<div className="textarea-wrapper"> <div className='textarea-wrapper'>
<span className="fixed-text">{`c/${selectedShortCid}`}</span> <span className='fixed-text'>{`c/${selectedShortCid}`}</span>
<textarea className="textarea" <textarea className='textarea' rows='4' placeholder='Comment' defaultValue={selectedText} wrap='soft' ref={commentRef} />
rows="4"
placeholder="Comment"
defaultValue={selectedText}
wrap="soft"
ref={commentRef}
/>
</div> </div>
<div> <div>
<button id="next" onClick={handleSubmit}>Post</button> <button id='next' onClick={handleSubmit}>
Post
</button>
</div> </div>
</div> </div>
</div> </div>
src/components/views/Board.jsx
+2 -2
View File
@@ -868,8 +868,8 @@ const Board = () => {
<tr data-type='Name'> <tr data-type='Name'>
<td id='td-name'>Name</td> <td id='td-name'>Name</td>
<td> <td>
{account && account?.author && account?.author.displayName ? ( {account?.author.displayName ? (
<input name='name' type='text' tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled /> <input name='name' type='text' tabIndex={1} defaultValue={account?.author?.displayName} ref={nameRef} />
) : ( ) : (
<input name='name' type='text' placeholder='Anonymous' tabIndex={1} ref={nameRef} /> <input name='name' type='text' placeholder='Anonymous' tabIndex={1} ref={nameRef} />
)} )}
src/components/views/Catalog.jsx
+2 -2
View File
@@ -1637,8 +1637,8 @@ const Catalog = () => {
<tr data-type='Name'> <tr data-type='Name'>
<td id='td-name'>Name</td> <td id='td-name'>Name</td>
<td> <td>
{account && account?.author && account?.author.displayName ? ( {account?.author.displayName ? (
<input name='name' type='text' tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled /> <input name='name' type='text' tabIndex={1} defaultValue={account?.author?.displayName} ref={nameRef} />
) : ( ) : (
<input name='name' type='text' placeholder='Anonymous' tabIndex={1} ref={nameRef} /> <input name='name' type='text' placeholder='Anonymous' tabIndex={1} ref={nameRef} />
)} )}
src/components/views/Thread.jsx
+2 -2
View File
@@ -839,8 +839,8 @@ const Thread = () => {
<tr data-type='Name'> <tr data-type='Name'>
<td id='td-name'>Name</td> <td id='td-name'>Name</td>
<td> <td>
{account && account?.author && account?.author.displayName ? ( {account?.author.displayName ? (
<input name='name' type='text' tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled /> <input name='name' type='text' tabIndex={1} defaultValue={account?.author?.displayName} ref={nameRef} />
) : ( ) : (
<input name='name' type='text' placeholder='Anonymous' tabIndex={1} ref={nameRef} /> <input name='name' type='text' placeholder='Anonymous' tabIndex={1} ref={nameRef} />
)} )}