backend init

bro.config.js

@@ -23,5 +23,6 @@ module.exports = {
   },
   config: {
     "enterfront.api": "/api",
+    // paste stand URL to config
   },
 };

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "enterfront",
-    "version": "0.2.3",
+    "version": "0.2.4",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "enterfront",
-            "version": "0.2.3",
+            "version": "0.2.4",
             "dependencies": {
                 "@brojs/cli": "^1.0.0",
                 "@brojs/create": "^1.0.0",

package.json

@@ -24,5 +24,5 @@
         "clean": "rimraf dist"
     },
     "name": "enterfront",
-    "version": "0.2.3"
+    "version": "0.2.4"
 }

src/app.tsx

@@ -3,8 +3,14 @@ import { BrowserRouter } from 'react-router-dom';
 
 import { Dashboard } from './dashboard';
 
+import { getConfigValue } from "@brojs/cli";
+
 import './index.css'
 
+const BASE_API_URL = getConfigValue("enterfront.api");
+
+// fetch(`${BASE_API_URL}/books/list`)
+
 const App = () => {
   return(
       <BrowserRouter>

src/components/account/AccountButtons.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+import ActionButton from "./ActionButton.jsx";
+
+const AccountButtons = (props) => {
+  return (
+      <div className="account-buttons">
+          <ActionButton title={"Exit"} action={props.exitHandler}/>
+          <ActionButton title={"Change Name"} action={props.changeNameHandler}/>
+          <ActionButton title={"Change Pass"} action={props.changePassHandler}/>
+
+          <a className="MyButton mclaren-regular" href={URLs.home.url}>Back</a>
+      </div>
+  );
+};
+
+export default AccountButtons;

src/components/account/ActionButton.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ActionButton = (props) => {
+  return (
+      <a className="MyButton mclaren-regular" onClick={() => {
+          props.action()
+      }}>{props.title}</a>
+  );
+};
+
+export default ActionButton;

src/components/account/index.css

@@ -0,0 +1,29 @@
+.account-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.account-buttons a {
+    display: flex;
+
+    font-size: 1.5vw;
+    transition: color 0.2s ease-in;
+
+    width: 20vw;
+
+    margin-top: 2vw;
+}
+
+.account-buttons a:hover {
+    color: black;
+}
+
+@media only screen and (max-width: 800px) {
+    .account-buttons a {
+        font-size: 2.5vh;
+        width: 60vw;
+        margin-top: 3vh;
+    }
+}

src/components/index.css

@@ -1,6 +1,7 @@
 @import url("reg/index.css");
 @import url("init/index.css");
 @import url("home/index.css");
+@import url("account/index.css");
 
 .MyButton {
     text-decoration: none;

src/pages/Account.jsx

@@ -1,7 +1,22 @@
 import React from "react";
+import AccountButtons from "../components/account/AccountButtons.jsx";
+import userIcon from "../../images/user.svg";
 
 const Account = () => {
-  return <h1>Account</h1>;
+  const exitHandler = () => {}
+  const changeNameHandler = () => {}
+  const changePassHandler = () => {}
+
+  return (
+      <div className="account-items">
+        <img src={userIcon} alt="user" />
+        <AccountButtons
+            exitHandler={exitHandler}
+            changeNameHandler={changeNameHandler}
+            changePassHandler={changePassHandler}
+        />
+      </div>
+  );
 };
 
 export default Account;

src/pages/css/account.css

@@ -0,0 +1,12 @@
+.account-items {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 5vw;
+}
+
+.account-items img {
+    margin-bottom: 1vw;
+}

src/pages/index.css

@@ -1,3 +1,4 @@
 @import url("css/init.css");
 @import url("css/home.css");
-@import url("css/input.css");
+@import url("css/input.css");
+@import url("css/account.css");

stubs/api/books/book-list.json

@@ -0,0 +1,6 @@
+{
+  "content": {
+
+  },
+  "totalElement": 0
+}

stubs/api/books/book.json

@@ -0,0 +1,5 @@
+{
+  "id": "1",
+  "name": "Book name",
+  "description": "Interesting book description"
+}

stubs/api/books/index.js

@@ -0,0 +1,36 @@
+const booksRouter = require('express').Router();
+
+module.exports = booksRouter;
+
+const books = []
+
+booksRouter.get('/list', (req, res) => {
+    res.send(require('./book-list.json'))
+})
+
+booksRouter.post('/', (req, res) => {
+    // body() can be used because of dev server
+    console.log(req.body)
+    books.push({
+        name: req.body.name,
+    })
+
+    res.send({
+        status: 200
+    })
+})
+
+
+booksRouter.get('/:id', (req, res) => {
+    console.log(req.params);
+
+    res.send(require('./book.json'));
+
+    // res.status(404).send()
+})
+
+booksRouter.delete('/:id', (req, res) => {
+    res.status(201).send({
+        status: 'ok'
+    })
+})

stubs/api/index.js

@@ -1,3 +1,8 @@
+const booksRouter = require("./books");
 const router = require('express').Router();
+const delay = require('./middlewares/delay');
 
 module.exports = router;
+
+// router.use(delay(300));
+router.use('/books', delay, booksRouter);

stubs/api/middlewares/delay.js

@@ -0,0 +1,5 @@
+const delay = (ms = 1000) => (req, res, next) => {
+    setTimeout(next, ms)
+}
+
+module.exports = delay