Progress

client/src/components/task-list/task-list.container.jsx

@@ -0,0 +1,44 @@
+import queryString from "query-string";
+import {useLocation} from "react-router-dom";
+import {useQuery} from "@apollo/client";
+import {QUERY_ALL_TASKS_PAGINATED} from "../../graphql/tasks.queries.js";
+import {pageLimit} from "../../utils/config.js";
+import AlertComponent from "../alert/alert.component.jsx";
+import React from "react";
+import TaskListComponent from "./task-list.component.jsx";
+
+export default function TaskListContainer() {
+  const searchParams = queryString.parse(useLocation().search);
+  const {page, sortcolumn, sortorder, search} = searchParams;
+  const {loading, error, data, refetch} = useQuery(
+    QUERY_ALL_TASKS_PAGINATED,
+    {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+      variables: {
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
+        order: [
+          {
+            [sortcolumn || "created_at"]: sortorder
+              ? sortorder === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        ],
+      },
+    }
+  );
+
+  if (error) return <AlertComponent message={error.message} type="error"/>;
+  
+  return (
+    <TaskListComponent
+      loading={loading}
+      tasks={data ? data.tasks : null}
+      total={data ? data.tasks_aggregate.aggregate.count : 0}
+      refetch={refetch}
+    />
+  );
+}