refactor(project): replace ui provider with pullstate store

src/App.tsx

@@ -4,7 +4,6 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import Root from './components/Root/Root';
 import ConfigProvider from './providers/ConfigProvider';
 import QueryProvider from './providers/QueryProvider';
-import UIStateProvider from './providers/uiStateProvider';
 import './styles/main.scss';
 
 interface State {
@@ -28,11 +27,9 @@ class App extends Component {
           onLoading={(isLoading: boolean) => console.info(`Loading config: ${isLoading}`)}
           onValidationError={(error: Error) => console.error(`Config ${error}`)}
         >
-          <UIStateProvider>
-            <Router>
-              <Root error={this.state.error} />
-            </Router>
-          </UIStateProvider>
+          <Router>
+            <Root error={this.state.error} />
+          </Router>
         </ConfigProvider>
       </QueryProvider>
     );

src/components/Layout/Layout.tsx

@@ -1,11 +1,11 @@
 import React, { ReactNode, FC, useState, useContext } from 'react';
 
+import { UIStore } from '../../state/UIStore';
 import ButtonLink from '../ButtonLink/ButtonLink';
 import Header from '../Header/Header';
 import Sidebar from '../Sidebar/Sidebar';
 import DynamicBlur from '../DynamicBlur/DynamicBlur';
 import { ConfigContext } from '../../providers/ConfigProvider';
-import { UIStateContext } from '../../providers/uiStateProvider';
 import MenuButton from '../../components/MenuButton/MenuButton';
 
 import styles from './Layout.module.scss';
@@ -16,7 +16,7 @@ type LayoutProps = {
 
 const Layout: FC<LayoutProps> = ({ children }) => {
   const { menu, assets, options } = useContext(ConfigContext);
-  const { blurImage } = useContext(UIStateContext);
+  const blurImage = UIStore.useState((s) => s.blurImage);
   const [sideBarOpen, setSideBarOpen] = useState(false);
   const hasDynamicBlur = options.dynamicBlur === true;
 

src/containers/Video/Video.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useEffect } from 'react';
 import type { Config } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 
-import { UIStateContext } from '../../providers/uiStateProvider';
+import { UIStore } from '../../state/UIStore';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import VideoComponent from '../../components/Video/Video';
 import { cardUrl, videoUrl } from '../../utils/formatting';
@@ -22,7 +22,6 @@ export type VideoProps = {
 const Video = ({ playlistId, videoType, episodeId, mediaId }: VideoProps): JSX.Element => {
   const history = useHistory();
   const location = useLocation();
-  const { updateBlurImage } = useContext(UIStateContext);
   const play = new URLSearchParams(location.search).get('play') === '1';
   const config: Config = useContext(ConfigContext);
   const posterFading: boolean = config ? config.options.posterFading === true : false;
@@ -37,9 +36,19 @@ const Video = ({ playlistId, videoType, episodeId, mediaId }: VideoProps): JSX.E
   const goBack = () => item && history.push(videoUrl(item, playlistId, false));
 
   const onCardClick = (item: PlaylistItem) => history.push(cardUrl(item));
-  const onCardHover = (item: PlaylistItem) => updateBlurImage(item.image);
+  const onCardHover = (item: PlaylistItem) =>
+    UIStore.update((state) => {
+      state.blurImage = item.image;
+    });
 
-  useEffect(() => item && updateBlurImage(item.image), [item, updateBlurImage]);
+  useEffect(
+    () =>
+      item &&
+      UIStore.update((state) => {
+        state.blurImage = item.image;
+      }),
+    [item],
+  );
 
   //todo: series andere playlist
   //todo: currently playing in recommended

src/screens/Home/Home.tsx

@@ -7,8 +7,8 @@ import type { Config, Content } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 import classNames from 'classnames';
 
+import { UIStore } from '../../state/UIStore';
 import { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
-import { UIStateContext } from '../../providers/uiStateProvider';
 import Shelf from '../../containers/Shelf/Shelf';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import type { UsePlaylistResult } from '../../hooks/usePlaylist';
@@ -34,7 +34,7 @@ const createItemData = memoize((content) => ({ content }));
 const Home = (): JSX.Element => {
   const history = useHistory();
   const config: Config = useContext(ConfigContext);
-  const { blurImage, updateBlurImage } = useContext(UIStateContext);
+  const blurImage = UIStore.useState((state) => state.blurImage);
   const breakpoint = useBreakpoint();
   const listRef = useRef<List>() as React.MutableRefObject<List>;
   const content: Content[] = config ? config.content : [];
@@ -50,7 +50,10 @@ const Home = (): JSX.Element => {
     const contentItem: Content = itemData.content[index];
 
     const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, contentItem.playlistId));
-    const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
+    const onCardHover = (playlistItem: PlaylistItem) =>
+      UIStore.update((state) => {
+        state.blurImage = playlistItem.image;
+      });
 
     return (
       <div
@@ -87,8 +90,14 @@ const Home = (): JSX.Element => {
   };
 
   useEffect(() => {
-    if (firstPlaylist?.playlist.length && !blurImage) updateBlurImage(firstPlaylist.playlist[0].image);
-  }, [firstPlaylist, blurImage, updateBlurImage]);
+    if (firstPlaylist?.playlist.length && !blurImage) {
+      const { image } = firstPlaylist.playlist[0];
+
+      UIStore.update((state) => {
+        state.blurImage = image;
+      });
+    }
+  }, [firstPlaylist, blurImage]);
 
   return (
     <div className={styles.home}>

src/screens/Playlist/Playlist.tsx

@@ -4,6 +4,7 @@ import type { GridCellProps } from 'react-virtualized';
 import type { PlaylistItem } from 'types/playlist';
 import type { Config } from 'types/Config';
 
+import { UIStore } from '../../state/UIStore';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import { cardUrl } from '../../utils/formatting';
 import VirtualizedGrid from '../../components/VirtualizedGrid/VirtualizedGrid';
@@ -12,7 +13,6 @@ import { filterPlaylist, chunk, findPlaylistImageForWidth, getFiltersFromConfig
 import Card from '../../components/Card/Card';
 import Filter from '../../components/Filter/Filter';
 import useBreakpoint, { Breakpoint, Breakpoints } from '../../hooks/useBreakpoint';
-import { UIStateContext } from '../../providers/uiStateProvider';
 
 import styles from './Playlist.module.scss';
 
@@ -34,7 +34,6 @@ function Playlist({
   },
 }: RouteComponentProps<PlaylistRouteParams>) {
   const history = useHistory();
-  const { updateBlurImage } = useContext(UIStateContext);
   const config: Config = useContext(ConfigContext);
   const { isLoading, error, data: { title, playlist } = { title: '', playlist: [] } } = usePlaylist(id);
 
@@ -48,11 +47,18 @@ function Playlist({
   const playlistRows = chunk<PlaylistItem>(filteredPlaylist, cols[breakpoint]);
 
   const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, id));
-  const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
+  const onCardHover = (playlistItem: PlaylistItem) =>
+    UIStore.update((state) => {
+      state.blurImage = playlistItem.image;
+    });
 
   useEffect(() => {
-    if (filteredPlaylist.length) updateBlurImage(filteredPlaylist[0].image);
-  }, [filter, filteredPlaylist, updateBlurImage]);
+    if (filteredPlaylist.length) {
+      UIStore.update((state) => {
+        state.blurImage = filteredPlaylist[0].image;
+      });
+    }
+  }, [filter, filteredPlaylist]);
 
   if (error || !playlist) return <h2 className={styles.error}>Could not load items</h2>;
 

src/state/UIStore.ts

@@ -0,0 +1,9 @@
+import { Store } from 'pullstate';
+
+type UIStore = {
+  blurImage: string;
+};
+
+export const UIStore = new Store<UIStore>({
+  blurImage: '',
+});