Refactor profile to use new ViewSelector element which is reusable and now supports swipe gestures

src/view/com/util/Selector.tsx

@@ -1,37 +1,98 @@
-import React, {useState} from 'react'
+import React, {createRef, useState, useMemo} from 'react'
-import {
+import {StyleSheet, Text, TouchableWithoutFeedback, View} from 'react-native'
-  StyleProp,
+import Animated, {
-  StyleSheet,
+  SharedValue,
-  Text,
+  useAnimatedStyle,
-  TouchableWithoutFeedback,
+  interpolate,
-  View,
+} from 'react-native-reanimated'
-  ViewStyle,
-} from 'react-native'
 import {colors} from '../../lib/styles'
 
+interface Layout {
+  x: number
+  width: number
+}
+
 export function Selector({
-  style,
+  selectedIndex,
   items,
+  swipeGestureInterp,
   onSelect,
 }: {
-  style?: StyleProp<ViewStyle>
+  selectedIndex: number
   items: string[]
+  swipeGestureInterp: SharedValue<number>
   onSelect?: (index: number) => void
 }) {
-  const [selectedIndex, setSelectedIndex] = useState<number>(0)
+  const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
+    undefined,
+  )
+  const itemRefs = useMemo(
+    () => Array.from({length: items.length}).map(() => createRef<View>()),
+    [items.length],
+  )
+
+  const currentLayouts = useMemo(() => {
+    const left = itemLayouts?.[selectedIndex - 1] || {x: 0, width: 0}
+    const middle = itemLayouts?.[selectedIndex] || {x: 0, width: 0}
+    const right = itemLayouts?.[selectedIndex + 1] || {
+      x: middle.x + 20,
+      width: middle.width,
+    }
+    return [left, middle, right]
+  }, [selectedIndex, itemLayouts])
+
+  const underlinePos = useAnimatedStyle(() => {
+    const other =
+      swipeGestureInterp.value === 0
+        ? currentLayouts[1]
+        : swipeGestureInterp.value < 0
+        ? currentLayouts[0]
+        : currentLayouts[2]
+    return {
+      left: interpolate(
+        Math.abs(swipeGestureInterp.value),
+        [0, 1],
+        [currentLayouts[1].x, other.x],
+      ),
+      width: interpolate(
+        Math.abs(swipeGestureInterp.value),
+        [0, 1],
+        [currentLayouts[1].width, other.width],
+      ),
+    }
+  }, [currentLayouts, swipeGestureInterp])
+
+  const onLayout = () => {
+    const promises = []
+    for (let i = 0; i < items.length; i++) {
+      promises.push(
+        new Promise<Layout>(resolve => {
+          itemRefs[i].current?.measure(
+            (x: number, _y: number, width: number) => {
+              resolve({x, width})
+            },
+          )
+        }),
+      )
+    }
+    Promise.all(promises).then((layouts: Layout[]) => {
+      setItemLayouts(layouts)
+    })
+  }
+
   const onPressItem = (index: number) => {
-    setSelectedIndex(index)
     onSelect?.(index)
   }
 
   return (
-    <View style={[styles.outer, style]}>
+    <View style={[styles.outer]} onLayout={onLayout}>
+      <Animated.View style={[styles.underline, underlinePos]} />
       {items.map((item, i) => {
         const selected = i === selectedIndex
         return (
           <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
-            <View style={selected ? styles.itemSelected : styles.item}>
+            <View style={styles.item} ref={itemRefs[i]}>
-              <Text style={selected ? styles.labelSelected : styles.label}>
+              <Text style={selected ? styles.labelSelected : styles.itemLabel}>
                 {item}
               </Text>
             </View>
@@ -45,25 +106,27 @@ export function Selector({
 const styles = StyleSheet.create({
   outer: {
     flexDirection: 'row',
+    paddingTop: 8,
+    paddingBottom: 12,
     paddingHorizontal: 14,
+    backgroundColor: colors.white,
   },
   item: {
-    paddingBottom: 12,
     marginRight: 20,
   },
-  label: {
+  itemLabel: {
     fontWeight: '600',
     fontSize: 16,
     color: colors.gray5,
   },
-  itemSelected: {
-    paddingBottom: 8,
-    marginRight: 20,
-    borderBottomWidth: 4,
-    borderBottomColor: colors.purple3,
-  },
   labelSelected: {
     fontWeight: '600',
     fontSize: 16,
   },
+  underline: {
+    position: 'absolute',
+    height: 4,
+    backgroundColor: colors.purple3,
+    bottom: 0,
+  },
 })

src/view/com/util/ViewSelector.tsx

@@ -0,0 +1,131 @@
+import React, {useEffect, useState, useMemo} from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {GestureDetector, Gesture} from 'react-native-gesture-handler'
+import {useSharedValue, withTiming, runOnJS} from 'react-native-reanimated'
+import {Selector} from './Selector'
+
+const HEADER_ITEM = {_reactKey: '__header__'}
+const SELECTOR_ITEM = {_reactKey: '__selector__'}
+const STICKY_HEADER_INDICES = [1]
+const SWIPE_GESTURE_MAX_DISTANCE = 200
+const SWIPE_GESTURE_HIT_SLOP = {left: -20, top: 0, right: 0, bottom: 0} // we ignore the left 20 pixels to avoid conflicts with the page-nav gesture
+
+export function ViewSelector({
+  sections,
+  items,
+  refreshing,
+  renderHeader,
+  renderItem,
+  onSelectView,
+  onRefresh,
+  onEndReached,
+}: {
+  sections: string[]
+  items: any[]
+  refreshing?: boolean
+  renderHeader?: () => JSX.Element
+  renderItem: (item: any) => JSX.Element
+  onSelectView?: (viewIndex: number) => void
+  onRefresh?: () => void
+  onEndReached?: (info: {distanceFromEnd: number}) => void
+}) {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0)
+  const swipeGestureInterp = useSharedValue<number>(0)
+
+  // events
+  // =
+
+  const onPressSelection = (index: number) => setSelectedIndex(index)
+  useEffect(() => {
+    onSelectView?.(selectedIndex)
+  }, [selectedIndex])
+
+  // gestures
+  // =
+
+  const swipeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .hitSlop(SWIPE_GESTURE_HIT_SLOP)
+        .onUpdate(e => {
+          // calculate [-1, 1] range for the gesture
+          const clamped = Math.min(e.translationX, SWIPE_GESTURE_MAX_DISTANCE)
+          const reversed = clamped * -1
+          const scaled = reversed / SWIPE_GESTURE_MAX_DISTANCE
+          swipeGestureInterp.value = scaled
+        })
+        .onEnd(e => {
+          if (swipeGestureInterp.value >= 0.5) {
+            // swiped to next
+            if (selectedIndex < sections.length - 1) {
+              // interp to the next item's position...
+              swipeGestureInterp.value = withTiming(1, {duration: 100}, () => {
+                // ...then update the index, which triggers the useEffect() below [1]
+                runOnJS(setSelectedIndex)(selectedIndex + 1)
+              })
+            } else {
+              swipeGestureInterp.value = withTiming(0, {duration: 100})
+            }
+          } else if (swipeGestureInterp.value <= -0.5) {
+            // swiped to prev
+            if (selectedIndex > 0) {
+              // interp to the prev item's position...
+              swipeGestureInterp.value = withTiming(-1, {duration: 100}, () => {
+                // ...then update the index, which triggers the useEffect() below [1]
+                runOnJS(setSelectedIndex)(selectedIndex - 1)
+              })
+            } else {
+              swipeGestureInterp.value = withTiming(0, {duration: 100})
+            }
+          } else {
+            swipeGestureInterp.value = withTiming(0, {duration: 100})
+          }
+        }),
+    [swipeGestureInterp, selectedIndex, sections.length],
+  )
+  useEffect(() => {
+    // [1] completes the swipe gesture animation by resetting the interp value
+    // this has to be done as an effect so that it occurs *after* the selectedIndex has been updated
+    swipeGestureInterp.value = 0
+  }, [swipeGestureInterp, selectedIndex])
+
+  // rendering
+  // =
+
+  const renderItemInternal = ({item}: {item: any}) => {
+    if (item === HEADER_ITEM) {
+      if (renderHeader) {
+        return renderHeader()
+      }
+      return <View />
+    } else if (item === SELECTOR_ITEM) {
+      return (
+        <Selector
+          items={sections}
+          selectedIndex={selectedIndex}
+          swipeGestureInterp={swipeGestureInterp}
+          onSelect={onPressSelection}
+        />
+      )
+    } else {
+      return renderItem(item)
+    }
+  }
+
+  const data = [HEADER_ITEM, SELECTOR_ITEM, ...items]
+  return (
+    <GestureDetector gesture={swipeGesture}>
+      <FlatList
+        data={data}
+        keyExtractor={item => item._reactKey}
+        renderItem={renderItemInternal}
+        stickyHeaderIndices={STICKY_HEADER_INDICES}
+        refreshing={refreshing}
+        onRefresh={onRefresh}
+        onEndReached={onEndReached}
+      />
+    </GestureDetector>
+  )
+}
+
+const styles = StyleSheet.create({})

src/view/screens/Profile.tsx

@@ -1,37 +1,19 @@
-import React, {useState, useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
-import {SectionList, StyleSheet, Text, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {ViewSelector} from '../com/util/ViewSelector'
+import {ScreenParams} from '../routes'
 import {ProfileUiModel, SECTION_IDS} from '../../state/models/profile-ui'
-import {FeedViewItemModel} from '../../state/models/feed-view'
 import {useStores} from '../../state'
 import {ProfileHeader} from '../com/profile/ProfileHeader'
 import {FeedItem} from '../com/posts/FeedItem'
-import {Selector} from '../com/util/Selector'
 import {ErrorScreen} from '../com/util/ErrorScreen'
 import {ErrorMessage} from '../com/util/ErrorMessage'
 import {s, colors} from '../lib/styles'
-import {ScreenParams} from '../routes'
 
-const SECTION_HEADER_ITEM = Symbol('SectionHeaderItem')
+const LOADING_ITEM = {_reactKey: '__loading__'}
-const LOADING_ITEM = Symbol('LoadingItem')
+const END_ITEM = {_reactKey: '__end__'}
-const EMPTY_ITEM = Symbol('EmptyItem')
+const EMPTY_ITEM = {_reactKey: '__empty__'}
-const END_ITEM = Symbol('EndItem')
-
-interface RenderItemParams {
-  item: any
-  index: number
-  section: Section
-}
-
-interface ErrorItem {
-  error: string
-}
-
-interface Section {
-  data: any[]
-  keyExtractor?: (v: any) => string
-  renderItem: (params: RenderItemParams) => JSX.Element
-}
 
 export const Profile = observer(({visible, params}: ScreenParams) => {
   const store = useStores()
@@ -62,8 +44,9 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
   // events
   // =
 
-  const onSelectViewSelector = (index: number) =>
+  const onSelectView = (index: number) => {
     profileUiState?.setSelectedViewIndex(index)
+  }
   const onRefresh = () => {
     profileUiState
       ?.refresh()
@@ -81,90 +64,60 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
   // rendering
   // =
 
-  const renderItem = (_params: RenderItemParams) => <View />
+  const renderHeader = () => {
-  const renderLoadingItem = (_params: RenderItemParams) => (
-    <Text style={styles.loading}>Loading...</Text>
-  )
-  const renderErrorItem = ({item}: {item: ErrorItem}) => (
-    <View style={s.p5}>
-      <ErrorMessage message={item.error} onPressTryAgain={onPressTryAgain} />
-    </View>
-  )
-  const renderEmptyItem = (_params: RenderItemParams) => (
-    <Text style={styles.loading}>No posts yet!</Text>
-  )
-  const renderProfileItem = (_params: RenderItemParams) => {
     if (!profileUiState) {
       return <View />
     }
     return <ProfileHeader view={profileUiState.profile} />
   }
-  const renderSectionHeader = ({section}: {section: Section}) => {
+  let renderItem
-    if (section?.data?.[0] !== SECTION_HEADER_ITEM) {
+  let items: any[] = []
-      return (
+  if (profileUiState) {
-        <Selector
+    if (profileUiState.selectedViewIndex === SECTION_IDS.POSTS) {
-          items={ProfileUiModel.SELECTOR_ITEMS}
+      if (profileUiState.isInitialLoading) {
-          style={styles.selector}
+        items.push(LOADING_ITEM)
-          onSelect={onSelectViewSelector}
+        renderItem = () => <Text style={styles.loading}>Loading...</Text>
+      } else if (profileUiState.feed.hasError) {
+        items.push({
+          _reactKey: '__error__',
+          error: profileUiState.feed.error,
+        })
+        renderItem = (item: any) => (
+          <View style={s.p5}>
+            <ErrorMessage
+              message={item.error}
+              onPressTryAgain={onPressTryAgain}
             />
+          </View>
         )
+      } else if (profileUiState.currentView.hasContent) {
+        items = profileUiState.feed.feed.slice()
+        if (profileUiState.feed.hasReachedEnd) {
+          items.push(END_ITEM)
         }
-    return <View />
+        renderItem = (item: any) => {
-  }
+          if (item === END_ITEM) {
-  const renderPostsItem = ({item}: {item: FeedViewItemModel | Symbol}) => {
-    if (item === END_ITEM || item instanceof Symbol) {
             return <Text style={styles.endItem}>- end of feed -</Text>
           }
           return <FeedItem item={item} />
         }
-  const renderBadgesItem = ({item}: {item: any}) => <Text>todo</Text>
-
-  const sections = [
-    {data: [SECTION_HEADER_ITEM], renderItem: renderProfileItem},
-  ]
-  if (profileUiState) {
-    if (profileUiState.selectedViewIndex === SECTION_IDS.POSTS) {
-      if (profileUiState.isInitialLoading) {
-        sections.push({
-          data: [LOADING_ITEM],
-          renderItem: renderLoadingItem,
-        } as Section)
-      } else if (profileUiState.feed.hasError) {
-        sections.push({
-          data: [{error: profileUiState.feed.error}],
-          renderItem: renderErrorItem,
-        } as Section)
-      } else if (profileUiState.currentView.hasContent) {
-        const items: (FeedViewItemModel | Symbol)[] =
-          profileUiState.feed.feed.slice()
-        if (profileUiState.feed.hasReachedEnd) {
-          items.push(END_ITEM)
-        }
-        sections.push({
-          data: items,
-          renderItem: renderPostsItem,
-          keyExtractor: (item: FeedViewItemModel) => item._reactKey,
-        } as Section)
       } else if (profileUiState.currentView.isEmpty) {
-        sections.push({
+        items.push(EMPTY_ITEM)
-          data: [EMPTY_ITEM],
+        renderItem = () => <Text style={styles.loading}>No posts yet!</Text>
-          renderItem: renderEmptyItem,
-        })
       }
     }
     if (profileUiState.selectedViewIndex === SECTION_IDS.BADGES) {
-      sections.push({
+      items.push(EMPTY_ITEM)
-        data: [{}],
+      renderItem = () => <Text>TODO</Text>
-        renderItem: renderBadgesItem,
-      } as Section)
     }
   }
+  if (!renderItem) {
+    renderItem = () => <View />
+  }
 
   return (
     <View style={styles.container}>
-      <View style={styles.feed}>
+      {profileUiState?.profile.hasError ? (
-        {profileUiState &&
-          (profileUiState.profile.hasError ? (
         <ErrorScreen
           title="Failed to load profile"
           message={`There was an issue when attempting to load ${params.name}`}
@@ -172,16 +125,17 @@ export const Profile = observer(({visible, params}: ScreenParams) => {
           onPressTryAgain={onPressTryAgain}
         />
       ) : (
-            <SectionList
+        <ViewSelector
-              sections={sections}
+          sections={ProfileUiModel.SELECTOR_ITEMS}
-              renderSectionHeader={renderSectionHeader}
+          items={items}
+          renderHeader={renderHeader}
           renderItem={renderItem}
-              refreshing={profileUiState.isRefreshing}
+          refreshing={profileUiState?.isRefreshing || false}
+          onSelectView={onSelectView}
           onRefresh={onRefresh}
           onEndReached={onEndReached}
         />
-          ))}
+      )}
-      </View>
     </View>
   )
 })
@@ -191,15 +145,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     height: '100%',
   },
-  selector: {
-    paddingTop: 8,
-    backgroundColor: colors.white,
-    borderBottomWidth: 1,
-    borderColor: colors.gray2,
-  },
-  feed: {
-    flex: 1,
-  },
   loading: {
     paddingVertical: 10,
     paddingHorizontal: 14,

todos.txt

@@ -22,3 +22,4 @@ Paul's todo list
   - Follows list
 - Bugs
   - Check that sub components arent reloading too much
+  - Profile isn't caching on nav anymore