refactor(page): 合并本地与远程球员收藏列表逻辑并简化组件
- 将本地列表 (localList) 和请求数据 (favListRequest.data) 的映射逻辑统一至主 list useMemo 中。 - 移除冗余的 showList useMemo,直接基于 showType 动态生成 list。 - 修正 sortType 默认分支显式返回 localList,确保排序逻辑一致性。 - 更新依赖数组并清理未使用的 isAuthenticated 相关逻辑。 - 调整空状态判断条件以匹配新的 list 结构。
This commit is contained in:
parent
9499de0180
commit
d171e496ff
@ -1,5 +1,5 @@
|
||||
import { Avatar, Button, Card, Divider, Flex, Image, Popconfirm, Radio, Segmented, Spin, Typography } from "antd";
|
||||
import { useFavPlayerStore } from "../store/useFavPlayerStore";
|
||||
import { useFavPlayerStore, type FavPlayer } from "../store/useFavPlayerStore";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useLogto } from "@logto/react";
|
||||
@ -20,22 +20,28 @@ enum ShowType {
|
||||
export function FavePlayersPage() {
|
||||
const { favMap, unFav } = useFavPlayerStore(state => state);
|
||||
const [sortType, setSortType] = useState<SortType>(SortType.DEFAULT);
|
||||
const list = useMemo(() => {
|
||||
const l = Object.values(favMap);
|
||||
switch (sortType) {
|
||||
case SortType.DEFAULT: return l;
|
||||
case SortType.SCORE_UP: return l.sort(({ score: a }, { score: b }) => +a - +b);
|
||||
case SortType.SCORE_DOWN: return l.sort(({ score: b }, { score: a }) => +a - +b);
|
||||
default: return l;
|
||||
}
|
||||
}, [favMap, sortType]);
|
||||
const navigate = useNavigate();
|
||||
const { isAuthenticated, getIdTokenClaims } = useLogto();
|
||||
const [showType, setShowType] = useState(ShowType.LOCAL);
|
||||
const localList = Object.values(favMap);
|
||||
const favListRequest = useRequest<XCXProfile[], [string]>(async (aud: string) => {
|
||||
const res = await fetch(`/api/fav/${aud}`);
|
||||
const data = await res.json();
|
||||
return data;
|
||||
}, { manual: true });
|
||||
const list = useMemo(() => {
|
||||
const l = showType === ShowType.LOCAL ? localList : favListRequest.data?.map(e => ({
|
||||
...e,
|
||||
name: e.username,
|
||||
avatar: e.realpic,
|
||||
})) || [];
|
||||
switch (sortType) {
|
||||
case SortType.DEFAULT: return l;
|
||||
case SortType.SCORE_UP: return l.sort(({ score: a }, { score: b }) => +a - +b);
|
||||
case SortType.SCORE_DOWN: return l.sort(({ score: b }, { score: a }) => +a - +b);
|
||||
default: return localList;
|
||||
}
|
||||
}, [favMap, sortType, showType, localList, favListRequest]);
|
||||
const navigate = useNavigate();
|
||||
const { isAuthenticated, getIdTokenClaims } = useLogto();
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated) return;
|
||||
const id = setTimeout(async () => {
|
||||
@ -54,24 +60,12 @@ export function FavePlayersPage() {
|
||||
await Promise.all(jobs);
|
||||
await favListRequest.runAsync(aud!);
|
||||
}, [isAuthenticated, list]);
|
||||
const [showType, setShowType] = useState(ShowType.LOCAL);
|
||||
const handleClearLocal = useCallback(() => {
|
||||
list.forEach(e => unFav(e.uid));
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
setShowType(isAuthenticated ? ShowType.ACCOUNT : ShowType.LOCAL);
|
||||
}, [isAuthenticated]);
|
||||
const showList = useMemo(() => {
|
||||
if (showType === ShowType.LOCAL) {
|
||||
return list;
|
||||
}
|
||||
if (!isAuthenticated) return [];
|
||||
return favListRequest.data?.map(e => ({
|
||||
...e,
|
||||
name: e.username,
|
||||
avatar: e.realpic,
|
||||
})) ?? [];
|
||||
}, [showType, isAuthenticated, list, favListRequest.data]);
|
||||
return (
|
||||
<div className="app">
|
||||
<Flex vertical gap={48}>
|
||||
@ -99,14 +93,14 @@ export function FavePlayersPage() {
|
||||
/>
|
||||
</div>
|
||||
<Spin spinning={favListRequest.loading}>
|
||||
{!favListRequest.loading && showList.length === 0 ? (
|
||||
{!favListRequest.loading && list.length === 0 ? (
|
||||
<>
|
||||
<Divider>暂无收藏的球员</Divider>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Flex wrap gap={16} align="center" justify="center">
|
||||
{showList.map(e => (
|
||||
{list.map(e => (
|
||||
<Card
|
||||
hoverable
|
||||
size="small"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user