24- React File Manager Chapter XXIV: Create Directory 작업 완료

이제 createDirectory 작업이 제대로 작동하도록 모든 것이 준비되었습니다.
createDirectory 작업에 토스트를 추가해 보겠습니다.

// src/store/actions/file-manager/createDirectory.ts
import { toastLoading } from "design-system/components/Toast";
import Kernel from "../Kernel";
import fileManagerService from "../services/file-manager-service";

export default function createDirectory(kernel: Kernel) {
  return function create(
    directoryName: string,
    directoryPath: string = kernel.currentDirectoryNode?.path as string,
  ) {
    return new Promise((resolve, reject) => {
      const loader = toastLoading(
        "Creating directory...",
        "We are creating your directory, please wait a moment.",
      );
      fileManagerService
        .createDirectory(directoryName, directoryPath)
        .then(response => {
          loader.success("Success!", "Your directory has been created.");

          resolve(response.data.node);
        })
        .catch(error => {
          loader.error("Error", error.response.data.error);
          reject(error);
        });
    });
  };
}

그래서 컴포넌트에서 사용할 수 있도록 새로운 Promise를 반환하고, toastLoading 함수를 사용하여 로딩 토스트를 보여주고, fileManagerService를 사용하여 서버에 요청을 한 다음, loader 요청이 성공한 경우 성공 알림을 표시하고 요청이 실패한 경우 오류 알림을 표시합니다.

요청이 완료되면 새로 생성된 디렉토리 노드로 약속을 해결한 다음 모달 디렉토리를 닫습니다.

// CreateDirectoryModal.tsx

import { Modal } from "@mantine/core";
import { Form, FormInterface } from "@mongez/react-form";
import SubmitButton from "design-system/components/Form/SubmitButton";
import TextInput from "design-system/components/Form/TextInput";
import React from "react";
import { useKernel } from "../../../hooks";

export type CreateDirectoryModalProps = {
  open: boolean;
  onClose: () => void;
};

export default function CreateDirectoryModal({
  open,
  onClose,
}: CreateDirectoryModalProps) {
  const kernel = useKernel();

  const submitForm = (e: React.FormEvent, form: FormInterface) => {
    const directoryName = form.value("name");

    kernel.actions
      .createDirectory(directoryName)
      // 👇🏻 close the modal after creating the directory
      .then(() => {
        onClose();
      })
      // 👇🏻 If an error occurred, then allow form to be resubmitted again for example to allow the user to change the directory name.
      .catch(() => {
        form.submitting(false);
      });
  };

  return (
    <Modal
      title={<strong>{kernel.currentDirectoryNode?.path}</strong>}
      opened={open}
      trapFocus={false}
      onClose={onClose}>
      <Form onSubmit={submitForm}>
        <h2>Create New Directory</h2>
        <TextInput
          name="name"
          required
          autoFocus
          placeholder="Please Enter Directory Name"
        />

        <div
          style={{
            textAlign: "end",
            marginTop: "1.5rem",
          }}>
          <SubmitButton>Create</SubmitButton>
        </div>
      </Form>
    </Modal>
  );
}

이제 여기에 추가한 것은 모달이 더 이상 필요하지 않기 때문에 모달을 닫는 then 호출이며 오류가 발생한 경우 사용자가 양식을 다시 제출할 수 있도록 하는 catch 호출을 추가했습니다.

커널 노드 트리

이제 새로 생성된 디렉토리를 주어진 경로 하위 트리에 추가해야 합니다.

그러나이 단계 전에 모든 파일과 디렉토리를 포함하는 큰 트리를 만들어야 합니다.

이를 통해 주어진 경로를 쉽게 찾고 새로 생성된 디렉토리를 추가할 수 있습니다.

다음 장

다음 장에서는 트리 기반 커널을 만들어 내부에 모든 노드를 주입합니다.

기사 저장소

Github Repository에서 챕터 파일을 볼 수 있습니다.

Don't forget the main branch has the latest updated code.

지금 어디 있는지 말해줘

이 시리즈를 저와 함께 후속 조치하는 경우 현재 위치와 어려움을 겪고 있는 부분을 알려주시면 최대한 도와드리겠습니다.

살람.