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

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| ReactLoading | <font color='RosyBrown'>external component</font> | loading component | react-loading |
| Bootstrap style | <font color='Maroon'>style</font> | Bootstrap css 庫 | styles/Bootstrap.sty |
| Thumbnails | <font color='BlueViolet'>component</font> | oyoutube 一部影片預覽小方框列表 | learn/Thumbnails.jsx |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='Gold'>json value</font> | API 傳回的資料| `[]` |
| `content` | <font color='orange'>string</font> | API 傳回的學習內容名稱|`''`|
| `subject` | <font color='orange'>string</font> | API 傳回的學習內容科目|`''`|
| `code` | <font color='orange'>string</font> | API 傳回的錯學習內容代碼|`''`|
| `error` | <font color='orange'>string</font> | API 傳回的錯誤訊息|`null`|
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |
## componentDidMount
- 當 YTOID != 0 時，執行 get_api_data()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state && this.props.YTOID != 0 時，執行 get_api_data()，並將 isLoaded = true

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|get_api_data()|Call 3 API，並存入 state|是|
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
| Learn/video?cid= + <font color='Blue'>YTOID</font>|<font color='LightSkyBlue'>get</font>|該學習內容所有影片，包含 CDes、CName、code、content、nClick、oid|get_api_data()|
|Learn/ + <font color='Blue'>YTOID</font>|<font color='LightSkyBlue'>get</font>|學習內容名稱、代碼|get_api_data()|
|Learn/ + <font color='Blue'>domainID</font>|<font color='LightSkyBlue'>get</font>|學習內容科目|get_api_data()|

## render
### return
#### 當 `isLoaded = false`，return
- loading 畫面 (轉圈圈)

return (
    <div className="main_content dis-center">
        <div>
            <ReactLoading
                type={"spinningBubbles"}
                color="#000000"
                height={200}
                width={200}
            />
            <h1 style={{ "marginTop": "8px" }}>Loading ...</h1>
        </div>
    </div>
);

#### 當 `isLoaded = true`，return
- 純 HTML，不介紹
- 
- 不放 code
- 每部影片預覽用 map 去建立，➡️ [Thumbnails.jsx](https://hackmd.io/v-8TcnMITduMjlzPLRXwNA?view)
- 

<div className="dis-center2 ytfcontainer">
    <div className="container">
        <ul className="list-unstyled video-list-thumbs row">
            {data.map(d =>
                <Thumbnails
                    key={d.oid}
                    oid={d.oid}
                    CDes={d.CDes}
                    CName={d.CName}
                    nClick={d.nClick}
                />
            )}
        </ul>
    </div>
</div>

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