# 客製活動外包文件

目的: 方便之後對台灣外包的 code review & refactor，之後如果有特殊的客製活動會針對不同的商業邏輯或是 components 去 review，有 bug 時才不會浪費太多時間在找 code，新人也比較快上手

## Folder Structure
資料夾結構，大概描述一下功能用途，平常會傳入的 props，需要注意的點，

### share
> 共用的一些方法
- 17app `17app.ts` track使用的文件
- 17appTrack `17appTrack.ts` track使用的文件
- 17liveMessageTunnel `17liveMessageTunnel.tsx` track使用的文件
- utils `utils.ts` 一些經常使用的公共方法
- convertConditionFilter：condition filter 函數（在conditionMatch中使用）
- conditionMatch：根據傳入值的條件返回相應的數據。榜單中不同排名需要顯示不同的UI時使用
- numberFormat：格式化分數（10000 => 10,000）
- numberFormatWithDigits: 格式化帶有小數分數（10000.5 => 10,000.5）
- - value: 要格式話的分數值
- - minimumFractionDigits：幾位小數
- copyDataToClipboard：活動結束時，點擊copy button導出數據使用的方法
#### services
- axios `axios.ts`
- getInstance: 調用mkt api和eventory api的 instance
- getInstanceCache: 調用cache api的 instance
- getInstanceVote: 調用vote api的instance
- leaderboard service `leaderboard.service.ts`
- getLeaderboard: 獲得mkt和eventory表單數據的service
- leaderboardCache service `leaderboardCache.service.ts`
- getLeaderboardCache: 獲得cache表單數據的service
- leaderboardEventory service `leaderboardEventory.service.ts`
- getLeaderboardEventory: 獲得eventory表單數據的service
- leaderboardVote service `leaderboardVote.service.ts`
- getLeaderboardVote: 獲得vote數據的service
- translation service `translation.service.ts`
- getTranslation: 當活動需要多種語言時，並且希望企劃能夠即時在tool上更新，使用這個service活動多語言的數據

### UI
- CopyButton `CopyButton.tsx`
- data: 需要copy的數據
- condition：用來處理數據的一些特殊的條件
- Countdown `Countdown.tsx` 日期時間函數
- theme：主題
- startDate：開始時間
- endDate：結束時間
- className：自定義時的類名
- isSameDay：是否是同一天的日期
- dateFormat：日期時間格式
- formatStr：剩餘時間的格式
- CoverVideo `CoverVideo.tsx` 主視覺組件
- src：視頻路勁
- iframe：iframe路徑
- img：圖片路徑
- EventPage `EventPage.tsx` 活動的主頁面組件
- children：組件內容
- GlobalStyles `GlobalStyles.tsx` 全局的樣式
- Loading `Loading.tsx`
- color：顏色
- Tab `Tab.tsx` Tab item 組件
- Tabs `Tabs.tsx` Tabs 組件
- children：內容
- active：激活Tab的key
- itemEndRow: 標記在最後一組的index
- className：DivWrapTab 自定義類名
- showTab：是否顯示tab
- VirtualizedList `VirtualizedList.tsx` 列表組件
- dataset：數據
- children：item內容
- itemHeight：單個item的高度
- updateOnID：用於展開Panel查看詳情，一般為useId
- panelSize：panel的高度，如果沒有updateOnID則不生效

#### hooks
- TabsRefContext `TabsRefContext.ts` Tab 全局 context
- useCountDown `useCountDown.ts` 時間倒數hook
- endTime：結束時間
- useDeepLink `useDeepLink.ts` 在app打開主播頁面的hook
- userID：用戶ID
- openID：用戶openID
- streamID：streamID
- useFilter `useFilter.ts` 榜單search hook
- useQueryString `useQueryString.ts` 如果url裡面有streamerUserID，自動滾動到這個主播
- useScore `useScore.ts` 積分hook
- useStartRender `useStartRender.ts` 解決第一次後端渲染問題
- useTabLocked `useTabLocked.ts` 一般用來判斷當前時間是否到了lockDate
- lockDate：需要判斷的時間

### components
> 共用 components，針對各種 leaderboard 做抽象或是一些被複用的 components
- leaderboard
- Leaderboard `LeaderboardItem.tsx`
- item：榜單信息
- condition：condition配置信息
- showPanel：是否顯示BonusPanel
- BonusPanel `BonusPanel.tsx`
- meta：Bonus數據
- LeaderboardGeneral `LeaderboardGeneral.tsx`
- itemHeight：item高度，向VirtualizedList傳遞
- panelSize：panel高度，向VirtualizedList傳遞
- leaderboardData：榜單數據及榜單search的hooks
- condition：condition配置信息
- render：渲染item
- MissionPanel `MissionPanel.tsx` 可選的，配置condition.missions開啟
- condition：condition配置信息
- teamApi：需要請求API的containerID，如果為空則取condition中的containerID
- EventIntro `EventIntro.tsx` 主要用來顯示每個榜單的攻略
- title：標題
- content：內容
- iframe：如果使用工具來管理，使用iframe嵌入
- only: 如果只是iframe，用這個字段來判斷
- LeaderboardContainer `LeaderboardContainer.tsx` 榜單的主要contaienr
- apis: 榜單需要調用的所有apis
- sortFunc：對數據進行二次的整理的函數
- realTime：否是是即時數據 0：不是 1000：每秒更新一次
- hashCheck：是否需要hash檢測props是否有改變來判斷是否re-render
- iframe：iframe url
- condition：榜單需要的conditions
- initialData：初始化數據

- RankTitle `RankTitle.tsx` 榜單標題組件
- title: 標題

#### Tabs
- styled `styled.tsx` 所有的樣式用styled-components，都在這裡
- Tabs 每一個榜單都是一個Tab，都會有單獨的文件.
- 命名：以Tabs開頭，以tab的層做後綴。例如第一層第一個就是Tabs00；第二層第二個就是Tabs11

- Tabs00 `Tabs00.tsx`
- tabs00Items
- tabKey: Tab key
- title：Tab 標題組件
- tabText：用來track的tab的文字
- tabs：子Tabs
- countdown：倒計時組件
- leaderboard：榜單組件

### constants
> tab, api, translation keys, style, conditions 等設定
- apis `api.ts` 定義api
- conditions `conditions.tsx` 定義conditions
- config `config.ts` 定義常量
- 定義每個Tab的開始結束時間
- 定義說明頁面使用的鏈接