Let's create a React File Manager Chapter XXII: Create Directory Action
Tags: react, typescript, mongez, javascript
Published: 2022-09-19 09:11:55

---
title: Let's create a React File Manager Chapter XXII: Create Directory Action
published: true
description: 
series: File Manager React Mongez
tags: react, typescript, mongez, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pywwf2u56qc6da973mi.png
# Use a ratio of 100:42 for best results.
---

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

```ts
// 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.

```ts
// 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.

```ts
// 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.

```ts
// 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](https://github.com/hassanzohdy/file-manager-react/tree/22-create-directory-action)

> 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.