Merge branch 'feature/frontend/#33' of https://github.com/osamhack2021/Web_Handover_Handover into feature/frontend/#33

Author: holymollyhao

backend/InitDB.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

@@ -22,12 +22,12 @@ import {
   Skeleton,
   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,
@@ -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,
@@ -290,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}>
@@ -360,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

@@ -18,6 +18,7 @@ import {
   Divider,
   IconButton,
   ListItemIcon,
+  Skeleton,
   Menu,
   MenuItem,
   Stack,
@@ -41,7 +42,11 @@ import {
   attemptGetItemChildren,
   attemptPublishItem
 } from "_thunks/item";
-import { attemptAddBookmark, attemptRemoveBookmark } from "_thunks/user";
+import {
+  attemptAddBookmark,
+  attemptGetUser,
+  attemptRemoveBookmark
+} from "_thunks/user";
 import { deepEqual } from "_utils/compare";
 
 const typeString = {
@@ -85,6 +90,8 @@ export default function ItemPage() {
   const [isBookmarked, setBookmarked] = useState(
     user.bookmarks.includes(itemId)
   );
+  const [itemOwner, setItemOwner] = useState(null);
+
   // visibility of the component; used on delete and unauthorized items
   const [visible, setVisible] = useState(true);
 
@@ -164,6 +171,10 @@ export default function ItemPage() {
 
   useEffect(() => {
     if (item != null) {
+      dispatch(attemptGetUser(item.owner._id)).then((user) => {
+        setItemOwner(user);
+      });
+
       switch (item.type) {
         case "cabinet": // will have 0 parents because it's the root item
           console.log("switch: case =", item.type, pathArray);
@@ -302,9 +313,7 @@ export default function ItemPage() {
                 badgeContent={
                   status != null ? (
                     <Icon size={0.75} path={statusIcon[status]} opacity={0.7} />
-                  ) : (
-                    null
-                  )
+                  ) : null
                 }
                 anchorOrigin={{
                   vertical: "bottom",
@@ -343,6 +352,22 @@ export default function ItemPage() {
             <BreadCrumbs hierarchyLevel={hierarchyLevel[item.type]} />
           )}
         </Stack>
+        {itemOwner != null ? (
+          <Stack className="item-profile">
+            <img
+              className="item-profile-image"
+              src={itemOwner.profileImageUrl || "/images/default-profile.png"}
+            />
+            <div className="item-profile-name">
+              {itemOwner.rank} {itemOwner.name}
+            </div>
+          </Stack>
+        ) : (
+          <Stack className="item-profile">
+            <Skeleton className="item-profile-image"/>
+            <Skeleton className="item-profile-name" />
+          </Stack>
+        )}
         {item.content && <Editor content={item.content} editable={false} />}
         <div>
           <div className="outer-div">

frontend/components/pages/ItemPage/ItemPage.js

@@ -4,7 +4,7 @@ import { updateUser } from "_actions/user";
 import { getUser, putUser, putUserPassword } from "_api/user";
 import { dispatchError } from "_utils/api";
 
-export const attemptGetUser = () => (dispatch) => {
+export const attemptGetCurrentUser = () => (dispatch) => {
   try {
     const currentUserId = JSON.parse(localStorage.getItem("user"))._id;
 
@@ -25,6 +25,17 @@ export const attemptGetUser = () => (dispatch) => {
   }
 };
 
+export const attemptGetUser = (userId) => (dispatch) => {
+  return getUser(userId)
+    .then((data) => {
+      return data;
+    })
+    .catch(() => {
+      // Redirect to /login if there is no user logged in
+      dispatchError(dispatch);
+    });
+};
+
 export const attemptUpdateUser = (updatedUser) => (dispatch) => {
   const currentUserId = JSON.parse(localStorage.getItem("user"))._id;
 

frontend/store/thunks/user.js

@@ -34,4 +34,28 @@
       text-overflow: ellipsis;
     }
   }
+
+  .item-profile {
+    align-items: center;
+    flex-direction: row;
+
+    .item-profile-image {
+      width: 24px;
+      height: 24px;
+      margin-right: 12px;
+      border-radius: 50%;
+      border: 1px solid #0005;
+    }
+
+    .item-profile-name {
+      font-size: 1.15em;
+      font-weight: bold;
+      text-align: start;
+      padding-top: 3px;
+    }
+
+    .item-profile-name-loading {
+      width: 100px;
+    }
+  }
 }

frontend/styles/item-page.scss

@@ -0,0 +1,17 @@
+import humanizeDuration from "humanize-duration";
+
+export const dateElapsed = (dateString) => {
+  const date = new Date(dateString);
+  const now = new Date();
+  return `${humanizeDuration(now - date, {
+    language: "ko",
+    largest: 1,
+    spacer: "",
+    round: true,
+  })} 전`;
+};
+
+export const dateToString = (dateString) => {
+  const date = new Date(dateString);
+  return `${date.toLocaleDateString("ko-KR")} ${date.toLocaleTimeString("en-GB")}`;
+};