Fix frontend issues

Author: fsabado00

README.md

@@ -64,7 +64,7 @@ $ cd backend
 $ pnpm install
 
 # run mysql db server
-$ docker-compose up
+$ docker-compose up --build
 
 # run prisma migration
 $ npx prisma migrate dev

backend/docker-compose.yaml

@@ -5,7 +5,21 @@ services:
     image: mysql:8.0
     restart: always
     ports:
-      - '3306:3306'
+      - 3306:3306
     environment:
       - MYSQL_ROOT_PASSWORD=password
       - MYSQL_DATABASE=cedb
+
+  backend:
+    build: .
+    depends_on:
+      - db
+    ports:
+      - 8888:8888
+    volumes:
+      - .:/app
+    environment:
+      - DATABASE_URL=mysql://root:password@db:3306/cedb
+      - NODE_DOCKER_PORT=8888
+    volumes:
+      - ./dbdata:/var/lib/mysql

frontend/.eslintcache

@@ -12,9 +12,7 @@ This template provides a minimal setup to get React working in Vite with HMR and
 - ✅ Strict Mode for TypeScript and React 18
 - 📏 Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
 - 💖 Code Formatter with [Prettier](https://prettier.io)
-- 🦊 Husky for Git Hooks
 - 🚫 Lint-staged for running linters on Git staged files
-- 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest
 
 ### Requirements
 

frontend/README.md

@@ -0,0 +1,130 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import _import from "eslint-plugin-import";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [{
+    ignores: [
+        "./tsconfig.json",
+        "**/build",
+        "**/dist",
+        "**/node_modules",
+        "**/*.test.js",
+        "**/vite.config.ts",
+        "**/postcss.config.js",
+        "**/tailwind.config.js",
+        "**/i18n.ts",
+        "public/firebase-messaging-sw.js",
+        "src/components/ui/*",
+    ],
+}, ...fixupConfigRules(compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:testing-library/react",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+)), {
+    plugins: {
+        "@typescript-eslint": fixupPluginRules(typescriptEslint),
+        import: fixupPluginRules(_import),
+        "simple-import-sort": simpleImportSort,
+    },
+
+    languageOptions: {
+        globals: {
+            ...globals.node,
+            ...globals.browser,
+        },
+
+        parser: tsParser,
+        ecmaVersion: "latest",
+        sourceType: "module",
+
+        parserOptions: {
+            project: ["./tsconfig.json", "./.eslintrc.cjs"],
+            tsconfigRootDir: "/Users/frx/Development/fullstack/docker-react-node-mysql-app/frontend",
+        },
+    },
+
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+
+    rules: {
+        "no-console": 2,
+        "react-hooks/rules-of-hooks": 2,
+        "react-hooks/exhaustive-deps": 2,
+        "react/no-array-index-key": 2,
+        "react/react-in-jsx-scope": "off",
+        "react/prop-types": "off",
+        "@typescript-eslint/no-non-null-assertion": 0,
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+
+        "@typescript-eslint/no-unused-vars": [2, {
+            argsIgnorePattern: "^_",
+            varsIgnorePattern: "^_",
+            ignoreRestSiblings: true,
+        }],
+
+        "prettier/prettier": ["off", {
+            singleQuote: true,
+        }],
+
+        "no-restricted-imports": [2, {
+            patterns: ["@/features/*/*", "@/components/*", "@/hooks/*", "@/utils/*", "@/ts/*/*"],
+        }],
+
+        "import/order": ["error", {
+            groups: ["builtin", "external", "internal"],
+
+            pathGroups: [{
+                pattern: "react",
+                group: "external",
+                position: "before",
+            }],
+
+            pathGroupsExcludedImportTypes: ["react"],
+            "newlines-between": "always",
+
+            alphabetize: {
+                order: "asc",
+                caseInsensitive: true,
+            },
+        }],
+
+        "no-implied-eval": "off",
+        "require-await": "off",
+    },
+}, {
+    files: ["**/.eslintrc.{js,cjs}"],
+
+    languageOptions: {
+        globals: {
+            ...globals.node,
+        },
+
+        ecmaVersion: 5,
+        sourceType: "commonjs",
+    },
+}];

frontend/eslint.config.mjs

@@ -8,7 +8,9 @@
     "dev": "vite",
     "preinstall": "npx only-allow pnpm",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext js,ts,tsx",
+    "lint": "eslint . --cache --ignore-pattern ./.eslintignore",
+    "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
+    "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
     "format": "prettier --write **/*.{js,ts,tsx} && eslint . --ext js,ts,tsx --fix",
     "preview": "vite preview"
   },
@@ -21,11 +23,13 @@
     "@mui/icons-material": "^5.14.18",
     "@mui/material": "^5.14.17",
     "@tanstack/react-query": "^4.35.3",
+    "@tanstack/react-query-devtools": "^5.56.2",
     "@tanstack/react-router": "^1.58.3",
     "@types/styled-components": "^5.1.27",
     "axios": "1.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "framer-motion": "^11.5.6",
     "lodash": "^4.17.21",
     "lucide-react": "^0.279.0",
     "moment": "^2.30.1",
@@ -42,6 +46,9 @@
     "zustand": "^4.4.1"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.11.0",
     "@optimize-lodash/rollup-plugin": "^4.0.4",
     "@types/lodash": "^4.14.198",
     "@types/node": "^20.6.2",

frontend/package.json

@@ -1,13 +1,19 @@
 import { RouterProvider } from '@tanstack/react-router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { router } from './routes';
+import './index.css';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { ThemeProvider } from './contexts/ThemeContext';
 
 const queryClient = new QueryClient();
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
+      <ThemeProvider>
+        <RouterProvider router={router} />
+        {window.location.href.includes('localhost') && <ReactQueryDevtools initialIsOpen={false} />}
+      </ThemeProvider>
     </QueryClientProvider>
   );
 }

frontend/pnpm-lock.yaml

@@ -1,8 +1,7 @@
 import { CafeDataType } from '@/api/services';
 
 export type EmployeeDataType = {
-  // _id?: string;
-  id?: string;
+  id: string;
   createdAt: string;
   updatedAt: string;
   name: string;