fixed bugs with sort

src/widgets/tables/ProfileTable/ProfileTable.tsx

@@ -29,10 +29,7 @@ const ProfileTable: React.FC<IProfileTableProps> = ({
   } = useProfileReportsStore();
   const session = useSession();
   const router = useRouter();
-  const [filter, setFilter] = useState({
-    option: "date",
-    toggle: true,
-  });
+  const [sort, setSort] = useState("date");
   const [activePage, setActivePage] = useState<number>(
     +searchParams["страница-обращений"] || 1
   );
@@ -40,18 +37,7 @@ const ProfileTable: React.FC<IProfileTableProps> = ({
     {
       param: "Дата",
       handleClick() {
-        if (filter.option !== "date") {
-          return setFilter({ option: "date", toggle: false });
-        }
-
-        setFilter((prev) => {
-          return { option: "date", toggle: !prev.toggle };
-        });
-        getMyReports(
-          filter,
-          activePage,
-          session.data?.access_token as string
-        );
+        setSort("date");
       },
     },
     { param: "Адрес" },
@@ -59,38 +45,13 @@ const ProfileTable: React.FC<IProfileTableProps> = ({
     {
       param: "Комментарии",
       handleClick() {
-        if (filter.option !== "count_reviews") {
-          return setFilter({
-            option: "count_reviews",
-            toggle: false,
-          });
-        }
-
-        setFilter((prev) => {
-          return { option: "count_reviews", toggle: !prev.toggle };
-        });
-        getMyReports(
-          filter,
-          activePage,
-          session.data?.access_token as string
-        );
+        setSort("reviews");
       },
     },
     {
       param: "Рейтинг",
       handleClick() {
-        if (filter.option !== "total_likes") {
-          return setFilter({ option: "total_likes", toggle: false });
-        }
-
-        setFilter((prev) => {
-          return { option: "total_likes", toggle: !prev.toggle };
-        });
-        getMyReports(
-          filter,
-          activePage,
-          session.data?.access_token as string
-        );
+        setSort("rating");
       },
     },
   ];
@@ -98,7 +59,7 @@ const ProfileTable: React.FC<IProfileTableProps> = ({
   useEffect(() => {
     if (session.status === "loading") return;
     getMyReports(
-      filter,
+      sort,
       activePage,
       session.data?.access_token as string
     );
@@ -110,11 +71,11 @@ const ProfileTable: React.FC<IProfileTableProps> = ({
       { scroll: false }
     );
     getMyReports(
-      filter,
+      sort,
       activePage,
       session.data?.access_token as string
     );
-  }, [activePage]);
+  }, [activePage, sort]);
 
   return (
     <div className="profile-table">

src/widgets/tables/ProfileTable/profile-reports.store.ts

@@ -15,7 +15,7 @@ const filterCategories: Record<string, string> = {
 interface IProfileReportsStore extends IFetch {
   data: IMyReportsList;
   getMyReports: (
-    filter: { option: string; toggle: boolean },
+    filter: string,
     page: number,
     access_token: string
   ) => void;
@@ -32,10 +32,7 @@ export const useProfileReportsStore = create<IProfileReportsStore>(
       results: [],
     },
     getMyReports: async (
-      filter: {
-        option: string;
-        toggle: boolean;
-      },
+      sort: string,
       page: number,
       access_token: string
     ) => {
@@ -47,48 +44,27 @@ export const useProfileReportsStore = create<IProfileReportsStore>(
           },
         };
         set({ isLoading: true });
-        const res = await apiInstance.get<IMyReportsList>(
-          `/users/reports/?page=${page}`,
-          config
-        );
+        const data = await apiInstance
+          .get<IMyReportsList>(
+            `/users/reports/?page=${page}&page_size=8`,
+            config
+          )
+          .then((res) => res.data);
 
-        let data = res.data;
-
-        if (filter.option === "date" && filter.toggle === false) {
+        if (sort === "date") {
           data.results = data.results.sort((a, b) => {
-            const dateA = new Date(a.created_at) as unknown as number;
-            const dateB = new Date(b.created_at) as unknown as number;
+            const dateA = new Date(b.created_at) as unknown as number;
+            const dateB = new Date(a.created_at) as unknown as number;
             return dateA - dateB;
           });
-        } else if (
-          filter.option === "date" &&
-          filter.toggle === true
-        ) {
-          data.results = data.results.sort((a, b) => {
-            const dateA = new Date(a.created_at) as unknown as number;
-            const dateB = new Date(b.created_at) as unknown as number;
-            return dateB - dateA;
-          });
-        }
-
-        if (
-          filter.option === filterCategories[filter.option] &&
-          filter.toggle === false
-        ) {
-          data.results = data.results.sort((a, b) => {
-            const optionKey = filter.option as keyof IMyReports;
-            return (Number(a[optionKey]) -
-              Number(b[optionKey])) as number;
-          });
-        } else if (
-          filter.option === "rating" &&
-          filter.toggle === true
-        ) {
-          data.results = data.results.sort((a, b) => {
-            const optionKey = filter.option as keyof IMyReports;
-            return (Number(a[optionKey]) -
-              Number(b[optionKey])) as number;
-          });
+        } else if (sort === "reviews") {
+          data.results = data.results.sort(
+            (a, b) => b.count_reviews - a.count_reviews
+          );
+        } else if (sort === "rating") {
+          data.results = data.results.sort(
+            (a, b) => b.total_likes - a.total_likes
+          );
         }
 
         set({ data: data });

src/widgets/tables/StatisticsTable/StatisticsTable.tsx

@@ -32,10 +32,7 @@ const StatisticsTable: React.FC<IStatisticsTableProps> = ({
     getStatistics,
     data: statistics,
   } = useStatisticsStore(useShallow((state) => state));
-  const [filter, setFilter] = useState({
-    option: "broken_road",
-    toggle: false,
-  });
+  const [sort, setSort] = useState<string>("broken_road_1");
 
   const [openPopup, setOpenPopup] = useState<boolean>(false);
 
@@ -44,122 +41,54 @@ const StatisticsTable: React.FC<IStatisticsTableProps> = ({
   const params = [
     {
       param: "Добавлено дорог",
-      async handleClick() {
-        if (filter.option !== "broken_road_1") {
-          return setFilter({
-            option: "broken_road_1",
-            toggle: false,
-          });
-        }
-
-        setFilter((prev) => {
-          return { option: "broken_road_1", toggle: !prev.toggle };
-        });
-
-        getStatistics(location, filter, query);
+      handleClick() {
+        setSort("broken_road_1");
       },
     },
     {
       param: "Локальных дефектов",
-      async handleClick() {
-        if (filter.option !== "local_defect_3") {
-          return setFilter({
-            option: "local_defect_3",
-            toggle: false,
-          });
-        }
-
-        setFilter((prev) => {
-          return { option: "local_defect_3", toggle: !prev.toggle };
-        });
-
-        getStatistics(location, filter, query);
+      handleClick() {
+        setSort("local_defect_3");
       },
     },
     {
       param: "Очагов аварийности",
-      async handleClick() {
-        if (filter.option !== "hotbed_of_accidents_2") {
-          return setFilter({
-            option: "hotbed_of_accidents_2",
-            toggle: false,
-          });
-        }
-
-        setFilter((prev) => {
-          return {
-            option: "hotbed_of_accidents_2",
-            toggle: !prev.toggle,
-          };
-        });
-
-        getStatistics(location, filter, query);
+      handleClick() {
+        setSort("hotbed_of_accidents_2");
       },
     },
     {
       param: "Локальных дефектов исправлено",
-      async handleClick() {
-        if (filter.option !== "local_defect_fixed_6") {
-          return setFilter({
-            option: "local_defect_fixed_6",
-            toggle: false,
-          });
-        }
-
-        setFilter((prev) => {
-          return {
-            option: "local_defect_fixed_6",
-            toggle: !prev.toggle,
-          };
-        });
-
-        getStatistics(location, filter, query);
+      handleClick() {
+        setSort("local_defect_fixed_6");
       },
     },
     {
       param: "В планах ремонта",
-      async handleClick() {
-        if (filter.option !== "repair_plans_4") {
-          return setFilter({
-            option: "repair_plans_4",
-            toggle: false,
-          });
-        }
-
-        setFilter((prev) => {
-          return { option: "repair_plans_4", toggle: !prev.toggle };
-        });
-
-        getStatistics(location, filter, query);
+      handleClick() {
+        setSort("repair_plans_4");
       },
     },
     {
       param: "Отремонтировано",
-      async handleClick() {
-        if (filter.option !== "repaired_5") {
-          return setFilter({ option: "repaired_5", toggle: false });
-        }
-
-        setFilter((prev) => {
-          return { option: "repaired_5", toggle: !prev.toggle };
-        });
-
-        getStatistics(location, filter, query);
+      handleClick() {
+        setSort("repaired_5");
       },
     },
   ];
 
   const getStatsByLocation = async (location: string) => {
     setLocation(location);
-    getStatistics(location, filter, query);
-    console.error("Error fetching statistics:", error);
+    getStatistics(location, sort, query);
   };
 
   useEffect(() => {
-    getStatistics(location, filter, query);
+    getStatistics(location, sort, query);
 
-    router.push(`/statistics?поиск-населенного-пункта=${query}`);
-  }, [query]);
+    router.push(`/statistics?поиск-населенного-пункта=${query}`, {
+      scroll: false,
+    });
+  }, [query, sort]);
 
   return (
     <div className="statistics-table">
@@ -241,11 +170,7 @@ const StatisticsTable: React.FC<IStatisticsTableProps> = ({
               ))
             ) : (
               <tr id="statistics-table__no-data-warning">
-                <td>
-                  {error
-                    ? error
-                    : "Oops, looks like there is no data"}
-                </td>
+                <td>{error ? error : "Данных не найдено"}</td>
               </tr>
             )}
           </tbody>

src/widgets/tables/StatisticsTable/statistics.store.ts

@@ -18,7 +18,7 @@ interface IStatisticsStore extends IFetch {
   data: IStatistics[];
   getStatistics: (
     endpoint: string,
-    filter: { option: string; toggle: boolean },
+    sort: string,
     query: string
   ) => void;
 }
@@ -29,7 +29,7 @@ export const useStatisticsStore = create<IStatisticsStore>((set) => ({
   data: [],
   getStatistics: async (
     endpoint: string,
-    filter: { option: string; toggle: boolean },
+    sort: string,
     query: string = ""
   ) => {
     try {
@@ -42,27 +42,9 @@ export const useStatisticsStore = create<IStatisticsStore>((set) => ({
         loc.name.toLowerCase().includes(query.toLowerCase())
       );
 
-      if (
-        filter.option === filterCategories[filter.option] &&
-        filter.toggle === false
-      ) {
-        data = data.sort((a, b) => {
-          const optionKey = filter.option as keyof IStatistics;
-          return (Number(a[optionKey]) -
-            Number(b[optionKey])) as number;
-        });
-      } else if (
-        filter.option === "rating" &&
-        filter.toggle === true
-      ) {
-        data = data.sort((a, b) => {
-          const optionKey = filter.option as keyof IStatistics;
-          return (Number(a[optionKey]) -
-            Number(b[optionKey])) as number;
-        });
-      }
+      const sorted = data.sort((a: any, b: any) => a[sort] - b[sort]);
 
-      set({ data: data });
+      set({ data: sorted });
     } catch (error: unknown) {
       if (error instanceof AxiosError) {
         set({ error: error.message });