switched from context to zustand

package.json

@@ -28,7 +28,8 @@
     "react-scripts": "5.0.1",
     "react-tooltip": "^5.8.3",
     "styled-components": "^5.3.6",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "zustand": "^4.3.6"
   },
   "scripts": {
     "start": "craco start",

src/App.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
+import useBoardStore from './useBoardStore';
 import Home from './components/Home';
 import Board from './components/Board';
 import Thread from './components/Thread';
@@ -10,7 +11,6 @@ import { createGlobalStyle } from 'styled-components';
 import 'react-tooltip/dist/react-tooltip.css';
 import preloadImages from './utils/preloadImages';
 
-export const BoardContext = React.createContext();
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -30,17 +30,9 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
+
 export default function App() {
-  const [selectedTitle, setSelectedTitle] = useState('');
+  const { bodyStyle, setBodyStyle } = useBoardStore(state => state);
-  const [selectedAddress, setSelectedAddress] = useState('');
-  const [selectedThread, setSelectedThread] = useState('');
-  const [selectedStyle, setSelectedStyle] = useState(localStorage.getItem('selectedStyle') || 'Yotsuba');
-  const [bodyStyle, setBodyStyle] = useState(JSON.parse(localStorage.getItem('bodyStyle')) || {
-    background: "#ffe url(/assets/fade.png) top repeat-x",
-    color: "maroon",
-    fontFamily: "Helvetica, Arial, sans-serif"
-  });
-  const [captchaResponse, setCaptchaResponse] = useState('');
   
   const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`);
 
@@ -64,7 +56,6 @@ export default function App() {
     color={bodyStyle.color} 
     fontFamily={bodyStyle.fontFamily}
     />
-    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse }}>
       <Routes>
         <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
         <Route path={`/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
@@ -78,6 +69,5 @@ export default function App() {
         </Route>
         <Route path='*' element={<NotFound />} />
       </Routes>
-    </BoardContext.Provider>
   </div>
 )}

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('');

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('');

src/useBoardStore.js

@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+
+const useBoardStore = create((set) => ({
+  bodyStyle: JSON.parse(localStorage.getItem('bodyStyle')) || {
+    background: '#ffe url(/assets/fade.png) top repeat-x',
+    color: 'maroon',
+    fontFamily: 'Helvetica, Arial, sans-serif',
+  },
+  setBodyStyle: (bodyStyle) => {
+    localStorage.setItem('bodyStyle', JSON.stringify(bodyStyle));
+    set(() => ({ bodyStyle }));
+  },
+  
+  selectedTitle: '',
+  setSelectedTitle: (title) => set({ selectedTitle: title }),
+
+  selectedAddress: '',
+  setSelectedAddress: (address) => set({ selectedAddress: address }),
+
+  selectedThread: '',
+  setSelectedThread: (thread) => set({ selectedThread: thread }),
+
+  selectedStyle: localStorage.getItem('selectedStyle') || 'Yotsuba',
+  setSelectedStyle: (style) => {
+    localStorage.setItem('selectedStyle', style);
+    set({ selectedStyle: style });
+  },
+
+  captchaResponse: '',
+  setCaptchaResponse: (response) => set({ captchaResponse: response }),
+}));
+
+export default useBoardStore;

yarn.lock

@@ -12357,3 +12357,10 @@ zustand@4.0.0:
   integrity sha512-OrsfQTnRXF1LZ9/vR/IqN9ws5EXUhb149xmPjErZnUrkgxS/gAHGy2dPNIVkVvoxrVe1sIydn4JjF0dYHmGeeQ==
   dependencies:
     use-sync-external-store "1.2.0"
+
+zustand@^4.3.6:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.6.tgz#ce7804eb75361af0461a2d0536b65461ec5de86f"
+  integrity sha512-6J5zDxjxLE+yukC2XZWf/IyWVKnXT9b9HUv09VJ/bwGCpKNcaTqp7Ws28Xr8jnbvnZcdRaidztAPsXFBIqufiw==
+  dependencies:
+    use-sync-external-store "1.2.0"