ecematacli · ecematacli · Dec 10, 2023 · Dec 11, 2023 · Dec 18, 2023 · Dec 26, 2023
diff --git a/.babelrc b/.babelrc
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # dependencies
 /node_modules
+.yarn
 
 # production
 public

diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/config.ts b/config.ts
@@ -0,0 +1,38 @@
+const ENV_CONFIG_ENUM = {
+  DEVELOPMENT: 'development',
+  STAGING: 'staging',
+  PRODUCTION: 'production',
+}
+
+const configEnvironment =
+  process.env.ENV_CONFIG_ENUM || ENV_CONFIG_ENUM.PRODUCTION
+
+const config = {
+  [ENV_CONFIG_ENUM.DEVELOPMENT]: {
+    ENV_API_URL: 'https://localhost:8081',
+  },
+  [ENV_CONFIG_ENUM.PRODUCTION]: {
+    ENV_API_URL: '',
+  },
+}
+
+const getWebpackDefineConfig = (env = configEnvironment) => {
+  const conf = getConfig(env)
+  return Object.keys(conf).reduce((acc, key) => {
+    // @ts-ignore
+    return { ...acc, [key]: JSON.stringify(conf[key]) }
+  }, {})
+}
+
+const getJestConfig = (env = configEnvironment) => {
+  return getConfig(env)
+}
+
+const getConfig = (env = configEnvironment) => {
+  if (config[env]) {
+    return config[env]
+  }
+  return config[ENV_CONFIG_ENUM.PRODUCTION]
+}
+
+export { getConfig, getWebpackDefineConfig, getJestConfig, ENV_CONFIG_ENUM }
diff --git a/template.html → index.html b/template.html → index.html
@@ -10,9 +10,11 @@
     />
     <link rel="shortcut icon" href="" />
     <title>Merit Spor</title>
+    <link rel="shortcut icon" href="/merit.png" />
   </head>
 
   <body>
-    <div id="root" />
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
@@ -8,8 +8,9 @@ module.exports = {
   transform: {
     '^.+\\.(ts|tsx)$': 'ts-jest',
   },
+  moduleDirectories: ['node_modules', 'src'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/src/__mocks__/fileMock.ts',
   },
-};
+}
diff --git a/package.json b/package.json
@@ -5,86 +5,70 @@
   "author": "Ecem Atacli",
   "license": "MIT",
   "scripts": {
-    "build": "webpack --env.API_URL=${API_URL} --config webpack.prod.js",
-    "start": "webpack-dev-server --config webpack.dev.js",
+    "build": "NODE_ENV=production vite build",
+    "dev": "NODE_ENV=development vite",
     "test": "jest --watch",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
-    "@babel/runtime": "^7.11.2",
     "@date-io/core": "^1.3.6",
     "@date-io/date-fns": "1.x",
-    "@hot-loader/react-dom": "^16.13.1",
-    "@material-ui/core": "^4.9.0",
-    "@material-ui/icons": "^4.5.1",
-    "@material-ui/lab": "^4.0.0-alpha.40",
-    "@material-ui/pickers": "^3.2.8",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/lab": "^5.0.0-alpha.158",
+    "@mui/material": "^5.15.2",
+    "@mui/styles": "^5.15.2",
+    "@mui/system": "^5.15.5",
+    "@mui/x-date-pickers": "^6.18.6",
     "@testing-library/react-hooks": "^3.2.1",
     "@typescript-eslint/parser": "^2.23.0",
     "autosuggest-highlight": "^3.1.1",
-    "awesome-typescript-loader": "^5.2.1",
-    "axios": "^0.19.0",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "clsx": "^1.0.4",
+    "axios": "^1.6.5",
     "date-fns": "^2.9.0",
-    "dotenv-webpack": "^1.7.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-react-hooks": "^2.5.0",
-    "file-loader": "^5.0.2",
-    "fork-ts-checker-webpack-plugin": "^5.0.4",
     "formik": "^2.1.4",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
     "jest": "^25.1.0",
     "lodash": "^4.17.15",
     "prettier": "^1.19.1",
-    "react": "^16.13.1",
-    "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.13.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-dropzone": "^11.0.2",
-    "react-hot-loader": "^4.13.0",
     "react-redux": "^7.1.3",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
     "recharts": "^2.0.0-beta.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.0.1",
-    "url-loader": "^3.0.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0",
-    "webpack-merge": "^4.2.2",
+    "vite": "3.2.2",
     "yup": "^0.28.1"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.2",
     "@types/autosuggest-highlight": "^3.1.0",
     "@types/jest": "^25.1.4",
     "@types/lodash": "^4.14.155",
     "@types/node": "^13.7.6",
-    "@types/react": "^16.9.23",
-    "@types/react-custom-scrollbars": "^4.0.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "@types/react-redux": "^7.1.7",
-    "@types/react-router-dom": "^5.1.3",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^3.0.13",
     "@types/recharts": "^1.8.7",
     "@types/redux-mock-store": "^1.0.2",
     "@types/styled-components": "^5.0.1",
-    "@types/webpack-env": "^1.15.1",
     "@types/yup": "^0.26.32",
-    "@typescript-eslint/eslint-plugin": "^2.23.0",
+    "@vitejs/plugin-react": "^2.2.0",
     "react-test-renderer": "^16.13.0",
     "redux-mock-store": "^1.5.4",
-    "ts-jest": "^25.2.1",
-    "typescript": "^3.8.3"
-  }
-}
+    "ts-jest": "^25.5.1",
+    "typescript": "4.3.5",
+    "vite-plugin-handlebars": "^1.6.0",
+    "vite-tsconfig-paths": "^4.2.2"
+  },
+  "packageManager": "yarn@4.0.2"
+}
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/api/index.ts → src/api/api-client.ts b/src/api/index.ts → src/api/api-client.ts
@@ -1,15 +1,16 @@
-import axios from 'axios';
+import axios from 'axios'
+import { VITE_API_URL } from 'constants'
 
 const axiosInstance = axios.create({
-  baseURL: process.env.API_URL,
-});
+  baseURL: VITE_API_URL,
+})
 
 axiosInstance.interceptors.request.use(
   config => {
-    config.headers.Authorization = JSON.parse(localStorage.getItem('token'));
-    return config;
+    config.headers.Authorization = JSON.parse(localStorage.getItem('token'))
+    return config
   },
   error => Promise.reject(error)
-);
+)
 
