TickLabVN · ngyngcphu · Nov 24, 2023 · Sep 15, 2023 · Sep 16, 2023 · Sep 18, 2023
diff --git a/.barrelsby.json b/.barrelsby.json
@@ -1,6 +1,10 @@
 {
   "directory": [
-    "./src/components",
+    "./src/components/common",
+    "./src/components/home",
+    "./src/components/order/common",
+    "./src/components/order/mobile",
+    "./src/components/order/desktop",
     "./src/constants",
     "./src/hooks",
     "./src/interfaces",

diff --git a/.env.example b/.env.example
@@ -1 +1,2 @@
+# This file is not allowed to be deleted, because it represents which environment variables to use when the project is open-source.
 VITE_BACKEND_URL=
diff --git a/.eslintrc b/.eslintrc
@@ -3,10 +3,12 @@
     "extends": [
         "prettier",
         "plugin:@typescript-eslint/recommended",
-        "plugin:react-hooks/recommended"
+        "plugin:react-hooks/recommended",
+        "plugin:@tanstack/eslint-plugin-query/recommended"
     ],
     "plugins": [
-        "@typescript-eslint"
+        "@typescript-eslint",
+        "@tanstack/query"
     ],
     "parserOptions": {
         "ecmaVersion": 2018,
@@ -21,6 +23,10 @@
         "@typescript-eslint/no-inferrable-types": 0,
         "@typescript-eslint/no-unused-vars": 2,
         "@typescript-eslint/no-var-requires": 0,
-        "eqeqeq": "error"
+        "@tanstack/query/exhaustive-deps": "error",
+        "@tanstack/query/no-rest-destructuring": "warn",
+        "@tanstack/query/stable-query-client": "error",
+        "eqeqeq": "error",
+        "no-console": "error"
     }
 }
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -1,24 +1,39 @@
-name: CD
+name: Staging
 
 on:
   push:
     branches: ['main']
     paths-ignore:
       - '*.md'
+
 env:
   REGISTRY: ghcr.io
   IMAGE_NAME: ticklabvn/ssps-fe
   ORG_USERNAME: ${{ github.actor }}
-
+      
 permissions:
   contents: write
   pull-requests: write
   packages: write
 
 jobs:
+  release:
+    runs-on: ubuntu-latest
+    outputs:
+      build: ${{ steps.release.outputs.release_created }}
+      tag_name: ${{ steps.release.outputs.tag_name }}
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          pull-request-header: 'Bot (:robot:) requested to create a new release on ${{ github.ref_name }}'
+
   build:
     name: Build
+    needs: [release]
     runs-on: ubuntu-latest
+    if: ${{ needs.release.outputs.build == 'true' }}
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -46,19 +61,26 @@ jobs:
 
   deploy:
     name: Deploy
-    runs-on: self-hosted
+    runs-on: ubuntu-latest
     needs: [build]
     steps:
-      - uses: actions/checkout@v3
+      - name: Deploy
+        uses: appleboy/ssh-action@master
         with:
-          fetch-depth: 0
-      - name: start nginx
-        run: |
-          export CR_PAT=${{ secrets.GITHUB_TOKEN }}
-          echo $CR_PAT | docker login ${{ env.REGISTRY }} -u ${{ env.ORG_USERNAME }} --password-stdin
-          docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+          host: ${{ secrets.VPS_HOST }}
+          port: ${{ secrets.VPS_PORT }}
+          username: ${{ secrets.VPS_USERNAME }}
+          password: ${{ secrets.VPS_PASSWORD }}
+
+          script: |
+            export CR_PAT=${{ secrets.GITHUB_TOKEN }}
+            echo $CR_PAT | docker login ${{ env.REGISTRY }} -u ${{ env.ORG_USERNAME }} --password-stdin
+            docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
 
-          docker compose stop ssps-fe
-          docker compose rm -f ssps-fe
-          docker compose up -d ssps-fe
-          docker logout ${{ env.REGISTRY }}
+            cd ssps-fe
+            export TOKEN=${{ secrets.CURL_TOKEN }}
+            curl -s https://[email protected]/ticklabvn/ssps-fe/main/docker-compose.yml -o docker-compose.yml
+            docker compose stop ssps-fe
+            docker compose rm -f ssps-fe
+            docker compose up -d ssps-fe
+            docker logout ${{ env.REGISTRY }}
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml+jpg" href="/ssps-logo.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Smart Service Printing System</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,25 +10,32 @@
     "barrels": "barrelsby --config .barrelsby.json -q",
     "lint": "eslint '**/*.{tsx,ts,js}'",
     "format": "prettier '**/*.{tsx,ts,js,json,md,yml,yaml}' --write",
-    "prepare": "husky install"
+    "prepare": "is-ci || husky install && yarn api:pull",
+    "api:pull": "openapi-typescript https://ssps-server.tickflow.net/docs/json -o src/openapi-spec.ts"
   },
   "dependencies": {
+    "@cyntler/react-doc-viewer": "^1.14.0",
+    "@emotion/is-prop-valid": "^1.2.1",
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.2.0",
     "@material-tailwind/react": "^2.1.0",
-    "axios": "^1.4.0",
+    "@tanstack/react-query": "^5.8.4",
     "moment": "^2.29.4",
+    "openapi-fetch": "^0.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
     "react-router-dom": "^6.15.0",
     "react-toastify": "^9.1.3",
+    "styled-components": "^6.0.8",
     "yup": "^1.2.0",
     "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
+    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.8.4",
     "@types/node": "^20.5.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
@@ -42,11 +49,14 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
+    "is-ci": "^3.0.1",
     "lint-staged": "^14.0.0",
+    "openapi-typescript": "^7.0.0-next.2",
     "postcss": "^8.4.27",
     "prettier": "3.0.1",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.5",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }
diff --git a/public/ssps-logo.jpg b/public/ssps-logo.jpg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,94 @@
-import { AuthLayout } from '@layouts';
-import { AuthPage } from '@pages';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { NavigateFunction, useNavigate, useLocation } from 'react-router-dom';
+import { AppSkeleton } from '@components/common';
+import { MAIN_MENU, SUB_MENU } from '@constants';
+import { useUserQuery } from '@hooks';
+import { AppLayout, AuthLayout } from '@layouts';
+import { AuthPage, HomePage } from '@pages';
 
 export default function App() {
-  return (
-    <AuthLayout>
-      <AuthPage />
-    </AuthLayout>
-  );
+  const navigate: NavigateFunction = useNavigate();
+  const {
+    info: { isFetching, isError, isSuccess, refetch }
+  } = useUserQuery();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    refetch({ throwOnError: true }).catch((err) => {
+      if (err.statusCode !== 401) toast.error(err.message);
+    });
+  }, [refetch]);
+
+  useEffect(() => {
+    if (pathname === '/' && isSuccess) {
+      navigate('/home');
+    }
+  }, [pathname, isSuccess, navigate]);
+
+  if (isFetching) return <AppSkeleton />;
+
+  if (isError)
+    return (
+      <AuthLayout>
+        <AuthPage />
+      </AuthLayout>
+    );
+
+  if (isSuccess) {
+    return (
+      <AppLayout
+        menu={[
+          {
+            type: 'skeleton',
+            path: '/',
+            name: 'Skeleton',
+            element: <AppSkeleton />
+          },
+          {
+            type: 'main-item',
+            path: '/home',
+            name: MAIN_MENU.home,
+            element: <HomePage />
+          },
+          {
+            type: 'main-item',
+            path: '/order',
+            name: MAIN_MENU.order,
+            element: <></>
+          },
+          {
+            type: 'main-item',
+            path: '/payment',
+            name: MAIN_MENU.payment,
+            element: <></>
+          },
+          {
+            type: 'main-item',
+            path: '/location',
+            name: MAIN_MENU.location,
+            element: <></>
+          },
+          {
+            type: 'sub-item',
+            path: '/help',
+            name: SUB_MENU.help,
+            element: <></>
+          },
+          {
+            type: 'sub-item',
+            path: '/settings',
+            name: SUB_MENU.settings,
+            element: <></>
+          },
+          {
+            type: 'logout-btn',
+            name: SUB_MENU.logout,
+            onClick() {}
+            //onClick: () => authService.logout().then(() => getData())
+          }
+        ]}
+      />
+    );
+  }
 }
