Feat: Show children items on ItemPage

Author: ntcho

frontend/components/pages/ItemPage/ItemPage.js

@@ -5,11 +5,12 @@ import {
   mdiDotsVertical,
   mdiEarth,
   mdiFileEditOutline,
+  mdiFileTreeOutline,
   mdiPackageDown,
   mdiShare,
   mdiStar,
   mdiStarOutline,
-  mdiUpload,
+  mdiUpload
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
@@ -22,7 +23,7 @@ import {
   MenuItem,
   Skeleton,
   Stack,
-  Tooltip,
+  Tooltip
 } from "@mui/material";
 import { push } from "connected-react-router";
 import R from "ramda";
@@ -33,6 +34,7 @@ import { useParams } from "react-router";
 import { Link } from "react-router-dom";
 import LinkComponent from "_atoms/LinkComponent";
 import TypeIcon from "_atoms/TypeIcon";
+import ItemList from "_frontend/components/organisms/ItemList";
 import { dateElapsed, dateToString } from "_frontend/utils/date";
 import BreadCrumbs from "_molecules/BreadCrumbs";
 import Editor from "_molecules/Editor";
@@ -42,12 +44,12 @@ import {
   attemptDeleteItem,
   attemptGetItem,
   attemptGetItemChildren,
-  attemptPublishItem,
+  attemptPublishItem
 } from "_thunks/item";
 import {
   attemptAddBookmark,
   attemptGetUser,
-  attemptRemoveBookmark,
+  attemptRemoveBookmark
 } from "_thunks/user";
 import { deepEqual } from "_utils/compare";
 
@@ -127,11 +129,6 @@ export default function ItemPage() {
       dispatch(attemptGetItem(itemId))
         .then((item) => {
           setItem(item);
-          if (item.type !== "card") {
-            dispatch(attemptGetItemChildren(item.path)).then((items) => {
-              setItemChildren(items);
-            });
-          }
         })
         .catch(() => setVisible(false));
     } else {
@@ -149,12 +146,6 @@ export default function ItemPage() {
           }
         })
         .catch(() => setVisible(false));
-
-      if (item.type !== "card" && itemChildren == null) {
-        dispatch(attemptGetItemChildren(item.path)).then((children) => {
-          setItemChildren(children);
-        });
-      }
     }
 
     // setting recents of localstorage
@@ -177,6 +168,12 @@ export default function ItemPage() {
         setItemOwner(user);
       });
 
+      if (item.type !== "card") {
+        dispatch(attemptGetItemChildren(item.path)).then((children) => {
+          setItemChildren(children.filter(i => i._id != item._id));
+        });
+      }
+
       switch (item.type) {
         case "cabinet": // will have 0 parents because it's the root item
           console.log("switch: case =", item.type, pathArray);
@@ -333,8 +330,10 @@ export default function ItemPage() {
                 <TypeIcon type={item.type} size={1.5} opacity={0.7} />
               </Badge>
             </Tooltip>
+
             {/* Item title */}
-            <div className="item-title">{item.title}</div>
+            <div className="item-header-title">{item.title}</div>
+
             {/* Item action menus */}
             <Stack direction="row">
               <Tooltip title="북마크에 추가" arrow>
@@ -351,13 +350,18 @@ export default function ItemPage() {
             </Stack>
           </div>
         </Stack>
+
         {/* Item BreadCrumbs */}
         {itemParents != null ? (
           <BreadCrumbs itemArray={[...itemParents, item]} />
         ) : (
           <BreadCrumbs hierarchyLevel={hierarchyLevel[item.type]} />
         )}
-        {/* Item owner profile */}
+
+        {/* Item content */}
+        {item.content && <Editor content={item.content} editable={false} />}
+
+        {/* Item metadata (owner profile, created date) */}
         {itemOwner != null ? (
           <Stack className="item-profile">
             <img
@@ -381,7 +385,14 @@ export default function ItemPage() {
             <Skeleton width={200} height="1em" />
           </Stack>
         )}
-        {item.content && <Editor content={item.content} editable={false} />}
+
+        {/* Item children */}
+        {item.type !== "card" && <ItemList
+          items={itemChildren}
+          title="하위 항목"
+          icon={mdiFileTreeOutline}
+        />}
+
         <div>
           <div className="outer-div">
             <div className="grid-container">

frontend/styles/item-list-page.scss

@@ -16,44 +16,41 @@
   }
 }
 
-.item-list-page {
+.item-list-page-title {
+  width: 100%;
+  font-size: 2.5em;
+  font-weight: bolder;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .item-list-page-title {
-    width: 100%;
-    font-size: 2.5em;
-    font-weight: bolder;
+.item-list-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+
+  svg {
+    padding-bottom: 4px;
+  }
+
+  .item-list-title {
+    flex-grow: 1;
+    font-size: 2em;
+    font-weight: bold;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+}
 
-  .item-list-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-
-    svg {
-      padding-bottom: 4px;
-    }
-
-    .item-list-title {
-      flex-grow: 1;
-      font-size: 2em;
-      font-weight: bold;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .item-list-content {
-    height: $height;
-    align-items: center;
-    margin: 16px 0;
-    gap: 8px;
-    overflow-x: hidden;
-  }
+.item-list-content {
+  height: $height;
+  align-items: center;
+  margin: 16px 0;
+  gap: 8px;
+  overflow-x: hidden;
 }

frontend/styles/item-page.scss

@@ -24,7 +24,7 @@
     margin-bottom: 8px;
     gap: 12px;
 
-    .item-title {
+    .item-header-title {
       font-size: 2.5em;
       font-weight: bolder;
       flex-grow: 1;
@@ -42,6 +42,7 @@
     padding-top: 8px;
 
     .item-profile-image {
+      margin-left: auto;
       width: 24px;
       height: 24px;
       border-radius: 50%;
@@ -64,4 +65,8 @@
       }
     }
   }
+
+  .item-list {
+    margin-top: 32px;
+  }
 }