[DOP-22068] create run (#49)

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

Author: Zabilsya

src/entities/run/api/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useGetRun';
+export * from './useCreateRun';

src/entities/run/api/hooks/useCreateRun/index.ts

@@ -0,0 +1,24 @@
+import { useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
+import { notification } from 'antd';
+import { getErrorMessage } from '@shared/config';
+
+import { runService } from '../../runService';
+import { CreateRunRequest } from '../../types';
+import { RunQueryKey } from '../../keys';
+
+/** Hook for creating run (run transfer) */
+export const useCreateRun = (data: CreateRunRequest): UseMutationResult => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => runService.createRun(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [RunQueryKey.GET_RUNS, data.transfer_id] });
+    },
+    onError: (error) => {
+      notification.error({
+        message: getErrorMessage(error),
+      });
+    },
+  });
+};

src/entities/run/api/runService.ts

@@ -1,7 +1,7 @@
 import { axiosInstance } from '@shared/config';
 import { PaginationResponse } from '@shared/types';
 
-import { GetRunRequest, Run, GetRunsRequest } from './types';
+import { GetRunRequest, Run, GetRunsRequest, CreateRunRequest } from './types';
 
 export const runService = {
   getRuns: (params: GetRunsRequest): Promise<PaginationResponse<Run>> => {
@@ -11,4 +11,8 @@ export const runService = {
   getRun: ({ id }: GetRunRequest): Promise<Run> => {
     return axiosInstance.get(`runs/${id}`);
   },
+
+  createRun: (data: CreateRunRequest): Promise<Run> => {
+    return axiosInstance.post('runs', data);
+  },
 };

src/entities/run/api/types.ts

@@ -18,3 +18,7 @@ export interface GetRunsRequest extends PaginationRequest {
 export interface GetRunRequest {
   id: number;
 }
+
+export interface CreateRunRequest {
+  transfer_id: number;
+}

src/features/run/CreateRun/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ControlButtons } from '@shared/ui';
+import { Typography } from 'antd';
+import { WarningOutlined } from '@ant-design/icons';
+import { useCreateRun } from '@entities/run';
+
+import classes from './styles.module.less';
+import { CreateRunProps } from './types';
+
+const { Text } = Typography;
+
+export const CreateRun = ({ transferId, transferName, onSuccess, onCancel }: CreateRunProps) => {
+  const { mutate: createRun, isPending } = useCreateRun({ transfer_id: transferId });
+
+  const handleSubmit = () => {
+    createRun(null, { onSuccess });
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.main}>
+        <WarningOutlined className={classes.icon} />
+        <Text>
+          Do you really want to run transfer <b>«{transferName}»</b>?
+        </Text>
+      </div>
+      <ControlButtons isLoading={isPending} submitButtonText="Confirm" onSubmit={handleSubmit} onCancel={onCancel} />
+    </div>
+  );
+};

src/features/run/CreateRun/styles.module.less

@@ -0,0 +1,20 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .main {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+
+    .icon {
+      color: @red-6;
+
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}

src/features/run/CreateRun/types.ts

@@ -0,0 +1,6 @@
+export interface CreateRunProps {
+  transferId: number;
+  transferName: string;
+  onSuccess: () => void;
+  onCancel: () => void;
+}

src/features/run/index.ts

@@ -1,2 +1,3 @@
 export * from './RunList';
 export * from './RunDetailInfo';
+export * from './CreateRun';

src/widgets/run/TransferRuns/components/CreateRunButton/components/CreateRunModal/index.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { DEFAULT_MODAL_WIDTH } from '@shared/constants';
 import { ModalWrapper } from '@shared/ui';
+import { CreateRun } from '@features/run';
 
 import { CreateRunModalProps } from './types';
 
 export const CreateRunModal = ({ transferId, transferName, onClose, ...props }: CreateRunModalProps) => {
   return (
-    <ModalWrapper title="Run transfer" width={DEFAULT_MODAL_WIDTH} onCancel={onClose} {...props}>
-      {/* //TODO: [DOP-20067] add create run modal */}
-      {/* <CreateRun transferId={transferId} transferName={transferName} onSuccess={onClose} onCancel={onClose} /> */}
+    <ModalWrapper title="Run Transfer" width={400} onCancel={onClose} {...props}>
+      <CreateRun transferId={transferId} transferName={transferName} onSuccess={onClose} onCancel={onClose} />
     </ModalWrapper>
   );
 };

src/widgets/run/TransferRuns/components/CreateRunButton/index.tsx

@@ -7,22 +7,18 @@ import classes from './styles.module.less';
 import { CreateRunButtonProps } from './types';
 
 export const CreateRunButton = memo(({ transferId, transferName }: CreateRunButtonProps) => {
-  const {
-    isOpened: isOpenedCreateRunModal,
-    handleOpen: handleOpenCreateRunModal,
-    handleClose: handleCloseCreateRunModal,
-  } = useModalState();
+  const { isOpened: isOpenedModal, handleOpen: handleOpenModal, handleClose: handleCloseModal } = useModalState();
 
   return (
     <>
-      <Button className={classes.button} type="primary" size="large" onClick={handleOpenCreateRunModal}>
-        Run transfer
+      <Button className={classes.button} type="primary" size="large" onClick={handleOpenModal}>
+        Run Transfer
       </Button>
       <CreateRunModal
         transferId={transferId}
         transferName={transferName}
-        open={isOpenedCreateRunModal}
-        onClose={handleCloseCreateRunModal}
+        open={isOpenedModal}
+        onClose={handleCloseModal}
       />
     </>
   );