diff --git a/src/app.jsx b/src/app.jsx index 30548c11..4c616c5d 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -13,6 +13,7 @@ import { Routes, useLocation, useNavigate, + useParams, } from 'react-router-dom'; import { useSnapshot } from 'valtio'; @@ -250,9 +251,11 @@ function App() { } /> {/* } /> */} - - } /> - + {uiState === 'default' && ( + + } /> + + )}
{isLoggedIn && !snapStates.settings.shortcutsColumnsMode && @@ -490,4 +493,10 @@ function BackgroundService({ isLoggedIn }) { return null; } +function StatusRoute() { + const params = useParams(); + const { id, instance } = params; + return ; +} + export { App }; diff --git a/src/pages/status.jsx b/src/pages/status.jsx index beb5bb95..cb194183 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -3,6 +3,7 @@ import './status.css'; import { Menu, MenuDivider, MenuHeader, MenuItem } from '@szhsin/react-menu'; import debounce from 'just-debounce-it'; import pRetry from 'p-retry'; +import { memo } from 'preact/compat'; import { useCallback, useEffect, @@ -50,8 +51,8 @@ function resetScrollPosition(id) { delete states.scrollPositions[id]; } -function StatusPage() { - const { id, ...params } = useParams(); +function StatusPage(params) { + const { id } = params; const { masto, instance } = api({ instance: params.instance }); const [searchParams, setSearchParams] = useSearchParams(); const mediaParam = searchParams.get('media'); @@ -127,18 +128,23 @@ function StatusPage() { ) : ( )} - {!showMediaOnly && } + {!showMediaOnly && ( + + )}
); } -function StatusThread({ closeLink = '/' }) { - const { id, ...params } = useParams(); +function StatusThread({ id, closeLink = '/', instance: propInstance }) { const [searchParams, setSearchParams] = useSearchParams(); const mediaParam = searchParams.get('media'); const showMedia = parseInt(mediaParam, 10) > 0; const [viewMode, setViewMode] = useState(searchParams.get('view')); - const { masto, instance } = api({ instance: params.instance }); + const { masto, instance } = api({ instance: propInstance }); const { masto: currentMasto, instance: currentInstance, @@ -308,6 +314,13 @@ function StatusThread({ closeLink = '/' }) { offsetTop: heroStatusRef.current?.offsetTop, scrollTop: scrollableRef.current?.scrollTop, }; + + // Set limit to hero's index + const heroLimit = allStatuses.findIndex((s) => s.id === id); + if (heroLimit >= limit) { + setLimit(heroLimit + 1); + } + console.log({ allStatuses }); setStatuses(allStatuses); cachedStatusesMap[id] = allStatuses; @@ -1100,4 +1113,4 @@ function SubComments({ ); } -export default StatusPage; +export default memo(StatusPage);