---
tags: N108 Component
---
# LearnSidebar.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}
                Sidebar [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 |
| `{school}` | <font color='Gold'>json value</font> | 學校類型對應 ID| json/school.json |
| Content | <font color='BlueViolet'>component</font> | sidebar 內容 component | learn/LearnSiderbarContent.jsx |
| CSubject| <font color='BlueViolet'>component</font> | sidebar 科目內容 component | learn/LearnSidebarSubject.jsx |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='Gold'>json value</font> | API 傳回的資料，包含：CCID、PID、school、Sub| `[]` |
| `error` | <font color='orange'>string</font> | API 傳回的錯誤訊息|`null`|
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |

## componentDidMount
- 執行 Sidebar()，並額外執行上層的 Set_sidebarValue()，設定 sidebar 預設主題與科目，最後將 `isLoaded = true`
- Set_sidebarValue() 的兩種參數設定
- `domainID` 如果是 0，代表是空的，預設給他 sidebar 的第一個次主題，如果不是 0，維持 `domainID`
- `choosedomainIndex` 如果是 0 代表是第一個科目，如果不是 0，即傳入 `choosedomainIndex` 給上層
## componentDidUpdate
- 當 `prevProps.schoolname != this.props.schoolname` 時，執行 Sidebar()，並額外執行上層的 Set_sidebarValue()，設定 sidebar 預設主題與科目，最後將 `isLoaded = true`
- Set_sidebarValue() 的兩種參數設定
- 因為 `prevProps.schoolname != this.props.schoolname` 時，代表更改學校類別，更改學校類別後就是內容科目都是固定第一項，因此參數設定都固定第一項就好
- `domainID` 預設給他 sidebar 的第一個次主題 (data[0].PID)
- `choosedomainIndex` 給 0 (第一個科目)

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|GetSchoolCID()|獲取 school 對應的 CID，Call API用|否|
|Sidebar()|Call API，並將 API 資訊存入 state|是|
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Learn/subject?cid= + <font color='Blue'>type</font>|<font color='LightSkyBlue'>get</font>|獲取主題與次主題，包含：CCID、PID、school、Sub|Sidebar()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `domainID` | <font color='Salmon'>int</font> | 學習中心 Sidebar 對應的 OID|
| `contentID` | <font color='Salmon'>int</font> | 學習內容對應的 OID |
| `choosedomainIndex` | <font color='Salmon'>int</font> | 學習中心 Sidebar 科目對應的 ID，ex：物理(0)、化學(1)、生物(2)、地科(3)|
| Set_sidebarValue | <font color='Green'>function</font> | 設定 sidebar 內容 ID 與科目 ID|
| Set_contentValue | <font color='Green'>function</font> | 設定 學習內容 ID|
### return
- 上層為科目 ➡️ [LearnSidebarSubject.jsx](https://hackmd.io/-Z634UZFRxKNh7kAPhdqjA?view)
- 

<CSubject
    data={data}
    choosedomainIndex={choosedomainIndex}
    Set_sidebarValue={Set_sidebarValue}
/>

- 下層為主題與次主題 ➡️ [LearnSiderbarContent.jsx](https://hackmd.io/8DPI1pw4QqatX2tgVDBXIA?view)
- 

<Content
    domainID={domainID}
    contentID={contentID}
    Set_contentValue={Set_contentValue}
/>

[回上層 Learn.jsx](https://hackmd.io/mVPmz7vPRa-Cr7jS9cj_Qg?view)