Added env and axios config changes

.env

+REACT_APP_API_URL='http://localhost:4000'
\ No newline at end of file

.env.dev

+REACT_APP_API_URL='https://nisumscorecardserverdev.netlify.app/.netlify/functions/api'
\ No newline at end of file

.env.qa

+REACT_APP_API_URL='https://nisumscorecardservertesting.netlify.app/.netlify/functions/api'
\ No newline at end of file

package-lock.json

@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^14.5.2",
         "axios": "^1.6.7",
         "cors": "^2.8.5",
+        "env-cmd": "^10.1.0",
         "express": "^4.18.3",
         "jspdf": "^2.5.1",
         "jspdf-autotable": "^3.8.2",
@@ -7604,6 +7605,29 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-cmd": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
+      "integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
+      "dependencies": {
+        "commander": "^4.0.0",
+        "cross-spawn": "^7.0.0"
+      },
+      "bin": {
+        "env-cmd": "bin/env-cmd.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/env-cmd/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.7",
     "cors": "^2.8.5",
+    "env-cmd": "^10.1.0",
     "express": "^4.18.3",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.8.2",
@@ -28,7 +29,11 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:dev": "env-cmd -f .env.dev react-scripts start",
+    "start:qa": "env-cmd -f .env.qa react-scripts start",
     "build": "react-scripts build",
+    "build:dev": "env-cmd -f .env.dev react-scripts build",
+    "build:qa": "env-cmd -f .env.qa react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "server": "node --watch server.js"

src/api/axiosConfig.js

+// axiosConfig.js
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: process.env.REACT_APP_API_URL, // Set the base URL for your API
+  headers: {
+    'Content-Type': 'application/json', // Set default headers
+    // Add any other default headers here
+  },
+});
+
+export default instance;

src/components/accordion/accordionTable.jsx

