From c7b281ff011c56e551bf3ac87dcd3c2c96f13211 Mon Sep 17 00:00:00 2001 From: Tom Date: Sun, 7 May 2023 16:50:05 +0200 Subject: [PATCH] add accurate loading states in all views --- src/components/views/Board.jsx | 8 ++++-- src/components/views/Catalog.jsx | 10 +++---- src/components/views/Pending.jsx | 5 ++-- src/components/views/Subscriptions.jsx | 4 --- src/utils/formatState.js | 37 ++++++++++++++++---------- src/utils/isValidUrl.js | 10 +++++++ 6 files changed, 47 insertions(+), 27 deletions(-) create mode 100644 src/utils/isValidUrl.js diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 3c07d644..83d4aff2 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; -import { useAccount, useAccountComments, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useAccountComments, useFeed, usePublishComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { debounce } from 'lodash'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; @@ -16,6 +16,7 @@ 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'; @@ -63,6 +64,7 @@ const Board = () => { const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const [selectedFeed, setSelectedFeed] = useState(feed); const { subplebbitAddress } = useParams(); + const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); @@ -322,6 +324,7 @@ const Board = () => { navigate(`/p/${selected}`); }; + const handleSubscribe = async () => { try { if (subscribed === false) { @@ -333,6 +336,7 @@ const Board = () => { setErrorMessage(error); } }; + return ( <> @@ -505,7 +509,7 @@ const Board = () => { ) : (
- Fetching IPFS... + {formatState(subplebbit.state)}
)}
diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index 33bfb70a..4ae705f1 100644 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -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, useSubscribe } from '@plebbit/plebbit-react-hooks'; +import { useFeed, usePublishComment, useSubplebbit, 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'; @@ -12,6 +12,7 @@ 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'; @@ -49,6 +50,7 @@ const Catalog = () => { const [visible, setVisible] = useState(true); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const { subplebbitAddress } = useParams(); + const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); @@ -248,6 +250,7 @@ const Catalog = () => { } }; + return ( <> @@ -418,7 +421,7 @@ const Catalog = () => { ) : (
- Fetching IPFS... + {formatState(subplebbit.state)}
)}
@@ -426,9 +429,6 @@ const Catalog = () => { Return
-
- {feed.length > 0 ? (null) : (Fetching IPFS...)} -
diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index 01f041e5..f93d079b 100644 --- a/src/components/views/Pending.jsx +++ b/src/components/views/Pending.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; @@ -35,6 +35,7 @@ const Pending = () => { const account = useAccount(); const comment = useAccountComment({commentIndex: index}); + const { publishingState } = useAccountComment({commentIndex: index}); const [visible] = useState(true); const [errorMessage] = useState(null); @@ -169,7 +170,7 @@ const Pending = () => { Catalog ] - {formatState(comment.state)} + {formatState(publishingState)}
diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index db292b93..73227ec9 100644 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -152,10 +152,6 @@ const Subscriptions = () => { navigate(`/p/${selected}`); }; - useEffect(() => { - console.log(feed); - }, [feed]); - return ( <> diff --git a/src/utils/formatState.js b/src/utils/formatState.js index bfc4952b..4218972e 100644 --- a/src/utils/formatState.js +++ b/src/utils/formatState.js @@ -1,18 +1,27 @@ function formatState(str) { - return ( - str - .replace(/-/g, " ") - .split(" ") - .map((word) => { - word = word.toLowerCase(); - if (word === "ipfs" || word === "ipns") { - return word.toUpperCase(); - } else { - return word.charAt(0).toUpperCase() + word.slice(1); - } - }) - .join(" ") + "..." - ); + if (!str) { + return null; + } + + const formattedWords = str + .replace(/-/g, " ") + .split(" ") + .map((word, index) => { + word = word.toLowerCase(); + if (word === "ipfs" || word === "ipns") { + return word.toUpperCase(); + } else if (index === 0) { + return word.charAt(0).toUpperCase() + word.slice(1); + } else { + return word; + } + }); + + if (formattedWords.includes("Failed")) { + return formattedWords.join(" ") + "."; + } + + return formattedWords.join(" ") + "..."; } export default formatState; \ No newline at end of file diff --git a/src/utils/isValidUrl.js b/src/utils/isValidUrl.js new file mode 100644 index 00000000..c8cab128 --- /dev/null +++ b/src/utils/isValidUrl.js @@ -0,0 +1,10 @@ +const isValidUrl = (url) => { + try { + new URL(url); + return true; + } catch (e) { + return false; + } +}; + +export default isValidUrl; \ No newline at end of file