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

switched from context to zustand

Browse Source
This commit is contained in:
plebbitor
2023-03-13 14:29:34 +01:00
parent e9297812ef
commit c66a782e53
9 changed files with 103 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -1
View File
@@ -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
+5 -15
View File
@@ -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,18 +30,10 @@ const GlobalStyle = createGlobalStyle`
}
`;
export default function App() {
const [selectedTitle, setSelectedTitle] = useState('');
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('');
export default function App() {
const { bodyStyle, setBodyStyle } = useBoardStore(state => state);
const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`);
useEffect(() => {
@@ -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
+16 -4
View File
@@ -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
+5 -4
View File
@@ -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
+15 -3
View File
@@ -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
+4 -3
View File
@@ -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
+16 -3
View File
@@ -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
+33
View File
@@ -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
+7
View File
@@ -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"