split router from App.tsx file

Author: nxhawk

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.1.0-alpine3.14
+FROM node:20-alpine3.18
 
 WORKDIR /svr/app
 

backend/src/app.module.ts

@@ -2,7 +2,7 @@ import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import configuration from './config/configuration';
 import { TypeOrmModule } from '@nestjs/typeorm';
-import { typeOrmAsyncConfig } from 'db/data-source';
+// import { typeOrmAsyncConfig } from 'db/data-source';
 import { UserModule } from './user/user.module';
 import { AuthModule } from './auth/auth.module';
 import { PassportModule } from '@nestjs/passport';
@@ -23,8 +23,18 @@ import { OrderModule } from './order/order.module';
       load: [configuration],
     }),
     PassportModule.register({ session: true }),
-    // TypeOrmModule.forRoot(dataSourceOptions),
-    TypeOrmModule.forRootAsync(typeOrmAsyncConfig),
+    TypeOrmModule.forRoot({
+      type: 'postgres',
+      host: '127.0.0.1',
+      port: 5432,
+      username: 'postgres',
+      database: 'smartphone-shop',
+      password: '12345',
+      entities: ['dist/**/*.entity.{js, ts}'],
+      // autoLoadEntities: true,
+      synchronize: true,
+    }),
+    // TypeOrmModule.forRootAsync(typeOrmAsyncConfig),
     UserModule,
     AuthModule,
     ImageStorageModule,

docker-compose.yml

@@ -2,19 +2,19 @@ version: '3.8'
 
 services:
   postgres:
-    image: postgres:14.2
+    image: postgres:14.2-alpine
     restart: always
     container_name: postgres
     environment:
       POSTGRES_USER: ${DB_USERNAME}
       POSTGRES_PASSWORD: ${DB_PASSWORD}
-      POSTGRES_DB: ${smartphone-shop}
+      POSTGRES_DB: ${DB_DATABASE}
       PGDATA: /var/lib/postgresql/data
     ports:
       - "${DB_PORT}:5432"
     volumes:
       - pg_data:/var/lib/postgresql/data/
-      - ./docker_postgres_init.sql:/docker-entrypoint-initdb.d/docker_postgres_init.sql
+      # - ./docker_postgres_init.sql:/docker-entrypoint-initdb.d/docker_postgres_init.sql
     networks:
       - bp-network
     env_file:
@@ -28,8 +28,6 @@ services:
       context: './backend'
     depends_on:
       - postgres
-    links:
-      - postgres
     volumes:
       - ./backend:/svr/app
       - /svr/app/node_modules
@@ -45,8 +43,8 @@ services:
     build:
       dockerfile: Dockerfile
       context: "./frontend"
-    depends_on:
-      - backend # todo: might not be necessary
+    # depends_on:
+    #   - backend # todo: might not be necessary
     volumes:
       - ./frontend:/usr/app
       - /usr/app/node_modules

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.1.0-alpine3.14
+FROM node:20-alpine3.18
 
 WORKDIR /usr/app
 

frontend/src/App.tsx

@@ -1,63 +1,13 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import Login from './pages/Login'
-import Signup from './pages/Signup'
-import Home from './pages/Home'
-import Layout from './layout/Layout'
-import News from './pages/News'
-import Hiring from './pages/Hiring'
-import About from './pages/About'
-import Maintenance from './pages/Maintenance'
-import Contact from './pages/Contact'
-import AllProduct from './pages/AllProduct'
-import ProductDetails from './pages/ProductDetails'
-import DetailUser from './pages/detailUser'
-import Cart from './pages/Cart'
-import RedirectRoute from './routes/RedirectRoute'
+import { RouterProvider } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import PrivateRoute from './routes/PrivateRoute'
-import CheckLoginRoute from './routes/CheckLoginRoute'
-import ForgotPassword from './pages/ForgotPassword'
-import RegisterSuccess from './pages/RegisterSuccess'
-import VerifyAccount from './pages/VerifyAccount'
-import ButtonSetting from './components/ButtonSetting/ButtonSetting'
-import Settings from './pages/Settings'
+import router from './routers/router'
 
 function App() {
   return (
     <div className='dark:bg-slate-950'>
-      <BrowserRouter>
-        <Routes>
-          <Route path='/' element={<Layout/>}>
-            <Route element={<CheckLoginRoute/>}>
-              <Route index element={<Home/>}/>
-              <Route path='/news' element={<News/>}/>
-              <Route path='/hiring' element={<Hiring/>}/>
-              <Route path='/about' element={<About/>}/>
-              <Route path='/maintenance' element={<Maintenance/>}/>
-              <Route path='/contact' element={<Contact/>}/>
-              <Route path='/showall' element={<AllProduct/>}/>
-              <Route path='/product/:productId' element={<ProductDetails/>}/>
-            
-              // authentication
-              <Route element={<PrivateRoute/>}>
-                <Route path='/detailUser' element={<DetailUser/>}/>
-                <Route path='/cart' element={<Cart/>}/>
-              </Route>
-              <Route path='/settings' element={<Settings/>}/>
-            </Route>
+      <RouterProvider router={router}/>
 
-          </Route>
-          <Route path='/auth' element={<RedirectRoute/>}>
-            <Route path='login' element={<Login/>}/>
-            <Route path='signup' element={<Signup/>}/>
-            <Route path='forgotPassword' element={<ForgotPassword/>}/>
-            <Route path='success' element={<RegisterSuccess/>}/>
-            <Route path='verify/:token' element={<VerifyAccount/>}/>
-          </Route>
-        </Routes>
-        <ButtonSetting/>
-      </BrowserRouter>
       <ToastContainer 
         position="top-center"
         autoClose={2000}

frontend/src/components/ButtonSetting/ButtonSetting.tsx

@@ -1,17 +1,20 @@
 import { IoSettings } from "react-icons/io5";
-import { useNavigate } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 
 const ButtonSetting = () => {
   const navigate = useNavigate();
   return (
-    <button className='fixed bottom-2'
-    style={{left: 'calc(100vw - 140px)' }} 
-    onClick={() => {
-      navigate('/settings')
-    }}
-    >
-        <IoSettings className="text-3xl text-gray-500 opacity-40 hover:opacity-100"/>
-    </button>
+    <div>
+      <Outlet/>
+      <button className='fixed bottom-2'
+      style={{left: 'calc(100vw - 140px)' }} 
+      onClick={() => {
+        navigate('/settings')
+      }}
+      >
+          <IoSettings className="text-3xl text-gray-500 opacity-40 hover:opacity-100"/>
+      </button>
+    </div>
   )
 }
 

frontend/src/pages/Cart.tsx

@@ -43,7 +43,7 @@ const Cart = () => {
   })
 
   if (isLoading) return <div>Loading...</div>
-  if (isError) return navigate('/auth/login');
+  if (isError) navigate('/auth/login');
 
   return (
     <DocumentMeta {...CartMeta}>