-
- isActive ? 'header__search--active' : 'header__search'
- }
- to={ROUTES.PROFILE}
+
![]()
{
height={30}
width={30}
/>
-
-
- isActive ? 'header__search--active' : 'header__search'
- }
- to={ROUTES.USERSEARCH}
+
+
![]()
{
height={30}
width={30}
/>
-
-
- isActive ? 'header__search--active' : 'header__search'
- }
- to={ROUTES.LIKEDPOSTS}
+
+
![]()
{
height={30}
width={30}
/>
-
+
diff --git a/src/firebase-config.tsx b/src/firebase-config.tsx
index 52d51e0..ea36b15 100644
--- a/src/firebase-config.tsx
+++ b/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)
diff --git a/src/main.tsx b/src/main.tsx
index 4520253..b58c1a2 100644
--- a/src/main.tsx
+++ b/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(
-
-
-
+
+ {/* */}
+ {/* */}
+ {/* */}
diff --git a/src/new-app.tsx b/src/new-app.tsx
new file mode 100644
index 0000000..52feb46
--- /dev/null
+++ b/src/new-app.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react'
+
+import { Outlet } from '@tanstack/react-router'
+import { useAtom, useAtomValue } from 'jotai'
+
+import { ErrorBoundary, Container, AppFooter, AppHeader } from '@components/index'
+import {
+ SignoutConfirmModal,
+ CreatePostModal,
+ ChangeAvatarModal,
+ EditProfileModal,
+ ViewImageModal
+} from '@components/modals'
+import { Toaster } from '@components/ui/toaster'
+import { isAuthAtom } from '@features/auth/auth'
+import { userIdAtom, openPopupAtom } from '@features/index'
+import { Auth } from '@pages/index'
+
+import { auth } from './firebase-config'
+
+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)
+ })
+
+ return (): void => {
+ unsub()
+ }
+ }, [])
+
+ if (!isAuth) {
+ return
+ }
+
+ return (
+
+
+
+
+
+
+
+ <>{openPopupType === 'edit' && }
+ <>{openPopupType === 'add' && }
+ <>{openPopupType === 'image' && }
+ <>{openPopupType === 'icon' && }
+ <>{openPopupType === 'confirm' && }
+
+ )
+}
diff --git a/src/pages/auser/auser.tsx b/src/pages/auser/auser.tsx
index 0672ccd..de68fa0 100644
--- a/src/pages/auser/auser.tsx
+++ b/src/pages/auser/auser.tsx
@@ -1,7 +1,6 @@
import React from 'react'
import { useAtomValue } from 'jotai'
-import { useParams } from 'react-router-dom'
import { ProfileInfo } from '@components/index'
import { ViewImageModal } from '@components/modals'
@@ -10,8 +9,10 @@ import { useAuserData } from '@hooks/index'
import { Aposts } from './_components/a-posts'
+import { Route as AuserRoute } from '../../routes/auser.$userId'
+
export const Auser = () => {
- const { id } = useParams()
+ const { userId } = AuserRoute.useParams()
const { isLoading, posts, username, status, profileImageUrl } = useAuserData(id)
const openPopupType = useAtomValue(openPopupAtom)
@@ -23,7 +24,7 @@ export const Auser = () => {
username={username}
isLoading={isLoading}
/>
-
+
<>{openPopupType === 'auserimage' &&
}
)
diff --git a/src/pages/chat/_components/submit-message.tsx b/src/pages/chat/_components/submit-message.tsx
index cb8f098..9ec089b 100644
--- a/src/pages/chat/_components/submit-message.tsx
+++ b/src/pages/chat/_components/submit-message.tsx
@@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState } from 'react'
import { FieldValue, serverTimestamp } from 'firebase/firestore'
+import { useL } from '@tanstack/react-router'
import { useLocation } from 'react-router-dom'
import { localStorageKeys } from '@constants/index'
diff --git a/src/pages/userlist/_components/user.tsx b/src/pages/userlist/_components/user.tsx
index 6df807c..89179fb 100644
--- a/src/pages/userlist/_components/user.tsx
+++ b/src/pages/userlist/_components/user.tsx
@@ -1,10 +1,9 @@
import React, { memo } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from '@tanstack/react-router'
import { profile, chat } from '@assets/index'
import { Image } from '@components/index'
-import { ROUTES } from '@constants/index'
interface User {
imgurl: string
@@ -17,30 +16,51 @@ type UserProps = {
user: User
}
-export const User = memo(({ user }: UserProps) => (
-
-
-
-
- {user.name}
- {user.newStatus}
-
-
-
-
-
-
-
-
-
-))
+export const User = memo(({ user }: UserProps) => {
+ const navigate = useNavigate()
+
+ const navigateToUserChat = (): void => {
+ navigate({
+ to: '/chat',
+ state: {
+ //@ts-expect-error -- need
+ name: user.name
+ }
+ })
+ }
+
+ const navigateToUserProfile = (): void => {
+ navigate({
+ to: '/auser/$userId',
+ params: { userId: user.id }
+ })
+ }
+
+ return (
+
+
+
+
+ {user.name}
+ {user.newStatus}
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
new file mode 100644
index 0000000..a7e24bd
--- /dev/null
+++ b/src/routeTree.gen.ts
@@ -0,0 +1,84 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as UsersearchImport } from './routes/usersearch'
+import { Route as LikedPostsImport } from './routes/liked-posts'
+import { Route as ChatImport } from './routes/chat'
+import { Route as IndexImport } from './routes/index'
+import { Route as AuserUserIdImport } from './routes/auser.$userId'
+
+// Create/Update Routes
+
+const UsersearchRoute = UsersearchImport.update({
+ path: '/usersearch',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const LikedPostsRoute = LikedPostsImport.update({
+ path: '/liked-posts',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const ChatRoute = ChatImport.update({
+ path: '/chat',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+ path: '/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const AuserUserIdRoute = AuserUserIdImport.update({
+ path: '/auser/$userId',
+ getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+ interface FileRoutesByPath {
+ '/': {
+ preLoaderRoute: typeof IndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/chat': {
+ preLoaderRoute: typeof ChatImport
+ parentRoute: typeof rootRoute
+ }
+ '/liked-posts': {
+ preLoaderRoute: typeof LikedPostsImport
+ parentRoute: typeof rootRoute
+ }
+ '/usersearch': {
+ preLoaderRoute: typeof UsersearchImport
+ parentRoute: typeof rootRoute
+ }
+ '/auser/$userId': {
+ preLoaderRoute: typeof AuserUserIdImport
+ parentRoute: typeof rootRoute
+ }
+ }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([
+ IndexRoute,
+ ChatRoute,
+ LikedPostsRoute,
+ UsersearchRoute,
+ AuserUserIdRoute,
+])
+
+/* prettier-ignore-end */
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
new file mode 100644
index 0000000..7c67902
--- /dev/null
+++ b/src/routes/__root.tsx
@@ -0,0 +1,7 @@
+import { createRootRoute } from '@tanstack/react-router'
+
+import { App } from '../new-app'
+
+export const Route = createRootRoute({
+ component: App
+})
diff --git a/src/routes/auser.$userId.tsx b/src/routes/auser.$userId.tsx
new file mode 100644
index 0000000..7b7e25e
--- /dev/null
+++ b/src/routes/auser.$userId.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { Auser } from '@pages/index'
+
+export const Route = createFileRoute('/auser/$userId')({
+ component: Auser
+})
diff --git a/src/routes/chat.tsx b/src/routes/chat.tsx
new file mode 100644
index 0000000..c017d01
--- /dev/null
+++ b/src/routes/chat.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { Chat } from '@pages/index'
+
+export const Route = createFileRoute('/chat')({
+ component: Chat,
+})
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 0000000..058ea76
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { Profile } from '@pages/index'
+
+export const Route = createFileRoute('/')({
+ component: Profile
+})
diff --git a/src/routes/liked-posts.tsx b/src/routes/liked-posts.tsx
new file mode 100644
index 0000000..fcb572f
--- /dev/null
+++ b/src/routes/liked-posts.tsx
@@ -0,0 +1,7 @@
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+import { LikedPosts } from '@pages/index'
+
+export const Route = createLazyFileRoute('/liked-posts')({
+ component: LikedPosts
+})
diff --git a/src/routes/usersearch.tsx b/src/routes/usersearch.tsx
new file mode 100644
index 0000000..28012e1
--- /dev/null
+++ b/src/routes/usersearch.tsx
@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { Userlist } from '@pages/index'
+
+export const Route = createFileRoute('/usersearch')({
+ component: Userlist
+})
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..4c914e8 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,14 @@
///
+
+interface ImportMetaEnv {
+ readonly VITE_FIREBASE_API_KEY: string
+ readonly VITE_FIREBASE_AUTH_DOMAIN: string
+ readonly VITE_FIREBASE_PROJECT_ID: string
+ readonly VITE_FIREBASE_STORAGE_BUCKET: string
+ readonly VITE_FIREBASE_MESSAGING_SENDER_ID: string
+ readonly VITE_FIREBASE_APP_ID: string
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv
+}
diff --git a/tsconfig.json b/tsconfig.json
index 6649526..e0706b0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
{
"compilerOptions": {
"target": "ESNext",
+ "types": ["react/experimental"],
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
diff --git a/vite.config.ts b/vite.config.ts
index e27543c..776408e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,12 @@
import path from 'path'
-import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
+import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
+import react from '@vitejs/plugin-react'
import eslint from 'vite-plugin-eslint'
export default defineConfig({
- plugins: [react(), eslint()],
+ plugins: [react(), eslint(), TanStackRouterVite()],
resolve: {
alias: {
'@pages': path.resolve(__dirname, './src/pages'),