rework: Split exp tables hooks

src/pages/ExperiencePoints/ExperiencePointsFilters.tsx → src/pages/ExperiencePoints/ExperiencePointsFilters/index.tsx

@@ -6,40 +6,23 @@ import {
 } from "@appquality/appquality-design-system";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { shallowEqual, useSelector } from "react-redux";
 import useDebounce from "src/hooks/useDebounce";
 import {
   setSelectedActivity,
   setSelectedCampaign,
   setSelectedDate,
-} from "../../redux/experiencePoints/actionCreator";
-import { useAppDispatch } from "../../redux/provider";
-import { useGetUsersMeExperienceQuery } from "src/services/tryberApi";
+} from "src/redux/experiencePoints/actionCreator";
 import { mapActivityName } from "src/redux/experiencePoints/utils";
+import { useAppDispatch } from "src/redux/provider";
+import { useGetUsersMeExperienceQuery } from "src/services/tryberApi";
 import dateFormatter from "src/utils/dateFormatter";
-import { shallowEqual, useSelector } from "react-redux";
 
-interface ExperiencePointsFiltersProps {
-  selectedCampaign?: SelectType.Option;
-  selectedActivity?: SelectType.Option;
-  selectedDate?: SelectType.Option;
-  search: string | undefined;
-}
-
-const useSelectValues = ({
-  selectedCampaign,
-  selectedActivity,
-  selectedDate,
-}: {
-  selectedCampaign?: SelectType.Option;
-  selectedActivity?: SelectType.Option;
-  selectedDate?: SelectType.Option;
-}) => {
+const useSelectValues = () => {
   const { t } = useTranslation();
 
-  const { search } = useSelector(
-    (state: GeneralState) => state.experiencePoints,
-    shallowEqual
-  );
+  const { selectedActivity, selectedCampaign, selectedDate, search } =
+    useSelector((state: GeneralState) => state.experiencePoints, shallowEqual);
 
   const { data, isLoading } = useGetUsersMeExperienceQuery({
     searchBy: "note",
@@ -127,23 +110,16 @@ const useSelectValues = ({
   return { campaigns, activities, dates };
 };
 
-const ExperiencePointsFilters = ({
-  selectedCampaign,
-  selectedActivity,
-  selectedDate,
-  search,
-}: ExperiencePointsFiltersProps) => {
+const ExperiencePointsFilters = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
+  const { selectedActivity, selectedCampaign, selectedDate, search } =
+    useSelector((state: GeneralState) => state.experiencePoints, shallowEqual);
   const [currentSearch, setCurrentSearch] = useState(search);
   const debouncedSearch = useDebounce(currentSearch, 500);
 
-  const { campaigns, activities, dates } = useSelectValues({
-    selectedCampaign,
-    selectedActivity,
-    selectedDate,
-  });
+  const { campaigns, activities, dates } = useSelectValues();
 
   const allCampaign = t("All", { context: "female" });
   const allActivities = t("All", { context: "female" });

src/pages/ExperiencePoints/ExperiencePointsTable/index.tsx

@@ -0,0 +1,66 @@
+import {
+  Pagination,
+  SortTableSelect,
+  Table,
+} from "@appquality/appquality-design-system";
+import { useTranslation } from "react-i18next";
+import { shallowEqual, useSelector } from "react-redux";
+import { updateExperiencePointsPagination } from "src/redux/experiencePoints/actionCreator";
+import { useAppDispatch } from "src/store";
+import { useExperiencePointsColumns } from "../columns";
+import { useResetPaginationOnFilterChange } from "./useResetPaginationOnFilterChange";
+import { useRows } from "./useRows";
+
+const ExperiencePointsTable = () => {
+  const limit = 25;
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { rows, loading, totalEntries } = useRows();
+  const columns = useExperiencePointsColumns();
+
+  const setPage = (newPage: number) => {
+    const newStart = limit * (newPage - 1);
+    dispatch(updateExperiencePointsPagination(newStart));
+  };
+
+  useResetPaginationOnFilterChange({ setPage });
+
+  const { order, orderBy, start } = useSelector(
+    (state: GeneralState) => state.experiencePoints.expList,
+    shallowEqual
+  );
+
+  const page = (start ?? 0) / limit + 1;
+
+  return (
+    <>
+      <SortTableSelect
+        order={order}
+        orderBy={orderBy}
+        columns={columns}
+        label={t("Order By", { context: "Sort Table Select" })}
+      />
+      <Table
+        dataSource={rows}
+        columns={columns}
+        orderBy={orderBy}
+        order={order}
+        isLoading={loading}
+        className="aq-mb-3"
+        isStriped
+      />
+      <Pagination
+        onPageChange={setPage}
+        current={page}
+        maxPages={Math.ceil(totalEntries / limit)}
+        mobileText={(current, total) =>
+          t(`Page %current% / %total%`)
+            .replace("%current%", current.toString())
+            .replace("%total%", total ? total.toString() : "0")
+        }
+      />
+    </>
+  );
+};
+
+export default ExperiencePointsTable;

src/pages/ExperiencePoints/ExperiencePointsTable/useResetPaginationOnFilterChange.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { shallowEqual, useSelector } from "react-redux";
+
+const useResetPaginationOnFilterChange = ({
+  setPage,
+}: {
+  setPage: (newPage: number) => void;
+}) => {
+  const { selectedActivity, selectedCampaign, selectedDate, search } =
+    useSelector((state: GeneralState) => state.experiencePoints, shallowEqual);
+
+  useEffect(() => {
+    if (
+      selectedCampaign ||
+      selectedActivity ||
+      selectedDate ||
+      search ||
+      search === ""
+    ) {
+      setPage(1);
+    }
+  }, [selectedCampaign, selectedActivity, selectedDate, search]);
+};
+
+export { useResetPaginationOnFilterChange };

src/pages/ExperiencePoints/ExperiencePointsTable/useRows.tsx

@@ -0,0 +1,77 @@
+import { useTranslation } from "react-i18next";
+import { shallowEqual, useSelector } from "react-redux";
+import { mapActivityName } from "src/redux/experiencePoints/utils";
+import { useGetUsersMeExperienceQuery } from "src/services/tryberApi";
+import dateFormatter from "src/utils/dateFormatter";
+
+const useRows = () => {
+  const limit = 25;
+  const { t } = useTranslation();
+
+  const { order, orderBy, start } = useSelector(
+    (state: GeneralState) => state.experiencePoints.expList,
+    shallowEqual
+  );
+  const { selectedActivity, selectedCampaign, selectedDate, search } =
+    useSelector((state: GeneralState) => state.experiencePoints, shallowEqual);
+
+  const {
+    data,
+    error,
+    isLoading: loading,
+  } = useGetUsersMeExperienceQuery({
+    limit: limit,
+    start: start,
+    order: order,
+    orderBy: orderBy,
+    search: search,
+    searchBy: "note",
+    filterBy: {
+      campaign: selectedCampaign?.value,
+      activity: selectedActivity?.value,
+      date: selectedDate?.value,
+    },
+  });
+
+  if (error) {
+    return {
+      rows: [],
+      loading: false,
+      totalEntries: 0,
+    };
+  }
+
+  const { results, total } = data ?? {};
+
+  const rows = (results ?? []).map((res) => {
+    return {
+      key: res.id,
+      amount: {
+        title: `${res.amount > 0 ? `+${res.amount}` : res.amount}pts`,
+        content:
+          res.amount === 0 ? (
+            <b className="aq-text-primary">{res.amount}pts</b>
+          ) : res.amount > 0 ? (
+            <b className="aq-text-success">+{res.amount}pts</b>
+          ) : (
+            <b className="aq-text-danger">{res.amount}pts</b>
+          ),
+      },
+      date: dateFormatter(res.date),
+      activity: mapActivityName(res.activity.id, t),
+      campaign:
+        res.campaign.title && res.campaign.id > 0
+          ? `CP${res.campaign.id}`
+          : `-`,
+      note: res.note?.replace(/\\(.)/gm, "$1"),
+    };
+  });
+
+  return {
+    rows,
+    loading,
+    totalEntries: total ?? 0,
+  };
+};
+
+export { useRows };

src/pages/ExperiencePoints/columns.ts

@@ -1,11 +1,11 @@
 import { Column } from "@appquality/appquality-design-system/dist/stories/table/_types";
-import { TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch } from "src/store";
 import { updateExperiencePointsSortingOptions } from "../../redux/experiencePoints/actionCreator";
 
-export const ExperiencePointsColumns = (
-  dispatch: AppDispatch,
-  t: TFunction<"translation">
-): Column[] => {
+export const useExperiencePointsColumns = (): Column[] => {
+  const { t } = useTranslation("translation");
+  const dispatch = useAppDispatch();
   return [
     {
       title: t("Points"),