mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
initial Thread view
This commit is contained in:
plebbitor
@@ -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 (
|
||||
<Container>
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
{defaultSubplebbits.map(subplebbit => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
[
|
||||
<a href={handleVoidClick} key={`a-${subplebbit.address}`} onClick={() => handleClick(subplebbit.title, subplebbit.address)}
|
||||
>{subplebbit.title}</a>
|
||||
]
|
||||
</span>
|
||||
))}
|
||||
<span className="nav">[
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
)}>Home</Link>]
|
||||
</span>
|
||||
</>
|
||||
</NavBar>
|
||||
<Header selectedStyle={selectedStyle}>
|
||||
<>
|
||||
<div className="banner">
|
||||
<ImageBanner />
|
||||
</div>
|
||||
<>
|
||||
<div className="board-title">{selectedTitle}</div>
|
||||
<div className="board-address">p/{selectedAddress}</div>
|
||||
</>
|
||||
</>
|
||||
</Header>
|
||||
<Break selectedStyle={selectedStyle} />
|
||||
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data">
|
||||
<ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} >
|
||||
[
|
||||
<a onClick={handleClickForm}>Post a Reply</a>
|
||||
]
|
||||
</ReplyFormLink>
|
||||
<ReplyFormTable id="post-form" showReplyForm={showReplyForm} selectedStyle={selectedStyle} className="post-form">
|
||||
<tbody>
|
||||
<tr data-type="Subject">
|
||||
<td>Name</td>
|
||||
<td>
|
||||
<input name="sub" type="text" placeholder='Anonymous' tabIndex={3} />
|
||||
<input id="post-button" 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>
|
||||
</ReplyFormTable>
|
||||
</PostForm>
|
||||
<TopBar selectedStyle={selectedStyle}>
|
||||
<hr />
|
||||
<span className="style-changer">
|
||||
Style:
|
||||
|
||||
<select id="style-selector" onChange={handleStyleChange}>
|
||||
<option value="Yotsuba">Yotsuba</option>
|
||||
<option value="Yotsuba B">Yotsuba B</option>
|
||||
<option value="Futaba">Futaba</option>
|
||||
<option value="Burichan">Burichan</option>
|
||||
<option value="Tomorrow">Tomorrow</option>
|
||||
<option value="Photon">Photon</option>
|
||||
</select>
|
||||
</span>
|
||||
<hr />
|
||||
</TopBar>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default Thread;
|
||||
Reference in New Issue
Block a user