sorting and download button changes

src/components/table/index.jsx

 import React, {useState, useEffect} from "react";
+import { useSelector, useDispatch} from "react-redux";
+import {setSortKey, setSortOrder} from '../../redux/reducers/reporteesSlice';
 import Loading from "../loading Component/Loading";
 import SortButton from "../sortButton";
 
-function Table({headers, data,loading, maxHeight}) {
-  const [sortedData, setSortedData] = useState([]);
-  const [sortKey, setSortKey] = useState(null);
-  const [sortOrder, setSortOrder] = useState('asc');
+function Table({headers, data,loading, handleSorting }) {
+  const dispatch = useDispatch();
+  const {sortKey,  sortOrder} = useSelector((state) => state.reportees);
+  // const [sortedData, setSortedData] = useState([]);
+  // const [sortKey, setSortKey] = useState(null);
+  // const [sortOrder, setSortOrder] = useState('asc');
 
-  useEffect(() => {
-    if(sortKey) {
-      setSortKey(null);
-    }
-    setSortedData(data);
-  }, [data]);
+  // useEffect(() => {
+  //   if(sortKey) {
+  //     setSortKey(null);
+  //   }
+  //   setSortedData(data);
+  // }, [data]);
+
+  // useEffect(() => {
+  //   if(sortKey) {
+      
+  //   }
+  // }, [sortKey, sortOrder])
 
   const handleSort = (key) => {
-    const order = key === sortKey ? (sortOrder === 'asc' ? 'desc' : 'asc') : 'asc';
 
+    const order = key === sortKey ? (sortOrder === 'asc' ? 'desc' : 'asc') : 'asc';
     if(sortOrder === 'desc' && key === sortKey) {
-      setSortedData(data);
-      setSortKey(null);
-      setSortOrder('asc');
+        dispatch(setSortKey(null))
+      dispatch(setSortOrder('asc'));
+        handleSorting(null, order)
     } else {
-      const sorted = [...data].sort((a, b) => {
-        if (typeof a[key] === 'string') {
-          return order === 'asc' ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
-        }
-        return order === 'asc' ? a[key] - b[key] : b[key] - a[key];
-      });
-      setSortedData(sorted);
-      setSortKey(key);
-      setSortOrder(order);
+     dispatch(setSortKey(key));
+      dispatch(setSortOrder(order));
+      handleSorting(key, order)
     }
+   
+
+    // if(sortOrder === 'desc' && key === sortKey) {
+    //   setSortedData(data);
+    //   setSortKey(null);
+    //   setSortOrder('asc');
+    // } else {
+    //   const sorted = [...data].sort((a, b) => {
+    //     if (typeof a[key] === 'string') {
+    //       return order === 'asc' ? a[key].localeCompare(b[key]) : b[key].localeCompare(a[key]);
+    //     }
+    //     return order === 'asc' ? a[key] - b[key] : b[key] - a[key];
+    //   });
+    //   setSortedData(sorted);
+    //   setSortKey(key);
+    //   setSortOrder(order);
+    // }
 
   };
 
@@ -58,7 +79,7 @@ function Table({headers, data,loading, maxHeight}) {
        { 
        (data?.length)?<tbody >
          {
-           sortedData?.map((item, index) => (
+           data?.map((item, index) => (
                <tr key={item.id} className="bg-white  hover:bg-gray-300 " >
                    {
                      headers?.map(({render, id}) => (

src/pages/dashboard/index.jsx

@@ -10,7 +10,7 @@ import PaginationComponent from "../../components/Pagenation/Pagenation";
 function Dashboard() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { reportees, loading, totalCount, currPage,  pagesCount} = useSelector((state) => state.reportees);
+  const { reportees, loading, totalCount, currPage,  pagesCount, sortKey, sortOrder} = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
   const [reporteIds, setReporteIds] = useState([]);
   const [inputValue, setInputValue] = useState(null);
@@ -20,12 +20,22 @@ function Dashboard() {
     let data = {
       reportees: userDetails.user.reportees,
       page: currPage,
-      perPage: 10
+      perPage: 10,
+      sort: sortKey ? {type:sortKey, order: sortOrder === "asc" ? 1 : -1} : {}
     }
     dispatch(setCurrPage(currPage))
     dispatch(fetchReportees(data))
   }
 
+  const handleSort = (key, order) => {
+    let data = {
+      reportees: userDetails.user.reportees,
+      page: currPage,
+      perPage: 10,
+      sort: key ? {type:key, order: order === "asc" ? 1 : -1} : {}
+    }
+    dispatch(fetchReportees(data))
+  }
 
   useEffect(() => {
     dispatch(setPagesCount(Math.ceil((totalCount) / (10))))
@@ -122,7 +132,7 @@ function Dashboard() {
           <label>Search :</label>
           <input placeholder="Name/Id/Designation/Role"  value={inputValue} onChange={handleChange} type="text" className="p-1 px-2 border rounded ml-2 placeholder:text-[14px]"/>
         </div>
-         <Table headers={headers} data={reportees} loading={loading} maxHeight={88} />
+         <Table headers={headers} data={reportees} loading={loading} handleSorting={handleSort}/>
          
       <div className="">
         {reportees.length>0 && pagesCount>1 && (

src/pages/reportexport/index.jsx

@@ -174,7 +174,7 @@ function Exporttable() {
           return true;
         }
       } else {
-        if((preEmployee !== selectedEmployee && fromDate !== preFromDate && toDate !== preToDate) || activitiesData?.length === 0) {
+        if((preEmployee !== selectedEmployee || fromDate !== preFromDate || toDate !== preToDate) || activitiesData.length === 0) {
           return true;
         }
       }

src/redux/reducers/reporteesSlice.js

@@ -9,7 +9,9 @@ const initialState = {
   loading: false,
   error: null,
   currPage:1,
-  pagesCount:1
+  pagesCount:1,
+  sortKey: null,
+  sortOrder: 'asc'
 };
 
 export const fetchReportees = createAsyncThunk("getreportees", async (data) => {
@@ -43,6 +45,12 @@ const reporteesSlice = createSlice({
     },
     setPagesCount: (state, action) => {
       state.pagesCount = action.payload
+    },
+    setSortKey: (state, action) => {
+      state.sortKey = action.payload
+    },
+    setSortOrder: (state, action) => {
+      state.sortOrder = action.payload
     }
   },
   extraReducers: (builder) => {
@@ -64,6 +72,6 @@ const reporteesSlice = createSlice({
   },
 });
 
-export const {resetReportees,setViewReportee, setCurrPage, setPagesCount} = reporteesSlice.actions;
+export const {resetReportees,setViewReportee, setCurrPage, setPagesCount, setSortKey, setSortOrder} = reporteesSlice.actions;
 
 export default reporteesSlice.reducer;

src/redux/reducers/viewreporteeSlice.js

@@ -15,7 +15,7 @@ const initialState = {
 export const fetchReporteeActivities = createAsyncThunk("getReports", async (data) => {
   return await axios
     .post(`${base_url}/getActivities`, data)
-    .then((response) => response.data?.activities);
+    .then((response) => {return {data:response.data?.activities, type:data.types}});
 });
 
 export const fetchActivitiesAvg = createAsyncThunk("getActivities-avg", async (data) => {
@@ -37,8 +37,8 @@ const reportSlice = createSlice({
       return {...state,loading :true,error :"loading"}
     });
     builder.addCase(fetchReporteeActivities.fulfilled, (state, action) => {
-      const {type} = action?.payload[0] ?? {}
-      return {...state,loading :false,error :"", [`${type}Reports`]: action.payload}
+      const {data, type} = action.payload;
+      return {...state,loading :false,error :"", [`${type[0]}Reports`]: data}
     });
     builder.addCase(fetchReporteeActivities.rejected, (state, action) => {
       return {...state,loading :false,error :action.error || "Something went wrong!",reports:null}