---
tags: N108 Component
---
# Exam.jsx
- component 切換流程圖
- 可以配合 PPT 17頁

digraph Pageswitch {
                nodesep=0.8
                Exam [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
                node [color=orange, fontsize=22, shape=box]
                edge [color=RosyBrown, style=dashed]
                Exam->{Contain Wrapper}
                Wrapper->{ProblemImg Choosebtn Issue}
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :----------- |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| ExamContain | <font color='BlueViolet'>component</font> | 該學校所屬考卷 component | exam/ExamContain.jsx |
| queryString | <font color='Green'>function</font> | query-string 擷取函數 | query-string |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='Gold'>json value</font> | API 傳回的資料| `[]` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |
| `isSelect` | <font color='blue'>bool</font> | 轉換成選擇段考卷模式，true 為 正在選擇考卷，false 為正在挑選學校 | `false` |
| `selectData` | <font color='Gold'>json value</font> | 該學校的相關資料，for 下層 API 使用|`[]`|
## componentDidMount
- 執行 get_api()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state 時，執行 get_api()，並將 isLoaded = true

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|get_api()|Call API，將資料存入 state|是|
|Set_select()|打開考卷選擇列表，並將該學校資料存入 state|否|
|Close_select()|關閉考卷選擇列表，並將該學校資料從 state 刪除|否|

## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Exam/examlist|<font color='LightSkyBlue'>get</font>|該學校類別有哪些學校有考卷可以供使用者選擇，即回傳學校相關考卷資料，包含：type (學校名稱)、ref (來源)、count (考卷數量)|get_api()|
## render
### 額外參數
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `schoolname` | <font color='orange'>string</font> | 學校類別，由 queryString 抓取|
### return
- 目前只有 `schoolname == "High_senior"` 才有資料
- 用 map 建立 div
- 

{!isSelect && schoolname == "High_senior" &&
    <div className="book-content dis-flex-column">
        <div>
            <small>Choose a school...</small>
        </div>
        <div className="dis-flex-row">
            {data.map(d =>
                <div className="bookwrapper mouse" key={d.type} onClick={(e) => this.Set_select(d)}>
                    <div className="book">
                        <div className="book__cover">
                            <div className="book__detail">{d.type}</div>
                            <h4>數量：{d.count}</h4>
                        </div>
                        <div className="book__page squared"></div>
                    </div>

                </div>
            )}
        </div>
    </div>
}

- `isSelect = true` 轉換成 [ExamContain.jsx](https://hackmd.io/8cLPGVhdRymXPrCLNYLuNw?view)

{isSelect &&
    <div className="main_content_Exam">
        <ExamContain
            selectData={selectData}
            Close_select={this.Close_select}
        />
    </div>
}

- `schoolname != "High_senior"`，顯示 "尚無資料，敬請期待 ~"

{schoolname != "High_senior" &&
    <div className="dis-center main_content_Exam" style={{ "height": "calc(80vh)" }}>
        <div className="testing">
            <div>尚無資料，敬請期待 ~</div>
        </div>
    </div>
}

[回上層 Pageswitch.jsx](https://hackmd.io/WkWyQZuOQheHmDFcnRCLuw?view)