mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
plebeius.eth
@@ -1,3 +1,6 @@
|
||||
# scripts/deploy.sh env
|
||||
.deploy-env
|
||||
|
||||
# electron builder binaries
|
||||
/bin
|
||||
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
"mock-require": "3.0.3",
|
||||
"postcss": "8.4.21",
|
||||
"react": "18.2.0",
|
||||
"react-confirm-alert": "^3.0.6",
|
||||
"react-content-loader": "6.2.1",
|
||||
"react-dom": "18.2.0",
|
||||
"react-draggable": "4.4.5",
|
||||
|
||||
+2
-2
@@ -6,8 +6,8 @@
|
||||
cd "$(dirname "$0")"
|
||||
|
||||
# add env vars
|
||||
if [ -f ../.env ]; then
|
||||
export $(echo $(cat ../.env | sed 's/#.*//g'| xargs) | envsubst)
|
||||
if [ -f ../.deploy-env ]; then
|
||||
export $(echo $(cat ../.deploy-env | sed 's/#.*//g'| xargs) | envsubst)
|
||||
fi
|
||||
|
||||
# check creds
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@ import Pending from './components/views/Pending';
|
||||
import Subscriptions from './components/views/Subscriptions';
|
||||
import SubscriptionsCatalog from './components/views/SubscriptionsCatalog';
|
||||
import Thread from './components/views/Thread';
|
||||
import CaptchaModal from './components/CaptchaModal';
|
||||
import CaptchaModal from './components/modals/CaptchaModal';
|
||||
import { importAll } from './components/ImageBanner';
|
||||
import preloadImages from './utils/preloadImages';
|
||||
import useError from "./hooks/useError";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { StyledModal } from './styled/CaptchaModal.styled';
|
||||
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
||||
import { StyledModal } from '../styled/modals/CaptchaModal.styled';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import Modal from 'react-modal';
|
||||
import Draggable from 'react-draggable';
|
||||
|
||||
@@ -126,6 +126,9 @@ const CaptchaModal = () => {
|
||||
placeholder="TYPE THE CAPTCHA HERE AND PRESS ENTER"
|
||||
ref={responseRef}
|
||||
onKeyDown={handleKeyDown}
|
||||
onInput={(e) => {
|
||||
e.target.value = e.target.value.toUpperCase();
|
||||
}}
|
||||
autoFocus />
|
||||
<img src={imageSources[currentChallengeIndex]} alt="captcha" />
|
||||
</div>
|
||||
@@ -0,0 +1,73 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { StyledModal } from '../styled/modals/ReplyModal.styled';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import Modal from 'react-modal';
|
||||
import Draggable from 'react-draggable';
|
||||
|
||||
|
||||
const EditModal = ({ isOpen, closeModal, originalCommentContent }) => {
|
||||
const {
|
||||
setEditedComment,
|
||||
selectedStyle,
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const nodeRef = useRef(null);
|
||||
const commentRef = useRef();
|
||||
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => setIsMobile(window.innerWidth <= 480);
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Cleanup function
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, [setIsMobile]);
|
||||
|
||||
|
||||
const handleSaveEdit = () => {
|
||||
setEditedComment(commentRef.current.value);
|
||||
closeModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledModal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={closeModal}
|
||||
contentLabel="Edit Comment"
|
||||
shouldCloseOnEsc={false}
|
||||
shouldCloseOnOverlayClick={isMobile}
|
||||
selectedStyle={selectedStyle}
|
||||
style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})}>
|
||||
<Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
|
||||
<div className="modal-content" ref={nodeRef}>
|
||||
<div className="modal-header">
|
||||
Edit Comment
|
||||
<button className="icon" onClick={() => closeModal()} title="close" />
|
||||
</div>
|
||||
<div id="form">
|
||||
<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" onClick={handleSaveEdit}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
</StyledModal>
|
||||
);
|
||||
};
|
||||
|
||||
Modal.setAppElement('#root');
|
||||
|
||||
export default EditModal;
|
||||
@@ -2,13 +2,13 @@ import React, { useState, useEffect } from "react";
|
||||
import Modal from "react-modal";
|
||||
import { Link } from "react-router-dom";
|
||||
import { usePublishCommentEdit } from "@plebbit/plebbit-react-hooks";
|
||||
import { StyledModal } from "./styled/ModerationModal.styled";
|
||||
import useGeneralStore from "../hooks/stores/useGeneralStore";
|
||||
import useError from "../hooks/useError";
|
||||
import useSuccess from "../hooks/useSuccess";
|
||||
import { StyledModal } from "../styled/modals/ModerationModal.styled";
|
||||
import useGeneralStore from "../../hooks/stores/useGeneralStore";
|
||||
import useError from "../../hooks/useError";
|
||||
import useSuccess from "../../hooks/useSuccess";
|
||||
|
||||
|
||||
const ModerationModal = ({ isOpen, closeModal }) => {
|
||||
const ModerationModal = ({ isOpen, closeModal, deletePost }) => {
|
||||
const {
|
||||
selectedAddress,
|
||||
selectedStyle,
|
||||
@@ -20,7 +20,7 @@ const ModerationModal = ({ isOpen, closeModal }) => {
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const [pin, setPin] = useState(false);
|
||||
const [deleteThread, setDeleteThread] = useState(false);
|
||||
const [deleteThread, setDeleteThread] = useState(deletePost);
|
||||
const [close, setClose] = useState(false);
|
||||
const [reason, setReason] = useState('');
|
||||
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
||||
@@ -30,7 +30,19 @@ const ModerationModal = ({ isOpen, closeModal }) => {
|
||||
useError(errorMessage, [errorMessage]);
|
||||
useSuccess(successMessage, [successMessage]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setDeleteThread(deletePost);
|
||||
}, [deletePost]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setDeleteThread(deletePost);
|
||||
}
|
||||
}, [isOpen, deletePost]);
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setDeleteThread(false);
|
||||
closeModal();
|
||||
};
|
||||
|
||||
@@ -155,11 +167,11 @@ const ModerationModal = ({ isOpen, closeModal }) => {
|
||||
<label>
|
||||
<input type="checkbox" style={{marginRight: "10px"}}
|
||||
checked={pin} onChange={() => setPin(!pin)} />
|
||||
Pin thread
|
||||
Pin post
|
||||
</label>
|
||||
</li>
|
||||
<li className="settings-tip">
|
||||
Pin the thread to make it a sticky, showed at the top of the board even as new posts are submitted.
|
||||
Pin the post to make it a sticky, showed at the top of the board even as new posts are submitted.
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="settings-cat">
|
||||
@@ -167,7 +179,7 @@ const ModerationModal = ({ isOpen, closeModal }) => {
|
||||
<label>
|
||||
<input type="checkbox" style={{marginRight: "10px"}}
|
||||
checked={deleteThread} onChange={() => setDeleteThread(!deleteThread)} />
|
||||
Delete thread
|
||||
Delete post
|
||||
</label>
|
||||
</li>
|
||||
<li className="settings-tip">
|
||||
@@ -179,11 +191,11 @@ const ModerationModal = ({ isOpen, closeModal }) => {
|
||||
<label>
|
||||
<input type="checkbox" style={{marginRight: "10px"}}
|
||||
checked={close} onChange={() => setClose(!close)} />
|
||||
Close thread
|
||||
Close post
|
||||
</label>
|
||||
</li>
|
||||
<li className="settings-tip">
|
||||
Closing a thread allows users to still see the content, but they cannot add any new replies to it.
|
||||
Closing a post allows users to still see the content, but they cannot add any new replies to it.
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="settings-cat">
|
||||
@@ -1,10 +1,10 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
import { StyledModal } from './styled/ReplyModal.styled';
|
||||
import useGeneralStore from '../hooks/stores/useGeneralStore';
|
||||
import { StyledModal } from '../styled/modals/ReplyModal.styled';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import Modal from 'react-modal';
|
||||
import Draggable from 'react-draggable';
|
||||
import useError from '../hooks/useError';
|
||||
import useError from '../../hooks/useError';
|
||||
|
||||
|
||||
const ReplyModal = ({ isOpen, closeModal }) => {
|
||||
@@ -2,11 +2,11 @@ import React, { useState, useEffect, useRef } from "react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import Modal from "react-modal";
|
||||
import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
|
||||
import { StyledModal } from "./styled/SettingsModal.styled";
|
||||
import useGeneralStore from "../hooks/stores/useGeneralStore";
|
||||
import useError from "../hooks/useError";
|
||||
import useSuccess from "../hooks/useSuccess";
|
||||
import packageJson from '../../package.json'
|
||||
import { StyledModal } from "../styled/modals/SettingsModal.styled";
|
||||
import useGeneralStore from "../../hooks/stores/useGeneralStore";
|
||||
import useError from "../../hooks/useError";
|
||||
import useSuccess from "../../hooks/useSuccess";
|
||||
import packageJson from '../../../package.json'
|
||||
const {version} = packageJson
|
||||
|
||||
|
||||
+1
-1
@@ -3944,4 +3944,4 @@ export const PostMenu = styled.div`
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'};
|
||||
`;
|
||||
`;
|
||||
+101
@@ -643,6 +643,31 @@ export const TopBar = styled.div`
|
||||
`;
|
||||
|
||||
export const BottomBar = styled.div`
|
||||
.ellipsis {
|
||||
margin-right: 18px !important;
|
||||
}
|
||||
|
||||
.ellipsis:after {
|
||||
content: "\\2026";
|
||||
position: absolute;
|
||||
-webkit-animation: ellipsis steps(4,end) 1200ms infinite;
|
||||
animation: ellipsis steps(4,end) 1500ms infinite;
|
||||
width: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes ellipsis {
|
||||
to {
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes ellipsis {
|
||||
to {
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-stat {
|
||||
position: relative;
|
||||
float: right;
|
||||
@@ -3175,6 +3200,82 @@ export const Footer = styled.div`
|
||||
}
|
||||
}`;
|
||||
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
`;
|
||||
|
||||
export const AuthorDeleteAlert = styled.div`
|
||||
.author-delete-alert {
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
position: fixed;
|
||||
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 '';
|
||||
}
|
||||
@@ -7,14 +7,14 @@ import { useAccount, useAccountComments, useFeed, useSubplebbits } from '@plebbi
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
|
||||
import { Footer } from '../styled/views/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import ReplyModal from '../ReplyModal';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import ReplyModal from '../modals/ReplyModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import findShortParentCid from '../../utils/findShortParentCid';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import getDate from '../../utils/getDate';
|
||||
|
||||
@@ -6,12 +6,12 @@ import { Tooltip } from 'react-tooltip';
|
||||
import { useFeed, useSubplebbits } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break} from '../styled/Board.styled';
|
||||
import { Threads } from '../styled/Catalog.styled';
|
||||
import { TopBar, Footer } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break} from '../styled/views/Board.styled';
|
||||
import { Threads } from '../styled/views/Catalog.styled';
|
||||
import { TopBar, Footer } from '../styled/views/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import handleStyleChange from '../../utils/handleStyleChange';
|
||||
import useError from '../../hooks/useError';
|
||||
|
||||
+145
-114
@@ -1,21 +1,23 @@
|
||||
import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { confirmAlert } from 'react-confirm-alert';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
import { Virtuoso } from 'react-virtuoso';
|
||||
import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu} from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
|
||||
import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
|
||||
import EditModal from '../modals/EditModal';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import ModerationModal from '../ModerationModal';
|
||||
import ModerationModal from '../modals/ModerationModal';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import ReplyModal from '../ReplyModal';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import ReplyModal from '../modals/ReplyModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import findShortParentCid from '../../utils/findShortParentCid';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import getDate from '../../utils/getDate';
|
||||
@@ -36,6 +38,7 @@ const Board = () => {
|
||||
setCaptchaResponse,
|
||||
setChallengesArray,
|
||||
defaultSubplebbits,
|
||||
editedComment,
|
||||
setIsCaptchaOpen,
|
||||
isModerationOpen, setIsModerationOpen,
|
||||
isSettingsOpen, setIsSettingsOpen,
|
||||
@@ -70,18 +73,19 @@ const Board = () => {
|
||||
const stateString = useStateString(subplebbit);
|
||||
|
||||
const [isReplyOpen, setIsReplyOpen] = useState(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [originalCommentContent, setOriginalCommentContent] = useState(null);
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
||||
const [selectedFeed, setSelectedFeed] = useState(feed);
|
||||
const [deletePost, setDeletePost] = useState(false);
|
||||
const [rotatedStates, setRotatedStates] = useState({});
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
const [isModerator, setIsModerator] = useState(false);
|
||||
const [isModToolsOpen, setIsModToolsOpen] = useState(false);
|
||||
const [commentCid, setCommentCid] = useState(null);
|
||||
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [successMessage, setSuccessMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
@@ -90,7 +94,7 @@ const Board = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (subplebbit.roles !== undefined) {
|
||||
const role = subplebbit.roles[account.author.address]?.role;
|
||||
const role = subplebbit.roles[account?.author.address]?.role;
|
||||
|
||||
if (role === 'moderator' || role === 'admin' || role === 'owner') {
|
||||
setIsModerator(true);
|
||||
@@ -98,7 +102,7 @@ const Board = () => {
|
||||
setIsModerator(false);
|
||||
}
|
||||
}
|
||||
}, [account?.author.address, subplebbit.roles]);
|
||||
}, [account?.author.address, subplebbit.roles]);
|
||||
|
||||
|
||||
const handleOptionClick = (threadCid) => {
|
||||
@@ -197,7 +201,7 @@ const Board = () => {
|
||||
// mobile navbar scroll effect
|
||||
useEffect(() => {
|
||||
const debouncedHandleScroll = debounce(() => {
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
const currentScrollPos = window.scrollY;
|
||||
setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
|
||||
setPrevScrollPos(currentScrollPos);
|
||||
}, 50);
|
||||
@@ -220,7 +224,7 @@ const Board = () => {
|
||||
const onChallengeVerification = (challengeVerification) => {
|
||||
if (challengeVerification.challengeSuccess === true) {
|
||||
if (challengeVerification.publication?.cid !== undefined) {
|
||||
navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`);
|
||||
navigate(`/p/${subplebbitAddress}/c/${challengeVerification.publication?.cid}`);
|
||||
console.log('challenge success');
|
||||
} else {
|
||||
setSuccessMessage('Challenge Success');
|
||||
@@ -358,9 +362,11 @@ const Board = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
|
||||
commentCid: commentCid,
|
||||
subplebbitAddress: selectedAddress,
|
||||
content: editedComment || undefined,
|
||||
subplebbitAddress: selectedAddress || subplebbitAddress,
|
||||
onChallenge,
|
||||
onChallengeVerification,
|
||||
onError: (error) => {
|
||||
@@ -378,47 +384,62 @@ const Board = () => {
|
||||
}, [error]);
|
||||
|
||||
|
||||
const handleModToolClick = (tool, commentCid, currentState) => {
|
||||
setCommentCid(commentCid);
|
||||
const handleAuthorDeleteClick = (commentCid) => {
|
||||
handleOptionClick(commentCid);
|
||||
|
||||
switch (tool) {
|
||||
case 'Pin':
|
||||
case 'Unpin':
|
||||
setPublishCommentEditOptions(prevOptions => ({
|
||||
...prevOptions,
|
||||
pinned: !currentState.pinned,
|
||||
}));
|
||||
break;
|
||||
case 'Close':
|
||||
case 'Reopen':
|
||||
setPublishCommentEditOptions(prevOptions => ({
|
||||
...prevOptions,
|
||||
locked: !currentState.locked,
|
||||
}));
|
||||
break;
|
||||
case 'Delete':
|
||||
setPublishCommentEditOptions(prevOptions => ({
|
||||
...prevOptions,
|
||||
removed: true,
|
||||
}));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
setTriggerPublishCommentEdit(true);
|
||||
confirmAlert({
|
||||
customUI: ({ onClose }) => {
|
||||
return (
|
||||
<AuthorDeleteAlert selectedStyle={selectedStyle}>
|
||||
<div className='author-delete-alert'>
|
||||
<p>Are you sure you want to delete this post?</p>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAuthorEditClick = (comment) => {
|
||||
handleOptionClick(comment.cid);
|
||||
setCommentCid(comment.cid);
|
||||
setOriginalCommentContent(comment.content);
|
||||
setIsEditModalOpen(true);
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setPublishCommentEditOptions((prevOptions) => ({
|
||||
...prevOptions,
|
||||
commentCid: commentCid,
|
||||
content: editedComment || undefined,
|
||||
}));
|
||||
}, [commentCid]);
|
||||
}, [commentCid, editedComment]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (editedComment !== '') {
|
||||
setTriggerPublishCommentEdit(true);
|
||||
}
|
||||
}, [editedComment]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (publishCommentEditOptions && triggerPublishCommentEdit) {
|
||||
(async () => {
|
||||
@@ -428,7 +449,6 @@ const Board = () => {
|
||||
}
|
||||
}, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
|
||||
|
||||
|
||||
// desktop navbar board select functionality
|
||||
const handleClickTitle = (title, address) => {
|
||||
setSelectedTitle(title);
|
||||
@@ -489,7 +509,13 @@ const Board = () => {
|
||||
<ModerationModal
|
||||
selectedStyle={selectedStyle}
|
||||
isOpen={isModerationOpen}
|
||||
closeModal={() => setIsModerationOpen(false)} />
|
||||
closeModal={() => setIsModerationOpen(false)}
|
||||
deletePost={deletePost} />
|
||||
<EditModal
|
||||
selectedStyle={selectedStyle}
|
||||
isOpen={isEditModalOpen}
|
||||
closeModal={() => setIsEditModalOpen(false)}
|
||||
originalCommentContent={originalCommentContent} />
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
<span className="boardList">
|
||||
@@ -809,8 +835,7 @@ const Board = () => {
|
||||
onClick={() => {
|
||||
const rect = threadMenuRefs.current[thread.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-thread-${thread.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 258px)`;
|
||||
menu.style.top = `calc(${rect.top}px + 17px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
@@ -824,8 +849,37 @@ const Board = () => {
|
||||
<div id="post-menu" className={`post-menu-thread post-menu-thread-${thread.cid}`}
|
||||
style={{ display: rotatedStates[thread.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
{/* <li onClick={() => handleOptionClick(thread.cid)}>Edit post</li> */}
|
||||
<li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
|
||||
{thread.author.shortAddress === account?.author.shortAddress ? (
|
||||
<>
|
||||
<li onClick={() => handleAuthorEditClick(thread)}>Edit post</li>
|
||||
<li onClick={() => handleAuthorDeleteClick(thread.cid)}>Delete post</li>
|
||||
</>
|
||||
) : null}
|
||||
{isModerator ? (
|
||||
<>
|
||||
{thread.author.shortAddress === account?.author.shortAddress ? (
|
||||
null
|
||||
) : (
|
||||
<li onClick={() => {
|
||||
setModeratingCommentCid(thread.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
setDeletePost(true);
|
||||
}}>
|
||||
Delete post
|
||||
</li>
|
||||
)}
|
||||
<li
|
||||
onClick={() => {
|
||||
setModeratingCommentCid(thread.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
}}>
|
||||
Mod tools
|
||||
</li>
|
||||
</>
|
||||
) : null}
|
||||
{(commentMediaInfo && (
|
||||
commentMediaInfo.type === 'image' ||
|
||||
(commentMediaInfo.type === 'webpage' &&
|
||||
@@ -858,42 +912,6 @@ const Board = () => {
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
{isModerator ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsModToolsOpen(true)}}
|
||||
onMouseLeave={() => {setIsModToolsOpen(false)}}>
|
||||
Mod tools »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isModToolsOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => {
|
||||
setModeratingCommentCid(thread.cid);
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(thread.cid);
|
||||
}}>
|
||||
Open tools ↗
|
||||
</li>
|
||||
<li onClick={() => handleModToolClick(
|
||||
thread.pinned ? 'Unpin' : 'Pin',
|
||||
thread.cid,
|
||||
{ pinned: thread.pinned, locked: thread.locked }
|
||||
)}>
|
||||
{thread.pinned ? 'Unpin' : 'Pin'}
|
||||
</li>
|
||||
<li onClick={() => handleModToolClick(
|
||||
thread.locked ? 'Reopen' : 'Close',
|
||||
thread.cid,
|
||||
{ pinned: thread.pinned, locked: thread.locked }
|
||||
)}>
|
||||
{thread.locked ? 'Reopen' : 'Close'}
|
||||
</li>
|
||||
<li onClick={() => handleModToolClick(
|
||||
'Delete', thread.cid
|
||||
)}>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
<div key={`bi-${index}`} id="backlink-id" className="backlink">
|
||||
@@ -1015,8 +1033,7 @@ const Board = () => {
|
||||
onClick={() => {
|
||||
const rect = replyMenuRefs.current[reply.cid].getBoundingClientRect();
|
||||
const menu = document.querySelector(`.post-menu-reply-${reply.cid}`);
|
||||
const scrollY = window.scrollY || window.pageYOffset;
|
||||
menu.style.top = `calc(${rect.top + scrollY}px - 258px)`;
|
||||
menu.style.top = `calc(${rect.top + window.scrollY}px - 258px)`;
|
||||
menu.style.left = `${rect.left}px`;
|
||||
|
||||
setRotatedStates(prevState => ({
|
||||
@@ -1027,15 +1044,44 @@ const Board = () => {
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
{/* <li onClick={() => handleOptionClick(reply.cid)}>Edit post</li> */}
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<ul>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
|
||||
{reply.author.shortAddress === account?.author.shortAddress ? (
|
||||
<>
|
||||
<li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
|
||||
<li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
|
||||
</>
|
||||
) : null}
|
||||
{isModerator ? (
|
||||
<>
|
||||
{reply.author.shortAddress === account?.author.shortAddress ? (
|
||||
null
|
||||
) : (
|
||||
<li onClick={() => {
|
||||
setModeratingCommentCid(reply.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(reply.cid);
|
||||
setDeletePost(true);
|
||||
}}>
|
||||
Delete post
|
||||
</li>
|
||||
)}
|
||||
<li
|
||||
onClick={() => {
|
||||
setModeratingCommentCid(reply.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(reply.cid);
|
||||
}}>
|
||||
Mod tools
|
||||
</li>
|
||||
</>
|
||||
) : null}
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
@@ -1044,43 +1090,28 @@ const Board = () => {
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo?.url}`}
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo?.url}`}
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo?.url}`}
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
{isModerator ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsModToolsOpen(true)}}
|
||||
onMouseLeave={() => {setIsModToolsOpen(false)}}>
|
||||
Mod tools »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isModToolsOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleModToolClick(
|
||||
'Delete', reply.cid
|
||||
)}>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
|
||||
@@ -6,13 +6,13 @@ import { Tooltip } from 'react-tooltip';
|
||||
import { useFeed, usePublishComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
|
||||
import { Threads } from '../styled/Catalog.styled';
|
||||
import { TopBar, Footer } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/views/Board.styled';
|
||||
import { Threads } from '../styled/views/Catalog.styled';
|
||||
import { TopBar, Footer } from '../styled/views/Thread.styled';
|
||||
import CatalogLoader from '../CatalogLoader';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import handleStyleChange from '../../utils/handleStyleChange';
|
||||
import useClickForm from '../../hooks/useClickForm';
|
||||
@@ -47,14 +47,28 @@ const Catalog = () => {
|
||||
const linkRef = useRef();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [successMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
useSuccess(successMessage, [successMessage]);
|
||||
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
|
||||
const { subplebbitAddress } = useParams();
|
||||
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
|
||||
|
||||
const stateString = useStateString(subplebbit);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedAddress(subplebbitAddress);
|
||||
}, [subplebbitAddress, setSelectedAddress]);
|
||||
|
||||
|
||||
const errorString = useMemo(() => {
|
||||
if (subplebbit?.state === 'failed') {
|
||||
let errorString = 'Failed fetching board "' + selectedAddress + '".';
|
||||
@@ -65,6 +79,7 @@ const Catalog = () => {
|
||||
}
|
||||
}, [subplebbit?.state, subplebbit?.error, selectedAddress])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (errorString) {
|
||||
setErrorMessage(errorString);
|
||||
@@ -72,13 +87,6 @@ const Catalog = () => {
|
||||
}, [errorString]);
|
||||
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [successMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
useSuccess(successMessage, [successMessage]);
|
||||
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
|
||||
// temporary title from JSON, gets subplebbitAddress from URL
|
||||
useEffect(() => {
|
||||
setSelectedAddress(subplebbitAddress);
|
||||
|
||||
@@ -3,12 +3,14 @@ import { Helmet } from 'react-helmet-async';
|
||||
import { useAccount } from '@plebbit/plebbit-react-hooks';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
|
||||
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/views/Home.styled';
|
||||
import BoardAvatar from '../BoardAvatar';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import packageJson from '../../../package.json'
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
const {version} = packageJson
|
||||
// show commit ref on netlify to know which commit is being served for debugging
|
||||
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''
|
||||
|
||||
|
||||
const Home = () => {
|
||||
@@ -184,7 +186,7 @@ const Home = () => {
|
||||
fontSize: "11px",
|
||||
marginBottom: "2em",
|
||||
}}>
|
||||
plebchan v{version}. GPL-2.0
|
||||
plebchan v{version}{commitRef}. GPL-2.0
|
||||
</div>
|
||||
</Container>
|
||||
</>
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Link } from "react-router-dom";
|
||||
import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/Home.styled';
|
||||
import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/views/Home.styled';
|
||||
import packageJson from '../../../package.json'
|
||||
const {version} = packageJson
|
||||
|
||||
|
||||
@@ -4,12 +4,12 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
import { useAccount, useAccountComment } from '@plebbit/plebbit-react-hooks';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, BoardForm } from '../styled/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, PostForm, BoardForm } from '../styled/views/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar } from '../styled/views/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import getDate from '../../utils/getDate';
|
||||
import handleQuoteClick from '../../utils/handleQuoteClick';
|
||||
@@ -285,14 +285,7 @@ const Pending = () => {
|
||||
|
||||
|
||||
<span className="poster-address">
|
||||
(u/
|
||||
<span key={`pa-${"pending"}`} className="poster-address"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={account?.author?.address}
|
||||
data-tooltip-place="top"
|
||||
>
|
||||
{account?.author?.address.slice(0, 10) + "(...)"}
|
||||
</span>)
|
||||
(u/{account.author.shortAddress})
|
||||
</span>
|
||||
|
||||
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
|
||||
@@ -333,15 +326,7 @@ const Pending = () => {
|
||||
Anonymous</span>}
|
||||
|
||||
<span key={`mob-pa-${"pending"}`} className="poster-address-mobile">
|
||||
(u/
|
||||
<span key={`mob-ha-${"pending"}`} className="poster-address-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={account?.author?.address}
|
||||
data-tooltip-place="top"
|
||||
>
|
||||
{account?.author?.address.slice(0, 10) + "(...)"}
|
||||
</span>
|
||||
)
|
||||
(u/{account.author.shortAddress})
|
||||
</span>
|
||||
<br key={`mob-br1-${"pending"}`} />
|
||||
{comment.title ? (
|
||||
|
||||
@@ -7,14 +7,14 @@ import { useAccount, useAccountComments, useFeed, useSubplebbits } from '@plebbi
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
|
||||
import { Footer } from '../styled/views/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import ReplyModal from '../ReplyModal';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import ReplyModal from '../modals/ReplyModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import findShortParentCid from '../../utils/findShortParentCid';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import getDate from '../../utils/getDate';
|
||||
|
||||
@@ -6,12 +6,12 @@ import { Tooltip } from 'react-tooltip';
|
||||
import { useAccount, useFeed, useSubplebbits } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break} from '../styled/Board.styled';
|
||||
import { Threads } from '../styled/Catalog.styled';
|
||||
import { TopBar, Footer } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break} from '../styled/views/Board.styled';
|
||||
import { Threads } from '../styled/views/Catalog.styled';
|
||||
import { TopBar, Footer } from '../styled/views/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import handleStyleChange from '../../utils/handleStyleChange';
|
||||
import useError from '../../hooks/useError';
|
||||
|
||||
+212
-177
@@ -1,20 +1,22 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { confirmAlert } from 'react-confirm-alert';
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
import { useAccount, useAccountComments, useComment, usePublishComment, usePublishCommentEdit, useSubplebbit } from '@plebbit/plebbit-react-hooks';
|
||||
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/views/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
|
||||
import EditModal from '../modals/EditModal';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import ModerationModal from '../ModerationModal';
|
||||
import ModerationModal from '../modals/ModerationModal';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import ReplyModal from '../ReplyModal';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import ReplyModal from '../modals/ReplyModal';
|
||||
import SettingsModal from '../modals/SettingsModal';
|
||||
import findShortParentCid from '../../utils/findShortParentCid';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import getDate from '../../utils/getDate';
|
||||
@@ -35,6 +37,7 @@ const Thread = () => {
|
||||
captchaResponse, setCaptchaResponse,
|
||||
setChallengesArray,
|
||||
defaultSubplebbits,
|
||||
editedComment,
|
||||
setIsCaptchaOpen,
|
||||
isModerationOpen, setIsModerationOpen,
|
||||
isSettingsOpen, setIsSettingsOpen,
|
||||
@@ -64,15 +67,17 @@ const Thread = () => {
|
||||
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
|
||||
const [deletePost, setDeletePost] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [successMessage, setSuccessMessage] = useState(null);
|
||||
const [isReplyOpen, setIsReplyOpen] = useState(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [originalCommentContent, setOriginalCommentContent] = useState(null);
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [visible, setVisible] = useState(true);
|
||||
const [rotatedStates, setRotatedStates] = useState({});
|
||||
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
|
||||
const [isModerator, setIsModerator] = useState(false);
|
||||
const [isModToolsOpen, setIsModToolsOpen] = useState(false);
|
||||
const [commentCid, setCommentCid] = useState(null);
|
||||
|
||||
useError(errorMessage, [errorMessage]);
|
||||
@@ -91,7 +96,7 @@ const Thread = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (subplebbit.roles !== undefined) {
|
||||
const role = subplebbit.roles[account.author.address]?.role;
|
||||
const role = subplebbit.roles[account?.author?.address]?.role;
|
||||
|
||||
if (role === 'moderator' || role === 'admin' || role === 'owner') {
|
||||
setIsModerator(true);
|
||||
@@ -179,7 +184,7 @@ const Thread = () => {
|
||||
// mobile navbar scroll effect
|
||||
useEffect(() => {
|
||||
const debouncedHandleScroll = debounce(() => {
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
const currentScrollPos = window.scrollY;
|
||||
setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
|
||||
setPrevScrollPos(currentScrollPos);
|
||||
}, 50);
|
||||
@@ -334,7 +339,8 @@ const Thread = () => {
|
||||
|
||||
const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
|
||||
commentCid: commentCid,
|
||||
subplebbitAddress: selectedAddress,
|
||||
content: editedComment || undefined,
|
||||
subplebbitAddress: selectedAddress || subplebbitAddress,
|
||||
onChallenge,
|
||||
onChallengeVerification,
|
||||
onError: (error) => {
|
||||
@@ -352,45 +358,60 @@ const Thread = () => {
|
||||
}, [error]);
|
||||
|
||||
|
||||
const handleModToolClick = (tool, commentCid, currentState) => {
|
||||
setCommentCid(commentCid);
|
||||
const handleAuthorDeleteClick = (commentCid) => {
|
||||
handleOptionClick(commentCid);
|
||||
|
||||
switch (tool) {
|
||||
case 'Pin':
|
||||
case 'Unpin':
|
||||
setPublishCommentEditOptions(prevOptions => ({
|
||||
...prevOptions,
|
||||
pinned: !currentState.pinned,
|
||||
}));
|
||||
break;
|
||||
case 'Close':
|
||||
case 'Reopen':
|
||||
setPublishCommentEditOptions(prevOptions => ({
|
||||
...prevOptions,
|
||||
locked: !currentState.locked,
|
||||
}));
|
||||
break;
|
||||
case 'Delete':
|
||||
setPublishCommentEditOptions(prevOptions => ({
|
||||
...prevOptions,
|
||||
removed: true,
|
||||
}));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
setTriggerPublishCommentEdit(true);
|
||||
confirmAlert({
|
||||
customUI: ({ onClose }) => {
|
||||
return (
|
||||
<AuthorDeleteAlert selectedStyle={selectedStyle}>
|
||||
<div className='author-delete-alert'>
|
||||
<p>Are you sure you want to delete this post?</p>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAuthorEditClick = (comment) => {
|
||||
handleOptionClick(comment.cid);
|
||||
setCommentCid(comment.cid);
|
||||
setOriginalCommentContent(comment.content);
|
||||
setIsEditModalOpen(true);
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setPublishCommentEditOptions((prevOptions) => ({
|
||||
...prevOptions,
|
||||
commentCid: commentCid,
|
||||
content: editedComment || undefined,
|
||||
}));
|
||||
}, [commentCid]);
|
||||
}, [commentCid, editedComment]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (editedComment !== '') {
|
||||
setTriggerPublishCommentEdit(true);
|
||||
}
|
||||
}, [editedComment]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
@@ -402,6 +423,7 @@ const Thread = () => {
|
||||
}
|
||||
}, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
|
||||
|
||||
|
||||
// mobile navbar board select functionality
|
||||
const handleSelectChange = (event) => {
|
||||
const selected = event.target.value;
|
||||
@@ -444,7 +466,13 @@ const Thread = () => {
|
||||
<ModerationModal
|
||||
selectedStyle={selectedStyle}
|
||||
isOpen={isModerationOpen}
|
||||
closeModal={() => setIsModerationOpen(false)} />
|
||||
closeModal={() => setIsModerationOpen(false)}
|
||||
deletePost={deletePost} />
|
||||
<EditModal
|
||||
selectedStyle={selectedStyle}
|
||||
isOpen={isEditModalOpen}
|
||||
closeModal={() => setIsEditModalOpen(false)}
|
||||
originalCommentContent={originalCommentContent} />
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
<span className="boardList">
|
||||
@@ -712,28 +740,28 @@ const Thread = () => {
|
||||
</span>)
|
||||
: null}
|
||||
|
||||
{comment.author?.displayName
|
||||
? comment.author?.displayName.length > 20
|
||||
{comment?.author?.displayName
|
||||
? comment?.author?.displayName.length > 20
|
||||
? <>
|
||||
<span key={`n-${comment.cid}`} className="name"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.author?.displayName}
|
||||
data-tooltip-content={comment?.author?.displayName}
|
||||
data-tooltip-place="top">
|
||||
{comment.author?.displayName.slice(0, 20) + " (...)"}
|
||||
{comment?.author?.displayName.slice(0, 20) + " (...)"}
|
||||
</span>
|
||||
</>
|
||||
: <span key={`n-${comment.cid}`} className="name">
|
||||
{comment.author?.displayName}</span>
|
||||
{comment?.author?.displayName}</span>
|
||||
: <span key={`n-${comment.cid}`} className="name">
|
||||
Anonymous</span>}
|
||||
|
||||
|
||||
<span className="poster-address address-desktop"
|
||||
id="reply-button" style={{cursor: "pointer"}}
|
||||
onClick={() => handleAddressClick(comment.author?.shortAddress)}>
|
||||
onClick={() => handleAddressClick(comment?.author?.shortAddress)}>
|
||||
(u/
|
||||
<span key={`pa-${comment.cid}`} className="poster-address">
|
||||
{comment.author?.shortAddress}
|
||||
{comment?.author?.shortAddress}
|
||||
</span>)
|
||||
</span>
|
||||
|
||||
@@ -760,100 +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>Edit post</li> */}
|
||||
<li onClick={() => {handleOptionClick(comment.cid)}}>Hide thread</li>
|
||||
{(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>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>SauceNAO</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
{isModerator ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsModToolsOpen(true)}}
|
||||
onMouseLeave={() => {setIsModToolsOpen(false)}}>
|
||||
Mod tools »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isModToolsOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => {
|
||||
setModeratingCommentCid(comment.cid);
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(comment.cid);
|
||||
}}>
|
||||
Open tools ↗
|
||||
</li>
|
||||
<li onClick={() => handleModToolClick(
|
||||
comment.pinned ? 'Unpin' : 'Pin',
|
||||
comment.cid,
|
||||
{ pinned: comment.pinned, locked: comment.locked }
|
||||
)}>
|
||||
{comment.pinned ? 'Unpin' : 'Pin'}
|
||||
</li>
|
||||
<li onClick={() => handleModToolClick(
|
||||
comment.locked ? 'Reopen' : 'Close',
|
||||
comment.cid,
|
||||
{ pinned: comment.pinned, locked: comment.locked }
|
||||
)}>
|
||||
{comment.locked ? 'Reopen' : 'Close'}
|
||||
</li>
|
||||
<li onClick={() => handleModToolClick(
|
||||
'Delete', comment.cid
|
||||
)}>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
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)}>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>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<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>
|
||||
<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>
|
||||
) : null
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{comment?.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
@@ -875,7 +896,7 @@ const Thread = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{comment.state === "fetching-ipns" ? <PostLoader /> : null}
|
||||
{comment.replyCount === undefined ? <PostLoader /> : null}
|
||||
{sortedReplies.map((reply, index) => {
|
||||
const replyMediaInfo = getCommentMediaInfo(reply);
|
||||
const fallbackImgUrl = "assets/filedeleted-res.gif";
|
||||
@@ -958,34 +979,63 @@ const Thread = () => {
|
||||
>
|
||||
▶
|
||||
</PostMenu>
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
<div id="post-menu" className={`post-menu-reply post-menu-reply-${reply.cid}`}
|
||||
style={{ display: rotatedStates[reply.cid] ? 'block' : 'none' }}>
|
||||
<ul>
|
||||
{/* <li>Edit post</li> */}
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<ul>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
|
||||
{reply.author.shortAddress === account?.author?.shortAddress ? (
|
||||
<>
|
||||
<li onClick={() => handleAuthorEditClick(reply)}>Edit post</li>
|
||||
<li onClick={() => handleAuthorDeleteClick(reply.cid)}>Delete post</li>
|
||||
</>
|
||||
) : null}
|
||||
{isModerator ? (
|
||||
<>
|
||||
{reply.author.shortAddress === account?.author?.shortAddress ? (
|
||||
null
|
||||
) : (
|
||||
<li onClick={() => {
|
||||
setModeratingCommentCid(reply.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(reply.cid);
|
||||
setDeletePost(true);
|
||||
}}>
|
||||
Delete post
|
||||
</li>
|
||||
)}
|
||||
<li
|
||||
onClick={() => {
|
||||
setModeratingCommentCid(reply.cid)
|
||||
setIsModerationOpen(true);
|
||||
handleOptionClick(reply.cid);
|
||||
}}>
|
||||
Mod tools
|
||||
</li>
|
||||
</>
|
||||
) : null}
|
||||
{(replyMediaInfo && (
|
||||
replyMediaInfo.type === 'image' ||
|
||||
(replyMediaInfo.type === 'webpage' &&
|
||||
replyMediaInfo.thumbnail))) ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsImageSearchOpen(true)}}
|
||||
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
|
||||
Image search »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isImageSearchOpen ? 'block': 'none'}}>
|
||||
<li>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||
<a
|
||||
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Google</a>
|
||||
</li>
|
||||
<li>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||
<a
|
||||
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
>Yandex</a>
|
||||
</li>
|
||||
<li>
|
||||
<li onClick={() => handleOptionClick(reply.cid)}>
|
||||
<a
|
||||
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
|
||||
target="_blank" rel="noreferrer"
|
||||
@@ -993,25 +1043,10 @@ const Thread = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null
|
||||
}
|
||||
{isModerator ? (
|
||||
<li
|
||||
onMouseOver={() => {setIsModToolsOpen(true)}}
|
||||
onMouseLeave={() => {setIsModToolsOpen(false)}}>
|
||||
Mod tools »
|
||||
<ul className="dropdown-menu"
|
||||
style={{display: isModToolsOpen ? 'block': 'none'}}>
|
||||
<li onClick={() => handleModToolClick(
|
||||
'Delete', reply.cid
|
||||
)}>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="backlink-id" className="backlink">
|
||||
{reply.replies?.pages?.topAll.comments
|
||||
.sort((a, b) => a.timestamp - b.timestamp)
|
||||
@@ -1102,28 +1137,28 @@ const Thread = () => {
|
||||
<div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
|
||||
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile">...</button>
|
||||
<span className="name-block-mobile">
|
||||
{comment.author?.displayName
|
||||
? comment.author?.displayName.length > 15
|
||||
{comment?.author?.displayName
|
||||
? comment?.author?.displayName.length > 15
|
||||
? <>
|
||||
<span key={`mob-n-${comment.cid}`} className="name-mobile"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={comment.author?.displayName}
|
||||
data-tooltip-content={comment?.author?.displayName}
|
||||
data-tooltip-place="top">
|
||||
{comment.author?.displayName.slice(0, 15) + " (...)"}
|
||||
{comment?.author?.displayName.slice(0, 15) + " (...)"}
|
||||
</span>
|
||||
</>
|
||||
: <span key={`mob-n-${comment.cid}`} className="name-mobile">
|
||||
{comment.author?.displayName}</span>
|
||||
{comment?.author?.displayName}</span>
|
||||
: <span key={`mob-n-${comment.cid}`} className="name-mobile">
|
||||
Anonymous</span>}
|
||||
|
||||
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
|
||||
id="reply-button" style={{cursor: "pointer"}}
|
||||
onClick={() => handleAddressClick(comment.author?.shortAddress)}
|
||||
onClick={() => handleAddressClick(comment?.author?.shortAddress)}
|
||||
>
|
||||
(u/
|
||||
<span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
|
||||
{comment.author?.shortAddress}
|
||||
{comment?.author?.shortAddress}
|
||||
</span>
|
||||
)
|
||||
</span>
|
||||
|
||||
@@ -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 }),
|
||||
|
||||
|
||||
@@ -12105,6 +12105,11 @@ react-app-polyfill@^3.0.0:
|
||||
regenerator-runtime "^0.13.9"
|
||||
whatwg-fetch "^3.6.2"
|
||||
|
||||
react-confirm-alert@^3.0.6:
|
||||
version "3.0.6"
|
||||
resolved "https://registry.yarnpkg.com/react-confirm-alert/-/react-confirm-alert-3.0.6.tgz#f7552ec839c1e189370cef02ffed3035e7ca2e22"
|
||||
integrity sha512-rplP6Ed9ZSNd0KFV5BUzk4EPQ77BxsrayllBXGFuA8xPXc7sbBjgU5KUrNpl7aWFmP7mXRlVXfuy1IT5DbffYw==
|
||||
|
||||
react-content-loader@6.2.1:
|
||||
version "6.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.2.1.tgz#8feb733c2d2495002e1b216f13707f2b5f2a8ead"
|
||||
|
||||
Reference in New Issue
Block a user