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 }) => { -
+ [ - Start a New Thread + Start a New Thread ] -
-
+ + + + + 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