godmmt commented 6 months ago

Todo :

[x] meeting 討論 : 記錄

新增 issue :

[x] #985
[x] #1020
[x] #1021
[x] #1032

問題敘述 :

分頁按鈕按下去後，假設選到第二頁

這時候如果點選下拉式選單做 filter 不會自動回到第一頁不管資料有幾頁都停在第二頁頭上的網址 URL 沒有跟著更新為 page=1

https://github.com/CAFECA-IO/BAIFA/assets/105651918/fe7e164d-32a7-4910-9403-74ba2cdf6f6c

http://localhost:3000/en/app/chains/8017/address/0x4507de0220ac5aaba6502acaadfaf8eade04a7900188de50e75bd7e894d69596/red-flag?page=1

godmmt commented 6 months ago

目前我的頁面有加這個條件

例如 src/pages/app/currencies/[currencyId]/red-flag.tsx :

// Info: (20240307 - Liz) 當日期、搜尋、篩選、排序的條件改變時，將 activePage 設為 1。
useEffect(() => {
  setActivePage(1);
}, [search, filteredType, period, sorting]);

當日期、搜尋、篩選、排序的條件改變時會自動跳轉回第一頁

但是 URL 不會跟著改變，網址依然會在剛才原本的頁數。這部分似乎需要做調整？

https://github.com/CAFECA-IO/BAIFA/assets/105651918/ef7b266c-b520-48de-88f7-1f73ea509ff4

godmmt commented 6 months ago

2024-03-27 meeting 記錄

1. 分頁問題

修改為: 當日期、搜尋、篩選、排序的條件改變時，分頁自動跳轉回第一頁，並且網址列也跟著一起更新為 page=1

2. 從網址列直接輸入非第一頁的網址會出現神秘抖動的原因

像是這樣的網址:

http://localhost:3000/en/app/currencies/0x0000000000000000000000000000000000000000/red-flag?page=2

3. offset

調整為與 Shirley 一致，新增 API query 參數 offset，控制每次拿取資料的數量 (P.S.現在的預設值是 10)

