Skip to content

Commit 214f508

Browse files
ntchontcho
committed
Refactor: Add ItemList, ItemListSection
1 parent c4d9320 commit 214f508

5 files changed

Lines changed: 78 additions & 58 deletions

File tree

‎frontend/components/organisms/ItemList/ItemList.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Stack } from "@mui/material";
2+
import React from "react";
3+
import TypeIcon from "_atoms/TypeIcon";
4+
import Item from "_molecules/Item";
5+
6+
export default function ItemList({ items, title, iconType }) {
7+
return (
8+
<div className="item-list">
9+
<div className="item-list-header">
10+
<TypeIcon type={iconType} size={1.5} opacity={0.7} />
11+
<div className="item-list-title">{title}</div>
12+
</div>
13+
<Stack direction="row" className="item-list-content" spacing={2}>
14+
{items != null ? (
15+
items.length > 0 ? (
16+
items.map((item) => <Item key={item._id} item={item} />)
17+
) : (
18+
<div>표시할 항목이 없습니다.</div>
19+
)
20+
) : (
21+
<div>Loading...</div>
22+
)}
23+
</Stack>
24+
</div>
25+
);
26+
}

‎frontend/components/organisms/ItemList/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ItemList from './ItemList';
2+
3+
export default ItemList;

‎frontend/components/pages/ItemListPage/ItemListPage.js‎

Lines changed: 23 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,45 @@
1-
import { Container, Stack } from '@mui/material';
2-
import R from 'ramda';
3-
import React, { useEffect, useState } from 'react';
4-
import { useDispatch, useSelector } from 'react-redux';
5-
import { useLocation } from 'react-router';
6-
import TypeIcon from '_atoms/TypeIcon';
7-
import Item from '_molecules/Item';
8-
import { attemptGetItem } from '_thunks/item';
9-
10-
const ItemList = ({ items, title, iconType }) => (
11-
<div className="item-list">
12-
<div className="item-list-header">
13-
<TypeIcon type={iconType} size={1.5} opacity={0.7} />
14-
<div className="item-list-title">{title}</div>
15-
</div>
16-
<Stack direction="row" className="item-list-content" spacing={2}>
17-
{items != null ? (
18-
items.length > 0 ? (
19-
items.map((item) => <Item key={item._id} item={item} />)
20-
) : (
21-
<div>표시할 항목이 없습니다.</div>
22-
)
23-
) : (
24-
<div>Loading...</div>
25-
)}
26-
</Stack>
27-
</div>
28-
);
1+
import R from "ramda";
2+
import React, { useEffect, useState } from "react";
3+
import { useDispatch, useSelector } from "react-redux";
4+
import { useLocation } from "react-router";
5+
import ItemListSection from "_frontend/components/templates/ItemListSection";
6+
import { attemptGetItem } from "_thunks/item";
297

308
export default function ItemListPage() {
31-
const { user } = useSelector(R.pick(['user']));
32-
const { itemCache } = useSelector(R.pick(['itemCache']));
9+
const { user } = useSelector(R.pick(["user"]));
10+
const { itemCache } = useSelector(R.pick(["itemCache"]));
3311

3412
const dispatch = useDispatch();
3513

36-
const [title, setTitle] = useState('');
14+
const [title, setTitle] = useState("");
3715
const [items, setItems] = useState(null);
3816
const { pathname } = useLocation();
3917

4018
const addItem = (item) => {
41-
console.log('adding item', item, 'previous item', items);
19+
console.log("adding item", item, "previous item", items);
4220
const currentItems = items != null ? items : [];
4321
setItems([...currentItems, item]);
4422
};
4523

4624
useEffect(() => {
4725
let array = [];
4826
switch (pathname) {
49-
case '/bookmarks':
50-
setTitle('북마크');
27+
case "/bookmarks":
28+
setTitle("북마크");
5129
array = user.bookmarks;
5230
break;
53-
case '/recents':
54-
setTitle('최근에 본 문서');
55-
const localStorageRecents = JSON.parse(localStorage.getItem('recents'));
31+
case "/recents":
32+
setTitle("최근에 본 문서");
33+
const localStorageRecents = JSON.parse(localStorage.getItem("recents"));
5634
array = localStorageRecents != null ? localStorageRecents : [];
5735
break;
58-
case '/drafts':
59-
setTitle('임시저장한 문서');
60-
array = Object.keys(itemCache).map((itemId) => itemCache[itemId]).filter(
61-
(item) => item.owner._id === user._id && item.status === 'draft',
62-
);
36+
case "/drafts":
37+
setTitle("임시저장한 문서");
38+
array = Object.keys(itemCache)
39+
.map((itemId) => itemCache[itemId])
40+
.filter(
41+
(item) => item.owner._id === user._id && item.status === "draft"
42+
);
6343
break;
6444
default:
6545
array = [];
@@ -78,20 +58,5 @@ export default function ItemListPage() {
7858
setItems(cachedItems);
7959
}, [pathname, user]);
8060

81-
const cabinetItems = items != null ? items.filter((item) => item.type === 'cabinet') : null;
82-
const documentItems = items != null ? items.filter((item) => item.type === 'document') : null;
83-
const cardItems = items != null ? items.filter((item) => item.type === 'card') : null;
84-
85-
return items != null ? (
86-
<Container maxWidth="md">
87-
<Stack spacing={1} className="item-list-page" sx={{ py: 4 }}>
88-
<div className="item-list-page-title">{title}</div>
89-
<ItemList items={cabinetItems} title="서랍" iconType="cabinet" />
90-
<ItemList items={documentItems} title="문서" iconType="document" />
91-
<ItemList items={cardItems} title="카드" iconType="card" />
92-
</Stack>
93-
</Container>
94-
) : (
95-
<div>Loading...</div>
96-
);
61+
return <ItemListSection title={title} items={items} />;
9762
}

‎frontend/components/templates/ItemListSection/ItemListSection.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Container, Stack } from '@mui/material';
2+
import React from 'react';
3+
import ItemList from '_organisms/ItemList';
4+
5+
export default function ItemListSection({title, items}) {
6+
7+
const cabinetItems = items != null ? items.filter((item) => item.type === 'cabinet') : null;
8+
const documentItems = items != null ? items.filter((item) => item.type === 'document') : null;
9+
const cardItems = items != null ? items.filter((item) => item.type === 'card') : null;
10+
11+
return items != null ? (
12+
<Container maxWidth="md">
13+
<Stack spacing={1} className="item-list-page" sx={{ py: 4 }}>
14+
<div className="item-list-page-title">{title}</div>
15+
<ItemList items={cabinetItems} title="서랍" iconType="cabinet" />
16+
<ItemList items={documentItems} title="문서" iconType="document" />
17+
<ItemList items={cardItems} title="카드" iconType="card" />
18+
</Stack>
19+
</Container>
20+
) : (
21+
<div>Loading...</div>
22+
);
23+
}

‎frontend/components/templates/ItemListSection/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ItemListSection from './ItemListSection';
2+
3+
export default ItemListSection;

0 commit comments

Comments
 (0)