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

perf: prioritize cached data from API, improving navigation speed and memory consumption

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2025-03-06 13:15:33 +01:00
parent b127876ce4
commit dcb05ed3a0
6 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.tsx
+6 -3
View File
@@ -1,6 +1,8 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useAccountComment, useComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import { isAllView, isCatalogView, isDescriptionView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { isAllView, isCatalogView, isDescriptionView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useCatalogStyleStore from '../../stores/use-catalog-style-store'; import useCatalogStyleStore from '../../stores/use-catalog-style-store';
import useFeedResetStore from '../../stores/use-feed-reset-store'; import useFeedResetStore from '../../stores/use-feed-reset-store';
@@ -297,8 +299,9 @@ const PostPageStats = () => {
const location = useLocation(); const location = useLocation();
const isInDescriptionView = isDescriptionView(location.pathname, params); const isInDescriptionView = isDescriptionView(location.pathname, params);
const comment = useComment({ commentCid: params?.commentCid }); const comment = useSubplebbitsPagesStore((state) => state.comments[params?.commentCid as string]);
const subplebbit = useSubplebbit({ subplebbitAddress: params?.subplebbitAddress }); const subplebbit = useSubplebbitsStore((state) => state.subplebbits[params?.subplebbitAddress as string]);
const descriptionReplyCount = location?.pathname.startsWith('/p/all/') ? 0 : subplebbit?.rules?.length > 0 ? 1 : 0; const descriptionReplyCount = location?.pathname.startsWith('/p/all/') ? 0 : subplebbit?.rules?.length > 0 ? 1 : 0;
const { closed, pinned, replyCount } = comment || {}; const { closed, pinned, replyCount } = comment || {};
const linkCount = useCountLinksInReplies(comment); const linkCount = useCountLinksInReplies(comment);
src/components/board-header/board-header.tsx
+4 -2
View File
@@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils'; import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils';
import styles from './board-header.module.css'; import styles from './board-header.module.css';
import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
@@ -29,7 +30,8 @@ const BoardHeader = () => {
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
const subplebbit = useSubplebbit({ subplebbitAddress }); const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const { address, shortAddress } = subplebbit || {}; const { address, shortAddress } = subplebbit || {};
const multisubMetadata = useMultisubMetadata(); const multisubMetadata = useMultisubMetadata();
src/components/post-form/post-form.tsx
+8 -5
View File
@@ -1,7 +1,9 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Comment, setAccount, useAccount, useAccountComment, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Comment, setAccount, useAccount, useAccountComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils'; import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils';
import { formatMarkdown } from '../../lib/utils/post-utils'; import { formatMarkdown } from '../../lib/utils/post-utils';
import { isValidURL } from '../../lib/utils/url-utils'; import { isValidURL } from '../../lib/utils/url-utils';
@@ -56,7 +58,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses(); const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid); const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid);
const comment = useComment({ commentCid: postCid }); const comment = useSubplebbitsPagesStore((state) => state.comments[postCid]);
const address = comment?.author?.address; const address = comment?.author?.address;
const [lengthError, setLengthError] = useState<string | null>(null); const [lengthError, setLengthError] = useState<string | null>(null);
@@ -427,9 +429,10 @@ const PostForm = () => {
const isInPostView = isPostPageView(location.pathname, params); const isInPostView = isPostPageView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params); const isInRulesView = isRulesView(location.pathname, params);
const isInAllView = isAllView(location.pathname); const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
const post = useComment({ commentCid: useParams().commentCid }); const commentCid = params?.commentCid;
const post = useSubplebbitsPagesStore((state) => state.comments[commentCid as string]);
let comment: Comment = post; let comment: Comment = post;
// handle pending mod or author edit // handle pending mod or author edit
const { editedComment } = useEditedComment({ comment }); const { editedComment } = useEditedComment({ comment });
@@ -444,7 +447,7 @@ const PostForm = () => {
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
const subplebbit = useSubplebbit({ subplebbitAddress }); const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const { isOffline, isOnlineStatusLoading, offlineTitle } = useIsSubplebbitOffline(subplebbit); const { isOffline, isOnlineStatusLoading, offlineTitle } = useIsSubplebbitOffline(subplebbit);
return ( return (
src/components/reply-modal/reply-modal.tsx
+5 -3
View File
@@ -1,7 +1,9 @@
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import { setAccount, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { formatMarkdown } from '../../lib/utils/post-utils'; import { formatMarkdown } from '../../lib/utils/post-utils';
import { getFormattedTimeAgo } from '../../lib/utils/time-utils'; import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
@@ -45,7 +47,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
const { selectedText } = useSelectedTextStore(); const { selectedText } = useSelectedTextStore();
const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid); const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid);
const comment = useComment({ commentCid: postCid }); const comment = useSubplebbitsPagesStore((state) => state.comments[postCid]);
const address = comment?.author?.address; const address = comment?.author?.address;
const getAnonAddressForReply = useCallback(async () => { const getAnonAddressForReply = useCallback(async () => {
@@ -189,7 +191,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
const location = useLocation(); const location = useLocation();
const isInAllView = isAllView(location.pathname); const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const subplebbit = useSubplebbit({ subplebbitAddress }); const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const { updatedAt } = subplebbit || {}; const { updatedAt } = subplebbit || {};
const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60; const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
const offlineAlert = updatedAt const offlineAlert = updatedAt
src/components/subplebbit-stats/subplebbit-stats.tsx
+5 -3
View File
@@ -1,6 +1,8 @@
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import { useAccountComment, useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; import { useAccountComment, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store'; import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store';
import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils'; import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
import styles from './subplebbit-stats.module.css'; import styles from './subplebbit-stats.module.css';
@@ -12,7 +14,7 @@ const SubplebbitStats = () => {
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
const subplebbit = useSubplebbit({ subplebbitAddress }); const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
const { address, createdAt } = subplebbit || {}; const { address, createdAt } = subplebbit || {};
let stats = useSubplebbitStats({ subplebbitAddress: address }); let stats = useSubplebbitStats({ subplebbitAddress: address });
@@ -23,7 +25,7 @@ const SubplebbitStats = () => {
const isInDescriptionView = isDescriptionView(location.pathname, params); const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params); const isInRulesView = isRulesView(location.pathname, params);
const comment = useComment({ commentCid: params?.commentCid }); const comment = useSubplebbitsPagesStore((state) => state.comments[params?.commentCid as string]);
const { deleted, locked, removed } = comment || {}; const { deleted, locked, removed } = comment || {};
const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView; const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView;
src/views/post/post.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Comment, Role, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { isAllView, isDescriptionView, isRulesView } from '../../lib/utils/view-utils'; import { isAllView, isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
@@ -57,7 +57,7 @@ const PostPage = () => {
const isInDescriptionView = isDescriptionView(location.pathname, params); const isInDescriptionView = isDescriptionView(location.pathname, params);
const isInRulesView = isRulesView(location.pathname, params); const isInRulesView = isRulesView(location.pathname, params);
const subplebbit = useSubplebbit({ subplebbitAddress }); const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress as string]);
const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit; const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit;
const comment = useComment({ commentCid }); const comment = useComment({ commentCid });