mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Merge pull request #37 from plebbit/development
This commit is contained in:
plebeius.eth
+1
-1
@@ -8,7 +8,7 @@
|
||||
"@babel/plugin-transform-react-jsx": "7.21.0",
|
||||
"@capacitor/android": "3.6.0",
|
||||
"@capacitor/core": "3.6.0",
|
||||
"@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#97b538693972e26f7c0f0f13ec6afab03b0e2e57",
|
||||
"@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#ea1a110be2043e2d4dbc9fc369ec7b47d52979d4",
|
||||
"@testing-library/dom": "9.0.1",
|
||||
"@testing-library/jest-dom": "5.14.1",
|
||||
"@testing-library/react": "14.0.0",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 859 B |
@@ -0,0 +1,36 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
|
||||
|
||||
|
||||
const BoardAvatar = ({ address }) => {
|
||||
const [avatarUrl, setAvatarUrl] = useState("assets/plebchan.png");
|
||||
const subplebbit = useSubplebbit({ subplebbitAddress: address });
|
||||
|
||||
const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
|
||||
|
||||
useEffect(() => {
|
||||
if (subplebbit.suggested?.avatarUrl) {
|
||||
setAvatarUrl(subplebbit.suggested.avatarUrl);
|
||||
}
|
||||
}, [subplebbit.suggested?.avatarUrl, subplebbit]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="board-avatar-container">
|
||||
<img
|
||||
className="board-avatar"
|
||||
alt="board logo"
|
||||
src={avatarUrl}
|
||||
/>
|
||||
{!isOnline && (
|
||||
<img className="offline-indicator" alt="offline" src="assets/offline.png"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content="OFFLINE"
|
||||
data-tooltip-place="top" />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BoardAvatar;
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
|
||||
|
||||
|
||||
const OfflineIndicator = ({ address, className, tooltipPlace }) => {
|
||||
const subplebbit = useSubplebbit({ subplebbitAddress: address });
|
||||
const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
|
||||
|
||||
return (
|
||||
<>
|
||||
{!isOnline && (
|
||||
<>
|
||||
{" "}
|
||||
<img
|
||||
className={className}
|
||||
alt="offline"
|
||||
src="assets/offline.png"
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content="OFFLINE"
|
||||
data-tooltip-place={tooltipPlace}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OfflineIndicator;
|
||||
@@ -108,14 +108,14 @@ const SettingsModal = ({ isOpen, closeModal }) => {
|
||||
|
||||
|
||||
const handleCloseModal = () => {
|
||||
closeModal();
|
||||
|
||||
if (location.pathname === "/settings") {
|
||||
navigate(-1, { replace: true });
|
||||
if (location.pathname.endsWith("/settings")) {
|
||||
const newPath = location.pathname.slice(0, -9);
|
||||
closeModal();
|
||||
navigate(newPath, { replace: true });
|
||||
} else {
|
||||
navigate("/settings", { state: { from: location } });
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const toggleExpanded = (index) => {
|
||||
@@ -152,7 +152,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
|
||||
return (
|
||||
<StyledModal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={closeModal}
|
||||
onRequestClose={handleCloseModal}
|
||||
contentLabel="Settings"
|
||||
style={customOverlayStyles}
|
||||
selectedStyle={selectedStyle}
|
||||
|
||||
@@ -30,6 +30,12 @@ export const NavBar = styled.div`
|
||||
#board-nav-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offline-nav {
|
||||
width: 12px;
|
||||
position: relative;
|
||||
margin: 2px 2px -2px -2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -1617,6 +1623,13 @@ export const BoardForm = styled.div`
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.offline-sub {
|
||||
width: 13px;
|
||||
margin-right: -5px;
|
||||
margin-bottom: -2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
${({ selectedStyle }) => {
|
||||
switch (selectedStyle) {
|
||||
case 'Yotsuba':
|
||||
@@ -2967,6 +2980,15 @@ export const BoardForm = styled.div`
|
||||
@media (max-width: 480px) {
|
||||
margin-bottom: 335px;
|
||||
|
||||
.offline-mobile-sub {
|
||||
width: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.offline-mobile-sub-reply {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.thread {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -172,6 +172,7 @@ export const Boards = styled.div`
|
||||
padding-bottom: .5em;
|
||||
background: #fff;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 6px;
|
||||
|
||||
#subscriptions {
|
||||
text-align: left;
|
||||
@@ -229,14 +230,26 @@ export const BoardsContent = styled.div`
|
||||
border: 1px solid #800;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.board-avatar-container img {
|
||||
|
||||
.board-avatar-container img.board-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.board-avatar-container img.offline {
|
||||
filter: brightness(50%);
|
||||
}
|
||||
|
||||
.offline-indicator {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.board-text {
|
||||
margin-bottom: 5px;
|
||||
padding: 0 2px;
|
||||
@@ -258,6 +271,43 @@ export const BoardsContent = styled.div`
|
||||
color: #e00
|
||||
}
|
||||
}
|
||||
|
||||
#view-all {
|
||||
color: #800;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
|
||||
:hover {
|
||||
color: #e00;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.boardlink, #view-all {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.disconnected {
|
||||
width: 15px;
|
||||
margin-bottom: -1px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
#mobile-br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.disconnected {
|
||||
width: 11px;
|
||||
margin-bottom: -1px;
|
||||
margin-top: 2px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
export const Footer = styled.div`
|
||||
|
||||
@@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import ReplyModal from '../ReplyModal';
|
||||
@@ -325,18 +326,14 @@ const Board = () => {
|
||||
try {
|
||||
if (subscribed === false) {
|
||||
await subscribe(selectedAddress);
|
||||
setSuccessMessage(`Subscribed to ${selectedTitle ?? selectedAddress}`);
|
||||
|
||||
} else if (subscribed === true) {
|
||||
await unsubscribe(selectedAddress);
|
||||
setSuccessMessage(`Unsubscribed from ${selectedTitle ?? selectedAddress}`);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
setErrorMessage(error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@@ -357,21 +354,25 @@ const Board = () => {
|
||||
[
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
{index === 0 ? null : "\u00a0"}
|
||||
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
{index === 0 ? null : "\u00a0"}
|
||||
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
<OfflineIndicator
|
||||
address={subplebbit.address}
|
||||
className="offline-nav"
|
||||
tooltipPlace="bottom" />
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
]
|
||||
</span>
|
||||
<span className="nav">
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
@@ -396,7 +397,7 @@ const Board = () => {
|
||||
</select>
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
</div>
|
||||
@@ -1198,7 +1199,7 @@ const Board = () => {
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import InfiniteScroll from 'react-infinite-scroller';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
|
||||
import { useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
|
||||
import { debounce } from 'lodash';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
|
||||
@@ -10,11 +10,13 @@ import { Threads } from '../styled/Catalog.styled';
|
||||
import { TopBar, Footer } from '../styled/Thread.styled';
|
||||
import CatalogLoader from '../CatalogLoader';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import SettingsModal from '../SettingsModal';
|
||||
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
|
||||
import handleStyleChange from '../../utils/handleStyleChange';
|
||||
import useClickForm from '../../hooks/useClickForm';
|
||||
import useError from '../../hooks/useError';
|
||||
import useSuccess from '../../hooks/useSuccess';
|
||||
import packageJson from '../../../package.json'
|
||||
const {version} = packageJson
|
||||
|
||||
@@ -48,8 +50,12 @@ const Catalog = () => {
|
||||
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
|
||||
const { subplebbitAddress } = useParams();
|
||||
|
||||
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState(null);
|
||||
const [successMessage] = useState(null);
|
||||
useError(errorMessage, [errorMessage]);
|
||||
useSuccess(successMessage, [successMessage]);
|
||||
|
||||
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
|
||||
|
||||
@@ -230,6 +236,17 @@ const Catalog = () => {
|
||||
navigate(`/p/${selected}`);
|
||||
};
|
||||
|
||||
const handleSubscribe = async () => {
|
||||
try {
|
||||
if (subscribed === false) {
|
||||
await subscribe(selectedAddress);
|
||||
} else if (subscribed === true) {
|
||||
await unsubscribe(selectedAddress);
|
||||
}
|
||||
} catch (error) {
|
||||
setErrorMessage(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -244,10 +261,9 @@ const Catalog = () => {
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
</span>
|
||||
[
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
{index === 0 ? null : "\u00a0"}
|
||||
@@ -256,15 +272,20 @@ const Catalog = () => {
|
||||
setSelectedAddress(subplebbit.address);
|
||||
}}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
<OfflineIndicator
|
||||
address={subplebbit.address}
|
||||
className="offline-nav"
|
||||
tooltipPlace="bottom" />
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
]
|
||||
]
|
||||
</span>
|
||||
<span className="nav">
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
@@ -289,7 +310,7 @@ const Catalog = () => {
|
||||
</select>
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
</div>
|
||||
@@ -384,13 +405,17 @@ const Catalog = () => {
|
||||
</div>
|
||||
{feed.length > 0 ? (
|
||||
<>
|
||||
<span className="subscribe-button-desktop">
|
||||
[
|
||||
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
|
||||
]
|
||||
</span>
|
||||
<button className="subscribe-button-mobile btn-wrap">Subscribe</button>
|
||||
</>
|
||||
<span className="subscribe-button-desktop">
|
||||
[
|
||||
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}
|
||||
onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</button>
|
||||
]
|
||||
</span>
|
||||
<button className="subscribe-button-mobile btn-wrap"
|
||||
onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div id="stats" style={{float: "right", marginTop: "5px"}}>
|
||||
<span>Fetching IPFS...</span>
|
||||
@@ -521,7 +546,7 @@ const Catalog = () => {
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
|
||||
@@ -1,27 +1,16 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
|
||||
import { useAccount } from '@plebbit/plebbit-react-hooks';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
|
||||
import BoardAvatar from '../BoardAvatar';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import packageJson from '../../../package.json'
|
||||
import { Tooltip } from 'react-tooltip';
|
||||
const {version} = packageJson
|
||||
|
||||
|
||||
const BoardAvatar = ({ address }) => {
|
||||
const [avatarUrl, setAvatarUrl] = useState('assets/plebchan.png');
|
||||
const subplebbit = useSubplebbit({ subplebbitAddress: address });
|
||||
|
||||
useEffect(() => {
|
||||
if (subplebbit.suggested?.avatarUrl) {
|
||||
setAvatarUrl(subplebbit.suggested.avatarUrl);
|
||||
}
|
||||
}, [subplebbit.suggested?.avatarUrl, subplebbit]);
|
||||
|
||||
return <img alt="board logo" src={avatarUrl} />;
|
||||
};
|
||||
|
||||
|
||||
const Home = () => {
|
||||
const {
|
||||
setBodyStyle,
|
||||
@@ -52,6 +41,7 @@ const Home = () => {
|
||||
<title>plebchan</title>
|
||||
</Helmet>
|
||||
<Container>
|
||||
<Tooltip id="tooltip" className="tooltip" />
|
||||
<Header>
|
||||
<Logo>
|
||||
<Link to="/">
|
||||
@@ -91,7 +81,7 @@ const Home = () => {
|
||||
<p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share media links, and <button
|
||||
style={{all: 'unset', cursor: 'pointer'}}
|
||||
onClick={() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)}
|
||||
>create a board</button>. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
|
||||
<br />
|
||||
@@ -99,24 +89,31 @@ const Home = () => {
|
||||
</div>
|
||||
</AboutContent>
|
||||
</About>
|
||||
{account.subscriptions?.length > 0 ? (
|
||||
<Boards style={{marginBottom: '6px'}}>
|
||||
{account?.subscriptions?.length > 0 ? (
|
||||
<Boards>
|
||||
<BoardsTitle>
|
||||
<h2>Board Subscriptions</h2>
|
||||
</BoardsTitle>
|
||||
<BoardsContent id="subscriptions">
|
||||
<h3 style={{textDecoration: 'underline', display: 'inline'}}>
|
||||
You have subscribed to {account.subscriptions.length} board{account.subscriptions.length > 1 ? "s" : null}
|
||||
</h3>
|
||||
You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? "s" : null}
|
||||
</h3>
|
||||
<Link to="/profile/p/subscriptions" id="view-all">[view all]</Link>
|
||||
<br />
|
||||
{account.subscriptions.map((subscription, index) => (
|
||||
{account?.subscriptions?.map((subscription, index) => (
|
||||
<>
|
||||
<Link key={`sub-${index}`} class="boardlink" to={`/p/${subscription.subplebbitAddress}`}>
|
||||
{subscription}
|
||||
<Link key={`sub-${index}`} className="boardlink" to={`/p/${subscription}`}>
|
||||
<br id="mobile-br" />
|
||||
{subscription}
|
||||
<OfflineIndicator
|
||||
address={subscription}
|
||||
className="disconnected"
|
||||
tooltipPlace="top" />
|
||||
</Link>
|
||||
<br />
|
||||
</>
|
||||
))}
|
||||
<br id="mobile-br" />
|
||||
</BoardsContent>
|
||||
</Boards>
|
||||
) : null}
|
||||
@@ -134,9 +131,7 @@ const Home = () => {
|
||||
setSelectedTitle(subplebbit.title);
|
||||
setSelectedAddress(subplebbit.address);
|
||||
}} >
|
||||
<div className="board-avatar-container">
|
||||
<BoardAvatar address={subplebbit.address} />
|
||||
</div>
|
||||
<BoardAvatar address={subplebbit.address} />
|
||||
</Link>
|
||||
<div className="board-text">
|
||||
<b>{subplebbit.address}</b>
|
||||
|
||||
@@ -10,6 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, TopBar, BoardForm } from '../styled/Board.styled';
|
||||
import { Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import ReplyModal from '../ReplyModal';
|
||||
@@ -30,12 +31,12 @@ const Subscriptions = () => {
|
||||
const {
|
||||
defaultSubplebbits,
|
||||
isSettingsOpen, setIsSettingsOpen,
|
||||
selectedAddress, setSelectedAddress,
|
||||
setSelectedAddress,
|
||||
setSelectedParentCid,
|
||||
setSelectedShortCid,
|
||||
selectedStyle,
|
||||
setSelectedThread,
|
||||
selectedTitle, setSelectedTitle,
|
||||
setSelectedTitle,
|
||||
} = useGeneralStore(state => state);
|
||||
|
||||
const account = useAccount();
|
||||
@@ -103,21 +104,6 @@ const Subscriptions = () => {
|
||||
return acc;
|
||||
}, {});
|
||||
}, [flattenedRepliesByThread, accountComments, selectedFeed]);
|
||||
|
||||
|
||||
// temporary title from JSON, gets subplebbitAddress from URL
|
||||
useEffect(() => {
|
||||
setSelectedAddress(subplebbitAddress);
|
||||
const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
|
||||
if (selectedSubplebbit) {
|
||||
setSelectedTitle(selectedSubplebbit.title);
|
||||
}
|
||||
}, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]);
|
||||
|
||||
// sets useFeed to address from URL
|
||||
useEffect(() => {
|
||||
setSelectedFeed(feed);
|
||||
}, [feed]);
|
||||
|
||||
// mobile navbar scroll effect
|
||||
useEffect(() => {
|
||||
@@ -165,7 +151,7 @@ const Subscriptions = () => {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{((selectedTitle ? selectedTitle : selectedAddress) + " - plebchan")}</title>
|
||||
<title>Subscriptions - plebchan</title>
|
||||
</Helmet>
|
||||
<Container>
|
||||
<ReplyModal
|
||||
@@ -177,31 +163,35 @@ const Subscriptions = () => {
|
||||
isOpen={isSettingsOpen}
|
||||
closeModal={() => setIsSettingsOpen(false)} />
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
<>
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to="" onClick={() => {}}>Subscriptions</Link>
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
</span>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
{index === 0 ? null : "\u00a0"}
|
||||
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
<OfflineIndicator
|
||||
address={subplebbit.address}
|
||||
className="offline-nav"
|
||||
tooltipPlace="bottom" />
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
))}
|
||||
]
|
||||
</span>
|
||||
<span className="nav">
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
[
|
||||
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
<Link to={`/profile/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
]
|
||||
[
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
@@ -221,12 +211,12 @@ const Subscriptions = () => {
|
||||
</select>
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
</div>
|
||||
<div className="page-jump">
|
||||
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
<Link to={`/profile/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
)}>Home</Link>
|
||||
@@ -383,7 +373,7 @@ const Subscriptions = () => {
|
||||
|
||||
<span key={`pn-${index}`} className="post-number post-number-desktop">
|
||||
<span key={`pl1-${index}`}>c/</span>
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
|
||||
<Link to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
|
||||
onClick={(e) => {
|
||||
if (e.button === 2) return;
|
||||
e.preventDefault();
|
||||
@@ -402,9 +392,13 @@ const Subscriptions = () => {
|
||||
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
|
||||
)}
|
||||
</Link>
|
||||
<OfflineIndicator key={`oi-${index}`}
|
||||
address={thread.subplebbitAddress}
|
||||
className="offline-sub"
|
||||
tooltipPlace="top" />
|
||||
<span key={`rl1-${index}`}>
|
||||
[
|
||||
<Link key={`rl2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
|
||||
<Link key={`rl2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
|
||||
]
|
||||
</span>
|
||||
</span>
|
||||
@@ -432,7 +426,7 @@ const Subscriptions = () => {
|
||||
<span key={`ttl-s-${index}`} className="ttl"> (...)
|
||||
<br key={`ttl-s-br1-${index}`} /><br key={`ttl-s-br2${thread.cid}`} />
|
||||
Post too long.
|
||||
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
<Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
to view. </span>
|
||||
</blockquote>
|
||||
</Fragment>
|
||||
@@ -448,7 +442,7 @@ const Subscriptions = () => {
|
||||
<span key={`oc-${index}`} className="ttl">
|
||||
<span key={`oc1-${index}`}>
|
||||
{omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click
|
||||
<Link key={`oc2-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
|
||||
<Link key={`oc2-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
|
||||
to view.
|
||||
</span>
|
||||
</span>) : null}
|
||||
@@ -507,7 +501,7 @@ const Subscriptions = () => {
|
||||
<span key={`pn-${index}`} className="post-number post-number-desktop">
|
||||
<span id="reply-button" style={{cursor: 'pointer'}} key={`pl1-${index}`} title="Link to this post">c/</span>
|
||||
{reply.shortCid ? (
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
|
||||
<Link to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
|
||||
onClick={(e) => {
|
||||
if (e.button === 2) return;
|
||||
e.preventDefault();
|
||||
@@ -610,7 +604,7 @@ const Subscriptions = () => {
|
||||
<span key={`ttl-s-${index}`} className="ttl"> (...)
|
||||
<br key={`ttl-s-br1-${index}`} /><br key={`ttl-s-br2${reply.cid}`} />
|
||||
Comment too long.
|
||||
<Link key={`ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
<Link key={`ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
to view. </span>
|
||||
</blockquote>
|
||||
</Fragment>
|
||||
@@ -681,12 +675,27 @@ const Subscriptions = () => {
|
||||
<span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
|
||||
p/
|
||||
<Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
|
||||
{thread.subplebbitAddress.includes(".eth") ? thread.subplebbitAddress : (
|
||||
<span key={`short-add${index}`}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.subplebbitAddress}
|
||||
data-tooltip-place="top"
|
||||
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
|
||||
{thread.subplebbitAddress.includes(".eth") ?
|
||||
(
|
||||
<>
|
||||
{thread.subplebbitAddress}
|
||||
<OfflineIndicator key={`offline-indicator-${index}`}
|
||||
address={thread.subplebbitAddress}
|
||||
tooltipPlace="top"
|
||||
className="offline-mobile-sub" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span key={`short-add${index}`}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.subplebbitAddress}
|
||||
data-tooltip-place="top"
|
||||
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
|
||||
<OfflineIndicator key={`offline-indicator-${index}`}
|
||||
address={thread.subplebbitAddress}
|
||||
tooltipPlace="top"
|
||||
className="offline-mobile-sub" />
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
</span>
|
||||
@@ -694,7 +703,7 @@ const Subscriptions = () => {
|
||||
{getDate(thread.timestamp)}
|
||||
|
||||
<span key={`mob-no-${index}`}>c/</span>
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`}
|
||||
<Link to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`}
|
||||
onClick={(e) => {
|
||||
if (e.button === 2) return;
|
||||
e.preventDefault();
|
||||
@@ -759,7 +768,7 @@ const Subscriptions = () => {
|
||||
<span key={`mob-ttl-s-${index}`} className="ttl"> (...)
|
||||
<br key={`mob-ttl-s-br1-${index}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
|
||||
Post too long.
|
||||
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
<Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
to view. </span>
|
||||
</blockquote>
|
||||
</Fragment>
|
||||
@@ -832,12 +841,27 @@ const Subscriptions = () => {
|
||||
<span key={`p-t-mob-span-${index}`} className="date-time-mobile highlight-address-mobile">
|
||||
p/
|
||||
<Link key={`p-t-${index}`} to={`/p/${thread.subplebbitAddress}`} id="reply-button" title="Visit this board">
|
||||
{thread.subplebbitAddress.includes(".eth") ? thread.subplebbitAddress : (
|
||||
<span key={`short-add${index}`}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.subplebbitAddress}
|
||||
data-tooltip-place="top"
|
||||
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
|
||||
{thread.subplebbitAddress.includes(".eth") ?
|
||||
(
|
||||
<>
|
||||
{thread.subplebbitAddress}
|
||||
<OfflineIndicator key={`offline-indicator-${index}`}
|
||||
address={thread.subplebbitAddress}
|
||||
tooltipPlace="top"
|
||||
className="offline-mobile-sub-reply" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span key={`short-add${index}`}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content={thread.subplebbitAddress}
|
||||
data-tooltip-place="top"
|
||||
>{thread.subplebbitAddress.slice(0, 10) + "(...)"}</span>
|
||||
<OfflineIndicator key={`offline-indicator-${index}`}
|
||||
address={thread.subplebbitAddress}
|
||||
tooltipPlace="top"
|
||||
className="offline-mobile-sub-reply" />
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
</span>
|
||||
@@ -845,7 +869,7 @@ const Subscriptions = () => {
|
||||
{getDate(reply.timestamp)}
|
||||
<span key={`mob-pl1-${index}`}>c/</span>
|
||||
{reply.shortCid ? (
|
||||
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`}
|
||||
<Link to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`}
|
||||
onClick={(e) => {
|
||||
if (e.button === 2) return;
|
||||
e.preventDefault();
|
||||
@@ -916,7 +940,7 @@ const Subscriptions = () => {
|
||||
<span key={`mob-ttl-s-${index}`} className="ttl"> (...)
|
||||
<br key={`mob-ttl-s-br1-${index}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
|
||||
Comment too long.
|
||||
<Link key={`mob-ttl-l-${index}`} to={`/p/${selectedAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
<Link key={`mob-ttl-l-${index}`} to={`/p/${thread.subplebbitAddress}/c/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
|
||||
to view. </span>
|
||||
</blockquote>
|
||||
</Fragment>
|
||||
@@ -999,12 +1023,12 @@ const Subscriptions = () => {
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
[
|
||||
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
<Link to={`/profile/p/subscriptions/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
|
||||
]
|
||||
[
|
||||
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
|
||||
|
||||
@@ -9,6 +9,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import { Container, NavBar, Header, Break, PostForm, PostFormTable } from '../styled/Board.styled';
|
||||
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/Thread.styled';
|
||||
import ImageBanner from '../ImageBanner';
|
||||
import OfflineIndicator from '../OfflineIndicator';
|
||||
import Post from '../Post';
|
||||
import PostLoader from '../PostLoader';
|
||||
import ReplyModal from '../ReplyModal';
|
||||
@@ -286,10 +287,9 @@ const Thread = () => {
|
||||
<NavBar selectedStyle={selectedStyle}>
|
||||
<>
|
||||
<span className="boardList">
|
||||
[
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
</span>
|
||||
[
|
||||
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
|
||||
] [
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<span className="boardList" key={`span-${subplebbit.address}`}>
|
||||
{index === 0 ? null : "\u00a0"}
|
||||
@@ -298,15 +298,20 @@ const Thread = () => {
|
||||
setSelectedAddress(subplebbit.address);
|
||||
}}
|
||||
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
|
||||
<OfflineIndicator
|
||||
address={subplebbit.address}
|
||||
className="offline-nav"
|
||||
tooltipPlace="bottom" />
|
||||
{index !== defaultSubplebbits.length - 1 ? " /" : null}
|
||||
</span>
|
||||
))}
|
||||
]
|
||||
]
|
||||
</span>
|
||||
<span className="nav">
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
@@ -331,7 +336,7 @@ const Thread = () => {
|
||||
</select>
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
</div>
|
||||
@@ -1154,7 +1159,7 @@ const Thread = () => {
|
||||
[
|
||||
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
|
||||
() => alert(
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nYou can also use a CLI: https://github.com/plebbit/plebbit-cli\n\nRunning boards in the plebchan app is a planned feature.\n\n'
|
||||
)
|
||||
}>Create Board</button>
|
||||
]
|
||||
|
||||
+20
-12
@@ -3,20 +3,28 @@ import { toast } from "react-toastify";
|
||||
|
||||
const useError = (message) => {
|
||||
useEffect(() => {
|
||||
if (message) {
|
||||
const toastId = toast.error(message.toString(), {
|
||||
position: "top-right",
|
||||
autoClose: false,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
});
|
||||
if (message && message.length > 0) {
|
||||
const showErrorToast = () => {
|
||||
const toastId = toast.error(message.toString(), {
|
||||
position: "top-right",
|
||||
autoClose: false,
|
||||
hideProgressBar: true,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: false,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
});
|
||||
|
||||
return () => {
|
||||
toast.dismiss(toastId);
|
||||
};
|
||||
};
|
||||
|
||||
const timeoutId = setTimeout(showErrorToast, 500);
|
||||
|
||||
return () => {
|
||||
toast.dismiss(toastId);
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}
|
||||
}, [message]);
|
||||
|
||||
+20
-12
@@ -3,20 +3,28 @@ import { toast } from "react-toastify";
|
||||
|
||||
const useSuccess = (message) => {
|
||||
useEffect(() => {
|
||||
if (message) {
|
||||
const toastId = toast.success(message.toString(), {
|
||||
position: "top-right",
|
||||
autoClose: 3000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: false,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
});
|
||||
if (message && message.length > 0) {
|
||||
const showSuccessToast = () => {
|
||||
const toastId = toast.success(message.toString(), {
|
||||
position: "top-right",
|
||||
autoClose: 3000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: false,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
theme: "dark",
|
||||
});
|
||||
|
||||
return () => {
|
||||
toast.dismiss(toastId);
|
||||
};
|
||||
};
|
||||
|
||||
const timeoutId = setTimeout(showSuccessToast, 500);
|
||||
|
||||
return () => {
|
||||
toast.dismiss(toastId);
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}
|
||||
}, [message]);
|
||||
|
||||
@@ -2613,6 +2613,48 @@
|
||||
mkdirp "^1.0.4"
|
||||
rimraf "^3.0.2"
|
||||
|
||||
"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#84d03c4b622634418ce1561e09abdfe46b7d32b2":
|
||||
version "0.0.3"
|
||||
resolved "https://github.com/plebbit/plebbit-js.git#84d03c4b622634418ce1561e09abdfe46b7d32b2"
|
||||
dependencies:
|
||||
"@keyv/sqlite" "3.6.2"
|
||||
"@plebbit/plebbit-logger" "github:plebbit/plebbit-logger"
|
||||
"@types/node-fetch" "2.6.2"
|
||||
"@types/proper-lockfile" "4.1.2"
|
||||
"@types/uuid" "8.3.4"
|
||||
assert "2.0.0"
|
||||
async-wait-until "2.0.12"
|
||||
buffer "6.0.3"
|
||||
captcha-canvas "3.2.1"
|
||||
err-code "3.0.1"
|
||||
ethers "5.7.2"
|
||||
file-type "16.5.4"
|
||||
form-data "4.0.0"
|
||||
hpagent "1.2.0"
|
||||
ipfs-http-client "56.0.3"
|
||||
ipfs-only-hash "4.0.0"
|
||||
is-ipfs "6.0.2"
|
||||
jose "4.11.0"
|
||||
js-sha256 "0.9.0"
|
||||
keyv "4.5.2"
|
||||
knex "2.3.0"
|
||||
libp2p-crypto "0.21.2"
|
||||
limiter "2.1.0"
|
||||
localforage "1.10.0"
|
||||
lodash-es "4.17.21"
|
||||
open-graph-scraper "5.2.3"
|
||||
p-limit "3.1.0"
|
||||
peer-id "0.16.0"
|
||||
proper-lockfile "github:plebbit/node-proper-lockfile"
|
||||
retry "0.13.1"
|
||||
safe-stable-stringify "2.4.1"
|
||||
skia-canvas "1.0.0"
|
||||
sqlite3 "5.1.2"
|
||||
tiny-typed-emitter "2.1.0"
|
||||
tinycache "1.1.2"
|
||||
ts-custom-error "3.3.1"
|
||||
uuid "9.0.0"
|
||||
|
||||
"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#b3272c08bd3861322b7a5eef48992e1b73640098":
|
||||
version "0.0.3"
|
||||
resolved "https://github.com/plebbit/plebbit-js.git#b3272c08bd3861322b7a5eef48992e1b73640098"
|
||||
@@ -2683,6 +2725,21 @@
|
||||
uuid "8.3.2"
|
||||
zustand "4.0.0"
|
||||
|
||||
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#ea1a110be2043e2d4dbc9fc369ec7b47d52979d4":
|
||||
version "0.0.1"
|
||||
resolved "https://github.com/plebbit/plebbit-react-hooks.git#ea1a110be2043e2d4dbc9fc369ec7b47d52979d4"
|
||||
dependencies:
|
||||
"@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#84d03c4b622634418ce1561e09abdfe46b7d32b2"
|
||||
"@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
|
||||
assert "2.0.0"
|
||||
ethers "5.6.9"
|
||||
localforage "1.10.0"
|
||||
lodash.isequal "4.5.0"
|
||||
memoizee "0.4.15"
|
||||
quick-lru "5.1.1"
|
||||
uuid "8.3.2"
|
||||
zustand "4.0.0"
|
||||
|
||||
"@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
|
||||
version "0.5.10"
|
||||
resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
|
||||
|
||||
Reference in New Issue
Block a user