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 (
@@ -40,12 +44,12 @@ function App() {
color={bodyStyle.color}
fontFamily={bodyStyle.fontFamily}
/>
-
- } />
- } />
- } />
-
+
+
+ } />
+ } />
+ } />
+
+
)}
-
-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 => (
{subplebbit.title}
-
+
{
+ handleClick(subplebbit.title, subplebbit.address);
+ }} >