---
tags: N108 Component
---
# MemberNotelistHistory.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}
                NotelistHistory [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| Notehistory | <font color='BlueViolet'>component</font> | 時間顯示 | account/MemberNotehistory.jsx |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `note` | <font color='Gold'>json value</font> | API 傳回的筆記資料| `[]` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false`
## componentDidMount
- 執行 fullnote()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state 時，執行 fullnote()，並將 isLoaded = true

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|fullnote()|Call api，並將資料存入 state.note|是|
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Member/Notelisthistory|<font color='LightSkyBlue'>get</font>|獲取會員所有的筆記資料|fullnote()|
## render
### return
- 搜尋欄還沒做 :smile:
- 

<div className="dis-flex-row watch-search">
    <input type="search" placeholder="Find a Note...." aria-label="Find a Note...." 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" }}>內容</button>
    <button name="button" type="button" className="btn2" style={{ "margin": "0px 8px" }}>科目&ensp;<span className="dropdown-caret"></span></button>
</div>

- 每部影片的筆記列表`<ul>`內含一個筆記並用 [MemberNoteHistory.jsx](https://hackmd.io/XoKVRxK0SWiPSApqsPBpqg?view) 包裝
- 
- 紅色框框算一個 Notehistory

<ul>
{note.map(n => <Notecontent key={n.OID} OID={n.OID} CName={n.CName} CDes={n.CDes} notecount={n.notecount}></Notecontent>)}
</ul>

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