TrackSessions.js

import React, { useState } from 'react';
import { View, ScrollView, RefreshControl, TouchableOpacity, StyleSheet } from 'react-native';
import axios from 'axios'
import { dateAndTime } from '../../utils/dateFormatter';
import { List, Text } from '../../components/ui';
import i18n from 'i18n-js';
import AddSession from "../../assets/images/addSession.svg"
import trackStore from '../sessions/trackStore'
import routes from '../../helpers/routes';
import Colors from 'app/constants/Colors';
import useWhyDidYouUpdate from '../../hooks/useWhyDidYouUpdate';

const TrackSessions = ({
  trackID,
  navigation,
}) => {
  const [sessions, setSessions] = useState([])
  const [refreshing, setRefreshing] = useState(false)

  const fetchSessions = () => {
    console.log(trackID)
    axios.get(routes.api.tracks.creativeSessions(trackID))
    .then(({ data }) => {
      setSessions(data)
      setRefreshing(false)
    })
  }
  return <ScrollView
    refreshControl={
      <RefreshControl
        refreshing={refreshing}
        onRefresh={fetchSessions}
      />
    }
    contentContainerStyle={{ flexGrow: 1 }}
  >
    <List 
      ListHeaderComponent={newSession}
      emptyComponent={emptyComponent}
      data={sessions.map(s => ({
        key: `${s.id}`,
        title: `Session #${s.position}`,
        subTitle: `${i18n.t(`tracks.status.${s.status}`)}  - ${dateAndTime(s.started_at)}`,
        onPress: () => navigation.navigate('Session', { creativeSession: s }),
      }))} 
    />
  </ScrollView>
};

export default React.memo(TrackSessions, (prev, next) => {
  console.log(prev, next)
  const a = ({ track: next }, { track: current }) => current.updated_at === next.updated_at
});

TrackShow.js

import React, { useState } from 'react';
import { ScrollView, RefreshControl, Alert } from 'react-native';
import { SafeAreaView } from 'react-navigation';
import axios from 'axios'

import routes from '../../helpers/routes';
import SimpleTabs from '../../components/SimpleTabs';
import TrackSessions from './TrackSessions';
import TrackActivity from './TrackActivity';
import TrackCredits from './TrackCredits';
import useRefreshScreen from '../../helpers/useRefreshScreen';
import trackStore from '../sessions/trackStore';
import TrackInfo from './TrackInfo';
import HeaderMore from '../../components/core/header/HeaderMore';
import Loading from '../../components/Loading';
import { useEffect } from 'react';
import { captureException } from 'sentry-expo';


const TrackShowScreen = ({ navigation }) => {
  const loadOnInit = !navigation.getParam('dontLoadOnInit', false)
  const [loading, setLoading] = useState(loadOnInit)
  const [track, setTrack] = useState(navigation.getParam('track', {}))
  const [refreshing, setRefreshing] = useState(false)

  const fetchTrack = async () => {
    try{
      const { data } = await axios.get(routes.api.tracks.show(track.id))
      if(data.updated_at !== track.updated_at){
        setTrack(data)
      }
    }
    catch(err){
      captureException(err)
    }
    setRefreshing(false)
    setLoading(false)
    navigation.setParams({ loading: false })
  }
  
  useEffect(() => {
    if (loadOnInit && loading){
      navigation.setParams({ loading: true })
    }
    const tim = setInterval(fetchTrack, 4000)
    return () => clearTimeout(tim)
  }, [track.id, loading])

  useRefreshScreen(navigation, fetchTrack, false, [track.id])
  if(loading){
    return <Loading />
  }
  const refreshableTab = (component, action) => {
    return <ScrollView
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={action}
        />
      }
      contentContainerStyle={{flexGrow: 1}}
    >
      {component}
    </ScrollView>
  }

  const activity = () => <TrackActivity trackID={track.id} />,
    sessionsTabs = () => <TrackSessions trackID={track.id} navigation={navigation} />,
    credits = () => refreshableTab(<TrackCredits track={track} />, fetchTrack),
    info = () => refreshableTab(<TrackInfo track={track} />, fetchTrack);

  return (
      <SimpleTabs 
        tabs={[
          {
            title: 'Feed',
            elem: activity,
          },
          {
            title: 'Sessions',
            elem: sessionsTabs,
          },
          {
            title: 'Credits',
            elem: credits,
          },
          {
            title: 'Info',
            elem: info,
          },
        ]} 
      />
  )
};

export default TrackShowScreen