diff --git a/src/App.js b/src/App.js
index b512b9ec..fa574b7c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,7 +3,6 @@ import { Route, Routes } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import Home from './components/Home';
import Board from './components/Board';
-import Thread from './components/Thread';
import { createGlobalStyle } from 'styled-components';
export const BoardContext = React.createContext();
@@ -47,8 +46,9 @@ export default function App() {
} />
- } />
- } />
+ }>
+ } />
+
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index 7fa7b425..ed0b13ae 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -1,6 +1,6 @@
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 { Link, useNavigate } from 'react-router-dom';
+import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
import { useFeed } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner';
import { BoardContext } from '../App';
@@ -9,6 +9,11 @@ const Board = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const [selectedStyle, setSelectedStyle] = useState("Yotsuba");
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext);
+ const [showPostFormLink, setShowPostFormLink] = useState(true);
+ const [showPostForm, setShowPostForm] = useState(false);
+ const navigate = useNavigate();
+
+ const { feed } = useFeed([`${selectedAddress}`], 'new');
useEffect(() => {
let didCancel = false;
@@ -32,6 +37,16 @@ const Board = ({ setBodyStyle }) => {
setSelectedAddress(address);
};
+ const handleClickHelp = () => {
+ alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan.");
+ };
+
+ const handleClickForm = () => {
+ setShowPostFormLink(false);
+ setShowPostForm(true);
+ navigate('/board/post-form');
+ };
+
const handleStyleChange = (event) => {
switch (event.target.value) {
case "Yotsuba":
@@ -98,16 +113,14 @@ const Board = ({ setBodyStyle }) => {
}
}
- const { feed } = useFeed([`${selectedAddress}`], 'new');
-
return (
<>
{defaultSubplebbits.map(subplebbit => (
-
+
[
- handleClick(subplebbit.title, subplebbit.address)}
+ handleClick(subplebbit.title, subplebbit.address)}
>{subplebbit.title}
]
@@ -131,12 +144,56 @@ const Board = ({ setBodyStyle }) => {
-
-
+
+
+
+
+ | Name |
+
+
+ |
+
+
+ | Subject |
+
+
+
+ |
+
+
+ | Comment |
+
+
+ |
+
+
+ | Verification |
+
+
+ |
+
+
+ | Embed File |
+
+
+ |
+
+
+
+
diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx
deleted file mode 100644
index 22dc32da..00000000
--- a/src/components/Thread.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Thread = () => {
- return (
- thread
- );
-}
-
-export default Thread;
\ No newline at end of file
diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx
index 4d8a0175..18634713 100644
--- a/src/components/styles/Board.styled.jsx
+++ b/src/components/styles/Board.styled.jsx
@@ -367,6 +367,469 @@ export const Break = styled.hr`
}}
`;
+export const PostFormLink = styled.div`
+ display: ${props => (props.showPostFormLink ? 'block' : 'none')};
+`;
+
+export const PostFormTable = styled.table`
+ display: ${props => (props.showPostForm ? 'table' : 'none')};
+ width: 468px;
+ border-spacing: 1px;
+ margin-left: auto;
+ margin-right: auto;
+
+ ${({ selectedStyle }) => {
+ switch (selectedStyle) {
+ case 'Yotsuba':
+ return `tbody > tr > td:first-child {
+ background-color: #ea8;
+ color: #800;
+ font-weight: 700;
+ border: 1px solid #800;
+ padding: 0 5px;
+ font-size: 10pt;
+ }
+
+ td {
+ padding: 0;
+ font-size: 10pt;
+ }
+
+ tbody > tr > td > input[type="text"] {
+ width: 244px;
+ }
+
+ input[type="text"], input[type="password"] > tbody textarea {
+ margin: 0;
+ margin-right: 2px;
+ padding: 2px 4px 3px;
+ border: 1px solid #aaa;
+ outline: none;
+ font-family: arial, helvetica, sans-serif;
+ font-size: 10pt;
+ }
+
+ textarea {
+ width: 292px;
+ margin-bottom: -3px;
+ outline: none;
+ border-radius: none;
+ }
+
+ #t-root {
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+ background: #eee;
+ border: 1px solid #777;
+ margin: 2px 0;
+ width: 300px;
+ }
+
+ #t-resp {
+ width: 254px;
+ box-sizing: border-box;
+ text-transform: uppercase;
+ font-size: 11px;
+ height: 18px;
+ margin: 0px;
+ padding: 0px 2px;
+ font-family: monospace;
+ vertical-align: middle;
+ -webkit-appearance: none;
+ }
+
+ #t-help {
+ font-size: 11px;
+ padding: 0;
+ width: 20px;
+ box-sizing: border-box;
+ margin: 0px 0px 0px 6px;
+ vertical-align: middle;
+ height: 18px;
+ }
+
+ #t-cnt {
+ height: 80px;
+ margin-top: 2px;
+ position: relative;
+ }`;
+
+ case 'Yotsuba B':
+ return `tbody > tr > td:first-child {
+ background-color: #98e;
+ color: #000;
+ font-weight: 700;
+ border: 1px solid #000;
+ padding: 0 5px;
+ font-size: 10pt;
+ }
+
+ td {
+ padding: 0;
+ font-size: 10pt;
+ }
+
+ tbody > tr > td > input[type="text"] {
+ width: 244px;
+ }
+
+ input[type="text"], input[type="password"] > tbody textarea {
+ margin: 0;
+ margin-right: 2px;
+ padding: 2px 4px 3px;
+ border: 1px solid #aaa;
+ outline: none;
+ font-family: arial, helvetica, sans-serif;
+ font-size: 10pt;
+ }
+
+ textarea {
+ width: 292px;
+ margin-bottom: -3px;
+ outline: none;
+ border-radius: none;
+ }
+
+ #t-root {
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+ background: #eee;
+ border: 1px solid #777;
+ margin: 2px 0;
+ width: 300px;
+ }
+
+ #t-resp {
+ width: 254px;
+ box-sizing: border-box;
+ text-transform: uppercase;
+ font-size: 11px;
+ height: 18px;
+ margin: 0px;
+ padding: 0px 2px;
+ font-family: monospace;
+ vertical-align: middle;
+ -webkit-appearance: none;
+ }
+
+ #t-help {
+ font-size: 11px;
+ padding: 0;
+ width: 20px;
+ box-sizing: border-box;
+ margin: 0px 0px 0px 6px;
+ vertical-align: middle;
+ height: 18px;
+ }
+
+ #t-cnt {
+ height: 80px;
+ margin-top: 2px;
+ position: relative;
+ }`;
+
+ case 'Futaba':
+ return `tbody > tr > td:first-child {
+ background-color: #ea8;
+ color: #800;
+ font-weight: 700;
+ padding: 0;
+ }
+
+ td {
+ padding: 0;
+ font-size: 10pt;
+ }
+
+ tbody > tr > td > input[type="text"] {
+ width: 244px;
+ }
+
+ input[type="text"], input[type="password"] > tbody textarea {
+ margin: 0;
+ margin-right: 2px;
+ padding: 2px 4px 3px;
+ border: 1px solid #aaa;
+ outline: none;
+ font-family: arial, helvetica, sans-serif;
+ font-size: 10pt;
+ }
+
+ textarea {
+ width: 292px;
+ margin-bottom: -3px;
+ outline: none;
+ border-radius: none;
+ }
+
+ #t-root {
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+ background: #eee;
+ border: 1px solid #777;
+ margin: 2px 0;
+ width: 300px;
+ }
+
+ #t-resp {
+ width: 254px;
+ box-sizing: border-box;
+ text-transform: uppercase;
+ font-size: 11px;
+ height: 18px;
+ margin: 0px;
+ padding: 0px 2px;
+ font-family: monospace;
+ vertical-align: middle;
+ -webkit-appearance: none;
+ }
+
+ #t-help {
+ font-size: 11px;
+ padding: 0;
+ width: 20px;
+ box-sizing: border-box;
+ margin: 0px 0px 0px 6px;
+ vertical-align: middle;
+ height: 18px;
+ }
+
+ #t-cnt {
+ height: 80px;
+ margin-top: 2px;
+ position: relative;
+ }`;
+
+ case 'Burichan':
+ return `tbody > tr > td:first-child {
+ background-color: #98e;
+ color: #000;
+ font-weight: 700;
+ padding: 0;
+ font-size: 10pt;
+ }
+
+ td {
+ padding: 0;
+ font-size: 10pt;
+ }
+
+ tbody > tr > td > input[type="text"] {
+ width: 244px;
+ }
+
+ input[type="text"], input[type="password"] > tbody textarea {
+ margin: 0;
+ margin-right: 2px;
+ padding: 2px 4px 3px;
+ border: 1px solid #aaa;
+ outline: none;
+ font-family: arial, helvetica, sans-serif;
+ font-size: 10pt;
+ }
+
+ textarea {
+ width: 292px;
+ margin-bottom: -3px;
+ outline: none;
+ border-radius: none;
+ }
+
+ #t-root {
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+ background: #eee;
+ border: 1px solid #777;
+ margin: 2px 0;
+ width: 300px;
+ }
+
+ #t-resp {
+ width: 254px;
+ box-sizing: border-box;
+ text-transform: uppercase;
+ font-size: 11px;
+ height: 18px;
+ margin: 0px;
+ padding: 0px 2px;
+ font-family: monospace;
+ vertical-align: middle;
+ -webkit-appearance: none;
+ }
+
+ #t-help {
+ font-size: 11px;
+ padding: 0;
+ width: 20px;
+ box-sizing: border-box;
+ margin: 0px 0px 0px 6px;
+ vertical-align: middle;
+ height: 18px;
+ }
+
+ #t-cnt {
+ height: 80px;
+ margin-top: 2px;
+ position: relative;
+ }`;
+
+ case 'Tomorrow':
+ return `tbody > tr > td:first-child {
+ background-color: #282a2e;
+ color: #c5c8c6;
+ font-weight: 700;
+ border: 1px solid #111;
+ padding: 0 5px;
+ font-size: 10pt;
+ }
+
+ td {
+ padding: 0;
+ font-size: 10pt;
+ }
+
+ tbody > tr > td > input[type="text"] {
+ width: 244px;
+ }
+
+ input[type="text"], input[type="password"] > tbody textarea {
+ margin: 0;
+ margin-right: 2px;
+ padding: 2px 4px 3px;
+ border: 1px solid #aaa;
+ outline: none;
+ font-family: arial, helvetica, sans-serif;
+ font-size: 10pt;
+ }
+
+ textarea {
+ width: 292px;
+ margin-bottom: -3px;
+ outline: none;
+ border-radius: none;
+ }
+
+ #t-root {
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+ background: #eee;
+ border: 1px solid #777;
+ margin: 2px 0;
+ width: 300px;
+ }
+
+ #t-resp {
+ width: 254px;
+ box-sizing: border-box;
+ text-transform: uppercase;
+ font-size: 11px;
+ height: 18px;
+ margin: 0px;
+ padding: 0px 2px;
+ font-family: monospace;
+ vertical-align: middle;
+ -webkit-appearance: none;
+ }
+
+ #t-help {
+ font-size: 11px;
+ padding: 0;
+ width: 20px;
+ box-sizing: border-box;
+ margin: 0px 0px 0px 6px;
+ vertical-align: middle;
+ height: 18px;
+ }
+
+ #t-cnt {
+ height: 80px;
+ margin-top: 2px;
+ position: relative;
+ }`;
+
+ case 'Photon':
+ return `tbody > tr > td:first-child {
+ background-color: #ddd;
+ color: #333;
+ font-weight: 700;
+ border: 1px solid #ccc;
+ padding: 0 5px;
+ font-size: 10pt;
+ }
+
+ td {
+ padding: 0;
+ font-size: 10pt;
+ }
+
+ tbody > tr > td > input[type="text"] {
+ width: 244px;
+ }
+
+ input[type="text"], input[type="password"] > tbody textarea {
+ margin: 0;
+ margin-right: 2px;
+ padding: 2px 4px 3px;
+ border: 1px solid #aaa;
+ outline: none;
+ font-family: arial, helvetica, sans-serif;
+ font-size: 10pt;
+ }
+
+ textarea {
+ width: 292px;
+ margin-bottom: -3px;
+ outline: none;
+ border-radius: none;
+ }
+
+ #t-root {
+ position: relative;
+ overflow: hidden;
+ box-sizing: border-box;
+ background: #eee;
+ border: 1px solid #777;
+ margin: 2px 0;
+ width: 300px;
+ }
+
+ #t-resp {
+ width: 254px;
+ box-sizing: border-box;
+ text-transform: uppercase;
+ font-size: 11px;
+ height: 18px;
+ margin: 0px;
+ padding: 0px 2px;
+ font-family: monospace;
+ vertical-align: middle;
+ -webkit-appearance: none;
+ }
+
+ #t-help {
+ font-size: 11px;
+ padding: 0;
+ width: 20px;
+ box-sizing: border-box;
+ margin: 0px 0px 0px 6px;
+ vertical-align: middle;
+ height: 18px;
+ }
+
+ #t-cnt {
+ height: 80px;
+ margin-top: 2px;
+ position: relative;
+ }`;
+ }
+ }}
+`;
+
export const PostForm = styled.form`
${({ selectedStyle }) => {
switch (selectedStyle) {
diff --git a/src/components/styles/Thread.styled.jsx b/src/components/styles/Thread.styled.jsx
deleted file mode 100644
index 95c45bc1..00000000
--- a/src/components/styles/Thread.styled.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const Title = styled.h1`
- font-size: 1.5em;
-`;
\ No newline at end of file