migration from react-router-dom to tanstack-router

.env.example

@@ -0,0 +1,6 @@
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_AUTH_DOMAIN=
+VITE_FIREBASE_PROJECT_ID=
+VITE_FIREBASE_STORAGE_BUCKET=
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+VITE_FIREBASE_APP_ID=

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package.json

@@ -20,23 +20,24 @@
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
         "@tanstack/react-query": "^5.17.8",
+        "@tanstack/react-router": "^1.17.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "date-fns": "^2.29.3",
         "firebase": "^9.17.1",
         "jotai": "^2.6.4",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^0.0.0-experimental-fb10a2c66-20240228",
+        "react-dom": "^0.0.0-experimental-fb10a2c66-20240228",
         "react-hook-form": "^7.49.3",
         "react-loader-spinner": "^6.1.6",
-        "react-router-dom": "^6.22.0",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.22.4"
     },
     "devDependencies": {
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
+        "@tanstack/router-vite-plugin": "^1.16.5",
+        "@types/react": "^18.2.61",
+        "@types/react-dom": "^18.2.19",
         "@typescript-eslint/eslint-plugin": "^6.13.2",
         "@typescript-eslint/parser": "^6.13.2",
         "@vitejs/plugin-react": "^3.1.0",

src/App.tsx

@@ -1,96 +1,96 @@
-import React, { lazy, Suspense, useEffect } from 'react'
+// import React, { lazy, Suspense, useEffect } from 'react'
 
-import { useAtom, useAtomValue } from 'jotai'
-import { Routes, Route } from 'react-router-dom'
+// import { useAtom, useAtomValue } from 'jotai'
+// import { Routes, Route } from 'react-router-dom'
 
-import { ErrorBoundary, Container, AppFooter, AppHeader, ProfileLoading } from '@components/index'
-import {
-    SignoutConfirmModal,
-    CreatePostModal,
-    ChangeAvatarModal,
-    EditProfileModal,
-    ViewImageModal
-} from '@components/modals'
-import { Toaster } from '@components/ui/toaster'
-import { ROUTES } from '@constants/index'
-import { isAuthAtom } from '@features/auth/auth'
-import { userIdAtom, openPopupAtom } from '@features/index'
-import { Profile, Auth, Chat } from '@pages/index'
-import { UserlistLoading } from '@pages/userlist/_components/userlist-loading'
+// import { ErrorBoundary, Container, AppFooter, AppHeader, ProfileLoading } from '@components/index'
+// import {
+//     SignoutConfirmModal,
+//     CreatePostModal,
+//     ChangeAvatarModal,
+//     EditProfileModal,
+//     ViewImageModal
+// } from '@components/modals'
+// import { Toaster } from '@components/ui/toaster'
+// import { ROUTES } from '@constants/index'
+// import { isAuthAtom } from '@features/auth/auth'
+// import { userIdAtom, openPopupAtom } from '@features/index'
+// import { Profile, Auth, Chat } from '@pages/index'
+// import { UserlistLoading } from '@pages/userlist/_components/userlist-loading'
 
-import { auth } from './firebase-config'
+// import { auth } from './firebase-config'
 
-const Auser = lazy(() => import('@pages/auser/auser'))
-const LikedPosts = lazy(() => import('@pages/liked-posts/liked-posts'))
-const Userlist = lazy(() => import('@pages/userlist/userlist'))
+// const Auser = lazy(() => import('@pages/auser/auser'))
+// const LikedPosts = lazy(() => import('@pages/liked-posts/liked-posts'))
+// const Userlist = lazy(() => import('@pages/userlist/userlist'))
 
-export const App = (): JSX.Element => {
-    const openPopupType = useAtomValue(openPopupAtom)
-    const [uid, setUid] = useAtom(userIdAtom)
-    const isAuth = useAtomValue(isAuthAtom)
+// export const App = (): JSX.Element => {
+//     const openPopupType = useAtomValue(openPopupAtom)
+//     const [uid, setUid] = useAtom(userIdAtom)
+//     const isAuth = useAtomValue(isAuthAtom)
 
-    useEffect(() => {
-        const unsub = auth.onIdTokenChanged(() => {
-            setUid(auth.currentUser?.uid)
-        })
+//     useEffect(() => {
+//         const unsub = auth.onIdTokenChanged(() => {
+//             setUid(auth.currentUser?.uid)
+//         })
 
-        return (): void => {
-            unsub()
-        }
-    }, [])
+//         return (): void => {
+//             unsub()
+//         }
+//     }, [])
 
-    if (!isAuth) {
-        return <Auth />
-    }
+//     if (!isAuth) {
+//         return <Auth />
+//     }
 
-    return (
-        <ErrorBoundary>
-            <Container>
-                <AppHeader />
-                <Routes>
-                    <Route path={ROUTES.PROFILE} element={<Profile />} />
-                    <Route
-                        path={ROUTES.LIKEDPOSTS}
-                        element={
-                            <Suspense fallback={<ProfileLoading />}>
-                                <LikedPosts />
-                            </Suspense>
-                        }
-                    />
-                    <Route
-                        path={ROUTES.USERSEARCH}
-                        element={
-                            <Suspense
-                                fallback={
-                                    <main className="search">
-                                        <ul className="search__userlist">
-                                            <UserlistLoading />
-                                        </ul>
-                                    </main>
-                                }
-                            >
-                                <Userlist />
-                            </Suspense>
-                        }
-                    />
-                    <Route
-                        path={ROUTES.AUSER}
-                        element={
-                            <Suspense fallback={<ProfileLoading />}>
-                                <Auser />
-                            </Suspense>
-                        }
-                    />
-                    <Route path={ROUTES.CHAT} element={<Chat />} />
-                </Routes>
-                <Toaster />
-                <AppFooter />
-            </Container>
-            <>{openPopupType === 'edit' && <EditProfileModal />}</>
-            <>{openPopupType === 'add' && <CreatePostModal />}</>
-            <>{openPopupType === 'image' && <ViewImageModal id={uid} />}</>
-            <>{openPopupType === 'icon' && <ChangeAvatarModal />}</>
-            <>{openPopupType === 'confirm' && <SignoutConfirmModal />}</>
-        </ErrorBoundary>
-    )
-}
+//     return (
+//         <ErrorBoundary>
+//             <Container>
+//                 <AppHeader />
+//                 <Routes>
+//                     <Route path={ROUTES.PROFILE} element={<Profile />} />
+//                     <Route
+//                         path={ROUTES.LIKEDPOSTS}
+//                         element={
+//                             <Suspense fallback={<ProfileLoading />}>
+//                                 <LikedPosts />
+//                             </Suspense>
+//                         }
+//                     />
+//                     <Route
+//                         path={ROUTES.USERSEARCH}
+//                         element={
+//                             <Suspense
+//                                 fallback={
+//                                     <main className="search">
+//                                         <ul className="search__userlist">
+//                                             <UserlistLoading />
+//                                         </ul>
+//                                     </main>
+//                                 }
+//                             >
+//                                 <Userlist />
+//                             </Suspense>
+//                         }
+//                     />
+//                     <Route
+//                         path={ROUTES.AUSER}
+//                         element={
+//                             <Suspense fallback={<ProfileLoading />}>
+//                                 <Auser />
+//                             </Suspense>
+//                         }
+//                     />
+//                     <Route path={ROUTES.CHAT} element={<Chat />} />
+//                 </Routes>
+//                 <Toaster />
+//                 <AppFooter />
+//             </Container>
+//             <>{openPopupType === 'edit' && <EditProfileModal />}</>
+//             <>{openPopupType === 'add' && <CreatePostModal />}</>
+//             <>{openPopupType === 'image' && <ViewImageModal id={uid} />}</>
+//             <>{openPopupType === 'icon' && <ChangeAvatarModal />}</>
+//             <>{openPopupType === 'confirm' && <SignoutConfirmModal />}</>
+//         </ErrorBoundary>
+//     )
+// }

src/components/app-header/app-header.tsx

@@ -1,10 +1,9 @@
 import React, { memo } from 'react'
 
+import { Link } from '@tanstack/react-router'
 import { useSetAtom } from 'jotai'
-import { NavLink } from 'react-router-dom'
 
 import { meetsLogo, search, likeClrWhite, profile } from '@assets/index'
-import { ROUTES } from '@constants/routes'
 import { openPopupAtom } from '@features/index'
 
 export const AppHeader = memo(() => {
@@ -20,11 +19,12 @@ export const AppHeader = memo(() => {
                 height={40}
             />
             <div className="header__routes">
-                <NavLink
-                    className={({ isActive }) =>
-                        isActive ? 'header__search--active' : 'header__search'
-                    }
-                    to={ROUTES.PROFILE}
+                <Link
+                    to="/"
+                    activeProps={{
+                        className: 'header__search--active'
+                    }}
+                    className="header__search"
                 >
                     <img
                         className="header__icon"
@@ -33,12 +33,13 @@ export const AppHeader = memo(() => {
                         height={30}
                         width={30}
                     />
-                </NavLink>
-                <NavLink
-                    className={({ isActive }) =>
-                        isActive ? 'header__search--active' : 'header__search'
-                    }
-                    to={ROUTES.USERSEARCH}
+                </Link>
+                <Link
+                    activeProps={{
+                        className: 'header__search--active'
+                    }}
+                    className="header__search"
+                    to={'/usersearch'}
                 >
                     <img
                         className="header__icon"
@@ -47,12 +48,13 @@ export const AppHeader = memo(() => {
                         height={30}
                         width={30}
                     />
-                </NavLink>
-                <NavLink
-                    className={({ isActive }) =>
-                        isActive ? 'header__search--active' : 'header__search'
-                    }
-                    to={ROUTES.LIKEDPOSTS}
+                </Link>
+                <Link
+                    activeProps={{
+                        className: 'header__search--active'
+                    }}
+                    className="header__search"
+                    to={'/likedposts'}
                 >
                     <img
                         className="header__liked-icon header__icon"
@@ -61,7 +63,7 @@ export const AppHeader = memo(() => {
                         height={30}
                         width={30}
                     />
-                </NavLink>
+                </Link>
                 <button onClick={() => setOpenPopup('confirm')} className="signout" type="button">
                     Sign Out
                 </button>

src/firebase-config.tsx

@@ -4,12 +4,12 @@ import { getAuth, GoogleAuthProvider } from 'firebase/auth'
 import 'firebase/compat/auth'
 
 const firebaseConfig = {
-    apiKey: 'AIzaSyB3sT-KmaS8DmtR3Yi2BNq1i81LitJrvjg',
-    authDomain: 'meets-124bc.firebaseapp.com',
-    projectId: 'meets-124bc',
-    storageBucket: 'meets-124bc.appspot.com',
-    messagingSenderId: '105615395071',
-    appId: '1:105615395071:web:94a40cd9cd47a508afa4ca'
+    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+    appId: import.meta.env.VITE_FIREBASE_APP_ID
 }
 
 export const app = initializeApp(firebaseConfig)

src/main.tsx

@@ -1,14 +1,24 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
-import { BrowserRouter } from 'react-router-dom'
+// import { BrowserRouter } from 'react-router-dom'
 
 import './styles/index.scss'
 
 import { ErrorBoundary } from '@components/error-boundary/error-boundary'
 
-import { App } from './App'
+// import { App } from './App'
+import { routeTree } from './routeTree.gen'
+
+const router = createRouter({ routeTree })
+
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: typeof router
+    }
+}
 
 const queryClient = new QueryClient()
 
@@ -18,9 +28,10 @@ root.render(
     <React.StrictMode>
         <ErrorBoundary>
             <QueryClientProvider client={queryClient}>
-                <BrowserRouter>
-                    <App />
-                </BrowserRouter>
+                <RouterProvider router={router} />
+                {/* <BrowserRouter> */}
+                    {/* <App /> */}
+                {/* </BrowserRouter> */}
             </QueryClientProvider>
         </ErrorBoundary>
     </React.StrictMode>