Ott 513 filters reset on logo click (#203)

* fix(#513): undefined player name

* fix(#513): micro optiomization to useStorage hook

* fix(#513): reset filters when search is empty

src/features/HeaderFilters/store/hooks/index.tsx

@@ -1,8 +1,10 @@
 import {
   useMemo,
   useState,
+  useEffect,
   useCallback,
 } from 'react'
+import { useLocation } from 'react-router-dom'
 
 import format from 'date-fns/format'
 import startOfDay from 'date-fns/startOfDay'
@@ -25,6 +27,7 @@ export enum MatchStatuses {
 const dateFormat = 'dd/MM/yyyy HH:mm:ss'
 
 export const useFilters = () => {
+  const { search } = useLocation()
   const [selectedDate, setSelectedDate] = useQueryParamStore({
     defaultValue: new Date(),
     key: filterKeys.DATE,
@@ -65,6 +68,23 @@ export const useFilters = () => {
     setSelectedTournamentId,
   ] = useState<number | null>(null)
 
+  const resetFilters = useCallback(() => {
+    setSelectedDate(new Date())
+    setMatchStatus(null)
+    setSelectedSportTypeId(null)
+    setSelectedTournamentId(null)
+  }, [
+    setSelectedDate,
+    setMatchStatus,
+    setSelectedSportTypeId,
+  ])
+
+  useEffect(() => {
+    if (!search) {
+      resetFilters()
+    }
+  }, [search, resetFilters])
+
   const store = useMemo(() => ({
     selectedDate,
     selectedDateFormatted: format(startOfDay(selectedDate), dateFormat),

src/features/PlayerPage/hooks.tsx

@@ -21,13 +21,17 @@ export const usePlayerPage = () => {
 
   const {
     club_team,
+    firstname_eng = '',
+    firstname_rus = '',
     height,
+    lastname_eng = '',
+    lastname_rus = '',
     weight,
   } = playerProfile || {}
 
   const fullName = {
-    name_eng: `${playerProfile?.firstname_eng} ${playerProfile?.lastname_eng}`,
-    name_rus: `${playerProfile?.firstname_rus} ${playerProfile?.lastname_rus}`,
+    name_eng: `${firstname_eng} ${lastname_eng}`,
+    name_rus: `${firstname_rus} ${lastname_rus}`,
   }
   const teamName = useName(club_team || {})
 

src/features/UserFavorites/index.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent, FocusEvent } from 'react'
 import React, { useState } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
 import map from 'lodash/map'
 
@@ -27,7 +27,6 @@ import {
 } from './styled'
 
 export const UserFavorites = () => {
-  const location = useLocation()
   const {
     addRemoveFavorite,
     close,
@@ -45,7 +44,7 @@ export const UserFavorites = () => {
 
   return (
     <UserSportFavWrapper>
-      <Link to={`${PAGES.home}${location.search}`}>
+      <Link to={PAGES.home}>
         <UserSportFavLogoWrapper width={52} />
       </Link>
       <UserSportFavStar />

src/hooks/useStorage/index.tsx

@@ -38,11 +38,13 @@ const createHook = (storage: Storage) => (
     key,
     validator = defaultValidator,
   }: Args<T>) => {
-    const storeValue = readStorageInitialValue(storage, key)
-    const isValid = validator(storeValue)
-    const initialState = isValid ? storeValue : defaultValue
+    const getInitialState = () => {
+      const storeValue = readStorageInitialValue(storage, key)
+      const isValid = validator(storeValue)
+      return isValid ? storeValue : defaultValue
+    }
 
-    const [state, setState] = useState<T>(initialState)
+    const [state, setState] = useState<T>(getInitialState)
 
     const setStateAndSave = useCallback((value: T) => {
       storage.setItem(key, JSON.stringify(value, dateReplacer))
@@ -50,10 +52,12 @@ const createHook = (storage: Storage) => (
     }, [key])
 
     useEffect(() => {
+      const storeValue = readStorageInitialValue(storage, key)
+      const isValid = validator(storeValue)
       if (!isValid) {
         storage.removeItem(key)
       }
-    }, [isValid, key])
+    }, [key, validator])
 
     return [state, setStateAndSave] as const
   }