Clean up props

src/stacks/Local.jsx

@@ -5,8 +5,8 @@ import TimelinesCombined from 'src/stacks/common/TimelinesCombined'
 export default function Local () {
   return (
     <TimelinesCombined
-      page='Local'
-      route={[
+      name='Local'
+      content={[
         { title: '关注', timeline: { endpoint: 'home' } },
         { title: '本站', timeline: { endpoint: 'public', local: true } }
       ]}

src/stacks/Notifications.jsx

@@ -26,7 +26,9 @@ export default function Notifications () {
       }}
     >
       <Stack.Screen name='Notifications'>
-        {props => <Timeline endpoint='notifications' {...props} />}
+        {props => (
+          <Timeline timeline={{ endpoint: 'notifications' }} {...props} />
+        )}
       </Stack.Screen>
     </Stack.Navigator>
   )

src/stacks/Public.jsx

@@ -5,8 +5,8 @@ import TimelinesCombined from 'src/stacks/common/TimelinesCombined'
 export default function Public () {
   return (
     <TimelinesCombined
-      page='Public'
-      route={[
+      name='Public'
+      content={[
         { title: '跨站', timeline: { endpoint: 'public' } },
         { title: '他站', timeline: { remote: true } }
       ]}

src/stacks/common/Timeline.jsx

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import TootTimeline from 'src/components/TootTimeline'
 import { fetch, getToots, getStatus } from './timelineSlice'
 
-const Default = ({ toots, status, remote, endpoint, local }) => {
+const Default = ({ dispatch, toots, status, timeline }) => {
   return (
     <>
       <FlatList
@@ -14,15 +14,11 @@ const Default = ({ toots, status, remote, endpoint, local }) => {
         keyExtractor={({ id }) => id}
         renderItem={TootTimeline}
         onRefresh={() =>
-          dispatch(
-            fetch({ remote, endpoint, local, id: toots[0].id, newer: true })
-          )
+          dispatch(fetch({ ...timeline, id: toots[0].id, newer: true }))
         }
         refreshing={status === 'loading'}
         onEndReached={() =>
-          dispatch(
-            fetch({ remote, endpoint, local, id: toots[toots.length - 1].id })
-          )
+          dispatch(fetch({ ...timeline, id: toots[toots.length - 1].id }))
         }
         onEndReachedThreshold={0.5}
         style={{ height: '100%', width: '100%' }}
@@ -32,7 +28,7 @@ const Default = ({ toots, status, remote, endpoint, local }) => {
   )
 }
 
-const Notifications = ({ toots, status, endpoint }) => {
+const Notifications = ({ dispatch, toots, status, timeline }) => {
   return (
     <>
       <FlatList
@@ -41,13 +37,15 @@ const Notifications = ({ toots, status, endpoint }) => {
         renderItem={({ item }) => (
           <TootTimeline item={item} notification={true} />
         )}
-        // onRefresh={() =>
-        //   dispatch(fetch({ endpoint, id: toots[0].status.id, newer: true }))
-        // }
-        // refreshing={status === 'loading'}
-        // onEndReached={() =>
-        //   dispatch(fetch({ endpoint, id: toots[toots.length - 1].status.id }))
-        // }
+        onRefresh={() =>
+          dispatch(fetch({ ...timeline, id: toots[0].id, newer: true }))
+        }
+        refreshing={status === 'loading'}
+        onEndReached={() =>
+          dispatch(
+            fetch({ ...timeline, id: toots[toots.length - 1].id })
+          )
+        }
         onEndReachedThreshold={0.5}
         style={{ height: '100%', width: '100%' }}
       />
@@ -56,18 +54,14 @@ const Notifications = ({ toots, status, endpoint }) => {
   )
 }
 
-export default function Timeline ({ remote, endpoint, local }) {
+export default function Timeline ({ timeline }) {
   const dispatch = useDispatch()
-  const toots = useSelector(state =>
-    getToots(state)({ remote, endpoint, local })
-  )
-  const status = useSelector(state =>
-    getStatus(state)({ remote, endpoint, local })
-  )
+  const toots = useSelector(state => getToots(state)(timeline))
+  const status = useSelector(state => getStatus(state)(timeline))
 
   useEffect(() => {
     if (status === 'idle') {
-      dispatch(fetch({ remote, endpoint, local }))
+      dispatch(fetch(timeline))
     }
   }, [status, dispatch])
 
@@ -75,18 +69,22 @@ export default function Timeline ({ remote, endpoint, local }) {
   if (status === 'error') {
     content = <Text>Error message</Text>
   } else {
-    if (endpoint === 'notifications') {
+    if (timeline.endpoint === 'notifications') {
       content = (
-        <Notifications toots={toots} status={status} endpoint={endpoint} />
+        <Notifications
+          dispatch={dispatch}
+          toots={toots}
+          status={status}
+          timeline={timeline}
+        />
       )
     } else {
       content = (
         <Default
+          dispatch={dispatch}
           toots={toots}
           status={status}
-          remote={remote}
-          endpoint={endpoint}
-          local={local}
+          timeline={timeline}
         />
       )
     }
@@ -96,7 +94,9 @@ export default function Timeline ({ remote, endpoint, local }) {
 }
 
 Timeline.propTypes = {
-  remote: PropTypes.bool,
-  endpoint: PropTypes.string,
-  local: PropTypes.bool
+  timeline: PropTypes.exact({
+    remote: PropTypes.bool,
+    endpoint: PropTypes.string,
+    local: PropTypes.bool
+  }).isRequired
 }

src/stacks/common/TimelinesCombined.jsx

@@ -9,7 +9,7 @@ import Timeline from './Timeline'
 
 const Stack = createNativeStackNavigator()
 
-export default function TimelinesCombined ({ page, route }) {
+export default function TimelinesCombined ({ name, content }) {
   const [segment, setSegment] = useState(0)
   const [renderHeader, setRenderHeader] = useState(false)
 
@@ -31,7 +31,7 @@ export default function TimelinesCombined ({ page, route }) {
         headerCenter: () =>
           renderHeader ? (
             <SegmentedControl
-              values={[route[0].title, route[1].title]}
+              values={[content[0].title, content[1].title]}
               selectedIndex={segment}
               onChange={e => {
                 setSegment(e.nativeEvent.selectedSegmentIndex)
@@ -48,7 +48,7 @@ export default function TimelinesCombined ({ page, route }) {
           ) : null
       }}
     >
-      <Stack.Screen name={page}>
+      <Stack.Screen name={name}>
         {props => (
           <Animated.View
             style={{
@@ -59,10 +59,10 @@ export default function TimelinesCombined ({ page, route }) {
             {...props}
           >
             <View style={{ width: Dimensions.get('window').width }}>
-              <Timeline {...route[0].timeline} />
+              <Timeline timeline={content[0].timeline} />
             </View>
             <View style={{ width: Dimensions.get('window').width }}>
-              <Timeline {...route[1].timeline} />
+              <Timeline timeline={content[1].timeline} />
             </View>
           </Animated.View>
         )}
@@ -72,10 +72,11 @@ export default function TimelinesCombined ({ page, route }) {
 }
 
 TimelinesCombined.propTypes = {
-  route: PropTypes.arrayOf(
+  name: PropTypes.string.isRequired,
+  content: PropTypes.arrayOf(
     PropTypes.exact({
       title: PropTypes.string.isRequired,
-      timeline: PropTypes.exact(Timeline.propTypes).isRequired
+      timeline: Timeline.propTypes.timeline
     })
   ).isRequired
 }