From 42a93a5caad2d68ff1b38d1d361d39f7352c9a68 Mon Sep 17 00:00:00 2001
From: plebbitor <mottoes_recap0u@icloud.com>
Date: Thu, 9 Feb 2023 19:08:15 +0100
Subject: [PATCH] added Board context

---
 src/App.js               | 20 ++++++++++++--------
 src/components/Board.jsx |  7 +++----
 src/components/Home.jsx  | 13 +++++++++++--
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5274deac..61dc4fe2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import Board from './components/Board';
 import Thread from './components/Thread';
 import { createGlobalStyle } from 'styled-components';
 
+export const BoardContext = React.createContext();
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -17,13 +18,16 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-function App() {
+export default function App() {
   const [bodyStyle, setBodyStyle] = useState({
     background: "#ffe url(/fade.png) top repeat-x",
     color: "maroon",
     fontFamily: "Helvetica, Arial, sans-serif"
   });
 
+  const [selectedTitle, setSelectedTitle] = useState('');
+  const [selectedAddress, setSelectedAddress] = useState('');
+
   return (
   <div>
     <Helmet>
@@ -40,12 +44,12 @@ function App() {
     color={bodyStyle.color} 
     fontFamily={bodyStyle.fontFamily}
     />
-    <Routes>
-      <Route path='/' element={<Home />} />
-      <Route path='/board' element={<Board setBodyStyle={setBodyStyle} />} />
-      <Route path='/board/:thread' element={<Thread />} />
-    </Routes>
+    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress }}>
+      <Routes>
+        <Route path='/' element={<Home />} />
+        <Route path='/board' element={<Board setBodyStyle={setBodyStyle} />} />
+        <Route path='/board/:thread' element={<Thread />} />
+      </Routes>
+    </BoardContext.Provider>
   </div>
 )}
-
-export default App;
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index 3d1c9764..c50d3429 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -1,15 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { Container, NavBar, Header, Break, PostForm, TopBar, BoardForm } from './styles/Board.styled';
 import { useFeed } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
-
+import { BoardContext } from '../App';
 
 const Board = ({ setBodyStyle }) => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
-  const [selectedTitle, setSelectedTitle] = useState("");
-  const [selectedAddress, setSelectedAddress] = useState("");
   const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
 
   useEffect(() => {
     let didCancel = false;
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 1e27a59a..841ab616 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -1,9 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 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 = () => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
+  const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
+
+  const handleClick = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+  }
 
   useEffect(() => {
     let didCancel = false;
@@ -58,7 +65,9 @@ const Home = () => {
               {defaultSubplebbits.map(subplebbit => (
                 <div className="board" key={subplebbit.address}>
                   <div className="board-title">{subplebbit.title}</div>
-                  <Link to="/board">
+                  <Link to="/board" onClick={() => {
+                    handleClick(subplebbit.title, subplebbit.address);
+                  }} >
                     <img alt="board logo" src="/plebchan.png" />
                   </Link>
                   <div className="board-text">