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 new loading states

Browse Source
This commit is contained in:
Tom
2023-05-09 15:58:19 +02:00
parent 66e90138d0
commit 2aff229997
6 changed files with 82 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Board.jsx
+18 -7
View File
@@ -16,7 +16,6 @@ import PostLoader from '../PostLoader';
import ReplyModal from '../ReplyModal';
import SettingsModal from '../SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid';
import formatState from '../../utils/formatState';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick';
@@ -25,6 +24,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -66,12 +66,23 @@ const Board = () => {
const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
useEffect(() => {
if (subplebbit.error) {
const errorMessage = formatState(subplebbit.error);
setErrorMessage(errorMessage);
const stateString = useStateString(subplebbit?.clients);
const errorString = useMemo(() => {
if (subplebbit?.state === 'failed') {
let errorString = 'Failed fetching board "' + selectedAddress + '".';
if (subplebbit.error) {
errorString += `: ${subplebbit.error.toString().slice(0, 300)}`
}
return errorString
}
}, [subplebbit.error]);
}, [subplebbit?.state, subplebbit?.error, selectedAddress])
useEffect(() => {
if (errorString) {
setErrorMessage(errorString);
}
}, [errorString]);
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
@@ -515,7 +526,7 @@ const Board = () => {
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>{formatState(subplebbit.state)}</span>
<span>{stateString}</span>
</div>
)}
<div id="catalog-button-mobile">
src/components/views/Catalog.jsx
+19 -9
View File
@@ -1,4 +1,4 @@
import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import InfiniteScroll from 'react-infinite-scroller';
import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -13,11 +13,11 @@ import CatalogLoader from '../CatalogLoader';
import ImageBanner from '../ImageBanner';
import OfflineIndicator from '../OfflineIndicator';
import SettingsModal from '../SettingsModal';
import formatState from '../../utils/formatState';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -53,13 +53,23 @@ const Catalog = () => {
const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
useEffect(() => {
if (subplebbit.error) {
const errorMessage = formatState(subplebbit.error);
setErrorMessage(errorMessage);
}
}, [subplebbit.error]);
const stateString = useStateString(subplebbit?.clients);
const errorString = useMemo(() => {
if (subplebbit?.state === 'failed') {
let errorString = 'Failed fetching board "' + selectedAddress + '".';
if (subplebbit.error) {
errorString += `: ${subplebbit.error.toString().slice(0, 300)}`
}
return errorString
}
}, [subplebbit?.state, subplebbit?.error, selectedAddress])
useEffect(() => {
if (errorString) {
setErrorMessage(errorString);
}
}, [errorString]);
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
const [errorMessage, setErrorMessage] = useState(null);
@@ -430,7 +440,7 @@ const Catalog = () => {
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>{formatState(subplebbit.state)}</span>
<span>{stateString}</span>
</div>
)}
<div id="return-button-mobile">
src/components/views/Pending.jsx
+22 -12
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
@@ -10,12 +10,12 @@ import ImageBanner from '../ImageBanner';
import Post from '../Post';
import PostLoader from '../PostLoader';
import SettingsModal from '../SettingsModal';
import formatState from '../../utils/formatState';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getDate from '../../utils/getDate';
import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -35,20 +35,30 @@ const Pending = () => {
const account = useAccount();
const comment = useAccountComment({commentIndex: index});
const { publishingState, error } = useAccountComment({commentIndex: index});
const stateString = useStateString(comment?.clients)
const errorString = useMemo(() => {
if (comment?.state === 'failed') {
let errorString = 'Failed fetching pending thread. Pending index: ' + index;
if (comment.error) {
errorString += `: ${comment.error.toString().slice(0, 300)}`
}
return errorString
}
}, [comment?.state, comment?.error, index])
useEffect(() => {
if (errorString) {
setErrorMessage(errorString);
}
}, [errorString]);
const [visible] = useState(true);
const [errorMessage, setErrorMessage] = useState(null);
useError(errorMessage, [errorMessage]);
useEffect(() => {
if (error) {
const errorMessage = formatState(error);
setErrorMessage(errorMessage);
}
}, [error]);
const navigate = useNavigate();
const [commentMediaInfo, setCommentMediaInfo] = useState(null);
const fallbackImgUrl = "assets/filedeleted-res.gif";
@@ -178,7 +188,7 @@ const Pending = () => {
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
]
</span>
<span className="reply-stat">{formatState(publishingState)}</span>
<span className="reply-stat">{stateString}</span>
<hr />
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
src/components/views/Thread.jsx
+23 -5
View File
@@ -15,7 +15,6 @@ import PostLoader from '../PostLoader';
import ReplyModal from '../ReplyModal';
import SettingsModal from '../SettingsModal';
import findShortParentCid from '../../utils/findShortParentCid';
import formatState from '../../utils/formatState';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick';
@@ -24,6 +23,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -61,6 +61,24 @@ const Thread = () => {
const { subplebbitAddress, threadCid } = useParams();
const handleClickForm = useClickForm();
const stateString = useStateString(comment?.clients);
const errorString = useMemo(() => {
if (comment?.state === 'failed') {
let errorString = 'Failed fetching thread.'
if (comment.error) {
errorString += `: ${comment.error.toString().slice(0, 300)}`
}
return errorString
}
}, [comment?.state, comment?.error])
useEffect(() => {
if (errorString) {
setErrorMessage(errorString);
}
}, [errorString]);
const commentMediaInfo = getCommentMediaInfo(comment);
const fallbackImgUrl = "assets/filedeleted-res.gif";
@@ -463,10 +481,10 @@ const Thread = () => {
<span className="reply-stat">No replies yet</span>
)
) : (
<span className="reply-stat">{formatState(comment.state)}</span>
<span className="reply-stat">{stateString}</span>
)
) : (
<span className="reply-stat">{formatState(comment.state)}</span>
<span className="reply-stat">{stateString}</span>
)}
<hr />
</TopBar>
@@ -1036,10 +1054,10 @@ const Thread = () => {
<span className="reply-stat">No replies yet</span>
)
) : (
<span className="reply-stat">{formatState(comment.state)}</span>
<span className="reply-stat">{stateString}</span>
)
) : (
<span className="reply-stat">{formatState(comment.state)}</span>
<span className="reply-stat">{stateString}</span>
)}
<hr />
</div>