DEV Community

Cover image for Let's create a React File Manager Chapter XXII: Create Directory Action
Hasan Zohdy
Hasan Zohdy

Posted on

Let's create a React File Manager Chapter XXII: Create Directory Action

So we've done our server part, now we'll implement it in the react project.

// src/store/actions/file-manager/createDirectory.ts
import Kernel from "../Kernel";

export default function createDirectory(kernel: Kernel) {
  return function create(
    directoryName: string,
    directoryPath: string = kernel.currentDirectoryNode?.path as string,
  ) {
    console.log("create directory", directoryName);
  };
}
Enter fullscreen mode Exit fullscreen mode

So far that was our code in createDirectory action, now we'll make the request to the server.

Updating file manager service

But let's first make the request inside file-manager-service.ts class.

// src/services/file-manager-service.ts
import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string): Promise<any> {
    console.log(directoryPath);

    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

  /**
   * {@inheritDoc}
   */
  public createDirectory(directoryName: string, saveTo: string): Promise<any> {
    throw new Error("Method not implemented.");
  }
  ...
}
Enter fullscreen mode Exit fullscreen mode

That was our code in file-manager-service.ts class, now we'll first update the return type to be automatically taken from the method return, then we'll update createDirectory method.

// src/services/file-manager-service.ts
import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string) {
    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

  /**
   * {@inheritDoc}
   */
  public createDirectory(directoryName: string, path: string) {
    return endpoint.post("/file-manager/directory", {
      path,
      name: directoryName,
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it, now we'll update our createDirectory action.

Calling createDirectory method

Now let's head back to our createDirectory action and call createDirectory method.

// src/store/actions/file-manager/createDirectory.ts
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,
  ) {
    fileManagerService.createDirectory(directoryName, directoryPath);
  };
}
Enter fullscreen mode Exit fullscreen mode

This will make a successful request to the server, but we'll not handle the response yet.

Also we can display a loading indicator while the request is being made, but we'll do that in the next chapter.

Next Chapter

In the next chapter we'll start working on Toasts and Loading indicators.

Article Repository

You can see chapter files in Github Repository

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

Tell me where you are now

If you're following up with me this series, tell me where are you now and what you're struggling with, i'll try to help you as much as i can.

Salam.

Top comments (0)