From a25bc3d3f52bcd3c52f296d383573b097865bbd0 Mon Sep 17 00:00:00 2001
From: Rakov Roman <roman.rakov@instatsport.com>
Date: Fri, 15 Jul 2022 13:14:51 +0300
Subject: [PATCH] fix(#2556): additional fixes

---
 src/features/Background/styled.tsx            |  5 ++-
 src/features/Common/customScrollbar/index.tsx |  4 +++
 .../VideoDate/{VideoDate.tsx => index.tsx}    | 28 +++++++++++++---
 .../components/TabVideo/index.tsx             | 32 +++++++++++++++++--
 src/features/MatchSidePlaylists/hooks.tsx     | 22 ++++---------
 5 files changed, 67 insertions(+), 24 deletions(-)
 rename src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/{VideoDate.tsx => index.tsx} (56%)

diff --git a/src/features/Background/styled.tsx b/src/features/Background/styled.tsx
index 21595ade..99e0aff8 100644
--- a/src/features/Background/styled.tsx
+++ b/src/features/Background/styled.tsx
@@ -7,9 +7,12 @@ const Container = styled.div`
   min-height: 100vh;
   overflow-x: hidden;
 
-&::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
+
+  // отображение в firefox
+  scrollbar-width: none;
 `
 
 export const ImageBackground = styled(Container)`
diff --git a/src/features/Common/customScrollbar/index.tsx b/src/features/Common/customScrollbar/index.tsx
index 33de4a7b..2ba832c2 100644
--- a/src/features/Common/customScrollbar/index.tsx
+++ b/src/features/Common/customScrollbar/index.tsx
@@ -24,4 +24,8 @@ export const customScrollbar = css`
   ::-webkit-scrollbar-corner  {
     background: transparent;
   }
+
+  // firefox поддерживает только эти 2 параметра
+  scrollbar-color: #3F3F3F transparent;
+  scrollbar-width: thin;
 `
diff --git a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/VideoDate.tsx b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/index.tsx
similarity index 56%
rename from src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/VideoDate.tsx
rename to src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/index.tsx
index 7ca9f140..2c05f4db 100644
--- a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/VideoDate.tsx
+++ b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/index.tsx
@@ -8,15 +8,19 @@ import { format } from 'date-fns'
 import { WeekDay, Wrapper } from './styled'
 
 export type Props = {
+  isInitialDateHidden: boolean,
   matchDates: Array<string>,
   onDateClick: (date: string) => void,
+  profileDate: string,
   selectedDate: string,
 }
 
 export const VideoDate = (props: Props) => {
   const {
+    isInitialDateHidden,
     matchDates,
     onDateClick,
+    profileDate,
     selectedDate,
   } = props
 
@@ -24,23 +28,37 @@ export const VideoDate = (props: Props) => {
     matchDates.findIndex((date) => date === selectedDate)
   ), [matchDates, selectedDate])
 
+  const lastDateIndex = matchDates.length - 1
+
+  const initialDateIndex = useMemo(() => (
+    matchDates.findIndex((date) => date === profileDate)
+  ), [matchDates, profileDate])
+
   const currentDay = useMemo(() => (
-    matchDates.length ? matchDates[selectedDateIndex] : null
-  ), [matchDates, selectedDateIndex])
+    matchDates.length && !(isInitialDateHidden && selectedDateIndex === initialDateIndex)
+      ? matchDates[selectedDateIndex]
+      : null
+  ), [initialDateIndex, isInitialDateHidden, matchDates, selectedDateIndex])
 
   const previousDay = useMemo(() => {
     if (selectedDateIndex !== 0) {
+      if (isInitialDateHidden && selectedDateIndex - 1 === initialDateIndex) {
+        return selectedDateIndex - 1 !== lastDateIndex ? matchDates[selectedDateIndex - 2] : null
+      }
       return matchDates[selectedDateIndex - 1]
     }
     return null
-  }, [matchDates, selectedDateIndex])
+  }, [initialDateIndex, isInitialDateHidden, lastDateIndex, matchDates, selectedDateIndex])
 
   const nextDay = useMemo(() => {
-    if (selectedDateIndex !== matchDates.length - 1) {
+    if (selectedDateIndex !== lastDateIndex) {
+      if (isInitialDateHidden && selectedDateIndex + 1 === initialDateIndex) {
+        return selectedDateIndex + 1 !== lastDateIndex ? matchDates[selectedDateIndex + 2] : null
+      }
       return matchDates[selectedDateIndex + 1]
     }
     return null
-  }, [matchDates, selectedDateIndex])
+  }, [initialDateIndex, isInitialDateHidden, lastDateIndex, matchDates, selectedDateIndex])
 
   const onDayClick = (date: string) => {
     onDateClick?.(date)
diff --git a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx
index 43eed331..04e633ab 100644
--- a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx
@@ -16,7 +16,7 @@ import { parseDate } from 'helpers/parseDate'
 
 import { usePageParams } from 'hooks/usePageParams'
 
-import { VideoDate } from './components/VideoDate/VideoDate'
+import { VideoDate } from './components/VideoDate'
 import { MatchesWrapper } from './styled'
 
 type Props = {
@@ -24,24 +24,50 @@ type Props = {
   tournamentData: TournamentData,
 }
 
+const formatDate = (date: Date) => format(date, 'yyyy-MM-dd')
+
 export const TabVideo = ({
   profile,
   tournamentData,
 }: Props) => {
   const { profileId } = usePageParams()
-  const [selectedDate, setSelectedDate] = useState(format(parseDate(profile?.date!), 'yyyy-MM-dd'))
+
+  const profileDate = useMemo(() => (
+    format(parseDate(profile?.date!), 'yyyy-MM-dd')
+  ), [profile?.date])
+
+  const [selectedDate, setSelectedDate] = useState(profileDate)
 
   const matches = useMemo(() => (
     tournamentData.matches.filter((match) => (
-      format(match.date, 'yyyy-MM-dd') === selectedDate && match.id !== profileId
+      formatDate(match.date) === selectedDate && match.id !== profileId
     ))
   ), [profileId, selectedDate, tournamentData.matches])
 
+  const isInitialDateHidden = useMemo(() => {
+    const someProfileMatch = tournamentData.matches.find((match) => (
+      formatDate(match.date) === profileDate && match.id !== profileId))
+
+    if (!someProfileMatch) {
+      const profileDateIndex = tournamentData.matchDates.findIndex((date) => date === profileDate)
+
+      if (profileDateIndex !== 0) {
+        setSelectedDate(tournamentData.matchDates[profileDateIndex - 1])
+      } else {
+        setSelectedDate(tournamentData.matchDates[profileDateIndex + 1])
+      }
+    }
+
+    return !someProfileMatch
+  }, [tournamentData, profileId, profileDate])
+
   return (
     <Fragment>
       <VideoDate
+        isInitialDateHidden={isInitialDateHidden}
         matchDates={tournamentData.matchDates}
         selectedDate={selectedDate}
+        profileDate={profileDate}
         onDateClick={setSelectedDate}
       />
       <MatchesWrapper>
diff --git a/src/features/MatchSidePlaylists/hooks.tsx b/src/features/MatchSidePlaylists/hooks.tsx
index aff2f7e9..df3dc7c3 100644
--- a/src/features/MatchSidePlaylists/hooks.tsx
+++ b/src/features/MatchSidePlaylists/hooks.tsx
@@ -25,7 +25,7 @@ export const useMatchSidePlaylists = (props: Props) => {
     tournamentData,
   } = props
 
-  const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.VIDEO)
+  const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.WATCH)
 
   const isWatchTabVisible = useMemo(() => {
     const playListFilter = reduce(
@@ -40,21 +40,13 @@ export const useMatchSidePlaylists = (props: Props) => {
     return playListFilter > 1
   }, [playlists])
 
-  const isEventTabVisible = useMemo(() => {
-    if (events.length > 0) {
-      setSelectedTab(Tabs.EVENTS)
-      return true
-    }
-    return false
-  }, [events])
+  const isEventTabVisible = useMemo(() => (
+    events.length > 0
+  ), [events])
 
-  const isVideoTabVisible = useMemo(() => {
-    if (tournamentData.matches.length > 0) {
-      setSelectedTab(Tabs.EVENTS)
-      return true
-    }
-    return false
-  }, [tournamentData])
+  const isVideoTabVisible = useMemo(() => (
+    tournamentData.matches.length > 1
+  ), [tournamentData])
 
   useEffect(() => {
     switch (true) {