mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
added post form
This commit is contained in:
plebbitor
+3
-3
@@ -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() {
|
||||
<BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress }}>
|
||||
<Routes>
|
||||
<Route exact path='/' element={<Home />} />
|
||||
<Route path='/board' element={<Board setBodyStyle={setBodyStyle} />} />
|
||||
<Route path='/board/:thread' element={<Thread />} />
|
||||
<Route path='/board' element={<Board setBodyStyle={setBodyStyle} />}>
|
||||
<Route path='post-form' element={<Board />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BoardContext.Provider>
|
||||
</div>
|
||||
|
||||
+67
-10
@@ -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 (
|
||||
<Container>
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<span className="boardList" key={subplebbit.address}>
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
[
|
||||
<a href="javascript:void(0)" onClick={() => handleClick(subplebbit.title, subplebbit.address)}
|
||||
<a href="javascript:void(0)" key={`a-${subplebbit.address}`} onClick={() => handleClick(subplebbit.title, subplebbit.address)}
|
||||
>{subplebbit.title}</a>
|
||||
]
|
||||
</span>
|
||||
@@ -131,12 +144,56 @@ const Board = ({ setBodyStyle }) => {
|
||||
</Header>
|
||||
<Break selectedStyle={selectedStyle} />
|
||||
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
|
||||
<div id="post-form-link">
|
||||
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} >
|
||||
[
|
||||
<a href="javascript:void(0)">Start a New Thread</a>
|
||||
<a onClick={handleClickForm}>Start a New Thread</a>
|
||||
]
|
||||
</div>
|
||||
<table id="post-form"></table>
|
||||
</PostFormLink>
|
||||
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
|
||||
<tbody>
|
||||
<tr data-type="Name">
|
||||
<td id="td-name">Name</td>
|
||||
<td>
|
||||
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-type="Subject">
|
||||
<td>Subject</td>
|
||||
<td>
|
||||
<input name="sub" type="text" tabIndex={3} />
|
||||
<input type="submit" value="Post" tabIndex={6} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-type="Comment">
|
||||
<td>Comment</td>
|
||||
<td>
|
||||
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="captchaFormPart">
|
||||
<td>Verification</td>
|
||||
<td colSpan={2}>
|
||||
<div id="t-root">
|
||||
<input id="t-resp" name="t-response" placeholder="Type the CAPTCHA here" autoComplete='off' type="text" />
|
||||
<button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help" tabIndex={-1}>?</button>
|
||||
<div id="t-cnt">
|
||||
<div id="t-bg"></div>
|
||||
<div id="t-fg"></div>
|
||||
</div>
|
||||
<div id="t-msg"></div>
|
||||
<input name="t-challenge" type="hidden"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-type="File">
|
||||
<td>Embed File</td>
|
||||
<td>
|
||||
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr></tr>
|
||||
</tbody>
|
||||
</PostFormTable>
|
||||
</PostForm>
|
||||
<TopBar selectedStyle={selectedStyle}>
|
||||
<hr />
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Thread = () => {
|
||||
return (
|
||||
<h1>thread</h1>
|
||||
);
|
||||
}
|
||||
|
||||
export default Thread;
|
||||
@@ -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) {
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Title = styled.h1`
|
||||
font-size: 1.5em;
|
||||
`;
|
||||
Reference in New Issue
Block a user