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

- *註解起來的地方，都是以前的淘汰品 (gird 模式)*
## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| blank | <font color='Red'>image</font> | 空白圖片，~~沒用了~~ | image/blank.jpg |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| `{code}` | <font color='Gold'>json value</font> | 學校類型對應 ID| json/code.json |
| ReactLoading | <font color='RosyBrown'>external component</font> | loading component | react-loading |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='Gold'>json value</font> | API 傳回的資料| `[]` |
| `error` | <font color='orange'>string</font> | API 傳回的錯誤訊息|`null`|
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |
| `show_list` | <font color='blue'>bool</font> | 原本是切換顯示列表，現在是 button 顯示 act css|`true`|
## componentDidMount
- 當 contentID != 0 (0 為空的，CID 不該為空)，執行 Content()，並將 isLoaded = true
## componentDidUpdate
- 當 `prevProps.contentID != this.props.contentID && contentID != 0` (0 不正常，CID 不該為空)，執行 Content()，並將 isLoaded = true

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|Content()|Call 2 API，且針對有影片的學習內容先計算總影片數量，將資料存入 state.data|是|
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Learn/content?cid= + <font color='Blue'>contentID</font>|<font color='LightSkyBlue'>get</font>|學習內容相關資料，包含：Keywords、ccid、cdes、cname、pcid、pname、videoN|Content()|
|Learn/videoNum?pcid= + <font color='Blue'>contentID</font>|<font color='LightSkyBlue'>get</font>|數筆學習內容中，影片數量資料，包含有影片的學習內容的 pcid、ccid、count|Content()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| openVideoflame | <font color='Green'>function</font> | 轉換成影片列表 function|
### return
#### 當 `isLoaded = false`，return
- loading 畫面 (轉圈圈)

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

#### 當 `isLoaded = true`，return
- 簡單 topbar，可不用show_list，原本有 grid (方框模式)可以切換
- 

<div className="listControlBar">
    <div className="leftGroup dis-flex-row">
        <div className={`mouse icon-containter ${show_list ? "act" : "noact"}`}
            onClick={this.switch_list}>
            <i className="fa fa-th-list" aria-hidden="true"></i>
        </div>
        <span>共有  {data.length}  筆學習內容</span>
    </div>
</div>

- 整個 data 用 map 建立 `<div>` (161 ~ 190 行)
- 不放 code
- 關鍵字也用 map 去建立
- 

<div className="inlineblock">
    <ul className="suitableGroup ul">
        <li className="itemTitle li">關鍵字：</li>
        {d.Keywords.split(',').map((k, i) => <li className="suitable10-12-2 li mouse" key={i}>{k}</li>)}
    </ul>
</div>

- 適用對象用 json 去設定顏色
- 

<div className="otherInfo">
    <ul className="suitableGroup ul">
        <li className="itemTitle li">適用對象：</li>
        {code.map(function (c, i) {
            if (c.name == d.pname.split('-')[1])
                return c.range.map(r => <li key={r} className={`suitable10-12--${code[i].color} li`}>{r}</li>);
        })}
    </ul>
</div>

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