Let's create a React File Manager Chapter XVIII: Link Api to React

In our previous chapter we finished the list request, now let's implement it in our React project.

Update Dot Env File

Open .env file in the root directory of your React project and update

# Disable ESlint error
ESLINT_NO_DEV_ERRORS=true

# App Name
REACT_APP_NAME="file-manager"

# App Description
REACT_APP_DESCRIPTION=

# App Code Name
REACT_APP_CODE_NAME="fm"

# Branch Name
REACT_APP_BRANCH_NAME="main"

# App default locale code
REACT_APP_DEFAULT_LOCALE_CODE=en

# App Fallback locale code
REACT_APP_FALLBACK_LOCALE_CODE=en

# App default direction
REACT_APP_DEFAULT_DIRECTION=ltr

# App Primary Color
REACT_APP_PRIMARY_COLOR=#000

# App API URL
#  👇🏻 Put only the base url here
REACT_APP_API_URL=http://localhost:8001

# App API Key
REACT_APP_API_KEY=

Please note that CRA does not reload the server on .env file changes, you need to restart the server manually.

Now let's start our react server and navigate to file-manager-server.ts file

// src/apps/front-office/file-manager/Kernel/file-manager-server.ts
👉🏻 import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string): Promise<any> {
    // 👇🏻 update the endpoint url
    // the params key will convert the request uri into query string
    // i.e /file-manager?path=/home
    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

The Bloody Cors

Now let's try it in our browser.

Don't forget to run the server first in the backend server directory by running yarn start.

We won't get any thing because of the bloody CORS, let's fix it.

Fix CORS

Let's install cors package and update it in our src/index.ts file

yarn add cors

Let's also add its types

yarn add -D @types/cors

Now let's import it in our index file src/index.ts

// imported express server
👉🏻 import cors from "cors";
import express, { Express } from "express";
import listRoutes from "./routes";

// port to run the server
const port = 8001;

// create express app
const app: Express = express();

// 👇🏻 allow cors
app.use(cors());

// list call our routes list
listRoutes(app);

// start the Express server
app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

Now let's try again, it should work now.

Small modification in progress bar

I really don't like that the progress bar is filled then return to zero value, so let's update the style and make its visibility hidden if progress value is zero.

// LoadingProgressBar

  return (
    <Progress
      size="lg"
      value={progress}
      striped
      styles={{
        root: {            
          ❌ backgroundColor: progress === 0 ? "white" : undefined,
          ✅ visibility: progress === 0 ? "hidden" : undefined,
        },
      }}
      label={progress > 0 ? `${progress}%` : undefined}
      color={mapProgressColor()}
      animate
    />
  );

Next Chapter

In the next chapter we'll start working in the toolbar so we can create some good actions, like adding create directory button.

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.