---
tags: N108 Component
---
# MemberWatchHistory.jsx
- Member 切換流程圖 *(原本 component 名稱把 Member 去掉)*
- 可以配合 PPT 14頁

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Profile->{TopBar IMG_Name Content}
                Content->{info LearnHistory WatchHistory NotelistHistory}
                info->{infobtn}
                NotelistHistory->{NoteHistory}
                {rank=same;UploadImg IMG_Name}
                WatchHistory [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| NavLink | <font color='RosyBrown'>external component</font> | Route | react-router-dom |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='Gold'>json value</font> | API 傳回的資料| `[]` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false`

## componentDidMount
- 執行 histroy()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state 時，執行 histroy()，並將 isLoaded = true

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|histroy()|Call API，並進行 json array 分類|是|

## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Member/history|<font color='LightSkyBlue'>get</font>|獲取會員的所有觀看紀錄，包含名稱、時間、頻道名稱、OID、VID|histroy()|
## render
### return
- 搜尋欄還沒做 :smile:
- 

<div className="dis-flex-row watch-search">
    <input type="search" placeholder="Find a video...." aria-label="Find a video...." className="search-input width-full "></input>
    <button name="button" type="button" className="btn2" style={{ "margin": "0px 8px" }}>頻道</button>
    <button name="button" type="button" className="btn2" style={{ "margin": "0px 8px" }}>科目&ensp;<span className="dropdown-caret"></span></button>
</div>

- 將 API 的 data，用 map 呈現
- 每個 div 都是 NavLink，可以利用 route 去觀看
- 

{
    data.map(d =>
        <div key={d.oid} style={{ "marginTop": "24px" }}>
            <div className="vcontainer temp-limit" >
                <NavLink to={`/watch?v=${d.oid}`} className="dis-flex-row wytflame">
                    <div>
                        <img src={`https://i.ytimg.com/vi/${d.videoid}/mqdefault.jpg`} width="300px"></img>
                    </div>
                    <div className="dis-flex-column" style={{ "margin": "0px 8px" }}>
                        <span title={d.cname} className="twoline">{d.cname}</span>
                        <div className="ytviewct" style={{ "color": "gray", "marginTop": "6px" }}><span>{d.channel}</span></div>
                        <div style={{ "marginTop": "6px" }}><span>上次觀看時間：{d.date.substr(2, 14).replaceAll('-', '/').replaceAll('T', '-')}</span></div>
                    </div>
                </NavLink>
            </div>
        </div>)
}

[回上層 MemberContent.jsx](https://hackmd.io/VO9RoLZZTSuRFfjFN1uSUQ?view)