Merge pull request #1157 from CAFECA-IO/feature/enhance_my_assets

Feature/enhance my assets

src/components/leaderboard_tab/leaderboard_tab.tsx

@@ -12,15 +12,13 @@ import {numberFormatted, accountTruncate} from '../../lib/common';
 import {RankingInterval, IRankingTimeSpan} from '../../constants/ranking_time_span';
 import {defaultLeaderboard, IRanking} from '../../interfaces/tidebit_defi_background/leaderboard';
 import {useTranslation} from 'next-i18next';
-import {ProfitState} from '../../constants/profit_state';
+import {TranslateFunction} from '../../interfaces/tidebit_defi_background/locale';
 
-type TranslateFunction = (s: string) => string;
-
-type LeaderboardTabProps = {
+interface LeaderboardTabProps {
   timeSpan: IRankingTimeSpan;
   setTimeSpan: Dispatch<SetStateAction<IRankingTimeSpan>>;
   rankings: IRanking[];
-};
+}
 
 const MIN_SCREEN_WIDTH = 1024;
 const DEFAULT_PODIUM_WIDTH = 960;

src/components/receipt_list/receipt_list.tsx

@@ -4,11 +4,11 @@ import {IAcceptedOrder} from '../../interfaces/tidebit_defi_background/accepted_
 import {timestampToString} from '../../lib/common';
 interface IReceiptListProps {
   monthData: string;
-  filteredReceipts: IAcceptedOrder[];
+  sliceReceipts: IAcceptedOrder[];
 }
 
