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

digraph Pageswitch {
                nodesep=0.8
                Contain [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 |
| NavLink | <font color='RosyBrown'>external component</font> | Route | react-router-dom |
| ReactLoading | <font color='RosyBrown'>external component</font> | loading component | react-loading |
| back | <font color='Red'>image</font> | 返回圖示 | image/go-back-arrow.png |
| back2 | <font color='Red'>image</font> | 返回圖示 2 | image/go-back-arrow2.png |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='Gold'>json value</font> | API 傳回的資料| `[]` |
| `pageNumber` | <font color='Salmon'>int</font> | 目前頁數| `1` |
| `TotalPageNumber` | <font color='Salmon'>int</font> | 總頁數| `0` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |
| `hoverBack` | <font color='blue'>bool</font> | 返回圖示 hover 變化，true 為 hovering，false 為正在no hover | `false` |

## componentDidMount
- 執行 get_api()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state 時，執行 get_api()，並將 isLoaded = true

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|get_api()|Call API，將資料存入 state|是|
|subcolor()|`switch(subject)`去決定科目顏色|是|
|gradecolor()|`switch(grade)`去決定年級(高一 ~ 高三)顏色|否|
|produceList()|建立每份考卷的 Navlink **(不能用 map，因為不能遍歷，要依照目前頁數 `pageNumbe`去顯示 div)**|否|
|SetPageNumber()|直接設定目前點選的 page number|否|
|nextPageNumber()|下一頁|否|
|backPageNumber()|上一頁|否|
|pagination()|選頁數的 function，**(css 關係，因此不用 map)**|否|
|hoverClick()|返回小圖示的 hover function|否|
### produceList() 介紹
- data (API 資料)，pageNumber (目前頁數)
- 每頁顯示 4 個考卷
- list 每個 index 的值都是考卷的 Navlink ➡️ [ExamWrapper.jsx](https://hackmd.io/JqzV6luhSsCA3CPCxtt_sg?view)

produceList(data, pageNumber) {
    let list = []
    let start = (pageNumber - 1) * 4
    let end = start + 4 > data.length ? data.length : (start + 4)
    for (let i = start; i < end; i++) {
        list.push(
            <li key={data[i].CID}>
                <NavLink className="mouse examgo" to={`/Exam_wrapper?cid=${data[i].CID}`}>
                    <div className="refschoolname dis-center2">{'1' + data[i].CName.split('1')[1]}</div>
                    <span className="subjectname">{this.subcolor(data[i].sub)}{data[i].sub}</span>
                    <span>{this.gradecolor(data[i].grade)}{data[i].grade}</span>
                </NavLink>
            </li>
        )
    }
    return list
}

## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Exam/exam?type= + <font color='Blue'>selectData.type</font>|<font color='LightSkyBlue'>get</font>|藉由學校資料獲取每份考卷的詳細資料，包含：CID、CName、grade、ref、sub、type|get_api()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `Close_select` | <font color='Green'>function</font> | 關閉選擇考卷模式|
### 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沒做功能，只有 Html + Css
- 

<div className="dis-flex-row watch-search">
    <div className="inline-block mouse"
        style={{ "marginRight": "10px" }}
        onClick={Close_select}
        onMouseOver={this.hoverClick}
        onMouseOut={this.hoverClick}
    >
        {hoverBack ? <img src={back2} alt="" width="32px" /> : <img src={back} alt="" width="32px" />}
    </div>
    <input type="search" placeholder="Find a Exam...." aria-label="Find a Exam...." className="search-input width-full"></input>
    <button name="button" type="button" className="btn2" style={{ "margin": "0px 8px" }}>科目&ensp;<span className="dropdown-caret"></span></button>
    <button name="button" type="button" className="btn2" style={{ "margin": "0px 8px" }}>年級&ensp;<span className="dropdown-caret"></span></button>
</div>

- 建立每項考卷的點選 Navlink，完整介紹看上方
- 此處會跳轉到 ➡️ [ExamWrapper.jsx](https://hackmd.io/JqzV6luhSsCA3CPCxtt_sg?view)
- ~~改map~~
- 

<ol className="gradient-list">
    {this.produceList(data, pageNumber)}
</ol>

- 頁數功能
- 

<div className="dis-center pagination-containter">
    <ul className="pagination">
        <li className="mouse"><div onClick={(e) => this.backPageNumber(pageNumber, 1)} >«</div></li>
        {this.pagination(TotalPageNumber, pageNumber)}
        <li className="mouse"><div onClick={(e) => this.nextPageNumber(pageNumber, TotalPageNumber)}>»</div></li>
    </ul>
</div>

[回上層 Exam.jsx](https://hackmd.io/0K39dZY9Rbq7xwPFKNzDUw?view)