-
+
{chat.account.display_name || `@${chat.account.username}`}
diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx
index 320a9b48e..3939572fe 100644
--- a/packages/pl-fe/src/features/ui/index.tsx
+++ b/packages/pl-fe/src/features/ui/index.tsx
@@ -2,7 +2,7 @@ import { Outlet, useNavigate } from '@tanstack/react-router';
import clsx from 'clsx';
import React, { Suspense, lazy, useEffect, useRef } from 'react';
import { Toaster } from 'react-hot-toast';
-import { matchPath, Redirect, Switch, useLocation } from 'react-router-dom';
+import { Redirect, Switch, useLocation } from 'react-router-dom';
import { fetchConfig } from 'pl-fe/actions/admin';
import { fetchFilters } from 'pl-fe/actions/filters';
diff --git a/packages/pl-fe/src/features/ui/router.tsx b/packages/pl-fe/src/features/ui/router.tsx
index 96eca56a2..8d3200758 100644
--- a/packages/pl-fe/src/features/ui/router.tsx
+++ b/packages/pl-fe/src/features/ui/router.tsx
@@ -4,6 +4,7 @@ import {
createRoute,
createRouter,
notFound,
+ Outlet,
redirect,
RouterProvider,
} from '@tanstack/react-router';
@@ -35,6 +36,11 @@ import StatusLayout from 'pl-fe/layouts/status-layout';
import { instanceInitialState } from 'pl-fe/reducers/instance';
import { isStandalone } from 'pl-fe/utils/state';
+import ChatPageMain from '../chats/components/chat-page/components/chat-page-main';
+import ChatPageNew from '../chats/components/chat-page/components/chat-page-new';
+import ChatPageSettings from '../chats/components/chat-page/components/chat-page-settings';
+import ChatPageShoutbox from '../chats/components/chat-page/components/chat-page-shoutbox';
+
import ColumnLoading from './components/column-loading';
import {
AboutPage,
@@ -139,6 +145,8 @@ import {
} from './util/async-components';
import type { Features } from 'pl-api';
+import Layout from 'pl-fe/components/ui/layout';
+
interface RouterContext {
instance: ReturnType;
@@ -486,7 +494,7 @@ export const newEventRoute = createRoute({
});
// Chats
-export const chatsIndexRoute = createRoute({
+export const chatsRoute = createRoute({
getParentRoute: () => layouts.chats,
path: '/chats',
component: ChatIndex,
@@ -496,39 +504,27 @@ export const chatsIndexRoute = createRoute({
});
export const chatsNewRoute = createRoute({
- getParentRoute: () => layouts.chats,
- path: '/chats/new',
- component: ChatIndex,
- beforeLoad: ({ context: { features } }) => {
- if (!features.chats) throw notFound();
- },
+ getParentRoute: () => chatsRoute,
+ path: '/new',
+ component: ChatPageNew,
});
export const chatsSettingsRoute = createRoute({
- getParentRoute: () => layouts.chats,
- path: '/chats/settings',
- component: ChatIndex,
- beforeLoad: ({ context: { features } }) => {
- if (!features.chats) throw notFound();
- },
+ getParentRoute: () => chatsRoute,
+ path: '/settings',
+ component: ChatPageSettings,
});
export const shoutboxRoute = createRoute({
- getParentRoute: () => layouts.chats,
- path: '/chats/shoutbox',
- component: ChatIndex,
- beforeLoad: ({ context: { features } }) => {
- if (!features.shoutbox) throw notFound();
- },
+ getParentRoute: () => chatsRoute,
+ path: '/shoutbox',
+ component: ChatPageShoutbox,
});
export const chatRoute = createRoute({
- getParentRoute: () => layouts.chats,
- path: '/chats/$chatId',
- component: ChatIndex,
- beforeLoad: ({ context: { features } }) => {
- if (!features.chats) throw notFound();
- },
+ getParentRoute: () => chatsRoute,
+ path: '/{-$chatId}',
+ component: ChatPageMain,
});
// Follow requests and blocks
@@ -1152,7 +1148,6 @@ const routeTree = rootRoute.addChildren([
adminRulesRoute,
]),
layouts.chats.addChildren([
- chatsIndexRoute,
chatsNewRoute,
chatsSettingsRoute,
shoutboxRoute,
@@ -1270,6 +1265,22 @@ const routeTree = rootRoute.addChildren([
]),
]);
+const FallbackLayout: React.FC<{ children: JSX.Element }> = ({ children }) => (
+ <>
+
+ {children}
+
+
+
+
+);
+
+const PendingComponent: React.FC = () => (
+
+
+
+);
+
const router = createRouter({
routeTree,
basepath: FE_SUBDIRECTORY,
@@ -1280,15 +1291,9 @@ const router = createRouter({
isStandalone: false,
isAdmin: false,
hasCrypto: false,
- // instance,
- // features,
- // isStandalone: standalone,
- // isLoggedIn,
- // isAdmin: true,
- // hasCrypto,
},
defaultNotFoundComponent: GenericNotFound,
- defaultPendingComponent: ColumnLoading,
+ defaultPendingComponent: PendingComponent,
});
declare module '@tanstack/react-router' {
diff --git a/packages/pl-fe/src/layouts/group-layout.tsx b/packages/pl-fe/src/layouts/group-layout.tsx
index 282fc55a7..79cd02e1c 100644
--- a/packages/pl-fe/src/layouts/group-layout.tsx
+++ b/packages/pl-fe/src/layouts/group-layout.tsx
@@ -1,7 +1,6 @@
-import { Outlet } from '@tanstack/react-router';
+import { Outlet, useLocation } from '@tanstack/react-router';
import React, { useMemo } from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { useRouteMatch } from 'react-router-dom';
import { useGroup } from 'pl-fe/api/hooks/groups/use-group';
import { useGroupMembershipRequests } from 'pl-fe/api/hooks/groups/use-group-membership-requests';
@@ -49,7 +48,7 @@ const GroupLayout = () => {
const { groupId } = layouts.group.useParams();
const intl = useIntl();
- const match = useRouteMatch();
+ const location = useLocation();
const { account: me } = useOwnAccount();
const { group } = useGroup(groupId);
@@ -64,7 +63,7 @@ const GroupLayout = () => {
text: intl.formatMessage(messages.all),
to: '/groups/$groupId',
params: { groupId },
- name: '/groups/:groupId',
+ name: '/groups/$groupId',
},
];
@@ -73,13 +72,13 @@ const GroupLayout = () => {
text: intl.formatMessage(messages.media),
to: '/groups/$groupId/media',
params: { groupId },
- name: '/groups/:groupId/media',
+ name: '/groups/$groupId/media',
},
{
text: intl.formatMessage(messages.members),
to: '/groups/$groupId/members',
params: { groupId },
- name: '/groups/:groupId/members',
+ name: '/groups/$groupId/members',
count: pending.length,
},
);
@@ -104,7 +103,7 @@ const GroupLayout = () => {
{renderChildren()}
diff --git a/packages/pl-fe/src/pages/chats/chats.tsx b/packages/pl-fe/src/pages/chats/chats.tsx
index f67c01520..f4fc07594 100644
--- a/packages/pl-fe/src/pages/chats/chats.tsx
+++ b/packages/pl-fe/src/pages/chats/chats.tsx
@@ -3,15 +3,9 @@ import React from 'react';
import { ChatProvider } from 'pl-fe/contexts/chat-context';
import ChatPage from 'pl-fe/features/chats/components/chat-page/chat-page';
-interface IChatIndex {
- params?: {
- chatId?: string;
- };
-}
-
-const ChatIndex: React.FC = ({ params }) => (
+const ChatIndex: React.FC = () => (
-
+
);
diff --git a/packages/pl-fe/src/pages/status-lists/quotes.tsx b/packages/pl-fe/src/pages/status-lists/quotes.tsx
index b6064d307..9c35ba6e9 100644
--- a/packages/pl-fe/src/pages/status-lists/quotes.tsx
+++ b/packages/pl-fe/src/pages/status-lists/quotes.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { useParams } from 'react-router-dom';
import PullToRefresh from 'pl-fe/components/pull-to-refresh';
import StatusList from 'pl-fe/components/status-list';
import Column from 'pl-fe/components/ui/column';
+import { statusQuotesRoute } from 'pl-fe/features/ui/router';
import { useStatusQuotes } from 'pl-fe/queries/statuses/use-status-quotes';
const messages = defineMessages({
@@ -13,7 +13,7 @@ const messages = defineMessages({
const QuotesPage: React.FC = () => {
const intl = useIntl();
- const { statusId } = useParams<{ statusId: string }>();
+ const { statusId } = statusQuotesRoute.useParams();
const { data: statusIds = [], isLoading, hasNextPage, fetchNextPage, refetch } = useStatusQuotes(statusId);