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

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| MInfo | <font color='BlueViolet'>component</font> | 會員基本資料 (簡單個資) | account/MemberInfo.jsx |
| MLHistory | <font color='BlueViolet'>component</font> | 會員學習歷程紀錄| account/MemberLearnHistory.jsx |
| MWHistory | <font color='BlueViolet'>component</font> | 會員觀看紀錄 | account/MemberWatchHistory.jsx |
| MNHistory | <font color='BlueViolet'>component</font> | 會員所有筆記資料| account/MemberNotelistHistory.jsx |

## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `info` | <font color='Gold'>json value</font> | API 傳入的個人 ID、名稱、SSO來源、Type|
| `mode` | <font color='orange'>string</font> | Member content 的三種功能，會傳送給上層的 MemberProfile.jsx 的 queryString，三種功能為 profile、history、notehistory |
### return
- 藉由一個 Switch(mode) 去決定顯示哪一個功能
- ==profile==
- 個人基本資料 ➡️ [Memberinfo.jsx](https://hackmd.io/Yt3hHPI0TDqyo13eMJ94Og?view)
- 學習歷程 (採用github 磚塊) ➡️ [MemberLearnHistory.jsx](https://hackmd.io/um97jlhpSi2ngS9GcybS4A?view)
- ==profile==
- 觀看紀錄 ➡️ [MemberWatchHistory.jsx](https://hackmd.io/2Qqt0TwsQdyLCzJR-9JvQQ?view)
- ==profile==
- 筆記總覽 ➡️ [MemberNotelistHistory.jsx](https://hackmd.io/3NAA_ZfCRUKJe59GtFy03w?view)

switch (mode) {
    case "profile":
        return (
            <div className="usercontent">
                <MInfo info={info}></MInfo>
                <MLHistory></MLHistory>
            </div>
        )
    case "history":
        return (
            <div className="usercontent">
                <MWHistory></MWHistory>
            </div>
        )
    case "notehistory":
        return (
            <div className="usercontent">
                <MNHistory></MNHistory>
            </div>
        )
}

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