Merge pull request #59 from TurTaskProject/frontend-production

Deploy on vercel

frontend/.eslintrc.cjs

@@ -1,20 +1,17 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
+  env: { browser: true, es2020: true, node: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
   },
-}
+};

frontend/src/App.jsx

@@ -16,6 +16,8 @@ import Dashboard from "./components/dashboard/dashboard";
 
 import { useAuth } from "./hooks/AuthHooks";
 
+const baseURL = import.meta.env.VITE_BASE_URL;
+
 const App = () => {
   const { isAuthenticated, setIsAuthenticated } = useAuth();
 
@@ -27,7 +29,7 @@ const App = () => {
       };
 
       await axios
-        .post("http://127.0.0.1:8000/api/auth/status/", data, {
+        .post(`${baseURL}auth/status/`, data, {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("access_token"),
           },

frontend/src/api/AuthenticationApi.jsx

@@ -1,6 +1,8 @@
 import axios from "axios";
 import axiosInstance from "./AxiosConfig";
 
+const baseURL = import.meta.env.VITE_BASE_URL;
+
 // Function for user login
 const apiUserLogin = (data) => {
   return axiosInstance
@@ -26,7 +28,7 @@ const apiUserLogout = () => {
 // Function for Google login
 const googleLogin = async (token) => {
   axios.defaults.withCredentials = true;
-  let res = await axios.post("http://localhost:8000/api/auth/google/", {
+  let res = await axios.post(`${baseURL}auth/google/`, {
     code: token,
   });
   // console.log('service google login res: ', res);
@@ -49,7 +51,7 @@ const getGreeting = () => {
 const createUser = async (formData) => {
   try {
     axios.defaults.withCredentials = true;
-    const response = axios.post("http://localhost:8000/api/user/create/", formData);
+    const response = axios.post(`${baseURL}user/create/`, formData);
     // const response = await axiosInstance.post('/user/create/', formData);
     return response.data;
   } catch (e) {

frontend/src/api/AxiosConfig.jsx

@@ -1,8 +1,10 @@
 import axios from "axios";
 import { redirect } from "react-router-dom";
 
+const baseURL = import.meta.env.VITE_BASE_URL;
+
 const axiosInstance = axios.create({
-  baseURL: "http://127.0.0.1:8000/api/",
+  baseURL: baseURL,
   timeout: 5000,
   headers: {
     Authorization: "Bearer " + localStorage.getItem("access_token"),

frontend/src/api/TaskApi.jsx

@@ -1,6 +1,6 @@
 import axiosInstance from "src/api/AxiosConfig";
 
-const baseURL = "";
+const baseURL = import.meta.env.VITE_BASE_URL;
 
 export const createTask = (endpoint, data) => {
   return axiosInstance

frontend/src/api/UserProfileApi.jsx

@@ -1,8 +1,10 @@
 import axios from "axios";
 
-const ApiUpdateUserProfile = async formData => {
+const baseURL = import.meta.env.VITE_BASE_URL;
+
+const ApiUpdateUserProfile = async (formData) => {
   try {
-    const response = await axios.post("http://127.0.1:8000/api/user/update/", formData, {
+    const response = await axios.post(`${baseURL}user/update/`, formData, {
       headers: {
         Authorization: "Bearer " + localStorage.getItem("access_token"),
         "Content-Type": "multipart/form-data",

frontend/src/components/authentication/LoginPage.jsx

@@ -4,7 +4,7 @@ import { useGoogleLogin } from "@react-oauth/google";
 import { useCallback } from "react";
 import Particles from "react-tsparticles";
 import { loadFull } from "tsparticles";
-import refreshAccessToken from "./refreshAcesstoken";
+import refreshAccessToken from "./refreshAcessToken";
 import axiosapi from "../../api/AuthenticationApi";
 import { FcGoogle } from "react-icons/fc";
 import { useAuth } from "src/hooks/AuthHooks";

frontend/src/components/authentication/refreshAcessToken.jsx

@@ -1,5 +1,7 @@
 import axios from "axios";
 
+const baseURL = import.meta.env.VITE_BASE_URL;
+
 async function refreshAccessToken() {
   const refresh_token = localStorage.getItem("refresh_token");
   const access_token = localStorage.getItem("access_token");
@@ -12,7 +14,7 @@ async function refreshAccessToken() {
     return false;
   }
 
-  const refreshUrl = "http://127.0.0.1:8000/api/token/refresh/";
+  const refreshUrl = `${baseURL}token/refresh/`;
 
   try {
     const response = await axios.post(refreshUrl, { refresh: refresh_token });

frontend/src/components/dashboard/dashboard.jsx

@@ -10,7 +10,7 @@ import {
   Title,
   Legend,
 } from "@tremor/react";
-import KpiCard from "./kpiCard";
+import KpiCard from "./KpiCard";
 import { BarChartGraph } from "./Barchart";
 import DonutChartGraph from "./DonutChart";
 import { AreaChartGraph } from "./Areachart";

frontend/vite.config.js

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
@@ -9,4 +8,7 @@ export default defineConfig({
       src: "/src",
     },
   },
+  define: {
+    __APP_ENV__: process.env.VITE_VERCEL_ENV,
+  },
 });