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

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| Upload | <font color='BlueViolet'>component</font> | 上傳 頭貼的 wrapper | account/UploadImg.jsx |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| pathtoID | <font color='Green'>function</font> | 路徑轉換成圖片 ID |app/lib/pathtoID.js |
| MImg | <font color='BlueViolet'>component</font> | 右側頭貼以及 滑動功能 | account/Member_IMG_Name.jsx|
| Mtopbar | <font color='BlueViolet'>component</font> | 會員資料頁面 Topbar | account/MemberTopBar.jsx |
| Mcontent | <font color='BlueViolet'>component</font> | 會員相關資料，分成profile、history、notehistory| account/MemberContent.jsx |
| Footer | <font color='BlueViolet'>component</font> |來源 & 工具標示|home/Footer.jsx|
| queryString | <font color='Green'>function</font> | query-string 擷取函數 | query-string |
## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `topbarshowIMG` | <font color='blue'>bool</font> | 在 Membertopbar 顯示小頭貼跟個人名稱，true 為顯示中；false 為不顯示 | `false` |
| `uploadwrapper` | <font color='blue'>bool</font> | 開啟大頭貼相關頁面，true 為開啟中；false 為不開啟 | `false` |
## 獨立 function
| 名稱 | 描述 | async 是否 |
|:---------------- |:---- |:---------- |
| uploadIMG() | 上傳圖片(頭貼) | 是 |
| clickwrapper() | uploadwrapper = !this.state.uploadwrapper | 否 |
| showtopbarIMG() | topbarshowIMG = !this.state.topbarshowIMG | 否 |
| closetopbarIMG() | topbarshowIMG = false | 否 |
### uploadIMG() 介紹
- 圖片上傳成功後，利用`pathtoID`獲取 ID，並 call API 轉入資料庫

if (data.body.status == 1) {
    let OID = pathtoID(data.body.path)
    // console.log(OID)
    await api({
        cmd: "Account/graphql",
        method: "post",
        data: { oid: OID }
    })
    // console.log(faceimg.body)
    const { getuserimg } = this.props
    await getuserimg();
}
else {
    alert("上傳失敗！")
}

:::danger
一定要 await 將上層的資料刷新!!!

await getuserimg()

:::
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|File/uploadIMG|<font color='DarkOrange'>post</font>|上傳圖片blob (頭貼)|uploadIMG()|
|Account/graphql|<font color='DarkOrange'>post</font>|將圖片 path 轉成 ID 傳入資料庫|uploadIMG()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `login` | <font color='blue'>bool</font> | 登入參數，true 為登入中；false 為沒登入(訪客) |
| `info` | <font color='Gold'>json value</font> | API 傳入的個人 ID、名稱、SSO來源、Type|
| `getuserimg` | <font color='green'>function</font> | Login function，為了**render APP.jsx**，因此接收 |
| `userimg` | <font color='orange'>string</font> | API 傳入的頭貼路徑 |
### 額外參數
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `mode` | <font color='orange'>string</font> | 會員 3 種功能，由 queryString 抓取|
### return
- 背後灰幕 + 上傳 component ➡️ [UploadImg.jsx](https://hackmd.io/1t-3IQukQjaNd137YIXYLQ?view)

<div className="dis-center2 info_cover">
    {uploadwrapper && <div className="help-map" /*<!--灰幕-->*/ ></div>}
    {uploadwrapper && <Upload clickwrapper={this.clickwrapper} uploadIMG={this.uploadIMG}></Upload>}
</div>

- Mtopbar 為 Member topbar
- ➡️ [MemberTopBar.jsx](https://hackmd.io/LqdPgGsGRZCPESFido05Ow?view)
- <font color='red'>注意！並非 Appbar.jsx</font>
- 
- MImg 為左側個人頭貼以及名稱
- ➡️ [Member_IMG_Name.jsx](https://hackmd.io/L_RQWK2DTwemN3CzWS2TOw?view)
- 
- Mcontent 為個人資料內容
- ➡️ [MemberContent.jsx](https://hackmd.io/VO9RoLZZTSuRFfjFN1uSUQ?view)
- 個人資料內容分成三種
1. 會員資料
2. 觀看紀錄
3. 筆記總覽
- 

<Mtopbar mode={mode} topbarshowIMG={topbarshowIMG} userimg={userimg} info={info}></Mtopbar>
<div className="profile_content">
    <div className="dis-flex-row">
        <MImg topbarshowIMG={topbarshowIMG} showtopbarIMG={this.showtopbarIMG} closetopbarIMG={this.closetopbarIMG} login={login} info={info} userimg={userimg} clickwrapper={this.clickwrapper}></MImg>
        <Mcontent mode={mode} info={info}></Mcontent>
    </div>
</div>

[回上層 pageswitch.jsx](https://hackmd.io/WkWyQZuOQheHmDFcnRCLuw)