restructure routes

e2e/smoke.spec.ts

@@ -11,7 +11,6 @@ test('smoke', async ({ page }) => {
   });
 
   await page.goto('/');
-  await page.waitForTimeout(1000);
   await expect(page.getByRole('heading', { name: 'Bulletproof React' })).toBeVisible();
   await page.getByRole('button', { name: 'Get started' }).click();
 
@@ -41,10 +40,8 @@ test('smoke', async ({ page }) => {
 
   // log out:
   await page.getByRole('button', { name: 'Open user menu' }).click();
-  await page.getByRole('menuitem', { name: 'Sign out' }).click();
-  await page.waitForURL('/');
-  await page.getByRole('button', { name: 'Get started' }).click();
-  await page.waitForURL('/auth/login');
+  await page.getByRole('menuitem', { name: 'Sign Out' }).click();
+  await page.waitForURL('/auth/login?redirectTo=%2Fapp');
 
   // log in:
   await page.getByLabel('Email Address').click();
@@ -57,7 +54,6 @@ test('smoke', async ({ page }) => {
   ).toBeVisible();
 
   // create discussion:
-
   await page.getByRole('link', { name: 'Discussions' }).click();
   await page.waitForURL('/app/discussions');
 
@@ -72,13 +68,10 @@ test('smoke', async ({ page }) => {
   // visit discussion page:
   await page.getByRole('link', { name: 'View' }).click();
 
-  // todo: assert the page:
-  await page.waitForTimeout(1000);
   await expect(page.getByRole('heading', { name: discussion.title })).toBeVisible();
   await expect(page.getByText(discussion.body)).toBeVisible();
 
   // update discussion:
-
   await page.getByRole('button', { name: 'Update Discussion' }).click();
   await page.getByLabel('Title').click();
   await page.getByLabel('Title').fill(`${discussion.title} - updated`);

src/components/Layout/MainLayout.tsx

@@ -58,26 +58,9 @@ const SideNavigation = () => {
   );
 };
 
-type UserNavigationItem = {
-  name: string;
-  to: string;
-  onClick?: () => void;
-};
-
 const UserNavigation = () => {
   const { mutate: logout } = useLogout();
 
-  const userNavigation = [
-    { name: 'Your Profile', to: './profile' },
-    {
-      name: 'Sign out',
-      to: '',
-      onClick: () => {
-        logout({});
-      },
-    },
-  ].filter(Boolean) as UserNavigationItem[];
-
   return (
     <Menu as="div" className="relative ml-3">
       {({ open }) => (
@@ -102,22 +85,29 @@ const UserNavigation = () => {
               static
               className="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 focus:outline-none"
             >
-              {userNavigation.map((item) => (
-                <Menu.Item key={item.name}>
-                  {({ active }) => (
-                    <Link
-                      onClick={item.onClick}
-                      to={item.to}
-                      className={clsx(
-                        active ? 'bg-gray-100' : '',
-                        'block px-4 py-2 text-sm text-gray-700'
-                      )}
-                    >
-                      {item.name}
-                    </Link>
-                  )}
-                </Menu.Item>
-              ))}
+              <Menu.Item>
+                {({ active }) => (
+                  <Link
+                    to="./profile"
+                    className={clsx(
+                      active ? 'bg-gray-100' : '',
+                      'block px-4 py-2 text-sm text-gray-700'
+                    )}
+                  >
+                    Your Profile
+                  </Link>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {() => (
+                  <button
+                    onClick={() => logout({})}
+                    className={clsx('block px-4 py-2 text-sm text-gray-700')}
+                  >
+                    Sign Out
+                  </button>
+                )}
+              </Menu.Item>
             </Menu.Items>
           </Transition>
         </>

src/features/auth/components/LoginForm.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import * as z from 'zod';
 
 import { Button } from '@/components/Elements';
@@ -22,6 +22,8 @@ type LoginFormProps = {
 
 export const LoginForm = ({ onSuccess }: LoginFormProps) => {
   const login = useLogin();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get('redirectTo');
 
   return (
     <div>
@@ -56,7 +58,10 @@ export const LoginForm = ({ onSuccess }: LoginFormProps) => {
       </Form>
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
-          <Link to="../register" className="font-medium text-blue-600 hover:text-blue-500">
+          <Link
+            to={`/auth/register${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            className="font-medium text-blue-600 hover:text-blue-500"
+          >
             Register
           </Link>
         </div>

src/features/auth/components/RegisterForm.tsx

@@ -1,6 +1,6 @@
 import { Switch } from '@headlessui/react';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import * as z from 'zod';
 
 import { Button } from '@/components/Elements';
@@ -40,6 +40,8 @@ type RegisterFormProps = {
 export const RegisterForm = ({ onSuccess }: RegisterFormProps) => {
   const registering = useRegister();
   const [chooseTeam, setChooseTeam] = React.useState(false);
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get('redirectTo');
 
   const teamsQuery = useTeams({
     config: {
@@ -133,7 +135,10 @@ export const RegisterForm = ({ onSuccess }: RegisterFormProps) => {
       </Form>
       <div className="mt-2 flex items-center justify-end">
         <div className="text-sm">
-          <Link to="../login" className="font-medium text-blue-600 hover:text-blue-500">
+          <Link
+            to={`/auth/login${redirectTo ? `?redirectTo=${encodeURIComponent(redirectTo)}` : ''}`}
+            className="font-medium text-blue-600 hover:text-blue-500"
+          >
             Log In
           </Link>
         </div>

src/features/auth/index.ts

@@ -1,6 +1,8 @@
 export * from './lib/auth';
 export * from './lib/authorization';
+export * from './lib/protected-route';
 
-export * from './routes';
+export * from './routes/Register';
+export * from './routes/Login';
 
 export * from './types';

src/features/auth/lib/auth.tsx

@@ -29,7 +29,7 @@ async function registerFn(data: RegisterCredentialsDTO) {
 
 async function logoutFn() {
   await logout();
-  window.location.assign(window.location.origin as unknown as string);
+  // window.location.assign(window.location.origin as unknown as string);
 }
 
 const authConfig = {

src/features/auth/lib/protected-route.tsx

@@ -0,0 +1,16 @@
+import { Navigate, useLocation } from 'react-router-dom';
+
+import { useUser } from './auth';
+
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const user = useUser();
+  const location = useLocation();
+
+  if (!user.data) {
+    return (
+      <Navigate to={`/auth/login?redirectTo=${encodeURIComponent(location.pathname)}`} replace />
+    );
+  }
+
+  return children;
+};

src/features/auth/routes/Login.tsx

@@ -1,14 +1,18 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { Layout } from '../components/Layout';
 import { LoginForm } from '../components/LoginForm';
 
-export const Login = () => {
+export const LoginRoute = () => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get('redirectTo');
 
   return (
     <Layout title="Log in to your account">
-      <LoginForm onSuccess={() => navigate('/app')} />
+      <LoginForm
+        onSuccess={() => navigate(`${redirectTo ? `${redirectTo}` : '/app'}`, { replace: true })}
+      />
     </Layout>
   );
 };

src/features/auth/routes/Register.tsx

@@ -1,14 +1,18 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { Layout } from '../components/Layout';
 import { RegisterForm } from '../components/RegisterForm';
 
-export const Register = () => {
+export const RegisterRoute = () => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get('redirectTo');
 
   return (
     <Layout title="Register your account">
-      <RegisterForm onSuccess={() => navigate('/app')} />
+      <RegisterForm
+        onSuccess={() => navigate(`${redirectTo ? `${redirectTo}` : '/app'}`, { replace: true })}
+      />
     </Layout>
   );
 };

src/features/discussions/index.ts

@@ -1,2 +1,3 @@
 export * from './types';
-export * from './routes';
+export * from './routes/Discussion';
+export * from './routes/Discussions';

src/features/discussions/routes/Discussion.tsx

@@ -9,7 +9,7 @@ import { formatDate } from '@/utils/format';
 import { useDiscussion } from '../api/getDiscussion';
 import { UpdateDiscussion } from '../components/UpdateDiscussion';
 
-export const Discussion = () => {
+export const DiscussionRoute = () => {
   const params = useParams();
   const discussionId = params.discussionId as string;
   const discussionQuery = useDiscussion({ discussionId });

src/features/discussions/routes/Discussions.tsx

@@ -3,7 +3,7 @@ import { ContentLayout } from '@/components/Layout';
 import { CreateDiscussion } from '../components/CreateDiscussion';
 import { DiscussionsList } from '../components/DiscussionsList';
 
-export const Discussions = () => {
+export const DiscussionsRoute = () => {
   return (
     <ContentLayout title="Discussions">
       <div className="flex justify-end">

src/features/discussions/routes/__tests__/Discussion.test.tsx

@@ -11,7 +11,7 @@ import {
   within,
 } from '@/test/test-utils';
 
-import { Discussion } from '../Discussion';
+import { DiscussionRoute } from '../Discussion';
 
 vi.mock('react-router-dom', () => ({
   ...vi.importActual('react-router-dom'), // keep the rest of the exports intact
@@ -27,7 +27,7 @@ const renderDiscussion = async () => {
     discussionId: fakeDiscussion.id,
   }));
 
-  const utils = await renderApp(<Discussion />, {
+  const utils = await renderApp(<DiscussionRoute />, {
     user: fakeUser,
   });
 

src/features/discussions/routes/__tests__/Discussions.test.tsx

@@ -4,7 +4,7 @@ import { discussionGenerator } from '@/test/data-generators';
 import { renderApp, screen, userEvent, waitFor, within } from '@/test/test-utils';
 import { formatDate } from '@/utils/format';
 
-import { Discussions } from '../Discussions';
+import { DiscussionsRoute } from '../Discussions';
 
 beforeAll(() => {
   vi.spyOn(console, 'error').mockImplementation(() => {});
@@ -15,7 +15,7 @@ afterAll(() => {
 });
 
 test('should create, render and delete discussions', async () => {
-  await renderApp(<Discussions />);
+  await renderApp(<DiscussionsRoute />);
 
   const newDiscussion = discussionGenerator();
 

src/features/misc/index.ts

@@ -1 +1,3 @@
-export * from './routes';
+export * from './routes/Landing';
+export * from './routes/NotFound';
+export * from './routes/Dashboard';

src/features/misc/routes/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { ContentLayout } from '@/components/Layout';
 import { useUser, ROLES } from '@/features/auth';
 
-export const Dashboard = () => {
+export const DashboardRoute = () => {
   const user = useUser();
   return (
     <ContentLayout title="Dashboard">

src/features/misc/routes/Landing.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/Elements';
 import { Head } from '@/components/Head';
 import { useUser } from '@/features/auth';
 
-export const Landing = () => {
+export const LandingRoute = () => {
   const navigate = useNavigate();
   const user = useUser();
 

src/features/misc/routes/NotFound.tsx

@@ -1,3 +1,13 @@
-export const NotFound = () => {
-  return <div>404</div>;
+import { Link } from '@/components/Elements';
+
+export const NotFoundRoute = () => {
+  return (
+    <div className="mt-52 flex flex-col items-center font-semibold">
+      <h1>404 - Not Found</h1>
+      <p>Sorry, the page you are looking for does not exist.</p>
+      <Link to="/" replace>
+        Go to Home
+      </Link>
+    </div>
+  );
 };

src/features/users/routes/Profile.tsx

@@ -14,7 +14,7 @@ const Entry = ({ label, value }: EntryProps) => (
   </div>
 );
 
-export const Profile = () => {
+export const ProfileRoute = () => {
   const user = useUser();
 
   if (!user.data) return null;