Revert "make custom nav more generic"

This reverts commit e28202fd2d97f065be3291c4da055197c7c78896.

packages/app/src/components/Common/EmptyTrashButton.tsx

@@ -1,52 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import { usePageDeleteModal } from '~/stores/modal';
-import { useSWRxPageList, useSWRxDescendantsPageListForCurrrentPath, useSWRxPageInfoForList } from '~/stores/page';
-
-
-const EmptyTrashButton = () => {
-  const { t } = useTranslation();
-  const { open: openDeleteModal } = usePageDeleteModal();
-  // pagingList => pages under '/trash'
-  // const { data: pagingResult } = useSWRxDescendantsPageListForCurrrentPath();
-  const { data: pagingResult } = useSWRxPageList('/trash');
-
-  const pageIds = pagingResult?.items?.map(page => page._id);
-  const { injectTo } = useSWRxPageInfoForList(pageIds, true, true);
-
-  let pageWithMetas = [];
-
-  const convertToIDataWithMeta = (page) => {
-    return { data: page };
-  };
-
-  if (pagingResult != null) {
-    const dataWithMetas = pagingResult.items.map(page => convertToIDataWithMeta(page));
-    pageWithMetas = injectTo(dataWithMetas);
-  }
-
-  const onDeletedHandler = (...args) => {
-    // process after multipe pages delete api
-  };
-
-  const emptyTrashClickHandler = () => {
-    openDeleteModal(pageWithMetas, { onDeleted: onDeletedHandler, emptyTrash: true });
-  };
-
-  return (
-    <div className="d-flex align-items-center">
-      <button
-        type="button"
-        className="btn btn-outline-secondary rounded-pill text-danger d-flex align-items-center"
-        onClick={() => emptyTrashClickHandler()}
-      >
-        <i className="icon-fw icon-trash"></i>
-        <div>{t('modal_delete.empty_trash')}</div>
-      </button>
-    </div>
-  );
-};
-
-export default EmptyTrashButton;

packages/app/src/components/CustomNavigation/CustomNav.jsx

@@ -88,7 +88,7 @@ export const CustomNavTab = (props) => {
   const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
 
   const {
-    activeTab, navTabMapping, onNavSelected, hideBorderBottom, breakpointToHideInactiveTabsDown, navRightElement,
+    activeTab, navTabMapping, onNavSelected, hideBorderBottom, breakpointToHideInactiveTabsDown, emptyTrashButton,
   } = props;
 
   const navTabRefs = useMemo(() => {
@@ -170,7 +170,7 @@ export const CustomNavTab = (props) => {
             );
           })}
         </Nav>
-        {navRightElement}
+        {emptyTrashButton}
       </div>
       <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
       { !hideBorderBottom && <hr className="my-0 border-top-0 border-bottom" /> }
@@ -185,7 +185,7 @@ CustomNavTab.propTypes = {
   onNavSelected: PropTypes.func,
   hideBorderBottom: PropTypes.bool,
   breakpointToHideInactiveTabsDown: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  navRightElement: PropTypes.node,
+  emptyTrashButton: PropTypes.element,
 };
 
 CustomNavTab.defaultProps = {

packages/app/src/components/CustomNavigation/CustomNavAndContents.jsx

@@ -8,7 +8,7 @@ import CustomTabContent from './CustomTabContent';
 
 const CustomNavAndContents = (props) => {
   const {
-    navTabMapping, defaultTabIndex, navigationMode, tabContentClasses, breakpointToHideInactiveTabsDown, navRightElement,
+    navTabMapping, defaultTabIndex, navigationMode, tabContentClasses, breakpointToHideInactiveTabsDown, emptyTrashButton,
   } = props;
   const [activeTab, setActiveTab] = useState(Object.keys(props.navTabMapping)[defaultTabIndex || 0]);
 
@@ -32,7 +32,7 @@ const CustomNavAndContents = (props) => {
         navTabMapping={navTabMapping}
         onNavSelected={setActiveTab}
         breakpointToHideInactiveTabsDown={breakpointToHideInactiveTabsDown}
-        navRightElement={navRightElement}
+        emptyTrashButton={emptyTrashButton}
       />
       <CustomTabContent activeTab={activeTab} navTabMapping={navTabMapping} additionalClassNames={tabContentClasses} />
     </>
@@ -45,7 +45,7 @@ CustomNavAndContents.propTypes = {
   navigationMode: PropTypes.oneOf(['both', 'tab', 'dropdown']),
   tabContentClasses: PropTypes.arrayOf(PropTypes.string),
   breakpointToHideInactiveTabsDown: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  navRightElement: PropTypes.node,
+  emptyTrashButton: PropTypes.element,
 };
 CustomNavAndContents.defaultProps = {
   navigationMode: 'tab',

packages/app/src/components/TrashPageList.jsx

@@ -69,7 +69,7 @@ const TrashPageList = (props) => {
 
   return (
     <div data-testid="trash-page-list" className="mt-5 d-edit-none">
-      <CustomNavAndContents navTabMapping={navTabMapping} navRightElement={EmptyTrashButton()} />
+      <CustomNavAndContents navTabMapping={navTabMapping} emptyTrashButton={EmptyTrashButton()} />
     </div>
   );
 };