/
index.tsx
121 lines (107 loc) · 3.31 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { List } from "antd";
import moment from "moment";
import 'moment/locale/ko'
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { diaryType } from "../../type";
import { Happy, Normal, Sad, Unhappy } from "../../utils/styles/emotion_styledIcon";
import { Cloud, Lightning, Rain, Snow, Sun } from "../../utils/styles/weather_styledIcon";
import { Thumbnail } from "./styles";
type listType = {
href: string;
title: string;
description: string;
content: string;
weather : string,
emotion : string,
image : string,
};
type props ={
selectedDiary: Array<diaryType>
}
const DiaryList = ({selectedDiary}: props) => {
const [renderDiary, setRenderDiary] = useState<Array<listType>>([]);
useEffect(() => {
setRenderDiary(diaryToList(selectedDiary))
}, [selectedDiary])
const diaryToList = (RenderListDiary: Array<diaryType>) => {
const listData: Array<listType> = [];
RenderListDiary && RenderListDiary.map((diary) => {
listData.push({
href: `/viewdiary/${diary._id}`,
title: diary.title,
description: moment(diary.createdAt).format("YYYY-MM-DD"),
content: textLengthOverCut(diary.contents, 60, "..."),
weather: diary.weather && diary.weather,
emotion : diary.emotion && diary.emotion,
image : diary.image[0] && `http://localhost:5000/${diary.image[0].path}`
});
});
return [...listData];
};
const WeatherRander = ({ weather }: { weather: string }) => {
switch (weather) {
case "sun":
return <Sun size="30px" weather="none" />;
case "cloud":
return <Cloud size="30px" weather="none" />;
case "rain":
return <Rain size="30px" weather="none" />;
case "snow":
return <Snow size="30px" weather="none" />;
case "lightning":
return <Lightning size="30px" weather="none" />;
default:
return <div></div>;
}
};
const EmotioinRender = ({ emotion }: { emotion: string }) => {
switch (emotion) {
case "happy":
return <Happy size="30px" emotion="none" />;
case "normal":
return <Normal size="30px" emotion="none" />;
case "unhappy":
return <Unhappy size="30px" emotion="none" />;
case "sad":
return <Sad size="30px" emotion="none" />;
default:
return <div></div>;
}
};
const textLengthOverCut = (text: string, len: number, lastTxt: string) => {
if (text.length > len) {
text = text.substr(0, len) + lastTxt;
}
return text;
};
return (
<div>
<List
itemLayout="vertical"
size="large"
pagination={{
pageSize: 3,
position: "bottom",
}}
dataSource={renderDiary}
renderItem={(item) => (
<List.Item
actions={[
<WeatherRander weather={item.weather} />,
<EmotioinRender emotion={item.emotion} />
]}
extra={item.image && <Thumbnail alt="thumbnail" src={item.image} />}
>
<List.Item.Meta
title={<Link to={item.href}>{item.title}</Link>}
description={item.description} // 소제목
/>
{item.content}
</List.Item>
)}
/>
</div>
);
};
export default DiaryList;