feat: Sort cards within list (#717)

Closes #390

client/src/components/List/ActionsStep.jsx

@@ -5,15 +5,17 @@ import { Menu } from 'semantic-ui-react';
 import { Popup } from '../../lib/custom-ui';
 
 import { useSteps } from '../../hooks';
+import ListSortStep from '../ListSortStep';
 import DeleteStep from '../DeleteStep';
 
 import styles from './ActionsStep.module.scss';
 
 const StepTypes = {
   DELETE: 'DELETE',
+  SORT: 'SORT',
 };
 
-const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) => {
+const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onSort, onDelete, onClose }) => {
   const [t] = useTranslation();
   const [step, openStep, handleBack] = useSteps();
 
@@ -27,20 +29,41 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
     onClose();
   }, [onCardAdd, onClose]);
 
+  const handleSortClick = useCallback(() => {
+    openStep(StepTypes.SORT);
+  }, [openStep]);
+
   const handleDeleteClick = useCallback(() => {
     openStep(StepTypes.DELETE);
   }, [openStep]);
 
-  if (step && step.type === StepTypes.DELETE) {
-    return (
-      <DeleteStep
-        title="common.deleteList"
-        content="common.areYouSureYouWantToDeleteThisList"
-        buttonContent="action.deleteList"
-        onConfirm={onDelete}
-        onBack={handleBack}
-      />
-    );
+  const handleSortTypeSelect = useCallback(
+    (type) => {
+      onSort({
+        type,
+      });
+
+      onClose();
+    },
+    [onSort, onClose],
+  );
+
+  if (step && step.type) {
+    switch (step.type) {
+      case StepTypes.SORT:
+        return <ListSortStep onTypeSelect={handleSortTypeSelect} onBack={handleBack} />;
+      case StepTypes.DELETE:
+        return (
+          <DeleteStep
+            title="common.deleteList"
+            content="common.areYouSureYouWantToDeleteThisList"
+            buttonContent="action.deleteList"
+            onConfirm={onDelete}
+            onBack={handleBack}
+          />
+        );
+      default:
+    }
   }
 
   return (
@@ -62,6 +85,11 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
               context: 'title',
             })}
           </Menu.Item>
+          <Menu.Item className={styles.menuItem} onClick={handleSortClick}>
+            {t('action.sortList', {
+              context: 'title',
+            })}
+          </Menu.Item>
           <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
             {t('action.deleteList', {
               context: 'title',
@@ -77,6 +105,7 @@ ActionsStep.propTypes = {
   onNameEdit: PropTypes.func.isRequired,
   onCardAdd: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
+  onSort: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };