diff --git a/src/app/molecules/space-add-existing/SpaceAddExisting.jsx b/src/app/molecules/space-add-existing/SpaceAddExisting.jsx index 01de3b1..58604c7 100644 --- a/src/app/molecules/space-add-existing/SpaceAddExisting.jsx +++ b/src/app/molecules/space-add-existing/SpaceAddExisting.jsx @@ -29,6 +29,7 @@ function SpaceAddExistingContent({ roomId }) { const mountStore = useStore(roomId); const [debounce] = useState(new Debounce()); const [process, setProcess] = useState(null); + const [allRoomIds, setAllRoomIds] = useState([]); const [selected, setSelected] = useState([]); const [searchIds, setSearchIds] = useState(null); const mx = initMatrix.matrixClient; @@ -36,11 +37,12 @@ function SpaceAddExistingContent({ roomId }) { spaces, rooms, directs, roomIdToParents, } = initMatrix.roomList; - let allRoomIds = [...spaces, ...rooms, ...directs]; - allRoomIds = allRoomIds.filter((rId) => ( - rId !== roomId - && !roomIdToParents.get(rId)?.has(roomId) - )); + useEffect(() => { + const allIds = [...spaces, ...rooms, ...directs].filter((rId) => ( + rId !== roomId && !roomIdToParents.get(rId)?.has(roomId) + )); + setAllRoomIds(allIds); + }, [roomId]); const toggleSelection = (rId) => { if (process !== null) return; @@ -56,26 +58,6 @@ function SpaceAddExistingContent({ roomId }) { setSelected(newSelected); }; - const handleSearch = (ev) => { - const term = ev.target.value.toLocaleLowerCase().replaceAll(' ', ''); - if (term === '') { - setSearchIds(null); - return; - } - - debounce._(() => { - const searchedIds = allRoomIds.filter((rId) => { - let name = mx.getRoom(rId)?.name; - if (!name) return false; - name = name.normalize('NFKC') - .toLocaleLowerCase() - .replaceAll(' ', ''); - return name.includes(term); - }); - setSearchIds(searchedIds); - }, 400)(); - }; - const handleAdd = async () => { setProcess(`Adding ${selected.length} items...`); @@ -96,20 +78,43 @@ function SpaceAddExistingContent({ roomId }) { mountStore.setItem(true); await Promise.allSettled(promises); if (mountStore.getItem() !== true) return; - setSelected([]); + + const allIds = [...spaces, ...rooms, ...directs].filter((rId) => ( + rId !== roomId && !roomIdToParents.get(rId)?.has(roomId) && !selected.includes(rId) + )); + setAllRoomIds(allIds); setProcess(null); + setSelected([]); + }; + + const handleSearch = (ev) => { + const term = ev.target.value.toLocaleLowerCase().replaceAll(' ', ''); + if (term === '') { + setSearchIds(null); + return; + } + + debounce._(() => { + const searchedIds = allRoomIds.filter((rId) => { + let name = mx.getRoom(rId)?.name; + if (!name) return false; + name = name.normalize('NFKC') + .toLocaleLowerCase() + .replaceAll(' ', ''); + return name.includes(term); + }); + setSearchIds(searchedIds); + }, 200)(); + }; + const handleSearchClear = (ev) => { + const btn = ev.currentTarget; + btn.parentElement.searchInput.value = ''; + setSearchIds(null); }; return ( <> -
{ - ev.preventDefault(); - const { target } = ev; - target.searchInput.value = ''; - setSearchIds(null); - }} - > + { ev.preventDefault(); }}> - + {searchIds?.length === 0 && No result found} {