diff --git a/src/assets/coin.png b/src/assets/coin.png
diff --git a/src/assets/corner.jpg b/src/assets/corner.jpg
diff --git a/src/assets/corner.png b/src/assets/corner.png
diff --git a/src/assets/header.png b/src/assets/header.png
diff --git a/src/assets/landscape-bottom.jpg b/src/assets/landscape-bottom.jpg
diff --git a/src/assets/landscape-left.png b/src/assets/landscape-left.png
diff --git a/src/assets/landscape-right.jpg b/src/assets/landscape-right.jpg
diff --git a/src/assets/landscape-top.jpg b/src/assets/landscape-top.jpg
diff --git a/src/assets/login.svg b/src/assets/login.svg
diff --git a/src/assets/logobk.png b/src/assets/logobk.png
diff --git a/src/assets/portrait-bottom.jpg b/src/assets/portrait-bottom.jpg
diff --git a/src/assets/portrait-left.jpg b/src/assets/portrait-left.jpg
diff --git a/src/assets/portrait-right.jpg b/src/assets/portrait-right.jpg
diff --git a/src/assets/portrait-top.jpg b/src/assets/portrait-top.jpg
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/ticklab.png b/src/assets/ticklab.png
diff --git a/src/components/ToggleSidebarBtn.tsx b/src/components/ToggleSidebarBtn.tsx
diff --git a/src/components/common/AppDrawer.tsx b/src/components/common/AppDrawer.tsx
@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { Drawer } from '@material-tailwind/react';
+
+export const AppDrawer: Component<{
+  open: boolean;
+  children: ReactNode;
+  onClose: () => void;
+}> = ({ open, children, onClose }) => {
+  return (
+    <React.Fragment>
+      <Drawer open={open} className='p-0 rounded-r-2xl' onClose={onClose} size={320}>
+        {children}
+      </Drawer>
+    </React.Fragment>
+  );
+};
diff --git a/src/components/common/AppNavigation.tsx b/src/components/common/AppNavigation.tsx
@@ -0,0 +1,50 @@
+import { UserCircleIcon } from '@heroicons/react/24/solid';
+import coin from '@assets/coin.png';
+import { AppDrawer, DesktopNavbar, ToggleSidebarBtn, useSidebarMenu } from '@components/common';
+import { ScreenSize } from '@constants';
+import { useScreenSize, useUserQuery } from '@hooks';
+import { useMenuBarStore } from '@states';
+
+export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu }> = ({
+  mainMenu,
+  subMenu
+}) => {
+  const { screenSize } = useScreenSize();
+  const { openSidebar, handleOpenSidebar, SidebarMenu } = useSidebarMenu();
+  const { selectedMenu } = useMenuBarStore();
+  const {
+    remainCoins: { data }
+  } = useUserQuery();
+
+  return (
+    <div className='w-full max-h-[768px] px-6 lg:px-9 py-3 lg:py-3 shadow-md lg:sticky my-3 lg:my-0'>
+      <div className='flex items-center justify-between h-full'>
+        <div className='flex items-center lg:hidden'>
+          <div
+            className='cursor-pointer opacity-40 focus:opacity-100 active:opacity-100 mr-4'
+            onClick={handleOpenSidebar}
+          >
+            <ToggleSidebarBtn open={openSidebar} />
+          </div>
+          <div className='text-2xl font-semibold'>{selectedMenu}</div>
+        </div>
+        {screenSize < ScreenSize.LG ? (
+          <AppDrawer open={openSidebar} onClose={handleOpenSidebar}>
+            <SidebarMenu mainMenu={mainMenu} subMenu={subMenu} />
+          </AppDrawer>
+        ) : (
+          <DesktopNavbar mainMenu={mainMenu} />
+        )}
+        <div className='flex items-center'>
+          {data && (
+            <div className='flex items-center w-18.25 lg:w-26 h-6 lg:h-9 bg-[#FEECDC] pl-4 pr-6 lg:pl-6 lg:pr-9 rounded-lg -mr-5 font-bold text-[#9F580A] lg:font-semibold lg:text-2xl select-none text-base'>
+              {data}
+            </div>
+          )}
+          <img className='w-7 h-7 lg:w-10 lg:h-10' src={coin}></img>
+          <UserCircleIcon className='w-10 h-10 hidden lg:block lg:opacity-40 lg:ml-6 lg:cursor-pointer' />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/AppSkeleton.tsx → src/components/common/AppSkeleton.tsx b/src/components/AppSkeleton.tsx → src/components/common/AppSkeleton.tsx