-import React from "react";
-import moment from "moment";
-
-function AccordionTable({ headers, data }) {   
-    const getDate = (utc) => {
-        return moment(utc).format('DD-MM-YYYY');
-    }
-  return (
-    <div className="p-4">
-      <table className="border-2 border-collapse w-full border-[#B7B7B7]">
-        <thead>
-          <tr>
-            {headers?.map(({ title, width }) => (
-              <th
-                className={`border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-[${width}]`}
-              >
-                {title}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {data?.map((item) => (
-            <tr>
-              {headers?.map((header) => (
-                <td
-                  className={`border-2 p-2 border-[#B7B7B7] bg-${
-                    header.id === "aName" ? "[#D9D9D9]" : "white"
-                  }`} 
-                >
-                  {header?.id === 'recorded_date' ? <span>{getDate(item[header?.id])}</span> : <span className="truncate overflow-hidden whitespace-nowrap overflow-ellipsis">{item[header?.id]}</span>}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-export default AccordionTable;

src/components/accordion/index.jsx

@@ -2,10 +2,7 @@ import React, { useState } from "react";
 import Table from "../table";
 import ModalButton from "../modal/modalButton";
 import { useSelector ,useDispatch} from "react-redux";
-import { useEffect } from "react";
 import {useParams} from 'react-router'
-import { fetchReportees } from "../../redux/reducers/reporteesSlice";
-import { calculateDefaultScore,calculateInitiativeScore } from "../../redux/reducers/viewreporteeSlice";
 import Loading from "../loading Component/Loading";
 import {convertUTCToLocal} from '../../utils/commonFunctions';
 

src/components/modal/index.jsx

-import axios from "axios";
+import axiosApi from '../../api/axiosConfig';
 import React, { useMemo, useEffect, useState, useCallback } from "react";
 import { useSelector } from "react-redux";
 import { base_url } from "../../utils/constants";
@@ -19,7 +19,7 @@ export default function MyModal({ visible, onClose, type, handleAddActivity }) {
   const [disableAppreciate, setDisableAppreciate] = useState(false)
 
   const getActivitysList = async (type) => {
-    const activities = await axios.get(`${base_url}/activities`)
+    const activities = await axiosApi.get(`/activities`)
     const response = await activities.data.filter((item) => item.type == type)
     setActivitiesList(response)
     setModalLoading(false)

src/components/table/index.jsx

@@ -3,9 +3,11 @@ import { useSelector, useDispatch} from "react-redux";
 import {setSortKey, setSortOrder} from '../../redux/reducers/reporteesSlice';
 import Loading from "../loading Component/Loading";
 import SortButton from "../sortButton";
+import SetWindowSize from '../../utils/SetWindowSize';
 
 function Table({headers, data,loading, handleSorting }) {
   const dispatch = useDispatch();
+  const [windowWidth, windowHeight] = SetWindowSize()
   const {sortKey,  sortOrder} = useSelector((state) => state.reportees);
   // const [sortedData, setSortedData] = useState([]);
   // const [sortKey, setSortKey] = useState(null);
@@ -59,9 +61,9 @@ function Table({headers, data,loading, handleSorting }) {
   if(loading) return <Loading/>
   else
   return (
-    <div className={` overflow-auto sm:rounded-lg p-4 bg-gray-100`}>
+    <div className={` overflow-auto sm:rounded-lg p-4 py-0 bg-gray-100`} style={{ height: `calc(${windowHeight}px - 170px)` }}>
       <table className="w-full text-sm text-left rtl:text-right text-gray-500 bg-transparent justify-center border-separate border-spacing-y-2">
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50 sticky top-0">
           <tr className="mb-2">
             {headers?.map((item,index) => (
               <th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} > 

src/pages/home/index.jsx

 import React, { useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import axios from 'axios';
+import axiosApi from '../../api/axiosConfig';
 import { base_url } from "../../utils/constants";
 import { loginUser } from "../../redux/reducers/userSlice";
 import {useDispatch,useSelector} from 'react-redux'
@@ -19,7 +19,7 @@ function Home() {
     e.preventDefault();
     setLoading(true)
     if(id!==null){
-     await axios.post(`${base_url}/login`,{empId:Number(inputRef.current.value)})
+     await axiosApi.post(`/login`,{empId:Number(inputRef.current.value)})
       .then((res) => {
         setLoading(false)
         dispatch(loginUser(res.data.user))

src/pages/reportexport/index.jsx

 import React, { useEffect, useState } from "react";
-import axios from "axios";
+import axiosApi from '../../api/axiosConfig';
 import { useDispatch, useSelector } from "react-redux";
 import { fetchReportesActivitiesData, resetReporteesTableData, resetActivitiesData } from "../../redux/reducers/exporttableslice";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import { convertUTCToLocal } from "../../utils/commonFunctions";
 import Table from "../../components/table";
-import { base_url } from "../../utils/constants";
 import DownloadIcon from '../../assets/icons/downloadIcon';
 import jsPDF from 'jspdf';
 import 'jspdf-autotable';
@@ -69,14 +68,15 @@ function Exporttable() {
       let data = {
         reportees: user.reportees,
         page: 1,
-        perPage: user.reportees.length,
+        perPage: 100000000, //user.reportees.length,
+        getMasterData: true
       };
       dispatch(fetchReportees(data));
     }
     return(() => {
       dispatch(resetReporteesTableData())
     })
-  }, [user]);
+  }, []);
 
 
   const headers = [
@@ -146,7 +146,7 @@ function Exporttable() {
         fromDate: fromDate,
         toDate: toDate,
       };
-      const response = await axios.post(`${base_url}/getActivities`, data).then((res) =>  res.data.activities);
+      const response = await axiosApi.post(`/getActivities`, data).then((res) =>  res.data.activities);
       if(response.length > 0) convertTableToPDF(response);
     } catch {
       setPdfLoading(false);

src/pages/viewReportee/index.jsx

 import React, { useState, useEffect, useMemo } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams, useNavigate } from "react-router";
-import { base_url } from "../../utils/constants";
-import axios from 'axios';
+import axiosApi from '../../api/axiosConfig';
 import { fetchReportees,setViewReportee } from "../../redux/reducers/reporteesSlice";
 import {fetchReporteeActivities, fetchActivitiesAvg, } from '../../redux/reducers/viewreporteeSlice'
 import Accordion from "../../components/accordion";
@@ -55,7 +54,7 @@ function Viewreportee() {
   }
 
   const fetchViewReporteeData=async(empId)=>{
-        const response= await axios.get(`${base_url}/employee/${empId}`)
+        const response= await axiosApi.get(`/employee/${empId}`)
         const data=await response.data
         dispatch(setViewReportee(data))
   }
@@ -66,7 +65,7 @@ function Viewreportee() {
         "empId": viewReportee.empId,
         "data": activityData
       }
-      await axios.post(`${base_url}/createActivity`, newData)
+      await axiosApi.post(`/createActivity`, newData)
         .then(async (result) => {
           fetchLatestReporteesData();
           fetchActivities(activityData?.type)

src/redux/reducers/exporttableslice.js

 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
-import { base_url } from "../../utils/constants";
-import axios from "axios";
+import axiosApi from '../../api/axiosConfig';
  
 const initialState = {
     // totalReporteesData: [],
@@ -13,7 +12,7 @@ const initialState = {
 
  
 export const fetchReportesActivitiesData = createAsyncThunk("gettotalactivities", async (data) => {
-  return await axios.post(`${base_url}/getActivities`,  data)
+  return await axiosApi.post(`/getActivities`,  data)
     .then((response) => response.data);
 });
  

src/redux/reducers/reporteesSlice.js

 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
-import { base_url } from "../../utils/constants";
-import axios from "axios";
+import axiosApi from '../../api/axiosConfig';
 
 const initialState = {
   reportees: [],
@@ -16,7 +15,7 @@ const initialState = {
 };
 
 export const fetchReportees = createAsyncThunk("getreportees", async (data) => {
-  return await axios.post(`${base_url}/getreportees`, data)
+  return await axiosApi.post(`/getreportees`, data)
     .then((response) => response.data);
 });
 

src/redux/reducers/userSlice.js

 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
-import { base_url } from "../../utils/constants";
-import axios from "axios";
+import axiosApi from '../../api/axiosConfig';
 
 const initialState = {
   user: null,
@@ -9,8 +8,8 @@ const initialState = {
 };
 
 export const fetchUser = createAsyncThunk("getUser", async (id) => {
-  return await axios
-    .get(`${base_url}/employee/${id}`)
+  return await axiosApi
+    .get(`/employee/${id}`)
     .then((response) => response.data);
 });
 

src/redux/reducers/viewreporteeSlice.js

 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
-import { base_url } from "../../utils/constants";
-import axios from "axios";
+import axiosApi from '../../api/axiosConfig'
 
 const initialState = {
   reports: null,
@@ -13,14 +12,14 @@ const initialState = {
 };
 
 export const fetchReporteeActivities = createAsyncThunk("getReports", async (data) => {
-  return await axios
-    .post(`${base_url}/getActivities`, data)
+  return await axiosApi
+    .post(`/getActivities`, data)
     .then((response) => {return {data:response.data?.activities, type:data.types}});
 });
 
 export const fetchActivitiesAvg = createAsyncThunk("getActivities-avg", async (data) => {
-  return await axios
-    .post(`${base_url}/getActivities-avg`, data)
+  return await axiosApi
+    .post(`/getActivities-avg`, data)
     .then((response) => response.data);
 });