switched from context to zustand

src/components/Board.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useContext, Fragment } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
-import { BoardContext } from '../App';
+import useBoardStore from '../useBoardStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
@@ -12,8 +12,20 @@ import renderComments from '../utils/renderComments';
 
 
 const Board = ({ setBodyStyle }) => {
+  
+  const {
+    selectedTitle,
+    setSelectedTitle,
+    selectedAddress,
+    setSelectedAddress,
+    setSelectedThread,
+    selectedStyle,
+    setSelectedStyle,
+    captchaResponse,
+    setCaptchaResponse
+  } = useBoardStore(state => state);
+
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');
@@ -30,7 +42,7 @@ const Board = ({ setBodyStyle }) => {
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const renderedFeed = selectedFeed.slice(0, endIndex);
-  const { subplebbitAddress } = useParams();
+  const { subplebbitAddress } = useParams();  
 
 
   // temporary title from JSON, gets subplebbitAddress from URL

src/components/CaptchaModal.jsx

@@ -1,7 +1,7 @@
-import React, { useState, useContext } from 'react';
+import React from 'react';
+import useBoardStore from '../useBoardStore';
 import Modal from 'react-modal';
 import styled from 'styled-components';
-import { BoardContext } from '../App';
 
 const StyledModal = styled(Modal)`
   @media (min-width: 480px) {
@@ -70,7 +70,7 @@ const customOverlayStyles = {
 };
 
 const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => {
-  const { captchaResponse, setCaptchaResponse } = useContext(BoardContext);
+  const { captchaResponse, setCaptchaResponse } = useBoardStore(state => state);
 
   const handleCloseModal = () => {
     closeModal();
@@ -97,7 +97,8 @@ const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => {
         autoComplete='off'
         placeholder="TYPE THE CAPTCHA HERE AND PRESS ENTER" 
         value={captchaResponse} 
-        onChange={handleChallengeResponse} />
+        onChange={handleChallengeResponse}
+        autoFocus />
       </div>
     </StyledModal>
   );

src/components/Catalog.jsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
+import useBoardStore from '../useBoardStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
 import { TopBar } from './styles/Thread.styled';
 import { Threads } from './styles/Catalog.styled';
-import { BoardContext } from '../App';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
@@ -11,8 +11,20 @@ import InfiniteScroll from 'react-infinite-scroller';
 
 
 const Catalog = ({ setBodyStyle }) => {
+
+  const {
+    selectedTitle,
+    setSelectedTitle,
+    selectedAddress,
+    setSelectedAddress,
+    setSelectedThread,
+    selectedStyle,
+    setSelectedStyle,
+    captchaResponse,
+    setCaptchaResponse
+  } = useBoardStore(state => state);
+
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');

src/components/Home.jsx

@@ -1,11 +1,12 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
+import useBoardStore from '../useBoardStore';
 import { Link } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
-import { BoardContext } from '../App';
+
 
 const Home = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { setSelectedTitle, setSelectedAddress, setSelectedStyle } = useContext(BoardContext);
+  const { setSelectedTitle, setSelectedAddress, setSelectedStyle } = useBoardStore(state => state);
 
   useEffect(() => {
     setBodyStyle({

src/components/Thread.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
+import useBoardStore from '../useBoardStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
-import { BoardContext } from '../App';
 import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
@@ -12,8 +12,21 @@ import renderThreadComments from '../utils/renderThreadComments';
 
 
 const Thread = ({ setBodyStyle }) => {
+
+  const {
+    selectedTitle,
+    setSelectedTitle,
+    selectedAddress,
+    setSelectedAddress,
+    selectedThread,
+    setSelectedThread,
+    selectedStyle,
+    setSelectedStyle,
+    captchaResponse,
+    setCaptchaResponse
+  } = useBoardStore(state => state);
+  
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext);
   const [showPostFormLink, setShowPostFormLink] = useState(true);
   const [showPostForm, setShowPostForm] = useState(false);
   const [name, setName] = useState('');