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

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| Timecal | <font color='BlueViolet'>component</font> | 時間顯示 | tool/Time.jsx |
| Markdown | <font color='BlueViolet'>component</font> | React markdown 編譯器 | tool/ReactMarkdown.jsx |
| pencil | <font color='red'>image</font> | pencil 圖片 | image/pencil.png |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `note` | <font color='Gold'>json value</font> | API 傳回的該部影片的筆記資料| `[]` |
| `open` | <font color='blue'>bool</font> | 筆記列表開關判斷參數，true 為打開中，false 為關閉 | `false` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |

## shouldComponentUpdate
- 簡單來說，關閉時筆記 list，不讓滾輪 Y 軸的位置移動
- ~~我想不起來我為什麼寫他了~~
## componentDidMount
- 執行 note()，並將 isLoaded = true
## componentDidUpdate
1. 當 prevState == this.state 時，執行 note()，並將 isLoaded = true
2. 將視窗移動到該筆記列表置中

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|note()|Call 2 支 API 以及存入 state.data 與 state.subject|是|
|openclick()|open = !this.state.open|否|
|setcolor()|四種科目設定不同的 CSS class|否|
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Member/Notehistory?vid= + <font color='Blue'>OID</font>|<font color='LightSkyBlue'>get</font>|獲取該影片的所有筆記|note()|
|Watch/v_subject/ + <font color='Blue'>OID</font>|<font color='LightSkyBlue'>get</font>|該影片所屬科目，ex:物理、化學、生物、地科|note()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| notecount | <font color='Salmon'>int</font>| 該影片筆記數量|
| CName | <font color='Gold'>json value</font> | 影片名稱|
### return
- 因為外片 MemberNotelistHistory 用 `<ul>包著`，所以用`<li>`
- 每個列表包含 button 可以打開列表觀看筆記
- 

<li className="notelist dis-flex-row mouse" ref={this.scrollpos} onClick={this.openclick}>
    <div className="notename">
        <div>
            <div className="noteproject">
                {CName}
            </div>
        </div>
        <div></div>
        <div style={{ "marginTop": "8px" }}>
            {this.setcolor()}
            <span className="subjectname">{subject}</span>
            {/* <i className="fas fa-pencil-alt" style={{ "color": "#00be00" }}></i> */}
            <img src={pencil} alt="" width="16px" />
            <span className="subjectname">
                &ensp;筆記數量：{notecount}
            </span>
        </div>
    </div>
    {!open && <div className="text-r dropdowninfo dropdownicon mouse">
        More ...
    </div>}

- 底下筆記列表
- 

{
    open &&
    <li className="noteopenlist-fixed animate-top">
        {note.map(n =>
            <div key={n.NID} className="relative">
                <div className="dis-flex-row">
                    <span className="noteinfosec">
                        {parseInt(n.CurrentTime / 60)}:{(((n.CurrentTime - parseInt(n.CurrentTime / 60) * 60) / 100).toFixed(2)).split('.')[1]}
                    </span>
                    <div className="edu-yttitle">
                        {n.Title}
                    </div>
                </div>
                <div className="github markdown-body notem">
                    <Markdown content={n.Content}></Markdown>
                </div>
                <div className="text-r timeinfo"><Timecal time={n.LastModifiedDT}></Timecal> 修改過</div>
                <div className="text-l staricon"><i className="far fa-star mouse"></i></div>
            </div>
        )}

    </li>
}

- 收起 button
- 

{
    open &&
    <div className="text-r dropdowninfo" onClick={this.openclick}>
        <div className="dropdowncontainter">
            <span className="dropdown-caret2-ro"></span>&emsp;收起
        </div>
    </div>
}