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

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| NavLink | <font color='RosyBrown'>external component</font> | Route | react-router-dom |
| CalendarHeatmap | <font color='RosyBrown'>external component</font> | Route | react-calendar-heatmap |
| ReactTooltip | <font color='RosyBrown'>external component</font> | Calendar Hover tool | react-tooltip |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |
| ReactLoading | <font color='RosyBrown'>external component</font> | loading 畫面 | react-loading |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `data` | <font color='Gold'>json value</font> | API 獲取的學系歷程所有時間| `[]`|
| `showlist` | <font color='Gold'>json value</font> | 當天 *(有顏色的 github 磚)* 學習過的影片| `[]` |
| `isLoaded` | <font color='blue'>bool</font> | API loading，true 為 loading 完成，false 為正在 loading | `false` |
| `now` | <font color='Gold'>json value</font> | 今天相關 json 資料| 如下 |
### state.now 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `now.day` | <font color='orange'>string</font> | 日期 | `String(new Date().getDate()).padStart(2, '0')` |
| `now.month` | <font color='orange'>string</font> | 月份 | `String(new Date().getMonth() + 1).padStart(2, '0')` |
| `now.today` | <font color='SlateGrey'>date value</font> | 今天的西元年 月 日 (台北標準時間)| `new Date()` |
| `now.year` | <font color='Salmon'>int</font> | 今年 (西元) | `new Date().getFullYear()` |

## componentDidMount
- 執行 histroy()，並將 isLoaded = true
## componentDidUpdate
- 當 prevState == this.state 時，執行 histroy()，並將 isLoaded = true
## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|histroy()|Call Member/Learnhistory，以及作 json 分類處理|是|
|getlist()|點擊 github 磚時的 event function|是|
|CalendarHeatmapdata()|將 state.data 轉換成 CalendarHeatmap component 需要的格式|是|
### CalendarHeatmapdata() 介紹
- CalendarHeatmap 需要的格式為 {日期, 次數}
- 第一層 for 把時間格式處裡完成，時間為往前推算一年日期，ex: 2022/9/1 就算到 2021/8/31 -> 2022/9/1

for (var k = 1; k <= 13; k++) {
    if (m > 12) {
        m = 1
        flag = 1
    }
    let y = flag ? year : year - 1
    let days = new Date(y, m, 0).getDate()
    if (y == year && m == today.getMonth() + 1)
        days = today.getDate()
    for (var j = 1; j <= days; j++) {
        let t_count = 0
        let t_date = y + "-" + m.toString(10).padStart(2, '0') + "-" + j.toString(10).padStart(2, '0')
        finaldate.push({ date: t_date, count: t_count })
    }
    m += 1
}

- 第二層 for 計算日期次數 (那天看了多少個影片)

for (var k = 0; k < finaldate.length; k++) {
    for (var x = 0; x < data.length; x++) {
        if (finaldate[k].date == data[x].date)
            finaldate[k].count += 1;
    }
}

### getlist() 介紹
- 點擊的日期為 function 參數，並與 state.data 對照，相同時，即為當日看的影片
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|Member/Learnhistory|<font color='LightSkyBlue'>get</font>|所有觀看紀錄，包含影片名稱、時間、OID(VID)|histroy()|
## render
### 額外參數
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `t_date` | <font color='SlateGrey'>date value</font> | CalendarHeatmap 符合的資料格式，this.CalendarHeatmapdata 回傳|
### return
- isloaded 是 false，會顯示 ReactLoading 的轉圈圈畫面

<ReactLoading
    type={"spinningBubbles"}
    color="#1abc81"
    height={150}
    width={150}
/>

- CalendarHeatmap 的參數有 7 個
- startDate (開始日期)
- endDate (結束日期)
- values (所有天數的參數)
- classForValue (顏色區別 css class)
- tooltipDataAttrs (hover 顯示文字)
- showWeekdayLabels (要不要標示一周)
- onClick (點擊時，event function)

<div className="mt_24 Box-userinfo">
    <div className="dis-center">過去一年的學習紀錄</div>
    <CalendarHeatmap
        startDate={now.year - 1 + '-' + now.month + '-' + now.day}
        endDate={now.year + '-' + now.month + '-' + now.day}
        values={t_date}
        classForValue={value => {
            if (!value) {
                return 'color-empty';
            }
            return `color-github-${value.count}`;
        }}
        tooltipDataAttrs={value => {
            if (value.date)
                return {
                    'data-tip': `${value.date} 有觀看 ${value.count} 部影片`
                };
        }}
        showWeekdayLabels={true}
        onClick={value => this.getlist(value.date)}
    />
    <ReactTooltip />
    <div className="dis-center">觀看紀錄</div>
    <div className="myCalendarHeatmap">
        {showlist.length ? showlist : <div className="dis-center">請選擇格子以檢視紀錄...</div>}
    </div>
</div>

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