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

digraph Pageswitch {
                nodesep=0.8
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Learn->{Sidebar Content YtFlame}
                Sidebar->{SidebarSubject SiderbarContent}
                YtFlame->{Thumbnails}
                SiderbarContent [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| withRouter | <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 傳回的資料，包含：PCID、CCID、title、CName|`[]` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |

## componentDidMount
- 執行 Sidebar()，並將 isLoaded = true
## componentDidUpdate
- 當 prevProps.domainID != this.props.domainID 時，執行 Sidebar()，且額外執行上層 Set_contentValue()，最後將 isLoaded = true
- Set_contentValue() 參數設定
- defalut 第一項次主題的 <font color='blue'>`data[0].CCID`</font> 給學習內容用

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|Sidebar()|Call API，將回傳資料存入 state|是|
|stringsplit()|將主題後面的大括號濾掉|是|
|content()|Html array push 設定 (純 HTML 不介紹)，~~我也不知道為什麼我不用 map~~|否|
:::danger
stringsplit 應該要在資料庫 class table 濾掉！！！
:::
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Learn/titlecontent?cid= + <font color='blue'>domainID</font>|<font color='LightSkyBlue'>get</font>|獲取科目的主題以及次主題，包含：PCID、CCID、title、CName|Sidebar()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `contentID` | <font color='Salmon'>int</font> | 學習內容對應的 OID |
|`Set_contentValue`|<font color='Green'>function</font>|傳入學習內容相對的 ID，給上層 Learn.jsx 更新資料 |
### return
- Call this.content()

<div>
    {this.content(data, contentID, Set_contentValue)}
</div>

[回上層 LearnSidebar.jsx](https://hackmd.io/C3O6Rrh5Sv2BtYRKJrKY-A?view)