Refactor Home Page

.barrelsby.json

@@ -1,13 +1,18 @@
 {
   "directory": [
-    "./src/components",
+    "./src/components/common",
+    "./src/components/home",
+    "./src/components/order",
     "./src/constants",
     "./src/hooks",
     "./src/interfaces",
     "./src/layouts",
     "./src/pages",
-    "./src/services",
-    "./src/states",
+    "./src/services/common",
+    "./src/services/home",
+    "./src/states/common",
+    "./src/states/home",
+    "./src/states/order",
     "./src/utils"
   ],
   "delete": true

.env.example

@@ -0,0 +1,2 @@
+# This file is not allowed to be deleted, because it represents which environment variables to use when the project is open-source.
+VITE_BACKEND_URL=

db.json → __mock-server__/db.json

@@ -2,7 +2,7 @@
   "orders": [
     {
       "id": "1233-defc",
-      "status": "Progressing",
+      "status": "progressing",
       "location": "Thu Duc, Ho Chi Minh, Viet Nam",
       "number": 2,
       "fileName": "file1.pdf",
@@ -12,7 +12,7 @@
     },
     {
       "id": "1245-afce",
-      "status": "Ready",
+      "status": "ready",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
       "number": 2,
       "fileName": "file2.docx",
@@ -22,7 +22,7 @@
     },
     {
       "id": "1267-rfce",
-      "status": "Done",
+      "status": "done",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
       "number": 2,
       "fileName": "file3.txt",
@@ -32,7 +32,7 @@
     },
     {
       "id": "1267-rfce",
-      "status": "Canceled",
+      "status": "canceled",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
       "number": 2,
       "fileName": "file3.txt",
@@ -42,13 +42,34 @@
     },
     {
       "id": "1267-rfce",
-      "status": "Done",
+      "status": "done",
       "location": "Tan Phu, Ho Chi Minh, Viet Nam",
       "number": 2,
       "fileName": "file3.txt",
       "pageNumber": 5,
       "coins": 30,
       "paid": "Paid"
     }
-  ]
+  ],
+  "slides": [
+    {
+      "src": "https://e-learning.hcmut.edu.vn/theme/boost/images/slbktv.jpg?1695219022292",
+      "alt": "slide1"
+    },
+    {
+      "src": "https://e-learning.hcmut.edu.vn/theme/boost/images/slbk.jpg?1695219022805",
+      "alt": "slide2"
+    },
+    {
+      "src": "https://static.tuoitre.vn/tto/i/s626/2016/04/05/dai-hoc-bach-khoa-tp-hcm-cong-bo-phuong-an-tuyen-sinh-2015jpg-1459820200.jpg",
+      "alt": "slide3"
+    },
+    {
+      "src": "https://we25.vn/media2018/Img_News/2020/06/08/khuon-vien-dh-bach-khoa-tp-hcm-khien-dan-tinh-me-man-voi-nhung-hanh-cay-xanh-tham-toa-bong-mat-quanh-nam-14_20200608150159.jpg",
+      "alt": "slide4"
+    }
+  ],
+  "user": {
+    "coins": 200
+  }
 }

__mock-server__/file-server/file.controller.js

