add anon mode store, hide account UI

2026-08-03 07:41:04 +02:00 · 2023-06-16 14:42:23 +02:00
parent 33e8cbfc6d
commit 9733543822
9 changed files with 148 additions and 87 deletions
@@ -5,18 +5,20 @@ 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 useGeneralStore from "../../hooks/stores/useGeneralStore";
 import useError from "../../hooks/useError";
 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 SettingsModal = ({ isOpen, closeModal }) => {
  const {
-    anonymousMode, setAnonymousMode,
    selectedStyle,
  } = useGeneralStore(state => state);
+  
+  const { anonymousMode, setAnonymousMode } = useAnonModeStore();

  const navigate = useNavigate();
  const location = useLocation();
@@ -254,21 +256,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
          </button>
          ]
        </div>
-        {/* <ul>
-          <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>
+        <ul style={{display: anonymousMode ? "none" : "block"}}>
          <li className="settings-cat-lbl">
          <span className={`${expanded.includes(1) ? 'minus' : 'plus'}`}
            onClick={() => toggleExpanded(1)}
@@ -8,7 +8,6 @@ import { Virtuoso } from 'react-virtuoso';
 import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubplebbits } 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, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
 import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -36,6 +35,8 @@ 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

@@ -61,6 +62,8 @@ const All = () => {
    setSelectedThread,
    setSelectedTitle,
  } = useGeneralStore(state => state);
+  
+  const { anonymousMode } = useAnonModeStore();

  const account = useAccount();
  const navigate = useNavigate();
@@ -449,8 +452,12 @@ const All = () => {
            <span className="boardList">
              [
                <Link to={`/p/all`}>All</Link>
-                 / 
-                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
              ]&nbsp;[
            {defaultSubplebbits.map((subplebbit, index) => (
              <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -484,7 +491,7 @@ const All = () => {
                  &nbsp;
                  <select id="board-select-mobile" value="all" onChange={handleSelectChange}>
                    <option value="all">All</option>
-                    <option value="subscriptions">Subscriptions</option>
+                    {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
                    {defaultSubplebbits.map(subplebbit => (
                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -1842,10 +1849,14 @@ const All = () => {
          }}>
            <>
            <span className="boardList">
-              [
-                <Link to={`/p/all`}>All</Link>
-                 / 
-                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+            [
+              <Link to={`/p/all`}>All</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
              ]&nbsp;[
            </span>
            {defaultSubplebbits.map((subplebbit, index) => (
@@ -7,7 +7,6 @@ import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
 import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
-import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.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 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

@@ -44,6 +45,8 @@ const AllCatalog = () => {
    setSelectedThread,
    setSelectedTitle,
  } = useGeneralStore(state => state);
+  
+  const { anonymousMode } = useAnonModeStore();

  const threadMenuRefs = useRef({});
  const postMenuRef = useRef(null);
@@ -337,8 +340,12 @@ const AllCatalog = () => {
          <span className="boardList">
            [
              <Link to={`/p/all`}>All</Link>
-                 / 
-              <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
            ]&nbsp;[
            {defaultSubplebbits.map((subplebbit, index) => (
              <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -375,7 +382,7 @@ const AllCatalog = () => {
                  &nbsp;
                  <select id="board-select-mobile" value="all" onChange={handleSelectChange}>
                    <option value="all">All</option>
-                    <option value="subscriptions">Subscriptions</option>
+                    {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
                    {defaultSubplebbits.map(subplebbit => (
                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -662,8 +669,12 @@ const AllCatalog = () => {
            <span className="boardList">
              [
                <Link to={`/p/all`}>All</Link>
-                 / 
-                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
              ]&nbsp;[
            {defaultSubplebbits.map((subplebbit, index) => (
              <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -8,7 +8,6 @@ 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/views/Board.styled';
 import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -38,13 +37,14 @@ 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


 const Board = () => {
  const {
-    anonymousMode,
    setCaptchaResponse,
    setChallengesArray,
    defaultSubplebbits,
@@ -67,7 +67,9 @@ const Board = () => {
    showPostForm,
    showPostFormLink,
  } = useGeneralStore(state => state);
-
+  
+  const { anonymousMode } = useAnonModeStore();
+  
  const account = useAccount();
  const navigate = useNavigate();
  const { subplebbitAddress } = useParams();
@@ -576,8 +578,12 @@ const Board = () => {
            <span className="boardList">
              [
                <Link to={`/p/all`}>All</Link>
-                 / 
-                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
              ]&nbsp;[
              {defaultSubplebbits.map((subplebbit, index) => (
                <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -611,7 +617,7 @@ const Board = () => {
                  &nbsp;
                  <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
                    <option value="all">All</option>
-                    <option value="subscriptions">Subscriptions</option>
+                    {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
                    {defaultSubplebbits.map(subplebbit => (
                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -721,20 +727,24 @@ const Board = () => {
          </div>
          {feed.length > 0 ? (
            <>
-              <span className="subscribe-button-desktop">
-                [
-                <span id="subscribe" style={{cursor: 'pointer'}}>
-                  <span onClick={() => handleSubscribe()}>
-                    {subscribed ? "Unsubscribe" : "Subscribe"}
+              {anonymousMode ? null : (
+                <>
+                  <span className="subscribe-button-desktop">
+                    [
+                    <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()}>
-                {subscribed ? "Unsubscribe" : "Subscribe"}
-                </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"}}>
@@ -1987,8 +1997,12 @@ const Board = () => {
            <span className="boardList">
              [
                <Link to={`/p/all`}>All</Link>
-                 / 
-                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
              ]&nbsp;
            </span>
            {defaultSubplebbits.map((subplebbit, index) => (
@@ -7,7 +7,6 @@ import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
 import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, 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, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.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 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


 const Catalog = () => {
  const {
-    anonymousMode,
    captchaResponse, setCaptchaResponse,
    setChallengesArray,
    defaultSubplebbits,
@@ -51,6 +51,8 @@ const Catalog = () => {
    showPostForm,
    showPostFormLink,
  } = useGeneralStore(state => state);
+  
+  const { anonymousMode } = useAnonModeStore();

  const nameRef = useRef();
  const subjectRef = useRef();
@@ -82,8 +84,6 @@ const Catalog = () => {

  useAnonMode(selectedThread, anonymousMode && executeAnonMode);

-
-
  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
  const { subplebbitAddress } = useParams();
  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -475,8 +475,12 @@ 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}`}>
@@ -513,7 +517,7 @@ const Catalog = () => {
                  &nbsp;
                  <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
                    <option value="all">All</option>
-                    <option value="subscriptions">Subscriptions</option>
+                    {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
                    {defaultSubplebbits.map(subplebbit => (
                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -625,20 +629,24 @@ const Catalog = () => {
          </div>
          {feed.length > 0 ? (
            <>
-            <span className="subscribe-button-desktop">
-                [
-                <span id="subscribe" style={{cursor: 'pointer'}}>
-                  <span onClick={() => handleSubscribe()}>
-                    {subscribed ? "Unsubscribe" : "Subscribe"}
+              {anonymousMode ? null : (
+                <>
+                  <span className="subscribe-button-desktop">
+                    [
+                    <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()}>
-                {subscribed ? "Unsubscribe" : "Subscribe"}
-                </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"}}>
@@ -863,8 +871,12 @@ const Catalog = () => {
            <span className="boardList">
              [
                <Link to={`/p/all`}>All</Link>
-                 / 
-                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
              ]&nbsp;
            </span>
            {defaultSubplebbits.map((subplebbit, index) => (
@@ -1,11 +1,12 @@
 import React, { Fragment, useEffect, useRef } from 'react';
 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/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';
 const {version} = packageJson
@@ -14,13 +15,15 @@ const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP


 const Home = () => {
-  const { 
+  const {
    bodyStyle, setBodyStyle,
    defaultSubplebbits,
    setSelectedAddress, 
    selectedStyle, setSelectedStyle,
    setSelectedTitle
  } = useGeneralStore(state => state);
+  
+  const { anonymousMode } = useAnonModeStore();

  const account = useAccount();
  const navigate = useNavigate();
@@ -102,7 +105,7 @@ const Home = () => {
              </div>
            </AboutContent>
          </About>
-          {account?.subscriptions?.length > 0 ? (
+          {account?.subscriptions?.length > 0 && !anonymousMode ? (
            <Boards>
                <BoardsTitle>
                  <h2>Subscriptions</h2>
@@ -7,7 +7,6 @@ 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/views/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -36,14 +35,15 @@ import useAnonMode from '../../hooks/useAnonMode';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
-import packageJson from '../../../package.json'
 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 Thread = () => {
  const {
-    anonymousMode,
    captchaResponse, setCaptchaResponse,
    setChallengesArray,
    defaultSubplebbits,
@@ -67,6 +67,8 @@ const Thread = () => {
    showPostFormLink,
  } = useGeneralStore(state => state);

+  const { anonymousMode } = useAnonModeStore();
+  
  const account = useAccount();
  const navigate = useNavigate();
  const handleClickForm = useClickForm();
@@ -530,8 +532,12 @@ const Thread = () => {
          <span className="boardList">
            [
              <Link to={`/p/all`}>All</Link>
-                 / 
-              <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
            ]&nbsp;[
            {defaultSubplebbits.map((subplebbit, index) => (
              <span className="boardList" key={`span-${subplebbit.address}`}>
@@ -568,7 +574,7 @@ const Thread = () => {
                  &nbsp;
                  <select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
                    <option value="all">All</option>
-                    <option value="subscriptions">Subscriptions</option>
+                    {anonymousMode ? null : <option value="subscriptions">Subscriptions</option>}
                    {defaultSubplebbits.map(subplebbit => (
                        <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                        >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
@@ -1827,8 +1833,12 @@ const Thread = () => {
            <span className="boardList">
              [
                <Link to={`/p/all`}>All</Link>
-                 / 
-                <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                {anonymousMode ? null : 
+                <>
+                   / 
+                  <Link to={`/p/subscriptions`}>Subscriptions</Link>
+                </>
+                }
              ]&nbsp;
            </span>
            {defaultSubplebbits.map((subplebbit, index) => (
@@ -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;
@@ -1,9 +1,6 @@
 import { create } from 'zustand';

 const useGeneralStore = create((set) => ({
-  anonymousMode: true,
-  setAnonymousMode: (mode) => set({ anonymousMode: mode }),
-
  bodyStyle: JSON.parse(localStorage.getItem('bodyStyle')) || {
    background: '#ffe url(assets/fade.png) top repeat-x',
    color: 'maroon',