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

update anon mode

Browse Source
This commit is contained in:
plebeius.eth
2023-06-17 20:24:38 +02:00
parent 1abaf3faf2
commit 869d653ce3
9 changed files with 118 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/SettingsModal.jsx
+17 -50
View File
@@ -1,10 +1,8 @@
import React, { useState, useEffect, useRef } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { confirmAlert } from "react-confirm-alert";
import Modal from "react-modal";
import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
import { StyledModal } from "../styled/modals/SettingsModal.styled";
import { AuthorDeleteAlert } from '../styled/views/Thread.styled';
import useError from "../../hooks/useError";
import useSuccess from "../../hooks/useSuccess";
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
@@ -196,38 +194,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
}
};
const handleAnonymousMode = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>
{ !anonymousMode ?
"Enabling anonymous mode will turn off all account-based features, such as subscribing to boards." :
"Disabling anonymous mode will turn on all account-based features, such as subscribing to boards."
}
</p>
<div className="author-delete-buttons">
<button onClick={onClose}>Cancel</button>
<button
onClick={() => {
setAnonymousMode(!anonymousMode);
onClose();
}}
>
{ !anonymousMode ? "Enable" : "Disable" }
</button>
</div>
</div>
</AuthorDeleteAlert>
)
}
})
};
return (
<StyledModal
@@ -256,7 +222,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
</button>
]
</div>
<ul style={{display: anonymousMode ? "none" : "block"}}>
<ul>
<li className="settings-cat-lbl">
<span className={`${expanded.includes(1) ? 'minus' : 'plus'}`}
onClick={() => toggleExpanded(1)}
@@ -270,6 +236,22 @@ const SettingsModal = ({ isOpen, closeModal }) => {
</div>
</li>
<ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
<li className="anon-off">
<label title={ !anonymousMode ?
"Enable anon mode" :
"Disable anon mode"
}>
<input
type="checkbox"
checked={anonymousMode}
onChange={() => {setAnonymousMode(!anonymousMode)}}
/>
&nbsp;Anon mode
</label>
</li>
<li className="settings-tip anon-tip">
Automatically uses a different account (u/address) per thread.
</li>
<li className="settings-option disc">
Account Data
</li>
@@ -402,21 +384,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
</ul>
</ul> */}
</ul>
<ul>
<li className="anon-off">
<label title={ !anonymousMode ?
"Enable anonymous mode (turns off all account-based features)" :
"Disable anonymous mode (turns on all account-based features)"
}>
<input
type="checkbox"
checked={!anonymousMode}
onChange={handleAnonymousMode}
/>
Disable anonymous mode
</label>
</li>
</ul>
<div>
<button
className="cache-button"
src/components/styled/modals/SettingsModal.styled.jsx
+27 -2
View File
@@ -191,8 +191,33 @@ export const StyledModal = styled(Modal)`
}
.anon-off {
padding-left: 3px;
padding-top: 15px;
margin: 10px 0 5px -2px
}
.anon-tip {
margin-bottom: 10px;
}
.anon-tip::before {
content: '';
display: block;
width: 10px;
height: 1px;
background-color: currentColor;
position: absolute;
left: 18px;
top: 116px;
}
.anon-tip::after {
content: '';
display: block;
width: 1px;
height: 12px;
background-color: currentColor;
position: absolute;
left: 18px;
top: 105px;
}
src/components/views/All.jsx
+13 -19
View File
@@ -35,7 +35,6 @@ import removeHighlight from '../../utils/removeHighlight';
import useError from '../../hooks/useError';
import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -63,7 +62,6 @@ const All = () => {
setSelectedTitle,
} = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const account = useAccount();
const navigate = useNavigate();
@@ -452,12 +450,8 @@ const All = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
@@ -491,7 +485,7 @@ const All = () => {
&nbsp;
<select id="board-select-mobile" value="all" onChange={handleSelectChange}>
<option value="all">All</option>
{anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -674,7 +668,8 @@ const All = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(thread.shortCid);
setSelectedParentCid(thread.cid);
setSelectedAddress(thread.subplebbitAddress);
@@ -953,7 +948,8 @@ const All = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
setSelectedAddress(thread.subplebbitAddress);
@@ -1386,7 +1382,8 @@ const All = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(thread.shortCid);
setSelectedParentCid(thread.cid);
setSelectedAddress(thread.subplebbitAddress);
@@ -1558,7 +1555,8 @@ const All = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
setSelectedAddress(thread.subplebbitAddress);
@@ -1851,12 +1849,8 @@ const All = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
</span>
{defaultSubplebbits.map((subplebbit, index) => (
src/components/views/AllCatalog.jsx
+5 -15
View File
@@ -21,7 +21,6 @@ import handleStyleChange from '../../utils/handleStyleChange';
import useError from '../../hooks/useError';
import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -46,7 +45,6 @@ const AllCatalog = () => {
setSelectedTitle,
} = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const threadMenuRefs = useRef({});
const postMenuRef = useRef(null);
@@ -340,12 +338,8 @@ const AllCatalog = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
@@ -382,7 +376,7 @@ const AllCatalog = () => {
&nbsp;
<select id="board-select-mobile" value="all" onChange={handleSelectChange}>
<option value="all">All</option>
{anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -669,12 +663,8 @@ const AllCatalog = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
src/components/views/Board.jsx
+24 -45
View File
@@ -32,12 +32,10 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
import handleQuoteHover from '../../utils/handleQuoteHover';
import handleStyleChange from '../../utils/handleStyleChange';
import removeHighlight from '../../utils/removeHighlight';
import useAnonMode from '../../hooks/useAnonMode';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -62,13 +60,12 @@ const Board = () => {
setSelectedParentCid,
setSelectedShortCid,
selectedStyle,
selectedThread, setSelectedThread,
setSelectedThread,
selectedTitle, setSelectedTitle,
showPostForm,
showPostFormLink,
} = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const account = useAccount();
const navigate = useNavigate();
@@ -112,9 +109,6 @@ const Board = () => {
const [outOfViewCid, setOutOfViewCid] = useState(null);
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [executeAnonMode, setExecuteAnonMode] = useState(false);
useAnonMode(selectedThread, anonymousMode && executeAnonMode);
useEffect(() => {
@@ -360,13 +354,6 @@ const Board = () => {
};
useEffect(() => {
if (anonymousMode) {
setExecuteAnonMode(true);
}
}, [anonymousMode, selectedThread]);
useEffect(() => {
if (publishCommentOptions && triggerPublishComment) {
(async () => {
@@ -578,12 +565,8 @@ const Board = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
@@ -617,7 +600,7 @@ const Board = () => {
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option>
{anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -727,24 +710,20 @@ const Board = () => {
</div>
{feed.length > 0 ? (
<>
{anonymousMode ? null : (
<>
<span className="subscribe-button-desktop">
[
<span id="subscribe" style={{cursor: 'pointer'}}>
<span onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
]
</span>
<span className="subscribe-button-mobile">
<span className="btn-wrap" onClick={() => handleSubscribe()}>
<span className="subscribe-button-desktop">
[
<span id="subscribe" style={{cursor: 'pointer'}}>
<span onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
</>
)}
</span>
]
</span>
<span className="subscribe-button-mobile">
<span className="btn-wrap" onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -1136,6 +1115,7 @@ const Board = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setSelectedThread(thread.cid);
setIsReplyOpen(true);
setSelectedShortCid(thread.shortCid);
setSelectedParentCid(thread.cid);
@@ -1413,7 +1393,8 @@ const Board = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setIsReplyOpen(true);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
}} title="Reply to this post">{reply.shortCid}</Link>
@@ -1817,7 +1798,8 @@ const Board = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setIsReplyOpen(true);
setSelectedShortCid(thread.shortCid);
setSelectedParentCid(thread.cid);
}} title="Reply to this post">{thread.shortCid}
@@ -1967,7 +1949,8 @@ const Board = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setIsReplyOpen(true);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
}} title="Reply to this post">{reply.shortCid}
@@ -2259,12 +2242,8 @@ const Board = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (
src/components/views/Catalog.jsx
+18 -43
View File
@@ -18,12 +18,10 @@ import OfflineIndicator from '../OfflineIndicator';
import SettingsModal from '../modals/SettingsModal';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import handleStyleChange from '../../utils/handleStyleChange';
import useAnonMode from '../../hooks/useAnonMode';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -46,13 +44,12 @@ const Catalog = () => {
setResolveCaptchaPromise,
selectedAddress, setSelectedAddress,
selectedStyle,
selectedThread, setSelectedThread,
setSelectedThread,
selectedTitle, setSelectedTitle,
showPostForm,
showPostFormLink,
} = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const nameRef = useRef();
const subjectRef = useRef();
@@ -80,9 +77,6 @@ const Catalog = () => {
const [commentCid, setCommentCid] = useState(null);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null);
const [executeAnonMode, setExecuteAnonMode] = useState(false);
useAnonMode(selectedThread, anonymousMode && executeAnonMode);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
const { subplebbitAddress } = useParams();
@@ -281,13 +275,6 @@ const Catalog = () => {
};
useEffect(() => {
if (anonymousMode) {
setExecuteAnonMode(true);
}
}, [anonymousMode, selectedThread]);
useEffect(() => {
if (publishCommentOptions && triggerPublishComment) {
(async () => {
@@ -475,12 +462,8 @@ const Catalog = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
@@ -517,7 +500,7 @@ const Catalog = () => {
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option>
{anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -629,24 +612,20 @@ const Catalog = () => {
</div>
{feed.length > 0 ? (
<>
{anonymousMode ? null : (
<>
<span className="subscribe-button-desktop">
[
<span id="subscribe" style={{cursor: 'pointer'}}>
<span onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
]
</span>
<span className="subscribe-button-mobile">
<span className="btn-wrap" onClick={() => handleSubscribe()}>
<span className="subscribe-button-desktop">
[
<span id="subscribe" style={{cursor: 'pointer'}}>
<span onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
</>
)}
</span>
]
</span>
<span className="subscribe-button-mobile">
<span className="btn-wrap" onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -1064,12 +1043,8 @@ const Catalog = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (
src/components/views/Home.jsx
+1 -4
View File
@@ -5,7 +5,6 @@ import { Link, useNavigate } from 'react-router-dom';
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 useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
import { Tooltip } from 'react-tooltip';
@@ -22,8 +21,6 @@ const Home = () => {
selectedStyle, setSelectedStyle,
setSelectedTitle
} = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const account = useAccount();
const navigate = useNavigate();
@@ -105,7 +102,7 @@ const Home = () => {
</div>
</AboutContent>
</About>
{account?.subscriptions?.length > 0 && !anonymousMode ? (
{account?.subscriptions?.length > 0 ? (
<Boards>
<BoardsTitle>
<h2>Subscriptions</h2>
src/components/views/Subscriptions.jsx
+8 -4
View File
@@ -678,7 +678,8 @@ const Subscriptions = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(thread.shortCid);
setSelectedParentCid(thread.cid);
setSelectedAddress(thread.subplebbitAddress);
@@ -957,7 +958,8 @@ const Subscriptions = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
setSelectedAddress(thread.subplebbitAddress);
@@ -1390,7 +1392,8 @@ const Subscriptions = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(thread.shortCid);
setSelectedParentCid(thread.cid);
setSelectedAddress(thread.subplebbitAddress);
@@ -1562,7 +1565,8 @@ const Subscriptions = () => {
onClick={(e) => {
if (e.button === 2) return;
e.preventDefault();
setIsReplyOpen(true);
setIsReplyOpen(true);
setSelectedThread(thread.cid);
setSelectedShortCid(reply.shortCid);
setSelectedParentCid(reply.cid);
setSelectedAddress(thread.subplebbitAddress);
src/components/views/Thread.jsx
+5 -13
View File
@@ -532,12 +532,8 @@ const Thread = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
@@ -574,7 +570,7 @@ const Thread = () => {
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option>
{anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -1833,12 +1829,8 @@ const Thread = () => {
<span className="boardList">
[
<Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (