feat: added users models page

hotosm · Dec 5, 2024 · 22e1de7 · 22e1de7
1 parent e1a8996
commit 22e1de7
Show file tree

Hide file tree

Showing 16 changed files with 476 additions and 242 deletions.
diff --git a/frontend/src/app/router.tsx b/frontend/src/app/router.tsx
@@ -315,11 +315,11 @@ const router = createBrowserRouter([
       {
         path: APPLICATION_ROUTES.ACCOUNT_MODELS,
         lazy: async () => {
-          const { UserAccountModelsPage } = await import(
+          const { UserModelsPage } = await import(
             "@/app/routes/account/models"
           );
           return {
-            Component: () => <UserAccountModelsPage />,
+            Component: () => <UserModelsPage />,
           };
         },
       },

diff --git a/frontend/src/app/routes/account/models.tsx b/frontend/src/app/routes/account/models.tsx
@@ -1,5 +1,173 @@
-import { PageUnderConstruction } from "@/components/errors";
+import Pagination, { PAGE_LIMIT } from "@/components/pagination";
+import { Head } from "@/components/seo";
+import { APPLICATION_CONTENTS } from "@/contents";
+import { LayoutView } from "@/enums/models";
+import { LayoutToggle, PageHeader } from "@/features/models/components";
+import { MobileModelFiltersDialog } from "@/features/models/components/dialogs";
+import { CategoryFilter, ClearFilters, DateRangeFilter, MobileFilter, OrderingFilter, SearchFilter } from "@/features/models/components/filters";
+import { useModelsListFilters } from "@/features/models/hooks/use-models";
+import { ModelListGridLayout, ModelListTableLayout } from "@/features/models/layouts";
+import { useDialog } from "@/hooks/use-dialog";
+import { APP_CONTENT } from "@/utils";
+import { useMemo } from "react";
+import ModelNotFound from "@/features/models/components/model-not-found";
+import { SEARCH_PARAMS } from "@/app/routes/models/models-list";
+import { useAuth } from "@/app/providers/auth-provider";
 
-export const UserAccountModelsPage = () => {
-  return <PageUnderConstruction />;
+
+export const UserModelsPage = () => {
+
+  const { isOpened, openDialog, closeDialog } = useDialog();
+  const { user } = useAuth();
+
+  const { clearAllFilters, data, isError, isPending, isPlaceholderData, query, updateQuery } = useModelsListFilters(user.osm_id)
+
+  // Since it's just a static filter, it's better to memoize it.
+  const memoizedCategoryFilter = useMemo(
+    () => <CategoryFilter disabled={isPending} />,
+    [isPending],
+  );
+
+
+  const renderContent = () => {
+    if (data?.count === 0) {
+      return (
+        <div className="h-[400px] flex w-full col-span-5 items-center justify-center">
+          <ModelNotFound />
+        </div>
+      );
+    }
+
+    if (query[SEARCH_PARAMS.layout] === LayoutView.LIST) {
+      return (
+        <div className="col-span-5">
+          <ModelListTableLayout
+            isPending={isPending}
+            models={data?.results}
+            isError={isError}
+          />
+        </div>
+      );
+    }
+    return (
+      <ModelListGridLayout
+        isPending={isPending}
+        models={data?.results}
+        isError={isError}
+      />
+    );
+  };
+
+  return (
+    <>
+      <MobileModelFiltersDialog
+        isOpened={isOpened}
+        closeDialog={closeDialog}
+        query={query}
+        updateQuery={updateQuery}
+        disabled={isPending}
+      />
+      <Head title={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageTitle} />
+      <section className="my-10 min-h-screen">
+        <PageHeader title={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageHeader} description={APPLICATION_CONTENTS.MY_MODELS_PAGE.pageDescription} />
+        {/* Filters */}
+        <div className="sticky top-0 bg-white z-10 py-2">
+          <div className="flex flex-col gap-y-4">
+            <div className=" flex items-center justify-between w-full ">
+              <div className="flex items-center justify-between w-full md:gap-x-4 gap-y-2 md:gap-y-0  md:w-auto">
+                <SearchFilter updateQuery={updateQuery} query={query} />
+                {memoizedCategoryFilter}
+                {/* Mobile filters */}
+                <div className="flex md:hidden items-center gap-x-4">
+                  <MobileFilter openMobileFilterModal={openDialog} />
+                  <LayoutToggle
+                    updateQuery={updateQuery}
+                    query={query}
+                    isMobile
+                  />
+                </div>
+                <DateRangeFilter
+                  disabled={isPending}
+                  updateQuery={updateQuery}
+                  query={query}
+                />
+                {/* Desktop */}
+                <ClearFilters query={query} clearAllFilters={clearAllFilters} />
+              </div>
+              <div className="md:flex items-center gap-x-10 hidden">
+                {/* Desktop */}
+                <LayoutToggle
+                  updateQuery={updateQuery}
+                  query={query}
+                />
+              </div>
+            </div>
+            {/* Mobile */}
+            <div className="self-start">
+              <ClearFilters
+                query={query}
+                clearAllFilters={clearAllFilters}
+                isMobile
+              />
+            </div>
+          </div>
+          {isPending ? (
+            <div className="w-full h-10 mt-10 bg-light-gray animate-pulse text-dark"></div>
+          ) : (
+            <div className="flex items-center justify-between w-full my-10 top-16">
+              <div className="w-full flex items-center justify-between">
+                <p className="font-semibold text-body-3">
+                  {data?.count}{" "}
+                  {
+                    APP_CONTENT.models.modelsList.sortingAndPaginationSection
+                      .modelCountSuffix
+                  }
+                </p>
+              </div>
+              <div className="flex items-center gap-x-9">
+                <OrderingFilter
+                  disabled={isPending}
+                  query={query}
+                  updateQuery={updateQuery}
+                />
+                <div className="hidden md:flex">
+                  <Pagination
+                    totalLength={data?.count}
+                    hasNextPage={data?.hasNext}
+                    hasPrevPage={data?.hasPrev}
+                    disableNextPage={!data?.hasNext || isPlaceholderData}
+                    disablePrevPage={!data?.hasPrev}
+                    pageLimit={PAGE_LIMIT}
+                    query={query}
+                    updateQuery={updateQuery}
+                    isPlaceholderData={isPlaceholderData}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div
+          className={"my-10 grid grid-cols-1 sm:grid-cols-2  md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-x-7 gap-y-14"}
+        >
+          {renderContent()}
+        </div>
+        {/* mobile pagination */}
+        <div className="w-full flex items-center justify-center md:hidden">
+          <Pagination
+            totalLength={data?.count}
+            hasNextPage={data?.hasNext}
+            hasPrevPage={data?.hasPrev}
+            disableNextPage={!data?.hasNext || isPlaceholderData}
+            disablePrevPage={!data?.hasPrev}
+            pageLimit={PAGE_LIMIT}
+            query={query}
+            updateQuery={updateQuery}
+            isPlaceholderData={isPlaceholderData}
+          />
+        </div>
+      </section>
+    </>
+  )
 };