diff --git a/packages/pl-fe/src/actions/timelines.ts b/packages/pl-fe/src/actions/timelines.ts index a51cd6b64..5c7513ac7 100644 --- a/packages/pl-fe/src/actions/timelines.ts +++ b/packages/pl-fe/src/actions/timelines.ts @@ -16,6 +16,7 @@ import type { PaginatedResponse, PublicTimelineParams, Status as BaseStatus, + LinkTimelineParams, } from 'pl-api'; import type { AppDispatch, RootState } from 'pl-fe/store'; @@ -293,6 +294,22 @@ const fetchHashtagTimeline = (hashtag: string, { tags }: Record = { return dispatch(handleTimelineExpand(timelineId, fn, false, done)); }; +const fetchLinkTimeline = (url: string, expand = false, done = noOp) => + async (dispatch: AppDispatch, getState: () => RootState) => { + const state = getState(); + const timelineId = `link:${url}`; + + const params: LinkTimelineParams = {}; + + if (expand && state.timelines[timelineId]?.isLoading) return; + + if (useSettingsStore.getState().settings.autoTranslate) params.language = getLocale(); + + const fn = (expand && state.timelines[timelineId]?.next?.()) || getClient(state).timelines.linkTimeline(url, params); + + return dispatch(handleTimelineExpand(timelineId, fn, false, done)); + }; + const expandTimelineRequest = (timeline: string) => ({ type: TIMELINE_EXPAND_REQUEST, timeline, @@ -361,6 +378,7 @@ export { fetchListTimeline, fetchGroupTimeline, fetchHashtagTimeline, + fetchLinkTimeline, expandTimelineSuccess, scrollTopTimeline, type TimelineAction, diff --git a/packages/pl-fe/src/components/trending-link.tsx b/packages/pl-fe/src/components/trending-link.tsx index 40a276482..cd5b5fa62 100644 --- a/packages/pl-fe/src/components/trending-link.tsx +++ b/packages/pl-fe/src/components/trending-link.tsx @@ -1,5 +1,6 @@ import { TrendsLink } from 'pl-api'; import React from 'react'; +import { Link } from 'react-router-dom'; import { getTextDirection } from 'pl-fe/utils/rtl'; @@ -56,7 +57,11 @@ const TrendingLink: React.FC = ({ trendingLink }) => { - {!!count && accountsCountRenderer(count)} + {!!count && ( + + {accountsCountRenderer(count)} + + )} diff --git a/packages/pl-fe/src/features/link-timeline/index.tsx b/packages/pl-fe/src/features/link-timeline/index.tsx new file mode 100644 index 000000000..fbc45b5a7 --- /dev/null +++ b/packages/pl-fe/src/features/link-timeline/index.tsx @@ -0,0 +1,56 @@ +import React, { useEffect } from 'react'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; + +import { clearTimeline, fetchLinkTimeline } from 'pl-fe/actions/timelines'; +import Column from 'pl-fe/components/ui/column'; +import Timeline from 'pl-fe/features/ui/components/timeline'; +import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; +import { useIsMobile } from 'pl-fe/hooks/use-is-mobile'; +import { useTheme } from 'pl-fe/hooks/use-theme'; + +const messages = defineMessages({ + header: { id: 'column.link_timeline', defaultMessage: 'Posts linking to {url}' }, +}); + +interface ILinkTimeline { + params?: { + url?: string; + }; +} + +const HashtagTimeline: React.FC = ({ params }) => { + const url = decodeURIComponent(params?.url || ''); + + const intl = useIntl(); + const dispatch = useAppDispatch(); + const theme = useTheme(); + const isMobile = useIsMobile(); + + const handleLoadMore = () => { + dispatch(fetchLinkTimeline(url, true)); + }; + + useEffect(() => { + dispatch(clearTimeline(`link:${url}`)); + dispatch(fetchLinkTimeline(url)); + }, [url]); + + return ( + + } + divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} + /> + + ); +}; + +export { HashtagTimeline as default }; diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index bd92dcdad..61f8260c5 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -108,6 +108,7 @@ import { InteractionPolicies, InteractionRequests, LandingTimeline, + LinkTimeline, ListTimeline, Lists, LoginPage, @@ -234,6 +235,7 @@ const SwitchingColumnsArea: React.FC = React.memo(({ chil + {features.lists && } {features.lists && } diff --git a/packages/pl-fe/src/features/ui/util/async-components.ts b/packages/pl-fe/src/features/ui/util/async-components.ts index 29451ae6e..f924aaa1b 100644 --- a/packages/pl-fe/src/features/ui/util/async-components.ts +++ b/packages/pl-fe/src/features/ui/util/async-components.ts @@ -59,6 +59,7 @@ export const IntentionalError = lazy(() => import('pl-fe/features/intentional-er export const InteractionPolicies = lazy(() => import('pl-fe/features/interaction-policies')); export const InteractionRequests = lazy(() => import('pl-fe/features/interaction-requests')); export const LandingTimeline = lazy(() => import('pl-fe/features/landing-timeline')); +export const LinkTimeline = lazy(() => import('pl-fe/features/link-timeline')); export const Lists = lazy(() => import('pl-fe/features/lists')); export const ListTimeline = lazy(() => import('pl-fe/features/list-timeline')); export const LoginPage = lazy(() => import('pl-fe/features/auth-login/components/login-page')); diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 2d2b700f3..0d904dd86 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -402,6 +402,7 @@ "column.info": "Server information", "column.interaction_policies": "Interaction policies", "column.interaction_requests": "Interaction requests", + "column.link_timeline": "Posts linking to {url}", "column.lists": "Lists", "column.manage_group": "Manage group", "column.mentions": "Mentions", @@ -741,6 +742,7 @@ "empty_column.home.subtitle": "{siteTitle} gets more interesting once you follow other users.", "empty_column.home.title": "You're not following anyone yet", "empty_column.interaction_requests": "There are no pending interaction requests.", + "empty_column.link_timeline": "There are no posts with this link yet.", "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.", "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.", "empty_column.mutes": "You haven't muted any users yet.",