---
tags: N108 Component
---
# Containters/App.jsx
### import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| Route, Switch | <font color='RosyBrown'>external component</font> | Route | react-router-dom |
| Login | <font color='BlueViolet'>component</font> | 登入畫面 | account/Login.jsx |
| PageSwitch | <font color='BlueViolet'>component</font> | APP畫面 + topbar | PageSwitch.jsx |
| apiurl | <font color='orange'>string</font> | 獲取 API 網址 | 根目錄下的 config.json |
| IDtopath | <font color='Green'>function</font> | 圖片 ID 轉換成路徑 |app/lib/IDtopath.js |
| api | <font color='Green'>function</font> | API function | app/lib/api.js |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `login` | <font color='blue'>bool</font> | 登入參數，true 為登入中；false 為沒登入(訪客) | `false` |
| `info` | <font color='Gold'>json value</font> | 當登入成功後，info 會存入 API 傳來的個人資訊| `null` |
| `userimg` | <font color='orange'>string</font> | 當登入成功後，info 會存入 API 傳來的頭貼路徑 | `null` |

## componentDidMount
- 檢測是否有登入
- 登入完成後，兩步驟
1. 獲取個人資料
2. Call 頭貼相關 API

## componentDidUpdate
- 同componentDidMount，不介紹

## API 數量表格
| 名稱 | 類型 | 描述 |位於|
|:--|:--|:-----------------------------------------|:--|
|Account/User|<font color='LightSkyBlue'>get</font>|登入完成後，且將 state.login 設定成 true，獲取個人資料|componentDidMount(), componentDidUpdate()|
|Account/userimg|<font color='LightSkyBlue'>get</font>|<font color='red'>注意！登入成功後才呼叫此 API</font> 獲取一般 WKE 登入頭貼路徑，位於 getuserimg()|getuserimg()|
|Account/googleuserimg|<font color='LightSkyBlue'>get</font>|<font color='red'>注意！登入成功後才呼叫此 API</font> 獲取 Google 頭貼路徑，位於 getuserimg()|getuserimg()|
|Account/facebookuserimg|<font color='LightSkyBlue'>get</font>|<font color='red'>注意！登入成功後才呼叫此 API</font> 獲取 FB 頭貼路徑，位於 getuserimg()|getuserimg()|
:::info
特別叮嚀 Google 頭貼預設太小，因此放大 (320px * 320px)

data[0].Picture_URL.split("96")[0] + '320-c'

:::

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|getuserimg()|登入完成後，將 info.sso 傳入此 function 獲取頭貼資料，內有三隻 API (**++userimg++**、**++googleuserimg++**、**++facebookuserimg++**)|是|
:::danger
**++userimg++**、**++googleuserimg++**、**++facebookuserimg++**
三種 API 只會出現一種
:::
## render
### return
- 兩個簡單路徑
- 第一個 是login畫面 ➡️ [Login.jsx](https://hackmd.io/nkRSfV6KTaGaWgpn8Pqgug?view)
- 第二個 主要頁面轉換 ➡️ [Pageswitch.jsx](https://hackmd.io/WkWyQZuOQheHmDFcnRCLuw?view)