Liz 會調整 Julian & Liz 的頁面 (#985)

godmmt commented 6 months ago

待解決 → solved ✅ 解決方式見下方

  const router = useRouter();
  const {page} = router.query;
  const [activePage, setActivePage] = useState<number>(page ? +page : DEFAULT_PAGE);

  // Info: (20240307 - Liz) 當日期、搜尋、篩選、排序的條件改變時，將 activePage 設為 1。
  useEffect(() => {
    setActivePage(1);

  }, [search, filteredType, period, sorting]);

這裡一開始 activePage 是預設有拿到網址列的 2 但又被 useEffect 更新了

第一次 render 就會被更新跟 search, filteredType, period, sorting 改變才更新的預期有差異。

https://github.com/CAFECA-IO/BAIFA/assets/105651918/a71daa7c-75ac-4948-b0cc-948376ec2575

godmmt commented 6 months ago

解決方式 → ❌ 錯誤！！！

// Info: (20240307 - Liz) 當日期、搜尋、篩選、排序的條件改變時，將 activePage 設為 1。
useEffect(() => {
  if (
    search !== '' ||
    filteredType !== defaultOption ||
    sorting !== sortOldAndNewOptions[0] ||
    (period.startTimeStamp !== default30DayPeriod.startTimeStamp &&
      period.endTimeStamp !== default30DayPeriod.endTimeStamp)
  )
    setActivePage(1);
}, [search, filteredType, sorting, period.startTimeStamp, period.endTimeStamp]);

加上限制後，如果狀態維持在預設值的話，就不會觸發渲染。

這裡注意 period 是一個物件，要比較其值，而不是其引用。

https://github.com/CAFECA-IO/BAIFA/assets/105651918/94e24e21-819a-43cc-971f-aa1170a831cf

新作法

每一次 setPeriod 的同時 setActivePage 每一次 setSorting 的同時 setActivePage 以此類推

godmmt commented 6 months ago

took 1 planning
took 1 meeting & record
took 2 hours to fix mysterious shaking fix mysterious shaking of pagination in red flag of currency page

~remain 4 hours~

Todo : （已另外開單就不在這裡處理了）

1. 分頁問題
修改為:當日期、搜尋、篩選、排序的條件改變時，分頁自動跳轉回第一頁，網址列也跟著一起更新為 page=1
先寫解決方法 (red flag of currency page)
再另外把其他頁面一併開單

total : 4 hours

This issue is done.

godmmt commented 6 months ago

新作法

每一次 setPeriod 的同時 setActivePage 每一次 setSorting 的同時 setActivePage 以此類推

godmmt commented 6 months ago

會修改到的元件有

1. DatePicker

<DatePicker period={period} setFilteredPeriod={setPeriod} />

2. SortingMenu

<SortingMenu
  sortingOptions={sortOldAndNewOptions}
  sorting={sorting}
  setSorting={setSorting}
  bgColor="bg-darkPurple"
/>

<SortingMenu
  sortingOptions={typeOptions}
  sorting={filteredType}
  setSorting={setFilteredType}
  bgColor="bg-darkPurple"
/>

3. SearchBar

<SearchBar
  searchBarPlaceholder={t('COMMON.TOP_100_HOLDER_PLACEHOLDER')}
  setSearch={setSearch}
/>

godmmt commented 6 months ago

修改版本

1. DatePicker

<DatePicker
  period={period}
  setFilteredPeriod={setPeriod}
  setActivePage={setActivePage}
/>

2. SortingMenu

<SortingMenu
  sortingOptions={sortOldAndNewOptions}
  sorting={sorting}
  setSorting={setSorting}
  bgColor="bg-darkPurple"
  setActivePage={setActivePage}
/>

3. SearchBar

<SearchBar
  searchBarPlaceholder={t('COMMON.TOP_100_HOLDER_PLACEHOLDER')}
  setSearch={setSearch}
  setActivePage={setActivePage}
/>

<div className="flex lg:w-7/10">
  {SearchBarWithKeyDown({
    searchBarPlaceholder: t('CURRENCIES_PAGE.SEARCH_PLACEHOLDER'),
    setSearch: setSearch,
    setActivePage: setActivePage,
  })}
</div>

godmmt commented 6 months ago

被影響元件

[x] 1. /Users/liz/Desktop/BAIFA/src/components/all_currencies_page_body/all_currencies_page_body.tsx
[x] 2. /Users/liz/Desktop/BAIFA/src/components/top_100_holder_section/top_100_holder_section.tsx
[x] 3. /Users/liz/Desktop/BAIFA/src/pages/app/blacklist.tsx
[x] 4. /Users/liz/Desktop/BAIFA/src/pages/app/currencies/[currencyId]/index.tsx
[x] 5. /Users/liz/Desktop/BAIFA/src/pages/app/currencies/[currencyId]/red-flag.tsx
[ ] 6. /Users/liz/Desktop/BAIFA/src/pages/app/red-flag/[redFlagId].tsx
[ ] 7. /Users/liz/Desktop/BAIFA/src/pages/app/red-flag/index.tsx

godmmt commented 6 months ago

1. /src/components/all_currencies_page_body/all_currencies_page_body.tsx

Before:

  // Info: (20240308 - Liz) 當搜尋、篩選、排序的條件改變時，將 activePage 設為 1。
  // useEffect(() => {
  //   setActivePage(1);
  // }, [search, filteredType, sorting]);

After:

<div className="flex lg:w-7/10">
  {SearchBarWithKeyDown({
    searchBarPlaceholder: t('CURRENCIES_PAGE.SEARCH_PLACEHOLDER'),
    setSearch: setSearch,
    setActivePage: setActivePage,
  })}
</div>

<SortingMenu
  sortingOptions={typeOptions}
  sorting={filteredType}
  setSorting={setFilteredType}
  bgColor="bg-darkPurple"
  setActivePage={setActivePage}
/>

<SortingMenu
  sortingOptions={sortingOptions}
  sorting={sorting}
  setSorting={setSorting}
  bgColor="bg-darkPurple"
  setActivePage={setActivePage}
/>

godmmt commented 6 months ago

2. /src/components/top_100_holder_section/top_100_holder_section.tsx

// Deprecated: (今天丟棄 - Liz)
// Info: (20240314 - Liz) 當搜尋條件改變時，將 activePage 設為 1
// useEffect(() => {
//   setActivePage(1);
// }, [search]);

<SearchBar
  searchBarPlaceholder={t('COMMON.TOP_100_HOLDER_PLACEHOLDER')}
  setSearch={setSearch}
  setActivePage={setActivePage}
/>

godmmt commented 6 months ago

3. /src/pages/app/blacklist.tsx

// Deprecated: (今天丟棄 - Liz)
// Info: (20240305 - Liz) 當搜尋或篩選的條件改變時，將 activePage 設為 1。雖然搜尋、篩選、排序都是重新打 API 拿新資料，但是搜尋、篩選的條件改變可能導致資料筆數改變，而 sorting 只是就該頁面的 10 筆資料做排序，所以不需要重設 activePage。
// useEffect(() => {
//   setActivePage(1);
// }, [search, filteredTagName]);

<SearchBar
  searchBarPlaceholder={t('BLACKLIST_PAGE.SEARCH_PLACEHOLDER')}
  setSearch={setSearch}
  setActivePage={setActivePage}
/>

<SortingMenu
  sortingOptions={tagNameOptions}
  sorting={filteredTagName}
  setSorting={setFilteredTagName}
  bgColor="bg-darkPurple"
  setActivePage={setActivePage}
/>

最新、最舊的排序不是用資料庫的資料做排序，只是以當頁畫面上的資料做排序而已，所以不需要回到預設頁(第一頁)

<SortingMenu
  sortingOptions={sortOldAndNewOptions}
  sorting={sorting}
  setSorting={setSorting}
  bgColor="bg-darkPurple"
  // setActivePage={setActivePage}
/>

godmmt commented 6 months ago

4. /src/pages/app/currencies/[currencyId]/index.tsx

  // Deprecated: (今天丟棄 - Liz)
  // // Info: (20240307 - Liz) 當日期、搜尋、排序的條件改變時，將 activePage 設為 1。
  // useEffect(() => {
  //   setActivePage(1);
  // }, [search, period, sorting]);

這一頁是處理元件 TransactionHistorySection

// Info: 需要 suggestions 的話，顯示 SearchBarWithSuggestions，否則顯示 SearchBarWithKeyDown (20240314 - Shirley)
const displayedSearchBar =
  !!suggestions && !!getSearch
    ? SearchBarWithSuggestions({
        searchBarPlaceholder: t('COMMON.TRANSACTION_HISTORY_PLACEHOLDER'),
        setSearch: setSearch ?? setSearchDefault,
        suggestions: suggestions,
        getSearch: getSearch,
        setActivePage: setActivePage ?? setActivePageDefault,
      })
    : SearchBarWithKeyDown({
        searchBarPlaceholder: t('COMMON.TRANSACTION_HISTORY_PLACEHOLDER'),
        setSearch: setSearch ?? setSearchDefault,
        setActivePage: setActivePage ?? setActivePageDefault,
      });

<DatePicker
  period={period ?? periodDefault}
  setFilteredPeriod={setPeriod ?? setPeriodDefault}
  isLinearBg
  setActivePage={setActivePage ?? setActivePageDefault}
/>
<SortingMenu
  sortingOptions={sortOldAndNewOptions}
  sorting={sorting ?? sortingDefault}
  setSorting={setSorting ?? setSortingDefault}
  bgColor="bg-purpleLinear"
  sortPrefix={`transaction`}
  setActivePage={setActivePage ?? setActivePageDefault}
/>

godmmt commented 6 months ago

5. /src/pages/app/currencies/[currencyId]/red-flag.tsx

  // Info: (20240327 - Liz) 當日期、搜尋、篩選、排序的條件改變時，將 activePage 設為 1。
  // useEffect(() => {
  //   setActivePage(1);
  // }, [search, filteredType, sorting, period.startTimeStamp, period.endTimeStamp]);

修改元件 RedFlagList

godmmt commented 6 months ago

took 1 hour planning

done

CAFECA-IO / BAIFA

[BUG | 討論] pagination #980

Todo :

新增 issue :

問題敘述 :

2024-03-27 meeting 記錄

1. 分頁問題

2. 從網址列直接輸入非第一頁的網址會出現神秘抖動的原因

3. offset

待解決 → solved ✅ 解決方式見下方

解決方式 → ❌ 錯誤！！！

新作法

新作法

1. DatePicker

2. SortingMenu

3. SearchBar

修改版本

1. DatePicker

2. SortingMenu

3. SearchBar

1. /src/components/all_currencies_page_body/all_currencies_page_body.tsx

2. /src/components/top_100_holder_section/top_100_holder_section.tsx

3. /src/pages/app/blacklist.tsx

4. /src/pages/app/currencies/[currencyId]/index.tsx

5. /src/pages/app/currencies/[currencyId]/red-flag.tsx