fix partial implemented refresh for config useEffect, #869

frontend/src/components/Filterbar.tsx

@@ -11,10 +11,10 @@ import { ViewStyles } from '../configuration/constants/ViewStyle';
 type FilterbarProps = {
   hideToggleText: string;
   viewStyleName: string;
-  setRefresh?: (status: boolean) => void;
+  showSort?: boolean;
 };
 
-const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps) => {
+const Filterbar = ({ hideToggleText, viewStyleName, showSort = true }: FilterbarProps) => {
   const { userConfig, setPartialConfig } = useUserConfigStore();
   const [showHidden, setShowHidden] = useState(false);
   const isGridView = userConfig.config.view_style_home === ViewStyles.grid;
@@ -29,7 +29,6 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
             type="checkbox"
             checked={userConfig.config.hide_watched}
             onChange={() => {
-              setRefresh?.(true);
               setPartialConfig({ hide_watched: !userConfig.config.hide_watched });
             }}
           />
@@ -46,7 +45,7 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
         </div>
       </div>
 
-      {showHidden && (
+      {showHidden && showSort && (
         <div className="sort">
           <div id="form">
             <span>Sort by:</span>
@@ -55,7 +54,6 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
               id="sort"
               value={userConfig.config.sort_by}
               onChange={event => {
-                setRefresh?.(true);
                 setPartialConfig({ sort_by: event.target.value as SortByType });
               }}
             >
@@ -71,7 +69,6 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
               id="sort-order"
               value={userConfig.config.sort_order}
               onChange={event => {
-                setRefresh?.(true);
                 setPartialConfig({ sort_order: event.target.value as SortOrderType });
               }}
             >
@@ -81,9 +78,8 @@ const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps
           </div>
         </div>
       )}
-
       <div className="view-icons">
-        {setShowHidden && (
+        {setShowHidden && showSort && (
           <img
             src={iconSort}
             alt="sort-icon"

frontend/src/pages/ChannelVideo.tsx

@@ -152,11 +152,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
         </div>
       </div>
       <div className={`boxed-content ${gridView}`}>
-        <Filterbar
-          hideToggleText={'Hide watched videos:'}
-          viewStyleName={ViewStyleNames.home}
-          setRefresh={setRefresh}
-        />
+        <Filterbar hideToggleText={'Hide watched videos:'} viewStyleName={ViewStyleNames.home} />
       </div>
       {showEmbeddedVideo && <EmbeddableVideoPlayer videoId={videoId} />}
       <div className={`boxed-content ${gridView}`}>

frontend/src/pages/Channels.tsx

@@ -65,16 +65,14 @@ const Channels = () => {
 
   useEffect(() => {
     (async () => {
-      if (refresh) {
-        const channelListResponse = await loadChannelList(
-          currentPage,
-          userConfig.config.show_subed_only,
-        );
+      const channelListResponse = await loadChannelList(
+        currentPage,
+        userConfig.config.show_subed_only,
+      );
 
-        setChannelListResponse(channelListResponse);
-        setShowNotification(false);
-        setRefresh(false);
-      }
+      setChannelListResponse(channelListResponse);
+      setShowNotification(false);
+      setRefresh(false);
     })();
   }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);
 

frontend/src/pages/Home.tsx

@@ -129,30 +129,24 @@ const Home = () => {
 
   useEffect(() => {
     (async () => {
-      if (
-        refreshVideoList ||
-        pagination?.current_page === undefined ||
-        currentPage !== pagination?.current_page
-      ) {
-        const videos = await loadVideoListByFilter({
-          page: currentPage,
-          watch: userMeConfig.hide_watched ? 'unwatched' : undefined,
-          sort: userMeConfig.sort_by,
-          order: userMeConfig.sort_order,
-        });
+      const videos = await loadVideoListByFilter({
+        page: currentPage,
+        watch: userMeConfig.hide_watched ? 'unwatched' : undefined,
+        sort: userMeConfig.sort_by,
+        order: userMeConfig.sort_order,
+      });
 
-        try {
-          const continueVideoResponse = await loadVideoListByFilter({ watch: 'continue' });
-          setContinueVideoResponse(continueVideoResponse);
-        } catch (error) {
-          console.log('Server error on continue vids?');
-          console.error(error);
-        }
-
-        setVideoReponse(videos);
-
-        setRefreshVideoList(false);
+      try {
+        const continueVideoResponse = await loadVideoListByFilter({ watch: 'continue' });
+        setContinueVideoResponse(continueVideoResponse);
+      } catch (error) {
+        console.log('Server error on continue vids?');
+        console.error(error);
       }
+
+      setVideoReponse(videos);
+
+      setRefreshVideoList(false);
     })();
   }, [
     refreshVideoList,
@@ -190,11 +184,7 @@ const Home = () => {
           <h1>Recent Videos</h1>
         </div>
 
-        <Filterbar
-          hideToggleText="Hide watched:"
-          viewStyleName={ViewStyleNames.home}
-          setRefresh={setRefreshVideoList}
-        />
+        <Filterbar hideToggleText="Hide watched:" viewStyleName={ViewStyleNames.home} />
       </div>
 
       <div className={`boxed-content ${gridView}`}>

frontend/src/pages/Playlist.tsx

@@ -90,34 +90,27 @@ const Playlist = () => {
 
   useEffect(() => {
     (async () => {
-      if (
-        refresh ||
-        pagination?.current_page === undefined ||
-        currentPage !== pagination?.current_page
-      ) {
-        const playlist = await loadPlaylistById(playlistId);
-        const video = await loadVideoListByFilter({
-          playlist: playlistId,
-          page: currentPage,
-          watch: hideWatched ? 'unwatched' : undefined,
-          sort: 'downloaded', // downloaded or published? or playlist sort order?
-        });
+      const playlist = await loadPlaylistById(playlistId);
+      const video = await loadVideoListByFilter({
+        playlist: playlistId,
+        page: currentPage,
+        watch: hideWatched ? 'unwatched' : undefined,
+        sort: 'downloaded', // downloaded or published? or playlist sort order?
+      });
 
-        const isCustomPlaylist = playlist?.data?.playlist_type === 'custom';
-        if (!isCustomPlaylist) {
-          const channel = await loadChannelById(playlist.data.playlist_channel_id);
+      const isCustomPlaylist = playlist?.data?.playlist_type === 'custom';
+      if (!isCustomPlaylist) {
+        const channel = await loadChannelById(playlist.data.playlist_channel_id);
 
-          setChannelResponse(channel);
-        }
-
-        setPlaylistResponse(playlist);
-        setVideoResponse(video);
-        setRefresh(false);
+        setChannelResponse(channel);
       }
+
+      setPlaylistResponse(playlist);
+      setVideoResponse(video);
+      setRefresh(false);
     })();
-    // Do not add hideWatched this will not work as expected!
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playlistId, refresh, currentPage, pagination?.current_page]);
+  }, [playlistId, userConfig.config.hide_watched, refresh, currentPage, pagination?.current_page]);
 
   if (!playlistId || !playlist) {
     return `Playlist ${playlistId} not found!`;
@@ -320,7 +313,7 @@ const Playlist = () => {
         <Filterbar
           hideToggleText="Hide watched videos:"
           viewStyleName={ViewStyleNames.playlist}
-          setRefresh={setRefresh}
+          showSort={false}
         />
       </div>