Merge pull request #189 from osamhack2021/feature/frontend/#33

Bump Feature/frontend/#33 to develop

Author: ntcho

backend/InitDB.js

@@ -109,7 +109,7 @@ module.exports = {
             if(item === null) throw new NotFoundError(`Item not Found: 존재하지 않는 항목입니다.`);
 
             // Check session's edit authority
-            if(!item.accessGroups.edit.some(i => i.equals(res.locals.group)) && item.owner._id !== res.locals._id)
+            if(!item.accessGroups.edit.some(i => i.equals(res.locals.group)) && item.owner._id.toString() !== res.locals._id.toString())
                 throw new ForbiddenError(`Access denied: 수정 권한이 없습니다.`);
 
             // Append Contributor

backend/controllers/itemController.js

@@ -1,7 +1,9 @@
 import {
-  mdiFileCabinet, mdiFileDocumentOutline, mdiTextBoxOutline
+  mdiFileCabinet,
+  mdiFileDocumentOutline,
+  mdiTextBoxOutline
 } from "@mdi/js";
-import { Icon } from '@mdi/react';
+import { Icon } from "@mdi/react";
 import React from "react";
 
 const icon = {
@@ -11,7 +13,10 @@ const icon = {
 };
 
 export default function TypeIcon({ type, ...props }) {
-  return (
+  const isString = typeof type === "string";
+  return isString ? (
     <Icon path={icon[type]} {...props} />
+  ) : (
+    <Icon path={type} {...props} />
   );
 }

frontend/components/atoms/TypeIcon/TypeIcon.js

@@ -9,7 +9,7 @@ import LoginPage from '_pages/LoginPage';
 import RegisterPage from '_pages/RegisterPage';
 import RoutingPage from '_pages/RoutingPage';
 import WelcomePage from '_pages/WelcomePage';
-import { attemptGetUser } from '_thunks/user';
+import { attemptGetCurrentUser } from '_thunks/user';
 
 export default function Main({ location }) {
   const dispatch = useDispatch();
@@ -18,7 +18,7 @@ export default function Main({ location }) {
   useEffect(() => {
     let subscribed = true;
 
-    dispatch(attemptGetUser())
+    dispatch(attemptGetCurrentUser())
       .catch(R.identity)
       .then(() => subscribed && setLoading(false));
 

frontend/components/environment/Main/Main.js

@@ -10,7 +10,14 @@ const BreadCrumbItem = ({ item = null }) => {
     <Button
       variant="text"
       size="small"
-      sx={{ width: item != null ? "auto" : "100px", textTransform: "none" }}
+      sx={{
+        width: item != null ? "auto" : "100px",
+        textTransform: "none",
+        borderRadius: "16px",
+        px: 1.5,
+        backgroundColor: "rgba(0, 0, 0, 0.075)",
+        color: "black"
+      }}
       component={item != null ? LinkComponent : null}
       to={item != null ? `/item/${item._id}` : null}
     >

frontend/components/molecules/BreadCrumbs/BreadCrumbs.js

@@ -17,7 +17,7 @@ function CreateMenuItemArray(groupObjectArray) {
   const nameArray = groupObjectArray.map((elem) => elem.name);
   for (let i = 0; i < groupObjectArray.length; i++) {
     const innerString = nameArray.slice(0, i + 1).join('>');
-    const value = groupObjectArray[i].Id;
+    const value = groupObjectArray[i]._id;
     returnArray.push({ value, innerString });
   }
   return returnArray;

frontend/components/molecules/CardDropdown/CardDropdown.js

@@ -9,7 +9,7 @@ import {
   mdiShare,
   mdiStar,
   mdiStarOutline,
-  mdiUpload,
+  mdiUpload
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
@@ -20,20 +20,20 @@ import {
   Menu,
   MenuItem,
   Skeleton,
-  Tooltip,
+  Tooltip
 } from "@mui/material";
-import humanizeDuration from "humanize-duration";
 import R from "ramda";
 import React, { useEffect, useState } from "react";
 import { store as RNC } from "react-notifications-component";
 import { useDispatch, useSelector } from "react-redux";
 import LinkComponent from "_atoms/LinkComponent";
+import { dateElapsed, dateToString } from "_frontend/utils/date";
 import {
   attemptArchiveItem,
   attemptDeleteItem,
   attemptGetItem,
   attemptGetItemChildren,
-  attemptPublishItem,
+  attemptPublishItem
 } from "_thunks/item";
 import { attemptAddBookmark, attemptRemoveBookmark } from "_thunks/user";
 import { deepEqual } from "_utils/compare";
@@ -47,9 +47,7 @@ const borderRadius = {
 // Maximum number of line of the content
 const LINE_CLAMP = 4;
 
-const content = (item, itemChildren) => {
-  const dispatch = useDispatch();
-
+const renderContent = (item, itemChildren) => {
   if (item == null || !item.hasOwnProperty("content")) return null;
 
   if (item.type === "card") {
@@ -84,17 +82,6 @@ const content = (item, itemChildren) => {
   });
 };
 
-const dateElapsed = (date) => {
-  const created = new Date(date);
-  const now = new Date();
-  return `${humanizeDuration(now - created, {
-    language: "ko",
-    largest: 1,
-    spacer: "",
-    round: true,
-  })} 전`;
-};
-
 const statusIcon = {
   archived: mdiPackageDown,
   public: mdiEarth,
@@ -116,9 +103,7 @@ export default function Item({
 
   const itemId =
     itemObject != null
-      ? itemObject.hasOwnProperty("Id")
-        ? itemObject.Id // id from local store
-        : itemObject.hasOwnProperty("_id")
+      ? itemObject.hasOwnProperty("_id")
         ? itemObject._id // id from API response
         : id
       : id; // id from props
@@ -253,7 +238,7 @@ export default function Item({
       ? "public"
       : null;
 
-  const isCurrentUserOwner = item ? item.owner._id === user.Id : false;
+  const isCurrentUserOwner = item ? item.owner._id === user._id : false;
   const isCurrentUserEditor =
     item != null && item.hasOwnProperty("accessGroups")
       ? item.accessGroups.edit.includes(user.group)
@@ -292,10 +277,7 @@ export default function Item({
   // don't render if visible is false
   if (visible == false) return null;
 
-  const createdDate = new Date(item.created);
-  const createdString = `${createdDate.toLocaleDateString(
-    "ko-KR"
-  )} ${createdDate.toLocaleTimeString("en-GB")}`;
+  const content = renderContent(item, itemChildren)
 
   return item == null ? (
     <div className="item" key={itemId}>
@@ -362,10 +344,18 @@ export default function Item({
             <div />
           )}
         </div>
-        <div className="item-content">{content(item, itemChildren)}</div>
+        {content != null ? (
+          <div className="item-content">{content}</div>
+        ) : (
+          <div className="item-content">
+            <Skeleton width="100%" />
+            <Skeleton width="100%" />
+            <Skeleton width="75%" />
+          </div>
+        )}
       </ButtonBase>
       <div className="item-footer">
-        <Tooltip title={createdString} arrow>
+        <Tooltip title={dateToString(item.created)} arrow>
           <div className="item-description">
             {`${item.owner.rank} ${item.owner.name} · ${dateElapsed(
               item.created

frontend/components/molecules/Item/Item.js

@@ -16,7 +16,7 @@ export default function GroupSettings() {
 
   // Get managing groups
   useEffect(() => {
-    searchGroupByAdmin(user.Id).then((result) => setManagingGroup(result));
+    searchGroupByAdmin(user._id).then((result) => setManagingGroup(result));
   }, [user]);
 
   // Get group members of each groups after managing groups are fetched & Set division and admin field of each members

frontend/components/organisms/GroupSettings/GroupSettings.js

@@ -0,0 +1,31 @@
+import { Stack } from "@mui/material";
+import React from "react";
+import HorizontalScroll from 'react-scroll-horizontal';
+import TypeIcon from "_atoms/TypeIcon";
+import Item from "_molecules/Item";
+
+export default function ItemList({ items, title, icon, iconType }) {
+  return (
+    <div className="item-list">
+      <div className="item-list-header">
+        {iconType != null || icon != null ? (
+          <TypeIcon type={iconType} path={icon} size={1.5} opacity={0.7} />
+        ) : null}
+        {title && <div className="item-list-title">{title}</div>}
+      </div>
+      <HorizontalScroll className="item-list-scroll">
+        <Stack direction="row" className="item-list-content" spacing={2}>
+          {items != null ? (
+            items.length > 0 ? (
+              items.map((item) => <Item key={item._id} item={item} />)
+            ) : (
+              <div>표시할 항목이 없습니다.</div>
+            )
+          ) : (
+            <div>Loading...</div>
+          )}
+        </Stack>
+      </HorizontalScroll>
+    </div>
+  );
+}

frontend/components/organisms/ItemList/ItemList.js

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