diff --git a/src/App.js b/src/App.js index fa574b7c..e981c5a3 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ 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,7 +48,10 @@ export default function App() { } /> }> - } /> + } /> + + }> + } /> diff --git a/src/components/Board.jsx b/src/components/Board.jsx index ed0b13ae..f5541ec1 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -15,6 +15,8 @@ const Board = ({ setBodyStyle }) => { const { feed } = useFeed([`${selectedAddress}`], 'new'); + // console.log(feed); + useEffect(() => { let didCancel = false; fetch( @@ -32,6 +34,8 @@ const Board = ({ setBodyStyle }) => { }; }, []); + const handleVoidClick = () => {} + const handleClick = (title, address) => { setSelectedTitle(title); setSelectedAddress(address); @@ -44,7 +48,7 @@ const Board = ({ setBodyStyle }) => { const handleClickForm = () => { setShowPostFormLink(false); setShowPostForm(true); - navigate('/board/post-form'); + navigate('/board/post-thread'); }; const handleStyleChange = (event) => { @@ -120,7 +124,7 @@ const Board = ({ setBodyStyle }) => { {defaultSubplebbits.map(subplebbit => ( [ - handleClick(subplebbit.title, subplebbit.address)} + handleClick(subplebbit.title, subplebbit.address)} >{subplebbit.title} @@ -161,7 +165,7 @@ const Board = ({ setBodyStyle }) => { Subject - + @@ -235,19 +239,19 @@ const Board = ({ setBodyStyle }) => { 2 weeks ago   - No. - 00000001 + No. + 00000001     [ - Reply + Reply ] - +
@@ -279,10 +283,10 @@ const Board = ({ setBodyStyle }) => { 2 weeks ago   - No. - {`0000000${counter}`} + No. + {`0000000${counter}`} - +
{reply.content} diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx new file mode 100644 index 00000000..93fe6061 --- /dev/null +++ b/src/components/Thread.jsx @@ -0,0 +1,213 @@ +import React, { useState, useEffect, useContext } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import { Container, NavBar, Header, Break, PostForm, TopBar } from './styles/Board.styled'; +import { ReplyFormTable, ReplyFormLink } from './styles/Thread.styled'; +import { BoardContext } from '../App'; +import ImageBanner from './ImageBanner'; + +const Thread = ({ setBodyStyle }) => { + const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext); + const [selectedStyle, setSelectedStyle] = useState("Yotsuba"); + const [showReplyFormLink, setShowReplyFormLink] = useState(true); + const [showReplyForm, setShowReplyForm] = useState(false); + + const navigate = useNavigate(); + + useEffect(() => { + let didCancel = false; + fetch( + "https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json", + { cache: "no-cache" } + ) + .then((res) => res.json()) + .then(res => { + if (!didCancel) { + setDefaultSubplebbits(res); + } + }); + return () => { + didCancel = true; + }; + }, []); + + const handleVoidClick = () => {} + + const handleClick = (title, address) => { + setSelectedTitle(title); + 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 = () => { + setShowReplyFormLink(false); + setShowReplyForm(true); + navigate('/board/thread/post-reply'); + }; + + const handleStyleChange = (event) => { + switch (event.target.value) { + case "Yotsuba": + setBodyStyle({ + background: "#ffe url(/fade.png) top repeat-x", + color: "maroon", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Yotsuba"); + break; + + case "Yotsuba B": + setBodyStyle({ + background: "#eef2ff url(/fade-blue.png) top center repeat-x", + color: "#000", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Yotsuba B"); + break; + + case "Futaba": + setBodyStyle({ + background: "#ffe", + color: "maroon", + fontFamily: "times new roman, serif" + }); + setSelectedStyle("Futaba"); + break; + + case "Burichan": + setBodyStyle({ + background: "#eef2ff", + color: "#000", + fontFamily: "times new roman, serif" + }); + setSelectedStyle("Burichan"); + break; + + case "Tomorrow": + setBodyStyle({ + background: "#1d1f21 none", + color: "#c5c8c6", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Tomorrow"); + break; + + case "Photon": + setBodyStyle({ + background: "#eee none", + color: "#333", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Photon"); + break; + + default: + setBodyStyle({ + background: "#ffe url(/fade.png) top repeat-x", + color: "maroon", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Yotsuba"); + } + } + + return ( + + + <> + {defaultSubplebbits.map(subplebbit => ( + + [ + handleClick(subplebbit.title, subplebbit.address)} + >{subplebbit.title} + ]  + + ))} + [ + handleStyleChange({target: {value: "Yotsuba"}} + )}>Home]  + + + +
+ <> +
+ +
+ <> +
{selectedTitle}
+
p/{selectedAddress}
+ + +
+ + + + [ + Post a Reply + ] + + + + + Name + + + + + + + Comment + + + + + + Verification + +
+ + +
+
+
+
+
+ +
+ + + + Embed File + + + + + + +
+
+ +
+ + Style: +   + + +
+
+
+ ); +} + +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 26810956..1d0578c0 100644 --- a/src/components/styles/Board.styled.jsx +++ b/src/components/styles/Board.styled.jsx @@ -699,7 +699,9 @@ export const PostFormTable = styled.table` margin: 0; margin-right: 2px; padding: 2px 4px 3px; - border: 1px solid #aaa; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; outline: none; font-family: arial, helvetica, sans-serif; font-size: 10pt; @@ -710,13 +712,16 @@ export const PostFormTable = styled.table` margin-bottom: -3px; outline: none; border-radius: none; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; } #t-root { position: relative; overflow: hidden; box-sizing: border-box; - background: #eee; + background: #2d2d2d; border: 1px solid #777; margin: 2px 0; width: 300px; @@ -749,6 +754,10 @@ export const PostFormTable = styled.table` height: 80px; margin-top: 2px; position: relative; + } + + #post-button, button { + filter: brightness(80%); }`; case 'Photon': diff --git a/src/components/styles/Thread.styled.jsx b/src/components/styles/Thread.styled.jsx new file mode 100644 index 00000000..c8568e1f --- /dev/null +++ b/src/components/styles/Thread.styled.jsx @@ -0,0 +1,471 @@ +import styled from 'styled-components'; + +export const ReplyFormLink = styled.div` + display: ${props => (props.showReplyFormLink ? 'block' : 'none')}; +`; + +export const ReplyFormTable = styled.table` + display: ${props => (props.showReplyForm ? 'table' : 'none')}; + width: 418px; + 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: 12pt; + } + + 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: 12pt; + } + + td { + padding: 0; + } + + 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; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; + outline: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + } + + textarea { + width: 292px; + margin-bottom: -3px; + outline: none; + border-radius: none; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; + } + + #t-root { + position: relative; + overflow: hidden; + box-sizing: border-box; + background: #2d2d2d; + 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; + } + + #post-button, button { + filter: brightness(80%); + }`; + + 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; + }`; + } + }} +`; \ No newline at end of file