@@ -0,0 +1,107 @@
+const uploadFile = require('./upload.middleware');
+const fs = require('fs');
+const baseUrl = 'http://localhost:3003/files/';
+
+const upload = async (req, res) => {
+  try {
+    await uploadFile(req, res);
+
+    if (req.file === undefined) {
+      return res.status(400).send({ message: 'Please upload a file!' });
+    }
+
+    res.status(200).send({
+      message: 'Uploaded the file successfully: ' + req.file.originalname
+    });
+  } catch (err) {
+    console.log(err);
+
+    if (err.code === 'LIMIT_FILE_SIZE') {
+      return res.status(500).send({
+        message: 'File size cannot be larger than 2MB!'
+      });
+    }
+
+    res.status(500).send({
+      message: `Could not upload the file: ${req.file.originalname}. ${err}`
+    });
+  }
+};
+
+const getListFiles = (req, res) => {
+  const directoryPath = __basedir + '/resources/';
+
+  fs.readdir(directoryPath, function (err, files) {
+    if (err) {
+      res.status(500).send({
+        message: 'Unable to scan files!'
+      });
+    }
+
+    let fileInfos = [];
+
+    files.forEach((file) => {
+      fileInfos.push({
+        name: file,
+        url: baseUrl + file
+      });
+    });
+
+    res.status(200).send(fileInfos);
+  });
+};
+
+const download = (req, res) => {
+  const fileName = req.params.name;
+  const directoryPath = __basedir + '/resources/';
+
+  res.download(directoryPath + fileName, fileName, (err) => {
+    if (err) {
+      res.status(500).send({
+        message: 'Could not download the file. ' + err
+      });
+    }
+  });
+};
+
+const remove = (req, res) => {
+  const fileName = req.params.name;
+  const directoryPath = __basedir + '/resources/';
+
+  fs.unlink(directoryPath + fileName, (err) => {
+    if (err) {
+      res.status(500).send({
+        message: 'Could not delete the file. ' + err
+      });
+    }
+
+    res.status(200).send({
+      message: 'File is deleted.'
+    });
+  });
+};
+
+const removeSync = (req, res) => {
+  const fileName = req.params.name;
+  const directoryPath = __basedir + '/resources/';
+
+  try {
+    fs.unlinkSync(directoryPath + fileName);
+
+    res.status(200).send({
+      message: 'File is deleted.'
+    });
+  } catch (err) {
+    res.status(500).send({
+      message: 'Could not delete the file. ' + err
+    });
+  }
+};
+
+module.exports = {
+  upload,
+  getListFiles,
+  download,
+  remove,
+  removeSync
+};

__mock-server__/file-server/file.route.js

@@ -0,0 +1,14 @@
+const express = require('express');
+const router = express.Router();
+const controller = require('./file.controller');
+
+let routes = (app) => {
+  router.post('/upload', controller.upload);
+  router.get('/files', controller.getListFiles);
+  router.get('/files/:name', controller.download);
+  router.delete('/files/:name', controller.remove);
+
+  app.use(router);
+};
+
+module.exports = routes;

__mock-server__/file-server/server.js

@@ -0,0 +1,22 @@
+const cors = require('cors');
+const express = require('express');
+const app = express();
+
+global.__basedir = __dirname;
+
+var corsOptions = {
+  origin: 'http://localhost:3000',
+  credentials: true
+};
+
+app.use(cors(corsOptions));
+
+const initRoutes = require('./file.route');
+
+app.use(express.urlencoded({ extended: true }));
+initRoutes(app);
+
+let port = 3003;
+app.listen(port, () => {
+  console.log(`Running at localhost:${port}`);
+});

__mock-server__/file-server/upload.middleware.js

@@ -0,0 +1,21 @@
+const util = require('util');
+const multer = require('multer');
+const maxSize = 2 * 1024 * 1024;
+
+let storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, __basedir + '/resources/');
+  },
+  filename: (req, file, cb) => {
+    console.log(file.originalname);
+    cb(null, file.originalname);
+  }
+});
+
+let uploadFile = multer({
+  storage: storage,
+  limits: { fileSize: maxSize }
+}).single('file');
+
+let uploadFileMiddleware = util.promisify(uploadFile);
+module.exports = uploadFileMiddleware;

__mock-server__/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "mock-server",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "json-server": "^0.17.3",
+    "multer": "^1.4.5-lts.1"
+  },
+  "scripts": {
+    "start": "node server.js",
+    "start:file-server": "node ./file-server/server.js"
+  }
+}

__mock-server__/server.js

@@ -0,0 +1,10 @@
+const jsonServer = require('json-server');
+const server = jsonServer.create();
+const router = jsonServer.router('db.json');
+const middlewares = jsonServer.defaults();
+const port = process.env.PORT || 3002;
+
+server.use(middlewares);
+server.use(router);
+
+server.listen(port);