routing changes

src/App.js

@@ -2,7 +2,7 @@ import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import Home from "./pages/home";
 import Dashboard from './pages/dashboard';
 import Layout from './pages/layout';
-import Reports from './pages/reports';
+import Viewreportee from './pages/viewReportee';
 import './App.css';
 import PageNotFound from './pages/pagenotfound/PageNotFound';
 
@@ -12,7 +12,7 @@ function App() {
       <Routes>
         <Route path='/' element={<Home />}/>
         <Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
-        <Route path="/viewreportee/:id" element={<Layout><Reports/></Layout>}/>
+        <Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
         <Route path="/*" element={<PageNotFound/>}/>
       </Routes>
     </BrowserRouter>

src/components/leftSidebar/index.jsx

 import React, { useEffect, useState } from "react";
-import { fetchReportees } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setViewReportee } from "../../redux/reducers/reporteesSlice";
 import { Link } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -10,9 +10,9 @@ function LeftSidebar() {
   const dispatch = useDispatch();
   const [currPage, setCurrPage] = useState(1);
   const [inputValue, setInputValue] = useState('');
-  const { reportees, loading } = useSelector((state) => state.reportees);
+  const { reportees, loading, viewReportee } = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
-  const { id } = useParams();
+
 
   useEffect(() => {
     const debounceTimeout = setTimeout(() => {
@@ -51,18 +51,19 @@ function LeftSidebar() {
         (loading) ? <Loading /> :
           <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[80vh] overflow-auto">
             {reportees?.map(({ empName, score, empId }) => (
-              <Link
-                to={`/viewreportee/${empId}`}
-                className={`flex items-center hover:bg-blue-400 hover:text-white hover:rounded-2xl bg-${Number(id) == empId ? "blue-400 text-white rounded-2xl" : "white"
+              <button onClick={() => dispatch(setViewReportee(empId))}
+                // to={`/viewreportee`}
+                className={`flex items-center hover:bg-blue-400 hover:text-white  bg-${viewReportee.empId == empId ? "blue-400 text-white rounded-2xl" : "white"
                   } p-2 justify-between mb-1 w-full`}
                 key={empId}
               >
-                {/* <img src="/man.png" width="18px" height="18px" /> */}
-                <p className="w-[80%] text-left">{empName}</p>
-                <p className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(score)}`}>
-                  {score}
-                </p>
-              </Link>
+                
+                  <p className="w-[80%] text-left">{empName}</p>
+                  <p className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(score)}`}>
+                    {score}
+                  </p>
+                </button>
+              
             ))}
           </div>
       }

src/components/table/index.jsx

@@ -23,7 +23,7 @@ function Table({headers, data,loading, maxHeight}) {
                <tr key={item.id} className="bg-white  hover:bg-gray-300 " >
                    {
                      headers?.map(({render, id}) => (
-                       <td key={`${item.id}_${id}`}  className="px-6 py-2 "  >
+                       <td className="px-6 py-2 "  >
                         {render ? render(item[id]) : item[id] === "" ? "NA" : item[id] }
                         </td>
                      ))

src/pages/dashboard/index.jsx

 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchReportees } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setViewReportee } from "../../redux/reducers/reporteesSlice";
 import Table from '../../components/table';
 import RightArrowIcon from '../../assets/icons/rightArrowIcon';
 import { scoreColor } from '../../utils/commonFunctions';
@@ -107,8 +107,8 @@ function Dashboard() {
     {
       title: "Action",
       id: "empId",
-      render: (value) => <Link to={`/viewreportee/${value}`}>
-        <button className="bg-blue-400 text-white rounded-md px-2 py-1 flex items-center justify-center w-[40px]">
+      render: (value) => <Link to={`/viewreportee`}>
+        <button className="bg-blue-400 text-white rounded-md px-2 py-1 flex items-center justify-center w-[40px]" onClick={()=>dispatch(setViewReportee(value))}>
           <RightArrowIcon />
           </button>
         </Link>
@@ -125,7 +125,7 @@ function Dashboard() {
         {reportees && (
           <div className="flex justify-center mt-2">
             {/* <div className="text-blue-500">Total Results: {pagesCount}</div> */}
-            {pagesCount > 1 && (
+            {pagesCount >= 1 && (
               <PaginationComponent
                 currentPage={currPage}
                 totalPages={pagesCount}

src/pages/home/index.jsx

@@ -22,7 +22,6 @@ function Home() {
       .then((res) => {
         setLoading(false)
         dispatch(loginUser(res.data.user))
-         navigate(`/dashboard`);
       })
       .catch((error)=>{  
         setLoading(false)

src/pages/reports/index.jsx → src/pages/viewReportee/index.jsx

@@ -9,19 +9,20 @@ import Accordion from "../../components/accordion";
 import {scoreColor} from '../../utils/commonFunctions';
 import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
 
-function Reports() {
+function Viewreportee() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { id } = useParams();
-  const empId = Number(id)
-  const reportees = useSelector((state) => state.reportees.reportees);
+  // const { id } = useParams();
+  // const empId = Number(id)
+  const {reportees, viewReportee } = useSelector((state) => state.reportees);
   const user = useSelector((state) => state.userDetails.user)
-  const [empDetails, setEmpDetails] = useState(null);
+  // const [empDetails, setEmpDetails] = useState(null);
   const { reports, loading, error } = useSelector((state) => state.reports);
   const [open, setOpen] = useState({ "accordianOne": false, "accordianTwo": false });
 
 
 
+
   /*Example post data
 {
     "empId":41689,
@@ -34,7 +35,7 @@ function Reports() {
       const filtered = Object.groupBy(reports, ({ type }) => type);
       return filtered;
     }
-  }, [reports, id]);
+  }, [reports, viewReportee]);
 
   const handleAccordian = (value) => {
     switch (value) {
@@ -63,9 +64,9 @@ function Reports() {
   }
 
   const handleAddActivity = async (activityData) => {
-    if (id) {
+    if (viewReportee) {
       let newData = {
-        "empId": empId,
+        "empId": viewReportee.empId,
         "data": activityData
       }
       await axios.post(`${base_url}/createActivity`, newData)
@@ -78,31 +79,31 @@ function Reports() {
   }
 
   useEffect(() => {
-    if (id !== undefined || null && reportees.length > 0) {
-      const emp = reportees?.filter((item) => item.empId === Number(id));
-      setEmpDetails(emp[0]);
-      const data = {
-        "empId": Number(id),
-        "fromDate": "",
-        "toDate": ""
-      }
-      dispatch(fetchReports(data))
-    }
-    return (() => {
-      setEmpDetails(null)
-    })
-  }, [id, reportees]);
+    // if (viewReportee !== undefined || null && reportees.length > 0) {
+    //   const emp = reportees?.filter((item) => item.empId === Number(viewReportee.empId));
+    //   setEmpDetails(emp[0]);
+    //   const data = {
+    //     "empId": Number(viewReportee.empId),
+    //     "fromDate": "",
+    //     "toDate": ""
+    //   }
+    //   dispatch(fetchReports(data))
+    // }
+    // return (() => {
+    //   setEmpDetails(null)
+    // })
+  }, [viewReportee, reportees]);
 
   useEffect(() => {
     if (user) {
-      navigate(`/viewreportee/${id}`)
+      navigate(`/viewreportee`)
       setOpen({ "accordianOne": false, "accordianTwo": false })
     } else {
       navigate("/")
     }
-  }, [id]);
+  }, []);
 
-  if (empDetails && reportees.length)
+  if (viewReportee && reportees.length)
     return (
       <div className="p-4" >
         <div className="bg-white p-3 rounded-md">
@@ -110,33 +111,33 @@ function Reports() {
             {/* <img src="/generic-male-avatar-rectangular.jpg" width="100px" height="100px" /> */}
             <div className="my-1">
               <p>
-                <span className="font-medium">Employee Name : </span> {empDetails?.empName}
+                <span className="font-medium">Employee Name : </span> {viewReportee?.empName}
               </p>
               <p>
-                <span className="font-medium">Designation : </span> {empDetails?.designation}
+                <span className="font-medium">Designation : </span> {viewReportee?.designation}
               </p>
               {/* <p>
-              <span className="font-medium">Email Id:  </span> {empDetails?.empEmail}
+              <span className="font-medium">Email Id:  </span> {viewReportee?.empEmail}
           </p> */}
             </div>
             <div className="my-1">
               <p>
-                <span className="font-medium">Role : </span> {empDetails?.techStack}
+                <span className="font-medium">Role : </span> {viewReportee?.techStack}
               </p>
               <p>
-                <span className="font-medium">Employee Id:  </span> {empDetails?.empId}
+                <span className="font-medium">Employee Id:  </span> {viewReportee?.empId}
               </p>
               {/* <p>
-          <span className="font-medium">Total Score : </span> {empDetails?.score}
+          <span className="font-medium">Total Score : </span> {viewReportee?.score}
           </p> */}
               {/* <p>
-          <span className="font-medium">Allocated To : </span> {empDetails?.project}
+          <span className="font-medium">Allocated To : </span> {viewReportee?.project}
           </p> */}
 
             </div>
             <div className="flex flex-col justify-center items-center">
-              <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center  ${scoreColor(empDetails?.score)}`}>
-                <span className="text-lg font-bold">{empDetails?.score}</span>
+              <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center  ${scoreColor(viewReportee?.score)}`}>
+                <span className="text-lg font-bold">{viewReportee?.score}</span>
               </div>
               <div className="">
                 <span className="text-blue-400 font-semibold">Total Score</span>
@@ -162,4 +163,4 @@ function Reports() {
 }
 
 
-export default Reports;
+export default Viewreportee;

src/redux/reducers/reporteesSlice.js

@@ -4,6 +4,7 @@ import axios from "axios";
 
 const initialState = {
   reportees: [],
+  viewReportee:null,
   totalCount:0,
   loading: false,
   error: null,
@@ -20,6 +21,20 @@ const reporteesSlice = createSlice({
   reducers: {
     resetReportees:() => {
       return initialState
+    },
+    setViewReportee:(state,action)=>{
+        const reportee=state.reportees.find((reportee)=>reportee.empId==action.payload)
+         if(!reportee){
+          return {
+            ...state,
+            viewReportee: null
+          }
+        } else {
+          return {
+            ...state,
+            viewReportee: reportee
+          }
+        }
     }
   },
   extraReducers: (builder) => {
@@ -41,6 +56,6 @@ const reporteesSlice = createSlice({
   },
 });
 
-export const {resetReportees} = reporteesSlice.actions;
+export const {resetReportees,setViewReportee} = reporteesSlice.actions;
 
 export default reporteesSlice.reducer;