src/view/com/post/PostText.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import React, {useState, useEffect} from 'react'
import {observer} from 'mobx-react-lite'
import {ActivityIndicator, Text, View} from 'react-native'
import {PostModel} from '../../../state/models/post'
import {useStores} from '../../../state'

export const PostText = observer(function PostText({
  uri,
  style,
}: {
  uri: string
  style?: StyleProp
}) {
  const store = useStores()
  const [model, setModel] = useState<PostModel | undefined>()

  useEffect(() => {
    if (model?.uri === uri) {
      return // no change needed? or trigger refresh?
    }
    const newModel = new PostModel(store, uri)
    setModel(newModel)
    newModel.setup().catch(err => console.error('Failed to fetch post', err))
  }, [uri, model?.uri, store])

  // loading
  // =
  if (!model || model.isLoading || model.uri !== uri) {
    return (
      <View>
        <ActivityIndicator />
      </View>
    )
  }

  // error
  // =
  if (model.hasError) {
    return (
      <View>
        <Text style={style}>{model.error}</Text>
      </View>
    )
  }

  // loaded
  // =
  return (
    <View>
      <Text style={style}>{model.text}</Text>
    </View>
  )
})