added Board context

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>
+    <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress }}>
-      <Route path='/' element={<Home />} />
+      <Routes>
-      <Route path='/board' element={<Board setBodyStyle={setBodyStyle} />} />
+        <Route path='/' element={<Home />} />
-      <Route path='/board/:thread' element={<Thread />} />
+        <Route path='/board' element={<Board setBodyStyle={setBodyStyle} />} />
-    </Routes>
+        <Route path='/board/:thread' element={<Thread />} />
+      </Routes>
+    </BoardContext.Provider>
   </div>
 )}
-
-export default App;

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;

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">