chore(web): add sorting functionality to assets (#728)

Co-authored-by: nina992 <[email protected]>

web/src/beta/features/Modals/AssetModal/index.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import Button from "@reearth/beta/components/Button";
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
+import SelectField from "@reearth/beta/components/fields/SelectField";
 import Loading from "@reearth/beta/components/Loading";
 import Modal from "@reearth/beta/components/Modal";
 import Text from "@reearth/beta/components/Text";
@@ -14,6 +15,15 @@ import { useT } from "@reearth/services/i18n";
 import { useNotification, Workspace } from "@reearth/services/state";
 import { styled } from "@reearth/services/theme";
 
+const getValue: { [key: string]: string } = {
+  "date-reverse": "date",
+  "name-reverse": "name",
+  "size-reverse": "size",
+  date: "date",
+  size: "size",
+  name: "name",
+};
+
 export type Props = {
   className?: string;
   assetType?: "file" | "image";
@@ -36,6 +46,7 @@ const ChooseAssetModal: React.FC<Props> = ({
   const t = useT();
 
   const [, setNotification] = useNotification();
+  const [selectedSortOption, setSelectedSortOption] = useState("date");
   const {
     assets,
     isLoading,
@@ -45,10 +56,12 @@ const ChooseAssetModal: React.FC<Props> = ({
     selectAsset,
     localSearchTerm,
     wrapperRef,
+    sortOptions,
     onScrollToBottom,
     handleSearchInputChange,
     handleSearch,
     handleGetMoreAssets,
+    handleSortChange,
   } = useHooks({ workspaceId: currentWorkspace?.id });
 
   const filteredAssets = useMemo(() => {
@@ -93,6 +106,16 @@ const ChooseAssetModal: React.FC<Props> = ({
     },
     [selectedAssets, selectAsset],
   );
+  const onSortChange = useCallback(
+    (selectedLabel: string) => {
+      console.log(selectedLabel);
+      setSelectedSortOption(selectedLabel);
+      const value = getValue[selectedLabel];
+      const reverse = selectedLabel.toLowerCase().includes("reverse");
+      handleSortChange?.(value, reverse);
+    },
+    [handleSortChange],
+  );
 
   useEffect(() => {
     handleReset();
@@ -124,6 +147,17 @@ const ChooseAssetModal: React.FC<Props> = ({
         />
       }>
       <ControlWarpper>
+        <SortWrapper>
+          <Text size="xFootnote">{t("Sort By")}</Text>
+          <SelectField
+            value={selectedSortOption}
+            options={sortOptions.map(option => ({
+              key: option.key,
+              label: option.label,
+            }))}
+            onChange={onSortChange}
+          />
+        </SortWrapper>
         <SearchWarpper>
           <TextInput value={localSearchTerm} onChange={handleSearchInputChange} />
           <SearchButton icon="search" margin="0" onClick={handleSearch} />
@@ -181,14 +215,22 @@ const AssetWrapper = styled.div`
 
 const ControlWarpper = styled.div`
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+const SortWrapper = styled.div`
+  display: flex;
   align-items: flex-start;
+  gap: 8px;
+  left: 0px;
 `;
 
 const SearchWarpper = styled.div`
   display: flex;
   align-items: center;
   gap: 4px;
+  right: 0;
 `;
 
 const SearchButton = styled(Button)`

web/src/services/i18n/translations/en.yml

@@ -533,3 +533,4 @@ Failed to update widget.: Failed to update widget.
 Failed to remove widget.: Failed to remove widget.
 Failed to update widget alignment.: Failed to update widget alignment.
 Failed to update the widget align system.: Failed to update the widget align system.
+Sort By: Sort By

web/src/services/i18n/translations/ja.yml

@@ -494,3 +494,4 @@ Failed to update widget.: ウィジェットのアップデートに失敗しま
 Failed to remove widget.: ウィジェットの削除に失敗しました。
 Failed to update widget alignment.: ウィジェットのアラインメントのアップデートに失敗しました。
 Failed to update the widget align system.: ウィジェットのアラインシステムのアップデートに失敗しました。
+Sort By: Sort By