62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import React, {useState, useEffect} from 'react'
|
|
import {observer} from 'mobx-react-lite'
|
|
import {StyleProp, StyleSheet, TextStyle, View} from 'react-native'
|
|
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
|
|
import {ErrorMessage} from '../util/error/ErrorMessage'
|
|
import {Text} from '../util/text/Text'
|
|
import {PostModel} from 'state/models/content/post'
|
|
import {useStores} from 'state/index'
|
|
|
|
export const PostText = observer(function PostText({
|
|
uri,
|
|
style,
|
|
}: {
|
|
uri: string
|
|
style?: StyleProp<TextStyle>
|
|
}) {
|
|
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 => store.log.error('Failed to fetch post', err))
|
|
}, [uri, model?.uri, store])
|
|
|
|
// loading
|
|
// =
|
|
if (!model || model.isLoading || model.uri !== uri) {
|
|
return (
|
|
<View>
|
|
<LoadingPlaceholder width="100%" height={8} style={styles.mt6} />
|
|
<LoadingPlaceholder width="100%" height={8} style={styles.mt6} />
|
|
<LoadingPlaceholder width={100} height={8} style={styles.mt6} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// error
|
|
// =
|
|
if (model.hasError) {
|
|
return (
|
|
<View>
|
|
<ErrorMessage style={style} message={model.error} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// loaded
|
|
// =
|
|
return (
|
|
<View>
|
|
<Text style={style}>{model.text}</Text>
|
|
</View>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
mt6: {marginTop: 6},
|
|
})
|