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
.envfile 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
serverdirectory by runningyarn 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
mainbranch 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)