refactor(web): update sort for projects and assets (#1101)

reearth · Aug 9, 2024 · ab9db9a · ab9db9a
1 parent a74428f
commit ab9db9a
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 80 deletions.
diff --git a/web/src/beta/features/Assets/hooks.ts b/web/src/beta/features/Assets/hooks.ts
@@ -4,23 +4,23 @@ import { useCallback, useState, useRef, useMemo, useEffect } from "react";
 import { Asset, SortType } from "@reearth/beta/features/Assets/types";
 import { autoFillPage, onScrollToBottom } from "@reearth/beta/utils/infinite-scroll";
 import { useAssetsFetcher } from "@reearth/services/api";
-import { Maybe, AssetSortType as GQLSortType } from "@reearth/services/gql";
+import { Maybe } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 
 // TODO: Remove this file
 
 const assetsPerPage = 20;
 
-const enumTypeMapper: Partial<Record<GQLSortType, string>> = {
-  [GQLSortType.Date]: "date",
-  [GQLSortType.Name]: "name",
-  [GQLSortType.Size]: "size",
-};
+// const enumTypeMapper: Partial<Record<GQLSortType, string>> = {
+//   [GQLSortType.Date]: "date",
+//   [GQLSortType.Name]: "name",
+//   [GQLSortType.Size]: "size",
+// };
 
-function toGQLEnum(val?: SortType) {
-  if (!val) return;
-  return (Object.keys(enumTypeMapper) as GQLSortType[]).find(k => enumTypeMapper[k] === val);
-}
+// function toGQLEnum(val?: SortType) {
+// if (!val) return;
+// return (Object.keys(enumTypeMapper) as GQLSortType[]).find(k => enumTypeMapper[k] === val);
+// }
 
 function pagination(
   sort?: { type?: Maybe<SortType>; reverse?: boolean },
@@ -55,7 +55,7 @@ export default ({
   const { assets, hasMoreAssets, loading, isRefetching, endCursor, fetchMore } = useAssetsQuery({
     teamId: workspaceId ?? "",
     pagination: pagination(sort),
-    sort: toGQLEnum(sort?.type),
+    // sort: toGQLEnum(sort?.type),
     keyword: searchTerm,
   });
 

diff --git a/web/src/beta/features/AssetsManager/hooks.ts b/web/src/beta/features/AssetsManager/hooks.ts
@@ -4,7 +4,7 @@ import useFileInput from "use-file-input";
 import { BreadcrumbItem } from "@reearth/beta/lib/reearth-ui";
 import { ManagerLayout } from "@reearth/beta/ui/components/ManagerBase";
 import { useAssetsFetcher } from "@reearth/services/api";
-import { AssetSortType, Maybe } from "@reearth/services/gql";
+import { AssetSortField, SortDirection } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
 
 import {
@@ -18,6 +18,12 @@ import { Asset, sortOptionValue, SortType } from "./types";
 const ASSETS_PER_PAGE = 20;
 const ASSETS_LAYOUT_STORAGE_KEY = `reearth-visualizer-dashboard-assets-layout`;
 
+const typeToGQLField = {
+  date: AssetSortField.Date,
+  name: AssetSortField.Name,
+  size: AssetSortField.Size,
+};
+
 export default ({
   workspaceId,
   allowMultipleSelection,
@@ -96,8 +102,13 @@ export default ({
   const { useAssetsQuery, useRemoveAssets, useCreateAssets } = useAssetsFetcher();
   const { assets, hasMoreAssets, isRefetching, endCursor, loading, fetchMore } = useAssetsQuery({
     teamId: workspaceId ?? "",
-    pagination: pagination(sort),
-    sort: toGQLEnum(sort?.type),
+    pagination: {
+      first: ASSETS_PER_PAGE,
+    },
+    sort: {
+      direction: sort.reverse ? SortDirection.Desc : SortDirection.Asc,
+      field: typeToGQLField[sort.type ?? "date"],
+    },
     keyword: searchTerm,
   });
 
@@ -125,12 +136,15 @@ export default ({
     setLoadingMore(true);
     await fetchMore({
       variables: {
-        pagination: pagination(sort, endCursor),
+        pagination: {
+          first: ASSETS_PER_PAGE,
+          after: endCursor,
+        },
       },
     });
     setLoadingMore(false);
     isLoadingMoreRef.current = false;
-  }, [hasMoreAssets, isRefetching, fetchMore, sort, endCursor]);
+  }, [hasMoreAssets, isRefetching, fetchMore, endCursor]);
 
   const loadMoreRef = useRef<() => void>(loadMore);
   loadMoreRef.current = loadMore;
@@ -309,28 +323,3 @@ export default ({
     loadingMore,
   };
 };
-
-const enumTypeMapper: Partial<Record<AssetSortType, string>> = {
-  [AssetSortType.Date]: "date",
-  [AssetSortType.Name]: "name",
-  [AssetSortType.Size]: "size",
-};
-
-function toGQLEnum(val?: SortType) {
-  if (!val) return;
-  return (Object.keys(enumTypeMapper) as AssetSortType[]).find(k => enumTypeMapper[k] === val);
-}
-
-function pagination(
-  sort?: { type?: Maybe<SortType>; reverse?: boolean },
-  endCursor?: string | null,
-) {
-  const reverseOrder = !sort?.type || sort?.type === "date" ? !sort?.reverse : !!sort?.reverse;
-
-  return {
-    after: !reverseOrder ? endCursor : undefined,
-    before: reverseOrder ? endCursor : undefined,
-    first: !reverseOrder ? ASSETS_PER_PAGE : undefined,
-    last: reverseOrder ? ASSETS_PER_PAGE : undefined,
-  };
-}
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
@@ -24,15 +24,16 @@ export default (workspaceId?: string) => {
   const navigate = useNavigate();
 
   const [searchTerm, setSearchTerm] = useState<string>();
-  const [sortValue, setSort] = useState<SortType>("date");
+  const [sortValue, setSort] = useState<SortType>("date-updated");
 
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   const { projects, loading, isRefetching, hasMoreProjects, endCursor, fetchMore } =
     useProjectsQuery({
       teamId: workspaceId || "",
-      first: pagination(sortValue).first,
-      last: pagination(sortValue).last,
+      pagination: {
+        first: pagination(sortValue).first,
+      },
       sort: pagination(sortValue).sortBy,
       keyword: searchTerm,
     });
@@ -68,8 +69,10 @@ export default (workspaceId?: string) => {
       isFetchingMore.current = true;
       await fetchMore({
         variables: {
-          after: endCursor,
-          first: PROJECTS_PER_PAGE,
+          pagination: {
+            after: endCursor,
+            first: PROJECTS_PER_PAGE,
+          },
         },
       });
       isFetchingMore.current = false;

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -236,14 +236,11 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
             </FlexTableBody>
           </FlexTable>
         )}
-        {isLoading &&
-          (hasMoreProjects ? (
-            <StyledLoading>
-              <Loading relative />
-            </StyledLoading>
-          ) : (
+        {isLoading && (
+          <LoadingWrapper>
             <Loading relative />
-          ))}
+          </LoadingWrapper>
+        )}
       </ProjectsWrapper>
       {projectCreatorVisible && (
         <ProjectCreatorModal
@@ -327,6 +324,7 @@ const TimeCell = styled("div")(() => ({
   flex: 0.5,
 }));
 
-const StyledLoading = styled("div")(() => ({
-  margin: "52px auto",
+const LoadingWrapper = styled("div")(() => ({
+  width: "100%",
+  height: 100,
 }));