refs #82628: fix search keyword result sorting

- Sepalate sort control component from search control

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -4,6 +4,7 @@ import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 import DeleteSelectedPageGroup from './DeleteSelectedPageGroup';
 import SearchOptionModal from './SearchOptionModal';
+import SortControl from './SortControl';
 import { CheckboxType, SORT_AXIS, SORT_ORDER } from '../../interfaces/search';
 
 
@@ -48,37 +49,12 @@ const SearchControl: FC <Props> = (props: Props) => {
     }
   };
 
-  // TODO: imprement sort dropdown
-  // refs: https://redmine.weseek.co.jp/issues/82513
-  const onClickChangeSort = () => {
+  const onChangeSortInvoked = (nextSort: SORT_AXIS, nextOrder:SORT_ORDER) => {
     if (props.onChangeSortInvoked != null) {
-      const getNextSort = (sort: SORT_AXIS) => {
-        switch (sort) {
-          case RELATION_SCORE:
-            return UPDATED_AT;
-          case UPDATED_AT:
-            return CREATED_AT;
-          case CREATED_AT:
-          default:
-            return RELATION_SCORE;
-        }
-      };
-      const nextSort = props.order === DESC ? props.sort : getNextSort(props.sort);
-      const nextOrder = nextSort === props.sort ? ASC : DESC;
       props.onChangeSortInvoked(nextSort, nextOrder);
     }
   };
 
-  const renderSortControlDropdown = () => {
-    return (
-      <>
-        {Object.keys(SORT_AXIS).forEach((sortAxis) => {
-          return <div>{SORT_AXIS[sortAxis]}</div>;
-        })}
-      </>
-    );
-  };
-
   const openSearchOptionModalHandler = () => {
     setIsFileterOptionModalShown(true);
   };
@@ -118,13 +94,11 @@ const SearchControl: FC <Props> = (props: Props) => {
           />
         </div>
         <div className="mr-4 d-flex">
-          {/*
-            TODO: imprement sort dropdown
-            refs: https://redmine.weseek.co.jp/issues/82513
-          */}
-          <button type="button" onClick={onClickChangeSort}>change sort</button>
-          <p>sort:{props.sort}, order: {props.order}</p>
-          {renderSortControlDropdown()}
+          <SortControl
+            sort={props.sort}
+            order={props.order}
+            onChangeSortInvoked={onChangeSortInvoked}
+          />
         </div>
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}

packages/app/src/components/SearchPage/SortControl.tsx

@@ -1,11 +1,8 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  SORT_AXIS, SORT_AXIS_CONSTS, SORT_ORDER, SORT_ORDER_CONSTS,
-} from '~/utils/search-axis-utils';
+import { SORT_AXIS, SORT_ORDER } from '../../interfaces/search';
 
-const { score: sortByScore, updatedAt: sortByUpdatedAt, createdAt: sortByCreatedAt } = SORT_AXIS_CONSTS;
-const { desc, asc } = SORT_ORDER_CONSTS;
+const { DESC, ASC } = SORT_ORDER;
 
 type Props = {
   sort: SORT_AXIS,
@@ -13,61 +10,51 @@ type Props = {
   onChangeSortInvoked?: (nextSort: SORT_AXIS, nextOrder: SORT_ORDER) => void,
 }
 
-const SearchControl: FC <Props> = (props: Props) => {
+const SortControl: FC <Props> = (props: Props) => {
 
   const { t } = useTranslation('');
 
-  // TODO: imprement sort dropdown
-  // refs: https://redmine.weseek.co.jp/issues/82513
-  const onClickChangeSort = () => {
+  const onClickChangeSort = (nextSortAxis: SORT_AXIS, nextSortOrder: SORT_ORDER) => {
     if (props.onChangeSortInvoked != null) {
-      const getNextSort = (sort: SORT_AXIS) => {
-        switch (sort) {
-          case sortByScore:
-            return sortByUpdatedAt;
-          case sortByUpdatedAt:
-            return sortByCreatedAt;
-          case sortByCreatedAt:
-          default:
-            return sortByScore;
-        }
-      };
-      const nextSort = props.order === desc ? props.sort : getNextSort(props.sort);
-      const nextOrder = nextSort === props.sort ? asc : desc;
-      props.onChangeSortInvoked(nextSort, nextOrder);
+      props.onChangeSortInvoked(nextSortAxis, nextSortOrder);
     }
   };
 
+  const renderOrderIcon = (order: SORT_ORDER) => {
+    const iconClassName = ASC === order ? 'fa fa-sort-asc' : 'fa fa-sort-desc';
+    return <i className={iconClassName} aria-hidden="true" />;
+  };
+
+  const renderSortItem = (sort, order) => {
+    return <><span className="mr-3">{t(`search_result.sort_axis.${sort}`)}</span>{renderOrderIcon(order)}</>;
+  };
+
   return (
     <>
       <button
         type="button"
-        className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management py-0"
+        className="btn btn-outline-secondary btn-dropdown-toggle dropdown-toggle-no-caret"
         data-toggle="dropdown"
       >
-        {props.sort}{props.order}
+        {renderSortItem(props.sort, props.order)}
       </button>
       <div className="dropdown-menu dropdown-menu-right">
-        {SORT_AXIS_CONSTS.map((axis) => {
+        {Object.values(SORT_AXIS).map((sortAxis) => {
+          const nextOrder = (props.sort !== sortAxis || props.order === ASC) ? DESC : ASC;
           return (
-            <button className="dropdown-item text-danger" type="button" onClick={onClickChangeSort}>
-              <i className="icon-fw icon-fire"></i>{t('Delete')}
+            <button
+              className="dropdown-item d-flex justify-content-between"
+              type="button"
+              onClick={() => { onClickChangeSort(sortAxis, nextOrder) }}
+            >
+              {renderSortItem(sortAxis, nextOrder)}
             </button>
           );
         })}
-        <button className="dropdown-item" type="button" onClick={() => console.log('duplicate modal show')}>
-          <i className="icon-fw icon-star"></i>{t('Add to bookmark')}
-        </button>
-        <button className="dropdown-item" type="button" onClick={() => console.log('duplicate modal show')}>
-          <i className="icon-fw icon-docs"></i>{t('Duplicate')}
-        </button>
-        <button className="dropdown-item" type="button" onClick={() => console.log('rename function will be added')}>
-          <i className="icon-fw  icon-action-redo"></i>{t('Move/Rename')}
-        </button>
       </div>
     </>
   );
 };
 
 
-export default SearchControl;
+export default SortControl;