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

add anon mode store, hide account UI

Browse Source
This commit is contained in:
plebeius.eth
2023-06-16 14:42:23 +02:00
parent 33e8cbfc6d
commit 9733543822
9 changed files with 148 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/SettingsModal.jsx
+5 -17
View File
@@ -5,18 +5,20 @@ import Modal from "react-modal";
import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts } from "@plebbit/plebbit-react-hooks"; import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
import { StyledModal } from "../styled/modals/SettingsModal.styled"; import { StyledModal } from "../styled/modals/SettingsModal.styled";
import { AuthorDeleteAlert } from '../styled/views/Thread.styled'; import { AuthorDeleteAlert } from '../styled/views/Thread.styled';
import useGeneralStore from "../../hooks/stores/useGeneralStore";
import useError from "../../hooks/useError"; import useError from "../../hooks/useError";
import useSuccess from "../../hooks/useSuccess"; import useSuccess from "../../hooks/useSuccess";
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const {version} = packageJson
const SettingsModal = ({ isOpen, closeModal }) => { const SettingsModal = ({ isOpen, closeModal }) => {
const { const {
anonymousMode, setAnonymousMode,
selectedStyle, selectedStyle,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const { anonymousMode, setAnonymousMode } = useAnonModeStore();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
@@ -254,21 +256,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
</button> </button>
] ]
</div> </div>
{/* <ul> <ul style={{display: anonymousMode ? "none" : "block"}}>
<li className="settings-cat-lbl">
<span className={`${expanded.includes(0) ? 'minus' : 'plus'}`}
onClick={() => toggleExpanded(0)}
/>
<span className="settings-pointer" style={{cursor: "pointer"}}
onClick={() => toggleExpanded(0)}
>Account</span>
</li>
<ul className="settings-cat" style={{ display: expanded.includes(0) ? 'block' : 'none' }}>
<li>
</li>
</ul>
</ul>*/}
<ul>
<li className="settings-cat-lbl"> <li className="settings-cat-lbl">
<span className={`${expanded.includes(1) ? 'minus' : 'plus'}`} <span className={`${expanded.includes(1) ? 'minus' : 'plus'}`}
onClick={() => toggleExpanded(1)} onClick={() => toggleExpanded(1)}
src/components/views/All.jsx
+19 -8
View File
@@ -8,7 +8,6 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled'; import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -36,6 +35,8 @@ import removeHighlight from '../../utils/removeHighlight';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useFeedStateString from '../../hooks/useFeedStateString'; import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess'; import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const {version} = packageJson
@@ -61,6 +62,8 @@ const All = () => {
setSelectedThread, setSelectedThread,
setSelectedTitle, setSelectedTitle,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const account = useAccount(); const account = useAccount();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -449,8 +452,12 @@ const All = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -484,7 +491,7 @@ const All = () => {
&nbsp; &nbsp;
<select id="board-select-mobile" value="all" onChange={handleSelectChange}> <select id="board-select-mobile" value="all" onChange={handleSelectChange}>
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -1842,10 +1849,14 @@ const All = () => {
}}> }}>
<> <>
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp;[ ]&nbsp;[
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
src/components/views/AllCatalog.jsx
+17 -6
View File
@@ -7,7 +7,6 @@ import { confirmAlert } from 'react-confirm-alert';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
@@ -22,6 +21,8 @@ import handleStyleChange from '../../utils/handleStyleChange';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useFeedStateString from '../../hooks/useFeedStateString'; import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess'; import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const {version} = packageJson
@@ -44,6 +45,8 @@ const AllCatalog = () => {
setSelectedThread, setSelectedThread,
setSelectedTitle, setSelectedTitle,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const postMenuRef = useRef(null); const postMenuRef = useRef(null);
@@ -337,8 +340,12 @@ const AllCatalog = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -375,7 +382,7 @@ const AllCatalog = () => {
&nbsp; &nbsp;
<select id="board-select-mobile" value="all" onChange={handleSelectChange}> <select id="board-select-mobile" value="all" onChange={handleSelectChange}>
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -662,8 +669,12 @@ const AllCatalog = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
src/components/views/Board.jsx
+35 -21
View File
@@ -8,7 +8,6 @@ import { Virtuoso } from 'react-virtuoso';
import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.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 { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -38,13 +37,14 @@ import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString'; import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess'; import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const {version} = packageJson
const Board = () => { const Board = () => {
const { const {
anonymousMode,
setCaptchaResponse, setCaptchaResponse,
setChallengesArray, setChallengesArray,
defaultSubplebbits, defaultSubplebbits,
@@ -67,7 +67,9 @@ const Board = () => {
showPostForm, showPostForm,
showPostFormLink, showPostFormLink,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const account = useAccount(); const account = useAccount();
const navigate = useNavigate(); const navigate = useNavigate();
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
@@ -576,8 +578,12 @@ const Board = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -611,7 +617,7 @@ const Board = () => {
&nbsp; &nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}> <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -721,20 +727,24 @@ const Board = () => {
</div> </div>
{feed.length > 0 ? ( {feed.length > 0 ? (
<> <>
<span className="subscribe-button-desktop"> {anonymousMode ? null : (
[ <>
<span id="subscribe" style={{cursor: 'pointer'}}> <span className="subscribe-button-desktop">
<span onClick={() => handleSubscribe()}> [
{subscribed ? "Unsubscribe" : "Subscribe"} <span id="subscribe" style={{cursor: 'pointer'}}>
<span onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
]
</span> </span>
</span> <span className="subscribe-button-mobile">
] <span className="btn-wrap" onClick={() => handleSubscribe()}>
</span> {subscribed ? "Unsubscribe" : "Subscribe"}
<span className="subscribe-button-mobile"> </span>
<span className="btn-wrap" onClick={() => handleSubscribe()}> </span>
{subscribed ? "Unsubscribe" : "Subscribe"} </>
</span> )}
</span>
</> </>
) : ( ) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}> <div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -1987,8 +1997,12 @@ const Board = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp; ]&nbsp;
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
src/components/views/Catalog.jsx
+33 -21
View File
@@ -7,7 +7,6 @@ import { confirmAlert } from 'react-confirm-alert';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled'; import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled'; import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
@@ -24,13 +23,14 @@ import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString'; import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess'; import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const {version} = packageJson
const Catalog = () => { const Catalog = () => {
const { const {
anonymousMode,
captchaResponse, setCaptchaResponse, captchaResponse, setCaptchaResponse,
setChallengesArray, setChallengesArray,
defaultSubplebbits, defaultSubplebbits,
@@ -51,6 +51,8 @@ const Catalog = () => {
showPostForm, showPostForm,
showPostFormLink, showPostFormLink,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const nameRef = useRef(); const nameRef = useRef();
const subjectRef = useRef(); const subjectRef = useRef();
@@ -82,8 +84,6 @@ const Catalog = () => {
useAnonMode(selectedThread, anonymousMode && executeAnonMode); useAnonMode(selectedThread, anonymousMode && executeAnonMode);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'}); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -475,8 +475,12 @@ const Catalog = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
{anonymousMode ? null :
<>
 /   / 
<Link to={`/p/subscriptions`}>Subscriptions</Link> <Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -513,7 +517,7 @@ const Catalog = () => {
&nbsp; &nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}> <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -625,20 +629,24 @@ const Catalog = () => {
</div> </div>
{feed.length > 0 ? ( {feed.length > 0 ? (
<> <>
<span className="subscribe-button-desktop"> {anonymousMode ? null : (
[ <>
<span id="subscribe" style={{cursor: 'pointer'}}> <span className="subscribe-button-desktop">
<span onClick={() => handleSubscribe()}> [
{subscribed ? "Unsubscribe" : "Subscribe"} <span id="subscribe" style={{cursor: 'pointer'}}>
<span onClick={() => handleSubscribe()}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</span>
</span>
]
</span> </span>
</span> <span className="subscribe-button-mobile">
] <span className="btn-wrap" onClick={() => handleSubscribe()}>
</span> {subscribed ? "Unsubscribe" : "Subscribe"}
<span className="subscribe-button-mobile"> </span>
<span className="btn-wrap" onClick={() => handleSubscribe()}> </span>
{subscribed ? "Unsubscribe" : "Subscribe"} </>
</span> )}
</span>
</> </>
) : ( ) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}> <div id="stats" style={{float: "right", marginTop: "5px"}}>
@@ -863,8 +871,12 @@ const Catalog = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp; ]&nbsp;
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
src/components/views/Home.jsx
+6 -3
View File
@@ -1,11 +1,12 @@
import React, { Fragment, useEffect, useRef } from 'react'; import React, { Fragment, useEffect, useRef } from 'react';
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import { useAccount } from '@plebbit/plebbit-react-hooks'; import { useAccount } from '@plebbit/plebbit-react-hooks';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Link, useNavigate } from 'react-router-dom'; 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 { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/views/Home.styled';
import BoardAvatar from '../BoardAvatar'; import BoardAvatar from '../BoardAvatar';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
const {version} = packageJson const {version} = packageJson
@@ -14,13 +15,15 @@ const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP
const Home = () => { const Home = () => {
const { const {
bodyStyle, setBodyStyle, bodyStyle, setBodyStyle,
defaultSubplebbits, defaultSubplebbits,
setSelectedAddress, setSelectedAddress,
selectedStyle, setSelectedStyle, selectedStyle, setSelectedStyle,
setSelectedTitle setSelectedTitle
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const account = useAccount(); const account = useAccount();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -102,7 +105,7 @@ const Home = () => {
</div> </div>
</AboutContent> </AboutContent>
</About> </About>
{account?.subscriptions?.length > 0 ? ( {account?.subscriptions?.length > 0 && !anonymousMode ? (
<Boards> <Boards>
<BoardsTitle> <BoardsTitle>
<h2>Subscriptions</h2> <h2>Subscriptions</h2>
src/components/views/Thread.jsx
+18 -8
View File
@@ -7,7 +7,6 @@ import { Tooltip } from 'react-tooltip';
import { useAccount, useAccountComments, useComment, usePublishComment, usePublishCommentEdit, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useAccount, useAccountComments, useComment, usePublishComment, usePublishCommentEdit, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/views/Board.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 { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -36,14 +35,15 @@ import useAnonMode from '../../hooks/useAnonMode';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString'; import useStateString from '../../hooks/useStateString';
import packageJson from '../../../package.json'
import useSuccess from '../../hooks/useSuccess'; 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 const {version} = packageJson
const Thread = () => { const Thread = () => {
const { const {
anonymousMode,
captchaResponse, setCaptchaResponse, captchaResponse, setCaptchaResponse,
setChallengesArray, setChallengesArray,
defaultSubplebbits, defaultSubplebbits,
@@ -67,6 +67,8 @@ const Thread = () => {
showPostFormLink, showPostFormLink,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const { anonymousMode } = useAnonModeStore();
const account = useAccount(); const account = useAccount();
const navigate = useNavigate(); const navigate = useNavigate();
const handleClickForm = useClickForm(); const handleClickForm = useClickForm();
@@ -530,8 +532,12 @@ const Thread = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -568,7 +574,7 @@ const Thread = () => {
&nbsp; &nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}> <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option> <option value="all">All</option>
<option value="subscriptions">Subscriptions</option> {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address} <option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option> >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -1827,8 +1833,12 @@ const Thread = () => {
<span className="boardList"> <span className="boardList">
[ [
<Link to={`/p/all`}>All</Link> <Link to={`/p/all`}>All</Link>
 /  {anonymousMode ? null :
<Link to={`/p/subscriptions`}>Subscriptions</Link> <>
 / 
<Link to={`/p/subscriptions`}>Subscriptions</Link>
</>
}
]&nbsp; ]&nbsp;
</span> </span>
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
src/hooks/stores/useAnonModeStore.js
+15
View File
@@ -0,0 +1,15 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
const useAnonModeStore = create(persist(
(set) => ({
anonymousMode: true,
setAnonymousMode: (mode) => set({ anonymousMode: mode }),
}),
{
name: "anonmode_store",
getStorage: () => localStorage,
}
));
export default useAnonModeStore;
src/hooks/stores/useGeneralStore.js
-3
View File
@@ -1,9 +1,6 @@
import { create } from 'zustand'; import { create } from 'zustand';
const useGeneralStore = create((set) => ({ const useGeneralStore = create((set) => ({
anonymousMode: true,
setAnonymousMode: (mode) => set({ anonymousMode: mode }),
bodyStyle: JSON.parse(localStorage.getItem('bodyStyle')) || { bodyStyle: JSON.parse(localStorage.getItem('bodyStyle')) || {
background: '#ffe url(assets/fade.png) top repeat-x', background: '#ffe url(assets/fade.png) top repeat-x',
color: 'maroon', color: 'maroon',