feat: migrate from paths constant to new route management system

inertia/components/common/navigation/back_to_dashboard.tsx

@@ -1,6 +1,6 @@
 import KEYS from '#constants/keys';
-import PATHS from '#constants/paths';
 import { router } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { ReactNode } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
@@ -13,7 +13,7 @@ export default function BackToDashboard({ children }: { children: ReactNode }) {
   useHotkeys(
     KEYS.ESCAPE_KEY,
     () => {
-      router.visit(appendCollectionId(PATHS.DASHBOARD, collectionId));
+      router.visit(appendCollectionId(route('dashboard').url, collectionId));
     },
     { enabled: globalHotkeysEnabled, enableOnFormTags: ['INPUT'] }
   );

inertia/components/dashboard/collection/collection_container.tsx

@@ -21,7 +21,7 @@ const LinksWrapper = styled.div({
 const CollectionHeaderWrapper = styled.h2(({ theme }) => ({
   fontWeight: 400,
   color: theme.colors.font,
-  paddingInline: '0.8em 1.1em',
+  paddingRight: '1.1em',
   display: 'flex',
   gap: '0.4em',
   alignItems: 'center',

inertia/components/dashboard/collection/header/collection_controls.tsx

@@ -1,5 +1,5 @@
-import PATHS from '#constants/paths';
 import type Collection from '#models/collection';
+import { route } from '@izzyjs/route/client';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
 import { IoIosAddCircleOutline } from 'react-icons/io';
@@ -14,16 +14,19 @@ const CollectionControls = ({
   collectionId: Collection['id'];
 }) => (
   <Dropdown label={<BsThreeDotsVertical />} svgSize={18}>
-    <DropdownItemLink href={PATHS.LINK.CREATE}>
+    <DropdownItemLink href={route('link.create-form').url}>
       <IoIosAddCircleOutline /> Add
     </DropdownItemLink>
     <DropdownItemLink
-      href={appendCollectionId(PATHS.COLLECTION.EDIT, collectionId)}
+      href={appendCollectionId(route('collection.edit-form').url, collectionId)}
     >
       <GoPencil /> Edit
     </DropdownItemLink>
     <DropdownItemLink
-      href={appendCollectionId(PATHS.COLLECTION.REMOVE, collectionId)}
+      href={appendCollectionId(
+        route('collection.delete-form').url,
+        collectionId
+      )}
       danger
     >
       <IoTrashOutline /> Delete

inertia/components/dashboard/link/link_controls.tsx

@@ -1,7 +1,7 @@
-import PATHS from '#constants/paths';
 import type Link from '#models/link';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { route } from '@izzyjs/route/client';
 import { useCallback } from 'react';
 import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
 import { BsThreeDotsVertical } from 'react-icons/bs';
@@ -48,9 +48,12 @@ export default function LinkControls({ link }: { link: Link }) {
   );
 
   const onFavorite = () => {
+    const editRoute = route('link.edit', {
+      params: { id: link.id },
+    });
     makeRequest({
-      url: `${PATHS.API.LINK}/${link.id}`,
-      method: 'PUT',
+      url: editRoute.url,
+      method: editRoute.method,
       body: {
         name: link.name,
         url: link.url,
@@ -80,12 +83,18 @@ export default function LinkControls({ link }: { link: Link }) {
         )}
       </StartItem>
       <DropdownItemLink
-        href={appendCollectionId(PATHS.LINK.EDIT, link.collectionId)}
+        href={appendCollectionId(
+          route('link.edit-form').url,
+          link.collectionId
+        )}
       >
         <GoPencil /> Edit
       </DropdownItemLink>
       <DropdownItemLink
-        href={appendCollectionId(PATHS.LINK.REMOVE, link.collectionId)}
+        href={appendCollectionId(
+          route('link.delete-form').url,
+          link.collectionId
+        )}
         danger
       >
         <IoTrashOutline /> Delete

inertia/components/dashboard/link/no_item.tsx

@@ -1,6 +1,6 @@
-import PATHS from '#constants/paths';
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { useTranslation } from 'react-i18next';
 import useActiveCollection from '~/hooks/use_active_collection';
 import { appendCollectionId } from '~/lib/navigation';
@@ -30,7 +30,9 @@ export function NoCollection() {
   return (
     <NoCollectionStyle>
       <Text>{t('select-collection')}</Text>
-      <Link href={PATHS.COLLECTION.CREATE}>{t('or-create-one')}</Link>
+      <Link href={route('collection.create-form').url}>
+        {t('or-create-one')}
+      </Link>
     </NoCollectionStyle>
   );
 }
@@ -51,7 +53,12 @@ export function NoLink() {
           ),
         }}
       />
-      <Link href={appendCollectionId(PATHS.LINK.CREATE, activeCollection?.id)}>
+      <Link
+        href={appendCollectionId(
+          route('link.create-form').url,
+          activeCollection?.id
+        )}
+      >
         {t('link.create')}
       </Link>
     </NoCollectionStyle>

inertia/components/footer/footer.tsx

@@ -4,6 +4,7 @@ import { Link } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import ExternalLink from '~/components/common/external_link';
 import packageJson from '../../../package.json';
+import { route } from '@izzyjs/route/client';
 
 const FooterStyle = styled.footer(({ theme }) => ({
   fontSize: '0.9em',
@@ -21,9 +22,9 @@ export default function Footer() {
   return (
     <FooterStyle>
       <div className="row">
-        <Link href={PATHS.PRIVACY}>{t('privacy')}</Link>
+        <Link href={route('privacy').url}>{t('privacy')}</Link>
         {' • '}
-        <Link href={PATHS.TERMS}>{t('terms')}</Link>
+        <Link href={route('terms').url}>{t('terms')}</Link>
         {' • '}
         <ExternalLink href={PATHS.EXTENSION}>Extension</ExternalLink>
       </div>

inertia/components/layouts/form_layout.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { FormEvent, ReactNode } from 'react';
 import Button from '~/components/common/form/_button';
 import Form from '~/components/common/form/_form';
-import BaseLayout from './_base_layout';
 import { appendCollectionId } from '~/lib/navigation';
-import PATHS from '#constants/paths';
+import BaseLayout from './_base_layout';
 
 const FormLayoutStyle = styled.div(({ theme }) => ({
   height: 'fit-content',
@@ -49,7 +49,7 @@ const FormLayout = ({
         </Button>
       </Form>
       {!disableHomeLink && (
-        <Link href={appendCollectionId(PATHS.DASHBOARD, collectionId)}>
+        <Link href={appendCollectionId(route('dashboard').url, collectionId)}>
           ← Back to home
         </Link>
       )}

inertia/components/navbar/navbar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
 import { IoIosLogOut } from 'react-icons/io';
 import Dropdown from '~/components/common/dropdown/dropdown';
 import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
@@ -50,7 +51,7 @@ export default function Navbar() {
     <Nav>
       <NavList>
         <li>
-          <Link href={PATHS.HOME} css={{ fontSize: '24px' }}>
+          <Link href={route('home').url} css={{ fontSize: '24px' }}>
             MyLinks
           </Link>
         </li>
@@ -70,7 +71,7 @@ export default function Navbar() {
         {isAuthenticated && !!user ? (
           <>
             <li>
-              <Link href={PATHS.DASHBOARD}>Dashboard</Link>
+              <Link href={route('dashboard').url}>Dashboard</Link>
             </li>
             <li>
               <Dropdown
@@ -85,7 +86,7 @@ export default function Navbar() {
                   </UserCard>
                 }
               >
-                <DropdownItemLink href={PATHS.AUTH.LOGOUT} danger>
+                <DropdownItemLink href={route('auth.logout').url} danger>
                   <IoIosLogOut /> Logout
                 </DropdownItemLink>
               </Dropdown>
@@ -93,7 +94,7 @@ export default function Navbar() {
           </>
         ) : (
           <li>
-            <Link href={PATHS.AUTH.LOGIN}>Login</Link>
+            <Link href={route('auth.login').url}>Login</Link>
           </li>
         )}
       </NavList>

inertia/lib/search.tsx

@@ -1,6 +1,7 @@
-import PATHS from '#constants/paths';
 import Collection from '#models/collection';
 import Link from '#models/link';
+import { route } from '@izzyjs/route/client';
+import { appendCollectionId } from '~/lib/navigation';
 import { SearchItem, SearchResult } from '~/types/search';
 
 export function buildSearchItem(
@@ -13,7 +14,7 @@ export function buildSearchItem(
     url:
       type === 'link'
         ? (item as Link).url
-        : `${PATHS.DASHBOARD}?collectionId=${item.id}`,
+        : appendCollectionId(route('dashboard').url, item.id),
     type,
     collection: type === 'link' ? (item as Link).collection : undefined,
   };

inertia/pages/dashboard.tsx

@@ -1,5 +1,4 @@
 import KEYS from '#constants/keys';
-import PATHS from '#constants/paths';
 import type Collection from '#models/collection';
 import Link from '#models/link';
 import styled from '@emotion/styled';
@@ -116,14 +115,16 @@ function DashboardProviders(
   useHotkeys(
     KEYS.OPEN_CREATE_LINK_KEY,
     () => {
-      router.visit(`${PATHS.LINK.CREATE}?collectionId=${activeCollection?.id}`);
+      router.visit(
+        appendCollectionId(route('link.create-form').url, activeCollection?.id)
+      );
     },
     { enabled: globalHotkeysEnabled }
   );
   useHotkeys(
     KEYS.OPEN_CREATE_COLLECTION_KEY,
     () => {
-      router.visit(PATHS.COLLECTION.CREATE);
+      router.visit(route('collection.create-form').url);
     },
     { enabled: globalHotkeysEnabled }
   );

inertia/pages/login.tsx

@@ -1,10 +1,9 @@
+import { route } from '@izzyjs/route/client';
 import ContentLayout from '~/components/layouts/content_layout';
-import PATHS from '../../app/constants/paths';
 
-export default function LoginPage() {
-  return (
-    <ContentLayout>
-      <a href={PATHS.AUTH.GOOGLE}>Continue with Google</a>
-    </ContentLayout>
-  );
-}
+const LoginPage = () => (
+  <ContentLayout>
+    <a href={route('auth.google').url}>Continue with Google</a>
+  </ContentLayout>
+);
+export default LoginPage;