External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add subscribe button to catalog, fix in board

Browse Source
This commit is contained in:
Tom
2023-05-03 18:32:16 +02:00
parent dd4c6ef58c
commit 3b17609336
2 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+3 -5
View File
@@ -325,18 +325,16 @@ const Board = () => {
try { try {
if (subscribed === false) { if (subscribed === false) {
await subscribe(selectedAddress); await subscribe(selectedAddress);
setSuccessMessage(`Subscribed to ${selectedTitle ?? selectedAddress}`); setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`);
} else if (subscribed === true) { } else if (subscribed === true) {
await unsubscribe(selectedAddress); await unsubscribe(selectedAddress);
setSuccessMessage(`Unsubscribed from ${selectedTitle ?? selectedAddress}`); setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`);
} }
} catch (error) { } catch (error) {
setErrorMessage(error); setErrorMessage(error);
} }
}; };
return ( return (
<> <>
<Helmet> <Helmet>
src/components/views/Catalog.jsx
+32 -8
View File
@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { Link, useNavigate, useParams } from 'react-router-dom';
import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks'; import { useAccount, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled'; import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
@@ -15,6 +15,7 @@ import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError'; import useError from '../../hooks/useError';
import useSuccess from '../../hooks/useSuccess';
import packageJson from '../../../package.json' import packageJson from '../../../package.json'
const {version} = packageJson const {version} = packageJson
@@ -37,6 +38,8 @@ const Catalog = () => {
showPostFormLink, showPostFormLink,
} = useGeneralStore(state => state); } = useGeneralStore(state => state);
const account = useAccount();
const nameRef = useRef(); const nameRef = useRef();
const subjectRef = useRef(); const subjectRef = useRef();
const commentRef = useRef(); const commentRef = useRef();
@@ -48,8 +51,12 @@ const Catalog = () => {
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
const [errorMessage, setErrorMessage] = useState(null); const [errorMessage, setErrorMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
useError(errorMessage, [errorMessage]); useError(errorMessage, [errorMessage]);
useSuccess(successMessage, [successMessage]);
const [triggerPublishComment, setTriggerPublishComment] = useState(false); const [triggerPublishComment, setTriggerPublishComment] = useState(false);
@@ -230,6 +237,19 @@ const Catalog = () => {
navigate(`/p/${selected}`); navigate(`/p/${selected}`);
}; };
const handleSubscribe = async () => {
try {
if (subscribed === false) {
await subscribe(selectedAddress);
setSuccessMessage(`Subscribed to ${selectedTitle ? selectedTitle : selectedAddress}`);
} else if (subscribed === true) {
await unsubscribe(selectedAddress);
setSuccessMessage(`Unsubscribed from ${selectedTitle ? selectedTitle : selectedAddress}`);
}
} catch (error) {
setErrorMessage(error);
}
};
return ( return (
<> <>
@@ -384,13 +404,17 @@ const Catalog = () => {
</div> </div>
{feed.length > 0 ? ( {feed.length > 0 ? (
<> <>
<span className="subscribe-button-desktop"> <span className="subscribe-button-desktop">
[ [
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button> <button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}
] onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
</span> </button>
<button className="subscribe-button-mobile btn-wrap">Subscribe</button> ]
</> </span>
<button className="subscribe-button-mobile btn-wrap"
onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
</button>
</>
) : ( ) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}> <div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>Fetching IPFS...</span> <span>Fetching IPFS...</span>