Add async notification to channels and playlists subscription text

This commit is contained in:
MerlinScheurer
2025-01-12 16:04:28 +01:00
parent 5b67d9de24
commit 868564ee32
2 changed files with 33 additions and 9 deletions

View File

@@ -54,7 +54,8 @@ const Channels = () => {
const [channelListResponse, setChannelListResponse] = useState<ChannelsListResponse>(); const [channelListResponse, setChannelListResponse] = useState<ChannelsListResponse>();
const [showAddForm, setShowAddForm] = useState(false); const [showAddForm, setShowAddForm] = useState(false);
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(true);
const [showNotification, setShowNotification] = useState(false);
const [channelsToSubscribeTo, setChannelsToSubscribeTo] = useState(''); const [channelsToSubscribeTo, setChannelsToSubscribeTo] = useState('');
const channels = channelListResponse?.data; const channels = channelListResponse?.data;
@@ -64,12 +65,16 @@ const Channels = () => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const channelListResponse = await loadChannelList( if (refresh) {
currentPage, const channelListResponse = await loadChannelList(
userConfig.config.show_subed_only, currentPage,
); userConfig.config.show_subed_only,
);
setChannelListResponse(channelListResponse); setChannelListResponse(channelListResponse);
setShowNotification(false);
setRefresh(false);
}
})(); })();
}, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]); }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);
@@ -124,7 +129,15 @@ const Channels = () => {
)} )}
</div> </div>
<Notifications pageName="all" /> <Notifications
pageName="all"
update={showNotification}
setShouldRefresh={isDone => {
if (!isDone) {
setRefresh(true);
}
}}
/>
<div className="view-controls"> <div className="view-controls">
<div className="toggle"> <div className="toggle">

View File

@@ -17,6 +17,7 @@ import ScrollToTopOnNavigate from '../components/ScrollToTop';
import Button from '../components/Button'; import Button from '../components/Button';
import useIsAdmin from '../functions/useIsAdmin'; import useIsAdmin from '../functions/useIsAdmin';
import { useUserConfigStore } from '../stores/UserConfigStore'; import { useUserConfigStore } from '../stores/UserConfigStore';
import Notifications from '../components/Notifications';
export type PlaylistEntryType = { export type PlaylistEntryType = {
youtube_id: string; youtube_id: string;
@@ -39,6 +40,7 @@ const Playlists = () => {
const [showAddForm, setShowAddForm] = useState(false); const [showAddForm, setShowAddForm] = useState(false);
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
const [showNotification, setShowNotification] = useState(false);
const [playlistsToAddText, setPlaylistsToAddText] = useState(''); const [playlistsToAddText, setPlaylistsToAddText] = useState('');
const [customPlaylistsToAddText, setCustomPlaylistsToAddText] = useState(''); const [customPlaylistsToAddText, setCustomPlaylistsToAddText] = useState('');
@@ -61,6 +63,7 @@ const Playlists = () => {
setPlaylistReponse(playlist); setPlaylistReponse(playlist);
setRefresh(false); setRefresh(false);
setShowNotification(false);
})(); })();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]); }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);
@@ -103,7 +106,7 @@ const Playlists = () => {
type="submit" type="submit"
onClick={async () => { onClick={async () => {
await updateBulkPlaylistSubscriptions(playlistsToAddText, true); await updateBulkPlaylistSubscriptions(playlistsToAddText, true);
setRefresh(true); setShowNotification(true);
}} }}
/> />
</div> </div>
@@ -135,7 +138,15 @@ const Playlists = () => {
)} )}
</div> </div>
<div id="notifications"></div> <Notifications
pageName="all"
update={showNotification}
setShouldRefresh={isDone => {
if (!isDone) {
setRefresh(true);
}
}}
/>
<div className="view-controls"> <div className="view-controls">
<div className="toggle"> <div className="toggle">