feat: playbacks leaderboard

src/screens/Playbacks/Playbacks.js

@@ -1,18 +1,23 @@
 import { useIsFocused, useRoute } from '@react-navigation/native'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { View } from 'react-native'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
 import Carousel from 'react-native-reanimated-carousel'
 import { responsiveHeight } from 'react-native-responsive-dimensions'
 import { projectsRef } from '../../config/firebase'
 import useDataFromRef from '../../hooks/useDataFromRef'
 import PlaybackItem from './components/PlaybackItem'
+import PlaybackCharts from './components/PlaybackCharts'
+import { Palette } from '../../styles'
+import { FONT_FAMILY } from '../../styles/Fonts'
 
 const Playbacks = () => {
   const [activeIndex, setActiveIndex] = useState(0)
   const userCache = useRef(new Map())
   const isFocused = useIsFocused()
   const route = useRoute()
-  const focusProjectId = route?.params?.projectId || route?.params?.focusId || null
+  const initialFocusProjectId = route?.params?.projectId || route?.params?.focusId || null
+  const [focusProjectId, setFocusProjectId] = useState(initialFocusProjectId)
+  const [viewMode, setViewMode] = useState(initialFocusProjectId ? 'feed' : 'charts')
   const { data: rawPlaybacks = [], loadMore } = useDataFromRef({
     ref: projectsRef.where('playbackUrl', '!=', null),
     simpleRef: false,
@@ -75,6 +80,39 @@ const Playbacks = () => {
     }
   }, [focusIndex, focusProjectId, loadMore, playbacks])
 
+  useEffect(() => {
+    const nextFocusId = route?.params?.projectId || route?.params?.focusId || null
+    setFocusProjectId(nextFocusId)
+    if (nextFocusId) {
+      setViewMode('feed')
+    }
+  }, [route?.params?.focusId, route?.params?.projectId])
+
+  useEffect(() => {
+    if (viewMode !== 'feed') {
+      return
+    }
+    setActiveIndex(0)
+  }, [viewMode])
+
+  const showFeed = viewMode === 'feed'
+
+  const openFeedForPlayback = useCallback((project) => {
+    const nextId =
+      project && typeof project === 'object'
+        ? project?.id || project?.projectId || null
+        : project || null
+    if (!nextId) {
+      return
+    }
+    setFocusProjectId(nextId)
+    setViewMode('feed')
+  }, [])
+
+  if (!showFeed) {
+    return <PlaybackCharts onPlaybackPress={openFeedForPlayback} />
+  }
+
   return (
     <View style={{ flex: 1, backgroundColor: 'black' }}>
       <Carousel
@@ -93,8 +131,34 @@ const Playbacks = () => {
           />
         )}
       />
+      <Pressable
+        style={styles.backToCharts}
+        hitSlop={12}
+        onPress={() => setViewMode('charts')}
+        accessibilityLabel="Revenir au classement des playbacks"
+      >
+        <Text style={styles.backToChartsText}>Classement</Text>
+      </Pressable>
     </View>
   )
 }
 
 export default Playbacks
+
+const styles = StyleSheet.create({
+  backToCharts: {
+    position: 'absolute',
+    top: 32,
+    right: 20,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+    zIndex: 20,
+  },
+  backToChartsText: {
+    color: Palette.white,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+})