-export default axiosInstance;
+export default axiosInstance
diff --git a/src/api/outlets/outlets.ts b/src/api/outlets/outlets.ts
@@ -0,0 +1,12 @@
+import api from '../api-client'
+import { Outlet } from './types'
+
+export const fetchOutlets = async (): Promise<Outlet[]> => {
+  try {
+    const { data } = await api.get('/outlets')
+    return data as Outlet[]
+  } catch (e) {
+    console.log(e)
+    return []
+  }
+}
diff --git a/src/api/outlets/types.ts b/src/api/outlets/types.ts
@@ -0,0 +1,6 @@
+export interface Outlet {
+  id: number
+  name: string
+}
+
+export type Outlets = Outlet[]
diff --git a/src/api/user/types.ts b/src/api/user/types.ts
@@ -0,0 +1,15 @@
+export enum UserRoles {
+  Admin = 'Admin',
+  Employee = 'Employee',
+}
+
+export interface User {
+  email: string
+  id: string
+  name: string
+  role: {
+    id: number
+    name: UserRoles
+    outletId: number
+  }
+}
diff --git a/src/api/user/user.ts b/src/api/user/user.ts
@@ -0,0 +1,12 @@
+import api from '../api-client'
+import { User } from './types'
+
+export const fetchUser = async (): Promise<User | undefined> => {
+  try {
+    const { data } = await api.get('/account')
+    return data
+  } catch (e) {
+    console.log(e)
+    return
+  }
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { ThemeProvider } from '@mui/material/styles'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+
+import { theme } from './theme/theme'
+import { AppRouter } from './routes/app-router'
+import { Provider } from 'react-redux'
+import { configureStore } from './redux/store'
+import { AuthContextProvider } from './contexts/auth-context'
+import { NotificationsProvider } from './contexts/notifications-context'
+import { GlobalStyles } from './global-styles'
+import { CatalogInfoProvider } from './contexts/catalog-info-context'
+
+export const App = () => (
+  <Provider store={configureStore()}>
+    <AuthContextProvider>
+      <CatalogInfoProvider>
+        <NotificationsProvider>
+          <GlobalStyles />
+          <ThemeProvider theme={theme}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <AppRouter />
+            </LocalizationProvider>
+          </ThemeProvider>
+        </NotificationsProvider>
+      </CatalogInfoProvider>
+    </AuthContextProvider>
+  </Provider>
+)