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);
  };
}

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.");
  }
  ...
}

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,
    });
  }
}

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);
  };
}

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.