diff --git a/src/lang/en_us.json b/src/lang/en_us.json index b4df637..b6ac0b4 100644 --- a/src/lang/en_us.json +++ b/src/lang/en_us.json @@ -20,7 +20,7 @@ "list_rename": "Rename", "list_rename_title": "Rename List", - "list_sync": "Sync list", + "list_sync": "Update", "change_position": "Change Position", "change_position_tip": "Please enter a new position", "change_position_list_title": "Change the position of the list", diff --git a/src/lang/zh_cn.json b/src/lang/zh_cn.json index 6c17b43..2e25ad9 100644 --- a/src/lang/zh_cn.json +++ b/src/lang/zh_cn.json @@ -20,7 +20,7 @@ "list_rename": "重命名", "list_rename_title": "重命名列表", - "list_sync": "同步列表", + "list_sync": "更新", "change_position": "调整位置", "change_position_tip": "请输入新的位置", "change_position_list_title": "调整列表位置", diff --git a/src/screens/Home/List/components/MyList.js b/src/screens/Home/List/components/MyList.js index 67ad1a7..2655b91 100644 --- a/src/screens/Home/List/components/MyList.js +++ b/src/screens/Home/List/components/MyList.js @@ -12,21 +12,22 @@ import ConfirmAlert from '@/components/common/ConfirmAlert' import Input from '@/components/common/Input' import { getListScrollPosition, saveListScrollPosition } from '@/utils/tools' import { LIST_SCROLL_POSITION_KEY } from '@/config/constant' +import musicSdk from '@/utils/music' -const ListItem = ({ onPress, name, id, showMenu, activeId }) => { +const ListItem = ({ onPress, name, id, showMenu, activeId, loading, index }) => { const theme = useGetter('common', 'theme') const moreButtonRef = useRef() const handleShowMenu = useCallback(() => { if (moreButtonRef.current && moreButtonRef.current.measure) { moreButtonRef.current.measure((fx, fy, width, height, px, py) => { // console.log(fx, fy, width, height, px, py) - showMenu(id, name, { x: Math.ceil(px), y: Math.ceil(py), w: Math.ceil(width), h: Math.ceil(height) }) + showMenu(id, name, index, { x: Math.ceil(px), y: Math.ceil(py), w: Math.ceil(width), h: Math.ceil(height) }) }) } - }, [showMenu, id, name]) + }, [showMenu, id, name, index]) return ( - + {name} @@ -37,7 +38,7 @@ const ListItem = ({ onPress, name, id, showMenu, activeId }) => { ) } -const List = memo(({ setVisiblePanel, currentList, activeListIdRef }) => { +const List = memo(({ setVisiblePanel, currentList, activeListIdRef, handleCancelMultiSelect }) => { const theme = useGetter('common', 'theme') const defaultList = useGetter('list', 'defaultList') const loveList = useGetter('list', 'loveList') @@ -49,12 +50,17 @@ const List = memo(({ setVisiblePanel, currentList, activeListIdRef }) => { const removeUserList = useDispatch('list', 'removeUserList') const [visibleMenu, setVisibleMenu] = useState(false) // const activeListId = useGetter('common', 'prevSelectListId') + const [selectedListIndex, setSelectedListIndex] = useState(-1) const selectedListRef = useRef({}) const { t } = useTranslation() const [buttonPosition, setButtonPosition] = useState({ w: 0, h: 0, x: 0, y: 0 }) const [visibleRename, setVisibleRename] = useState(false) const [listNameText, setListNameText] = useState('') const scrollViewRef = useRef() + const setList = useDispatch('list', 'setList') + const getBoardListAll = useDispatch('top', 'getListAll') + const getListDetailAll = useDispatch('songList', 'getListDetailAll') + const [fetchingListStatus, setFetchingListStatus] = useState({}) useEffect(() => { userListRef.current = userList @@ -70,29 +76,46 @@ const List = memo(({ setVisiblePanel, currentList, activeListIdRef }) => { removeUserList(id) }, [activeListIdRef, userList, removeUserList, setPrevSelectListId]) - const showMenu = useCallback((id, name, position) => { - // console.log(position) - if (id == 'default' || id == 'love') return - setButtonPosition({ ...position }) - selectedListRef.current.id = id - selectedListRef.current.name = name - setVisibleMenu(true) - }, [setButtonPosition]) + const hideMenu = useCallback(() => { setVisibleMenu(false) }, [setVisibleMenu]) + const fetchList = useCallback((id, source, sourceListId) => { + setFetchingListStatus(fetchingListStatus => ({ ...fetchingListStatus, [id]: true })) + // console.log(sourceListId) + let promise + if (/board__/.test(sourceListId)) { + const id = sourceListId.replace(/board__/, '') + promise = getBoardListAll(id) + } else { + promise = getListDetailAll({ source, id: sourceListId }) + } + return promise.finally(() => { + setFetchingListStatus(fetchingListStatus => ({ ...fetchingListStatus, [id]: false })) + }) + }, [getBoardListAll, getListDetailAll]) + const handleSyncSourceList = useCallback(async index => { + const targetListInfo = userList[index] + const list = await fetchList(targetListInfo.id, targetListInfo.source, targetListInfo.sourceListId) + // console.log(targetListInfo.list.length, list.length) + handleCancelMultiSelect() + setList({ + ...targetListInfo, + list, + }) + }, [fetchList, handleCancelMultiSelect, setList, userList]) const handleMenuPress = useCallback(({ action }) => { switch (action) { case 'rename': setListNameText(selectedListRef.current.name) setVisibleRename(true) break - // case 'sync': + case 'sync': + handleSyncSourceList(selectedListRef.current.index) + break + // case 'changePosition': // break - case 'changePosition': - - break case 'remove': handleRemoveList(selectedListRef.current.id) break @@ -100,16 +123,19 @@ const List = memo(({ setVisiblePanel, currentList, activeListIdRef }) => { default: break } - }, [handleRemoveList]) + }, [handleRemoveList, handleSyncSourceList]) const menus = useMemo(() => { + if (selectedListIndex == -1) return [] + const source = userList[selectedListIndex].source + return [ { action: 'rename', label: t('list_rename') }, - // { action: 'sync', label: t('list_sync') }, + { action: 'sync', label: t('list_sync'), disabled: !source || !musicSdk[source].songList }, // { action: 'changePosition', label: t('change_position') }, { action: 'remove', label: t('list_remove') }, ] - }, [t]) + }, [selectedListIndex, userList, t]) const handleCancelRename = useCallback(() => { setVisibleRename(false) @@ -135,7 +161,16 @@ const List = memo(({ setVisiblePanel, currentList, activeListIdRef }) => { const offset = getListScrollPosition(LIST_SCROLL_POSITION_KEY) scrollViewRef.current.scrollTo({ x: 0, y: offset, animated: false }) }) - + const showMenu = useCallback((id, name, index, position) => { + // console.log(position) + if (id == 'default' || id == 'love') return + setButtonPosition({ ...position }) + selectedListRef.current.id = id + selectedListRef.current.name = name + selectedListRef.current.index = index + setSelectedListIndex(index) + setVisibleMenu(true) + }, []) return ( @@ -150,7 +185,7 @@ const List = memo(({ setVisiblePanel, currentList, activeListIdRef }) => { {loveList.name} - {userList.map(({ id, name }) => handleToggleList({ id, name })} activeId={currentList.id} showMenu={showMenu} />)} + {userList.map(({ id, name }, index) => handleToggleList({ id, name })} activeId={currentList.id} showMenu={showMenu} />)} @@ -174,7 +209,7 @@ const List = memo(({ setVisiblePanel, currentList, activeListIdRef }) => { }) -export default memo(({ currentList, activeListIdRef }) => { +export default memo(({ currentList, activeListIdRef, handleCancelMultiSelect }) => { const theme = useGetter('common', 'theme') const [visiblePanel, setVisiblePanel] = useState(false) @@ -182,9 +217,12 @@ export default memo(({ currentList, activeListIdRef }) => { } + PanelContent={} > - {currentList.name} + + {currentList.name} + {/* */} + ) }) @@ -224,6 +262,16 @@ const styles = StyleSheet.create({ alignItems: 'center', }, + currentList: { + flexDirection: 'row', + }, + createList: { + width: 38, + justifyContent: 'center', + alignItems: 'center', + // backgroundColor: 'rgba(0,0,0,0.2)', + }, + renameContent: { flexGrow: 1, diff --git a/src/screens/Home/List/index.js b/src/screens/Home/List/index.js index 3bdab0b..0d25c5c 100644 --- a/src/screens/Home/List/index.js +++ b/src/screens/Home/List/index.js @@ -301,7 +301,7 @@ const List = () => { {listComponent} - + { const createUserList = useDispatch('list', 'createUserList') const { t } = useTranslation() const theme = useGetter('common', 'theme') + const songListSource = useGetter('songList', 'songListSource') const handlePlayAll = useCallback(async() => { if (!listDetailData.info.name) return @@ -32,9 +33,9 @@ export default memo(() => { const handleCollection = useCallback(async() => { if (!listDetailData.info.name) return - const list = await getListDetailAll(selectListInfo.id) + const list = await getListDetailAll({ id: selectListInfo.id, source: songListSource }) createUserList({ - name: listDetailData.info.name, + name: listDetailData.info.name || `${listDetailData.source}-list`, id: `${listDetailData.source}__${listDetailData.id}`, list, source: listDetailData.source, @@ -42,7 +43,7 @@ export default memo(() => { isShowToast: true, }) toast(t('collect_success')) - }, [listDetailData, getListDetailAll, selectListInfo.id, createUserList, t]) + }, [listDetailData, getListDetailAll, selectListInfo, songListSource, createUserList, t]) const handleBack = () => setVisibleListDetail(false) diff --git a/src/store/modules/list/action.js b/src/store/modules/list/action.js index 944af53..45f8c53 100644 --- a/src/store/modules/list/action.js +++ b/src/store/modules/list/action.js @@ -176,7 +176,7 @@ export const updateMusicInfo = ({ id, index, data }) => (dispatch, getState) => saveList(global.allList[id]) } -export const createUserList = ({ name, id = `userlist_${Date.now()}`, source, sourceListId, list }) => async(dispatch, getState) => { +export const createUserList = ({ name, id = `userlist_${Date.now()}`, list = [], source, sourceListId }) => async(dispatch, getState) => { dispatch({ type: TYPES.createUserList, payload: { name, id, source, sourceListId }, diff --git a/src/store/modules/songList/action.js b/src/store/modules/songList/action.js index 621c506..198bd54 100644 --- a/src/store/modules/songList/action.js +++ b/src/store/modules/songList/action.js @@ -137,11 +137,9 @@ export const getListDetail = ({ id, page, isRefresh = false }) => (dispatch, get }) } -export const getListDetailAll = id => (dispatch, getState) => { - const allState = getState() - const rootState = allState.common - let source = rootState.setting.songList.source +export const getListDetailAll = ({ source, id }) => (dispatch, getState) => { let listKey = `sdetail__${source}__${id}` + if (!cache.has(listKey)) cache.set(listKey, new Map()) const listCache = cache.get(listKey) const loadData = (id, page) => { let pageKey = `sdetail__${source}__${id}__${page}`