pl-fe: my laptop fan is behaving strangely so commiting in case

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/admin/components/admin-tabs.tsx

@@ -1,6 +1,6 @@
+import { useLocation } from '@tanstack/react-router';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { useRouteMatch } from 'react-router-dom';
 
 import Tabs, { type Item } from 'pl-fe/components/ui/tabs';
 import { usePendingUsersCount } from 'pl-fe/queries/admin/use-accounts';
@@ -14,7 +14,7 @@ const messages = defineMessages({
 
 const AdminTabs: React.FC = () => {
   const intl = useIntl();
-  const match = useRouteMatch();
+  const location = useLocation();
 
   const { data: awaitingApprovalCount } = usePendingUsersCount();
   const { data: pendingReportsCount = 0 } = usePendingReportsCount();
@@ -35,7 +35,7 @@ const AdminTabs: React.FC = () => {
     count: awaitingApprovalCount,
   }];
 
-  return <Tabs items={tabs} activeItem={match.path} />;
+  return <Tabs items={tabs} activeItem={location.pathname} />;
 };
 
 export { AdminTabs as default };

packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx

@@ -1,14 +1,9 @@
-import { useMatches } from '@tanstack/react-router';
+import { Outlet, useMatches } from '@tanstack/react-router';
 import clsx from 'clsx';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Route, Switch } from 'react-router-dom';
 
 import Stack from 'pl-fe/components/ui/stack';
 
-import ChatPageMain from './components/chat-page-main';
-import ChatPageNew from './components/chat-page-new';
-import ChatPageSettings from './components/chat-page-settings';
-import ChatPageShoutbox from './components/chat-page-shoutbox';
 import ChatPageSidebar from './components/chat-page-sidebar';
 
 const SIDEBAR_HIDDEN_PATHS = ['/chats/settings', '/chats/new', '/chats/:chatId', '/chats/shoutbox'];
@@ -70,20 +65,7 @@ const ChatPage: React.FC = () => {
             'hidden sm:block': !isSidebarHidden,
           })}
         >
-          <Switch>
-            <Route path='/chats/new'>
-              <ChatPageNew />
-            </Route>
-            <Route path='/chats/settings'>
-              <ChatPageSettings />
-            </Route>
-            <Route path='/chats/shoutbox'>
-              <ChatPageShoutbox />
-            </Route>
-            <Route>
-              <ChatPageMain />
-            </Route>
-          </Switch>
+          <Outlet />
         </Stack>
       </div>
     </div>

packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -1,7 +1,6 @@
-import { useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Link, useParams } from 'react-router-dom';
 
 import DropdownMenu, { type Menu } from 'pl-fe/components/dropdown-menu';
 import Avatar from 'pl-fe/components/ui/avatar';
@@ -11,6 +10,7 @@ import Stack from 'pl-fe/components/ui/stack';
 import Text from 'pl-fe/components/ui/text';
 import VerificationBadge from 'pl-fe/components/verification-badge';
 import { useChatContext } from 'pl-fe/contexts/chat-context';
+import { chatRoute } from 'pl-fe/features/ui/router';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useBlockAccountMutation, useUnblockAccountMutation, useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship';
 import { useChat, useChatActions, useChats } from 'pl-fe/queries/chats';
@@ -41,7 +41,7 @@ const ChatPageMain = () => {
   const features = useFeatures();
   const navigate = useNavigate();
 
-  const { chatId } = useParams<{ chatId: string }>();
+  const { chatId } = chatRoute.useParams();
 
   const { openModal } = useModalsActions();
   const { data: chat } = useChat(chatId);
@@ -131,14 +131,14 @@ const ChatPageMain = () => {
               onClick={() => navigate({ to: '/chats' })}
             />
 
-            <Link to={`/@${chat.account.acct}`}>
+            <Link to='@{$username}' params={{ username: chat.account.acct }}>
               <Avatar src={chat.account.avatar} alt={chat.account.avatar_description} size={40} className='flex-none' isCat={chat.account.is_cat} username={chat.account.username} />
             </Link>
           </HStack>
 
           <Stack alignItems='start' className='h-11 overflow-hidden'>
             <div className='flex w-full grow items-center space-x-1'>
-              <Link to={`/@${chat.account.acct}`}>
+              <Link to='@{$username}' params={{ username: chat.account.acct }}>
                 <Text weight='bold' size='sm' align='left' truncate>
                   {chat.account.display_name || `@${chat.account.username}`}
                 </Text>

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';

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<typeof useInstance>;
@@ -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 }) => (
+  <>
+    <Layout.Main>
+      {children}
+    </Layout.Main>
+
+    <Layout.Aside />
+  </>
+);
+
+const PendingComponent: React.FC = () => (
+  <FallbackLayout>
+    <ColumnLoading />
+  </FallbackLayout>
+);
+
 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' {

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 = () => {
           <Tabs
             key={`group-tabs-${groupId}`}
             items={tabItems}
-            activeItem={match.path}
+            activeItem={location.pathname}
           />
 
           {renderChildren()}

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<IChatIndex> = ({ params }) => (
+const ChatIndex: React.FC = () => (
   <ChatProvider>
-    <ChatPage chatId={params?.chatId} />
+    <ChatPage />
   </ChatProvider>
 );
 

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);