---
tags: N108 Component
---
# Memberinfo.jsx
- Member 切換流程圖 *(原本 component 名稱把 Member 去掉)*
- 可以配合 PPT 14頁

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Profile->{TopBar IMG_Name Content}
                Content->{info LearnHistory WatchHistory NotelistHistory}
                info->{infobtn}
                NotelistHistory->{NoteHistory}
                {rank=same;UploadImg IMG_Name}
                info [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| Timecal | <font color='BlueViolet'>component</font> | 時間顯示 | tool/Time.jsx |
| InfoBtn | <font color='BlueViolet'>component</font> | 每一項基本資料 input form | account/MemberInfoBtn.jsx |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |
| `Userinfo` | <font color='Gold'>json value</font> | 個人資本詳細資料 | `[]` |

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|userinfo()|Call API，且將基本資料存入 state.Userinfo |是|
## componentDidMount
- 執行 userinfo()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state 時，執行 userinfo()，並將 isLoaded = true

## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Account/UserInfo|<font color='LightSkyBlue'>get</font>|獲取個人Email、電話、地址、生日、上次登入、登入錯誤次數、寄信請求|userinfo()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `info` | <font color='Gold'>json value</font> | API 傳入的個人 ID、名稱、SSO來源、Type|
### return
- 因為每一項資料有可能更動，因此每項資料都有可能 Call API，故多寫一個 [Memberinfobtn.jsx]()
- 總共有 4 種 email、phone、address、birthday，且會往下傳入當作判斷何種資料需要更改
- 

<div className="node_category">
    <li>Email：<InfoBtn type={"email"} data={Userinfo.Email} userinfoapi={this.userinfo}></InfoBtn></li>
    <li>電話：<InfoBtn type={"phone"} data={Userinfo.Phone} userinfoapi={this.userinfo}></InfoBtn></li>
    <li>地址：<InfoBtn type={"address"} data={Userinfo.Address} userinfoapi={this.userinfo}></InfoBtn></li>
    <li>生日：<InfoBtn type={"birthday"} data={Userinfo.Birthday == null ? null : Userinfo.Birthday.split('T')[0]} userinfoapi={this.userinfo}></InfoBtn></li>
    <li>上次登入：<Timecal time={Userinfo.LastLoginDT}></Timecal></li>
    <li>登入錯誤次數：{Userinfo.LoginErrCount}</li>
    <li>寄信請求：
        {Userinfo.SendEmailok ?
            <div className="SendEmail inline" style={{ "color": "LimeGreen" }}>許可</div>
            :
            <div className="SendEmail inline" style={{ "color": "red" }}>禁止</div>}
    </li>
</div>

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