-const ReceiptList = ({monthData, filteredReceipts}: IReceiptListProps) => {
-  const historyList = filteredReceipts.map(history => {
+const ReceiptList = ({monthData, sliceReceipts}: IReceiptListProps) => {
+  const historyList = sliceReceipts.map(history => {
     const monthAndYear = timestampToString(history.createTimestamp).monthAndYear;
 
     if (monthAndYear == monthData) {

src/components/receipt_section/receipt_section.tsx

@@ -6,15 +6,19 @@ import {OrderType} from '../../constants/order_type';
 import {OrderState} from '../../constants/order_state';
 import {IAcceptedOrder} from '../../interfaces/tidebit_defi_background/accepted_order';
 import {timestampToString} from '../../lib/common';
-import {SKELETON_DISPLAY_TIME} from '../../constants/display';
+import {FiChevronDown} from 'react-icons/fi';
+import {SKELETON_DISPLAY_TIME, DEFAULT_RECEIPTS_SHOW_ROW} from '../../constants/display';
 import Skeleton from 'react-loading-skeleton';
 import {
   ICFDOrder,
   IDepositOrder,
   IWithdrawOrder,
 } from '../../interfaces/tidebit_defi_background/order';
+import {useTranslation} from 'react-i18next';
+import {TranslateFunction} from '../../interfaces/tidebit_defi_background/locale';
 
 const ReceiptSection = () => {
+  const {t}: {t: TranslateFunction} = useTranslation('common');
   const userCtx = useContext(UserContext);
 
   const listHistories: IAcceptedOrder[] = userCtx.histories.map(v => {
@@ -33,6 +37,16 @@ const ReceiptSection = () => {
   const [filteredReceipts, setFilteredReceipts] = useState<IAcceptedOrder[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Info: (20230829 - Julian) 用於顯示的 receipts
+  const [sliceReceipts, setSliceReceipts] = useState<IAcceptedOrder[]>([]);
+  // Info: (20230829 - Julian) receipts 顯示行數
+  const [showRow, setShowRow] = useState(DEFAULT_RECEIPTS_SHOW_ROW);
+  // Info: (20230829 - Julian) 是否顯示 See more 按鈕
+  const [isShowMore, setIsShowMore] = useState(true);
+
+  // Info: (20230829 - Julian) 增加顯示行數
+  const seeMoreHandler = () => setShowRow(showRow + DEFAULT_RECEIPTS_SHOW_ROW);
+
   let timer: NodeJS.Timeout;
 
   useEffect(() => {
@@ -67,6 +81,9 @@ const ReceiptSection = () => {
   }, [userCtx.histories]);
 
   useEffect(() => {
+    // Info: (20230829 - Julian) 每次搜尋都重置 showRow
+    setShowRow(DEFAULT_RECEIPTS_SHOW_ROW);
+
     const searchResult = receipts
       .filter(v => {
         /* Info: (20230605 - Julian) Search by trading type
@@ -137,7 +154,22 @@ const ReceiptSection = () => {
     setFilteredReceipts(searchResult);
   }, [filteredTradingType, searches, filteredDate, receipts]);
 
-  const dataMonthList = filteredReceipts
+  useEffect(() => {
+    /* Info: (20230829 - Julian) 如果 showRow 大於等於 filteredReceipts 長度，就顯示全部
+     * 如果不是，就從最後面取出 showRow 個 */
+    const sliceReceipts =
+      showRow >= filteredReceipts.length ? filteredReceipts : filteredReceipts.slice(-showRow, -1);
+    setSliceReceipts(sliceReceipts);
+
+    // Info: (20230829 - Julian) 如果 showRow 已經大於等於 filteredReceipts 長度，就不顯示 See more 按鈕
+    if (showRow >= filteredReceipts.length) {
+      setIsShowMore(false);
+    } else {
+      setIsShowMore(true);
+    }
+  }, [filteredReceipts, showRow]);
+
+  const dataMonthList = sliceReceipts
     /* Info: (20230322 - Julian) sort by desc */
     .sort((a, b) => b.createTimestamp - a.createTimestamp)
     .map(history => {
@@ -179,7 +211,7 @@ const ReceiptSection = () => {
             </div>
           </div>
         ) : (
-          <ReceiptList monthData={v} filteredReceipts={filteredReceipts} />
+          <ReceiptList monthData={v} sliceReceipts={sliceReceipts} />
         )}
       </div>
     );
@@ -213,7 +245,20 @@ const ReceiptSection = () => {
           setFilteredDate={setFilteredDate}
         />
       )}
-      <div>{listCluster}</div>
+
+      <div className="flex flex-col">
+        {listCluster}
+        {/* Info: (20230829 - Julian) See more button */}
+        <button
+          onClick={seeMoreHandler}
+          className={`${
+            isShowMore ? 'flex' : 'hidden'
+          } mb-2 items-center justify-center space-x-2 text-base uppercase text-tidebitTheme`}
+        >
+          <p>{t('MY_ASSETS_PAGE.RECEIPT_SECTION_SEE_MORE')}</p>
+          <FiChevronDown className="text-xl" />
+        </button>
+      </div>
     </div>
   );
 };

src/constants/display.ts

@@ -3,7 +3,6 @@
 // };
 
 import {Badges} from './badges';
-import {Currency} from './currency';
 
 // TODO: for future use, to leverage i18n needs to notice the `provider` range
 export const UNIVERSAL_NUMBER_FORMAT_LOCALE = 'en-US';
@@ -290,3 +289,4 @@ export const NEWS_INTRODUCTION_IN_GENERAL_MAX_LENGTH = 400;
 export const TYPING_KEYUP_DELAY = 5000;
 export const NEWS_AMOUNT_ON_TRADE_PAGE = 3;
 export const DEFAULT_ICON = '/asset_icon/eth.svg';
+export const DEFAULT_RECEIPTS_SHOW_ROW = 10;

src/locales/cn/common.json

@@ -307,7 +307,8 @@
     "RECEIPT_SECTION_ORDER_STATUS_PROCESSING": "处理中",
     "RECEIPT_SECTION_ORDER_STATUS_FAILED": "失败",
     "RECEIPT_SECTION_FEE": "手续费",
-    "RECEIPT_SECTION_AVAILABLE": "可用余额"
+    "RECEIPT_SECTION_AVAILABLE": "可用余额",
+    "RECEIPT_SECTION_SEE_MORE": "查看更多"
   },
   "NOT_FOUND_PAGE": {
     "DESCRIPTION": "糟糕！您要找的页面不存在。"

src/locales/en/common.json

@@ -307,7 +307,8 @@
     "RECEIPT_SECTION_ORDER_STATUS_PROCESSING": "Processing",
     "RECEIPT_SECTION_ORDER_STATUS_FAILED": "Failed",
     "RECEIPT_SECTION_FEE": "Fee",
-    "RECEIPT_SECTION_AVAILABLE": "Available"
+    "RECEIPT_SECTION_AVAILABLE": "Available",
+    "RECEIPT_SECTION_SEE_MORE": "See more"
   },
   "NOT_FOUND_PAGE": {
     "DESCRIPTION": "Oops! Page can not be found."

src/locales/tw/common.json

@@ -307,7 +307,8 @@
     "RECEIPT_SECTION_ORDER_STATUS_PROCESSING": "處理中",
     "RECEIPT_SECTION_ORDER_STATUS_FAILED": "失敗",
     "RECEIPT_SECTION_FEE": "手續費",
-    "RECEIPT_SECTION_AVAILABLE": "可用餘額"
+    "RECEIPT_SECTION_AVAILABLE": "可用餘額",
+    "RECEIPT_SECTION_SEE_MORE": "查看更多"
   },
   "NOT_FOUND_PAGE": {
     "DESCRIPTION": "糟糕！您要找的頁面不存在。"