matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: migrate status lists to mutative

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-11-10 12:11:09 +01:00
parent fad9714475
commit b2d5bbf537
16 changed files with 142 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/pl-fe/src/features/bookmarks/index.tsx
View File

@@ -1,4 +1,3 @@
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import debounce from 'lodash/debounce';
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -54,9 +53,9 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
const bookmarksKey = folderId ? `bookmarks:${folderId}` : 'bookmarks';
const statusIds = useAppSelector((state) => state.status_lists.get(bookmarksKey)?.items || ImmutableOrderedSet<string>());
const isLoading = useAppSelector((state) => state.status_lists.get(bookmarksKey)?.isLoading === true);
const hasMore = useAppSelector((state) => !!state.status_lists.get(bookmarksKey)?.next);
const statusIds = useAppSelector((state) => state.status_lists[bookmarksKey]?.items || []);
const isLoading = useAppSelector((state) => state.status_lists[bookmarksKey]?.isLoading === true);
const hasMore = useAppSelector((state) => !!state.status_lists[bookmarksKey]?.next);
React.useEffect(() => {
dispatch(fetchBookmarkedStatuses(folderId));

10
packages/pl-fe/src/features/events/components/event-carousel.tsx
View File

@@ -10,8 +10,6 @@ import { makeGetStatus } from 'pl-fe/selectors';
import PlaceholderEventPreview from '../../placeholder/components/placeholder-event-preview';
import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
const Event = ({ id }: { id: string }) => {
const getStatus = useCallback(makeGetStatus(), []);
const status = useAppSelector(state => getStatus(state, { id }));
@@ -29,7 +27,7 @@ const Event = ({ id }: { id: string }) => {
};
interface IEventCarousel {
statusIds: ImmutableOrderedSet<string>;
statusIds: Array<string>;
isLoading?: boolean | null;
emptyMessage: React.ReactNode;
}
@@ -38,10 +36,10 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
const [index, setIndex] = useState(0);
const handleChangeIndex = (index: number) => {
setIndex(index % statusIds.size);
setIndex(index % statusIds.length);
};
if (statusIds.size === 0) {
if (statusIds.length === 0) {
if (isLoading) {
return <PlaceholderEventPreview />;
}
@@ -67,7 +65,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
<ReactSwipeableViews animateHeight index={index} onChangeIndex={handleChangeIndex}>
{statusIds.map(statusId => <Event key={statusId} id={statusId} />)}
</ReactSwipeableViews>
{index !== statusIds.size - 1 && (
{index !== statusIds.length - 1 && (
<div className='absolute right-3 top-1/2 z-10 -mt-4'>
<button
onClick={() => handleChangeIndex(index + 1)}

8
packages/pl-fe/src/features/events/index.tsx
View File

@@ -20,10 +20,10 @@ const Events = () => {
const dispatch = useAppDispatch();
const recentEvents = useAppSelector((state) => state.status_lists.get('recent_events')!.items);
const recentEventsLoading = useAppSelector((state) => state.status_lists.get('recent_events')!.isLoading);
const joinedEvents = useAppSelector((state) => state.status_lists.get('joined_events')!.items);
const joinedEventsLoading = useAppSelector((state) => state.status_lists.get('joined_events')!.isLoading);
const recentEvents = useAppSelector((state) => state.status_lists.recent_events!.items);
const recentEventsLoading = useAppSelector((state) => state.status_lists.recent_events!.isLoading);
const joinedEvents = useAppSelector((state) => state.status_lists.joined_events!.items);
const joinedEventsLoading = useAppSelector((state) => state.status_lists.joined_events!.isLoading);
useEffect(() => {
dispatch(fetchRecentEvents());

7
packages/pl-fe/src/features/favourited-statuses/index.tsx
View File

@@ -1,4 +1,3 @@
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import debounce from 'lodash/debounce';
import React, { useCallback, useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -34,9 +33,9 @@ const Favourites: React.FC<IFavourites> = ({ params }) => {
const isOwnAccount = username.toLowerCase() === ownAccount?.acct?.toLowerCase();
const timelineKey = isOwnAccount ? 'favourites' : `favourites:${account?.id}`;
const statusIds = useAppSelector(state => state.status_lists.get(timelineKey)?.items || ImmutableOrderedSet<string>());
const isLoading = useAppSelector(state => state.status_lists.get(timelineKey)?.isLoading === true);
const hasMore = useAppSelector(state => !!state.status_lists.get(timelineKey)?.next);
const statusIds = useAppSelector(state => state.status_lists[timelineKey]?.items || []);
const isLoading = useAppSelector(state => state.status_lists[timelineKey]?.isLoading === true);
const hasMore = useAppSelector(state => !!state.status_lists[timelineKey]?.next);
const handleLoadMore = useCallback(debounce(() => {
if (isOwnAccount) {

6
packages/pl-fe/src/features/pinned-statuses/index.tsx
View File

@@ -20,9 +20,9 @@ const PinnedStatuses = () => {
const { username } = useParams<{ username: string }>();
const meUsername = useAppSelector((state) => selectOwnAccount(state)?.username || '');
const statusIds = useAppSelector((state) => state.status_lists.get('pins')!.items);
const isLoading = useAppSelector((state) => !!state.status_lists.get('pins')!.isLoading);
const hasMore = useAppSelector((state) => !!state.status_lists.get('pins')!.next);
const statusIds = useAppSelector((state) => state.status_lists.pins!.items);
const isLoading = useAppSelector((state) => !!state.status_lists.pins!.isLoading);
const hasMore = useAppSelector((state) => !!state.status_lists.pins!.next);
const isMyAccount = username.toLowerCase() === meUsername.toLowerCase();

9
packages/pl-fe/src/features/quotes/index.tsx
View File

@@ -1,4 +1,3 @@
import { OrderedSet as ImmutableOrderedSet } from 'immutable';
import debounce from 'lodash/debounce';
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -26,9 +25,9 @@ const Quotes: React.FC = () => {
const theme = useTheme();
const isMobile = useIsMobile();
const statusIds = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'items'], ImmutableOrderedSet<string>()));
const isLoading = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'isLoading'], true));
const hasMore = useAppSelector((state) => !!state.status_lists.getIn([`quotes:${statusId}`, 'next']));
const statusIds = useAppSelector((state) => state.status_lists[`quotes:${statusId}`]?.items || []);
const isLoading = useAppSelector((state) => state.status_lists[`quotes:${statusId}`]?.isLoading !== false);
const hasMore = useAppSelector((state) => !!state.status_lists[`quotes:${statusId}`]?.next);
React.useEffect(() => {
dispatch(fetchStatusQuotes(statusId));
@@ -41,7 +40,7 @@ const Quotes: React.FC = () => {
<StatusList
className='black:p-0 black:sm:p-4 black:sm:pt-0'
loadMoreClassName='black:sm:mx-4'
statusIds={statusIds as ImmutableOrderedSet<string>}
statusIds={statusIds}
scrollKey={`quotes:${statusId}`}
hasMore={hasMore}
isLoading={typeof isLoading === 'boolean' ? isLoading : true}

6
packages/pl-fe/src/features/scheduled-statuses/index.tsx
View File

@@ -22,9 +22,9 @@ const ScheduledStatuses = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const statusIds = useAppSelector((state) => state.status_lists.get('scheduled_statuses')!.items);
const isLoading = useAppSelector((state) => state.status_lists.get('scheduled_statuses')!.isLoading);
const hasMore = useAppSelector((state) => !!state.status_lists.get('scheduled_statuses')!.next);
const statusIds = useAppSelector((state) => state.status_lists.scheduled_statuses!.items);
const isLoading = useAppSelector((state) => state.status_lists.scheduled_statuses!.isLoading);
const hasMore = useAppSelector((state) => !!state.status_lists.scheduled_statuses!.next);
useEffect(() => {
dispatch(fetchScheduledStatuses());

2
packages/pl-fe/src/features/ui/components/timeline.tsx
View File

@@ -34,7 +34,7 @@ const Timeline: React.FC<ITimeline> = ({
const getStatusIds = useCallback(makeGetStatusIds(), []);
const statusIds = useAppSelector(state => getStatusIds(state, { type: timelineId, prefix }));
const lastStatusId = statusIds.last();
const lastStatusId = statusIds.at(-1);
const isLoading = useAppSelector(state => (state.timelines.get(timelineId) || { isLoading: true }).isLoading === true);
const isPartial = useAppSelector(state => (state.timelines.get(timelineId)?.isPartial || false) === true);
const hasMore = useAppSelector(state => state.timelines.get(timelineId)?.hasMore === true);