Merge branch 'feature/frontend/#33' into develop

Author: ntcho

backend/package.json

@@ -3,7 +3,9 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "nodemon --watch . app.js"
+    "start": "npm run start:linux",
+    "start:linux": "nodemon --watch . app.js",
+    "start:windows": "nodemon --legacy-watch app.js"
   },
   "dependencies": {
     "cookie-parser": "~1.4.4",

frontend/api/item.js

@@ -1,42 +1,62 @@
 import request from 'superagent';
-import { handleSuccess, handleError } from '_utils/api';
+import { handleError, handleSuccess } from '_utils/api';
 
-// from userID, get all the items the user created
-export const getItemByUserId = (userId) => request.get('/api/item/')
-  .query({ owner: userId })
+// get item with item id
+export const getItem = (itemId) => request.get(`/api/item/${itemId}`)
   .then(handleSuccess)
   .catch(handleError);
 
-export const getItemByItemId = (itemId) => request.get(`/api/item/${itemId}`)
-  // .query({ item_id: item_id })
+// get all items from user with user id
+// all item's owner property would be same current as user's id
+export const getUserItem = (userId) => request.get('/api/item/')
+  .query({ owner: userId })
   .then(handleSuccess)
   .catch(handleError);
 
-export const getItemChild = (itemPath) => request.get('/api/item')
+// get item's children if exists
+// searches with ?path={itemPath} query
+export const getItemChildren = (itemPath) => request.get('/api/item')
   .query({ path: itemPath })
   .then(handleSuccess)
   .catch(handleError);
 
-export const getRecommendItem = (id) => request.get('/api/recommend')
-  .query({ userId: id })
+// get recommended items with user id
+export const getRecommendItem = (userId) => request.get('/api/recommend')
+  .query({ userId: userId })
   .then(handleSuccess)
   .catch(handleError);
 
+// get Algolia search result
 export const algoliaSearch = (query) => request.get(`/api/item/algolia/${query}`)
   // .query({ query })
   .then(handleSuccess)
   .catch(handleError);
 
+// update item with item id
 export const updateItem = (itemId, object) => request.put(`/api/item/${itemId}`)
   .send(object)
   .then(handleSuccess)
   .catch(handleError);
 
+// update item.status to 'archived' with item id
+export const archiveItem = (itemId) => request.put(`/api/item/${itemId}`)
+  .send({status: 'archived'})
+  .then(handleSuccess)
+  .catch(handleError);
+
+// update item.status to 'published' with item id
+export const publishItem = (itemId) => request.put(`/api/item/${itemId}`)
+  .send({status: 'published'})
+  .then(handleSuccess)
+  .catch(handleError);
+
+// delete item with item id
 export const deleteItem = (itemId) => request.delete(`/api/item/${itemId}`)
   .then(handleSuccess)
   .catch(handleError);
 
-export const createItem = (object) => request.post('api/item')
+// create item with object
+export const createItem = (object) => request.post('/api/item')
   .send(object)
   .then(handleSuccess)
   .catch(handleError);

frontend/api/todos.js

@@ -1,11 +1,10 @@
-import { props } from "ramda";
 import React from "react";
 import { Link } from "react-router-dom";
 
 // Component used to render MUI components as React Router
 // <Link> components using MUI's `component` property.
 // Read more here: https://mui.com/guides/composition/#caveat-with-refs
-export const LinkComponent = React.forwardRef((props, ref) => (
+export default React.forwardRef((props, ref) => (
   <Link {...props} ref={ref}>
     {props.children}
   </Link>

frontend/components/atoms/LinkComponent/LinkComponent.js

@@ -0,0 +1,17 @@
+import {
+  mdiFileCabinet, mdiFileDocumentOutline, mdiTextBoxOutline
+} from "@mdi/js";
+import { Icon } from '@mdi/react';
+import React from "react";
+
+const icon = {
+  cabinet: mdiFileCabinet,
+  document: mdiFileDocumentOutline,
+  card: mdiTextBoxOutline,
+};
+
+export default function TypeIcon({ type, ...props }) {
+  return (
+    <Icon path={icon[type]} {...props} />
+  );
+}

frontend/components/atoms/TypeIcon/TypeIcon.js

@@ -0,0 +1,3 @@
+import TypeIcon from './TypeIcon';
+
+export default TypeIcon;

frontend/components/atoms/TypeIcon/index.js

@@ -1,19 +1,15 @@
-import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Switch, Route, Redirect } from 'react-router';
+import R from 'ramda';
+import React, { useEffect, useState } from 'react';
 import ReactNotification from 'react-notifications-component';
 import { useDispatch } from 'react-redux';
-import R from 'ramda';
-
-import { attemptGetUser } from '_thunks/user';
-
-import WelcomePage from '_pages/WelcomePage';
+import { Redirect, Route, Switch } from 'react-router';
+import AboutPage from '_pages/AboutPage';
 import LoginPage from '_pages/LoginPage';
 import RegisterPage from '_pages/RegisterPage';
 import RoutingPage from '_pages/RoutingPage';
-
-// import Navigation from '_organisms/Navigation';
-// import Footer from '_organisms/Footer';
+import WelcomePage from '_pages/WelcomePage';
+import { attemptGetUser } from '_thunks/user';
 
 export default function Main({ location }) {
   const dispatch = useDispatch();
@@ -43,7 +39,7 @@ export default function Main({ location }) {
         <div className="main">
           <Switch>
             <Route exact path="/" component={WelcomePage} />
-            <Route path="/about" component={WelcomePage} />
+            <Route path="/about" component={AboutPage} />
             <Route path="/help" component={WelcomePage} />
             <Route path="/login" component={LoginPage} />
             <Route path="/register" component={RegisterPage} />
@@ -55,7 +51,9 @@ export default function Main({ location }) {
             <Route path="/item" component={RoutingPage} />
             <Route path="/account" component={RoutingPage} />
             <Route path="/user" component={RoutingPage} />
-            <Route path="/leftpane" component={RoutingPage} />
+            <Route exact path="/bookmarks" component={RoutingPage} />
+            <Route exact path="/recents" component={RoutingPage} />
+            <Route exact path="/drafts" component={RoutingPage} />
 
             {/* 404 Fallback page */}
             <Route path="/error">

frontend/components/environment/Main/Main.js

@@ -0,0 +1,46 @@
+import { mdiChevronRight } from "@mdi/js";
+import { Icon } from "@mdi/react";
+import { Breadcrumbs, Button, Skeleton, Stack } from "@mui/material";
+import React from "react";
+import LinkComponent from "_atoms/LinkComponent";
+import TypeIcon from "_atoms/TypeIcon";
+
+const BreadCrumbItem = ({ item = null }) => {
+  return (
+    <Button
+      variant="text"
+      size="small"
+      sx={{ width: item != null ? "auto" : "100px", textTransform: "none" }}
+      component={item != null ? LinkComponent : null}
+      to={item != null ? `/item/${item._id}` : null}
+    >
+      <Stack direction="row" spacing={0.75} sx={{ alignItems: "center" }}>
+        {item != null ? <TypeIcon type={item.type} size={0.75} /> : null}
+        {item != null ? (
+          <div className="breadcrumb-text">{item.title}</div>
+        ) : (
+          <Skeleton width="100%" />
+        )}
+      </Stack>
+    </Button>
+  );
+};
+
+export default function BreadCrumbs({ itemArray = null, hierarchyLevel = 3 }) {
+  return (
+    <Breadcrumbs
+      sx={{
+        ".MuiBreadcrumbs-separator": { margin: 0 },
+      }}
+      separator={<Icon path={mdiChevronRight} size={0.75} />}
+    >
+      {itemArray != null
+        ? itemArray.map((item, index) => (
+            <BreadCrumbItem item={item} key={index} />
+          ))
+        : [...Array(hierarchyLevel).keys()].map((i, index) => (
+            <BreadCrumbItem key={index} />
+          ))}
+    </Breadcrumbs>
+  );
+}

frontend/components/molecules/BreadCrumbs/BreadCrumbs.js

@@ -0,0 +1,3 @@
+import BreadCrumbs from './BreadCrumbs';
+
+export default BreadCrumbs;