move actions

src/entities/chain/model.ts

@@ -14,6 +14,8 @@ interface ChainState {
   addCommentAction: (chainId: string, action: Action) => void;
   updateAction: (chainId: string, actionIndex: number, action: Action) => void;
   deleteAction: (chainId: string, actionIndex: number) => void;
+  moveActionUp: (chainId: string, actionIndex: number) => void;
+  moveActionDown: (chainId: string, actionIndex: number) => void;
 }
 
 export const useChainState = create<ChainState>((set, get) => ({
@@ -138,6 +140,64 @@ export const useChainState = create<ChainState>((set, get) => ({
         newActions = newActions.slice(0, -1);
       }
 
+      chain.actions = newActions;
+      chains[chainIndex] = { ...chain, actions: newActions };
+      return state;
+    }),
+
+  moveActionUp: (chainId, actionIndex) =>
+    set((state) => {
+      const chains = state.chains;
+      if (!chains) return state;
+
+      const chain = state.getChain(chainId);
+      const chainIndex = chains.findIndex((value) => value._id === chainId);
+      if (chainIndex === -1) return state;
+
+      if (
+        !chain ||
+        typeof chain.actions === "undefined" ||
+        !chain.actions[actionIndex]
+      )
+        return state;
+
+      let newActions = [...chain.actions];
+      const actionIndexToSwap = actionIndex - 2;
+
+      if (actionIndexToSwap < 0) return state;
+
+      newActions[actionIndexToSwap] = chain.actions[actionIndex];
+      newActions[actionIndex] = chain.actions[actionIndexToSwap];
+
+      chain.actions = newActions;
+      chains[chainIndex] = { ...chain, actions: newActions };
+      return state;
+    }),
+
+  moveActionDown: (chainId, actionIndex) =>
+    set((state) => {
+      const chains = state.chains;
+      if (!chains) return state;
+
+      const chain = state.getChain(chainId);
+      const chainIndex = chains.findIndex((value) => value._id === chainId);
+      if (chainIndex === -1) return state;
+
+      if (
+        !chain ||
+        typeof chain.actions === "undefined" ||
+        !chain.actions[actionIndex]
+      )
+        return state;
+
+      let newActions = [...chain.actions];
+      const actionIndexToSwap = actionIndex + 2;
+
+      if (actionIndexToSwap + 1 > chain.actions.length) return state;
+
+      newActions[actionIndexToSwap] = chain.actions[actionIndex];
+      newActions[actionIndex] = chain.actions[actionIndexToSwap];
+
       chain.actions = newActions;
       chains[chainIndex] = { ...chain, actions: newActions };
       return state;

src/widgets/action-card/ui/ActionCard.tsx

@@ -37,6 +37,8 @@ export default function ActionCard({
 
   const navigate = useNavigate({ from: "/$namespace/$chainId" });
   const deleteAction = useChainState((state) => state.deleteAction);
+  const moveActionUp = useChainState((state) => state.moveActionUp);
+  const moveActionDown = useChainState((state) => state.moveActionDown);
 
   if (action.actionType === "comment") {
     const attachmentType = getActionAttachmentType(action);
@@ -83,7 +85,14 @@ export default function ActionCard({
 
             <Divider sx={{ my: 0.5 }} />
 
-            <MenuItem>
+            <MenuItem
+              onClick={async () => {
+                moveActionUp(chain._id!, actionIndex);
+                setIsOpen(false);
+                await upsertChain(chain);
+                navigate({ to: "/$namespace/$chainId" });
+              }}
+            >
               <ArrowUpwardIcon
                 sx={{ color: "#4C4E64DE", opacity: "87%" }}
                 className="mr-2"
@@ -93,7 +102,14 @@ export default function ActionCard({
               </span>
             </MenuItem>
 
-            <MenuItem>
+            <MenuItem
+              onClick={async () => {
+                moveActionDown(chain._id!, actionIndex);
+                setIsOpen(false);
+                await upsertChain(chain);
+                navigate({ to: "/$namespace/$chainId" });
+              }}
+            >
               <ArrowDownwardIcon
                 sx={{ color: "#4C4E64DE", opacity: "87%" }}
                 className="mr-2"