feat(user): clear blurimage when entering user screen

jwplayer · Jul 22, 2021 · 9fdaf4e · 9fdaf4e
1 parent 9b92e2d
commit 9fdaf4e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/hooks/useBlurImageUpdater.ts b/src/hooks/useBlurImageUpdater.ts
@@ -15,11 +15,9 @@ const useBlurImageUpdater = (data?: PlaylistItem[] | PlaylistItem) => {
   }, [data]);
 
   return useCallback((image: string) => {
-    if (image) {
-      UIStore.update((state) => {
-        state.blurImage = image;
-      });
-    }
+    UIStore.update((state) => {
+      state.blurImage = image;
+    });
   }, []);
 };
 

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
 import type { PlaylistItem } from 'types/playlist';
 import { useTranslation } from 'react-i18next';
@@ -33,13 +33,15 @@ const User = (): JSX.Element => {
   const updateBlurImage = useBlurImageUpdater();
   const { clearList: clearFavorites } = useFavorites();
 
-  if (!customer) {
-    return <div className={styles.user}>Open login panel?</div>;
-  }
-
   const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem));
   const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
 
+  useEffect(() => updateBlurImage(''), [updateBlurImage]);
+
+  if (!customer) {
+    return <div className={styles.user}>Please login first</div>;
+  }
+
   return (
     <div className={styles.user}>
       {isLargeScreen && (