From 8f6c5af0fddfe30697f8404a06ce97ec01092f3a Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Sat, 24 Oct 2020 18:07:09 +0200 Subject: [PATCH] Notifications working --- src/Index.jsx | 34 +++++++++- src/components/TootTimeline.jsx | 13 +++- src/stacks/Local.jsx | 1 + src/stacks/Notifications.jsx | 34 ++++++++-- src/stacks/Public.jsx | 1 + src/stacks/common/Timeline.jsx | 90 ++++++++++++++++++------- src/stacks/common/TimelinesCombined.jsx | 4 +- src/stacks/common/store.js | 4 +- src/stacks/common/timelineSlice.js | 7 ++ 9 files changed, 150 insertions(+), 38 deletions(-) diff --git a/src/Index.jsx b/src/Index.jsx index 39f77a57..318c0410 100644 --- a/src/Index.jsx +++ b/src/Index.jsx @@ -5,6 +5,7 @@ import { enableScreens } from 'react-native-screens' enableScreens() import React from 'react' +import { Feather } from '@expo/vector-icons' import store from 'src/stacks/common/store' import { Provider } from 'react-redux' import { StatusBar } from 'expo-status-bar' @@ -21,10 +22,39 @@ export default function Index () { - + ({ + tabBarIcon: ({ focused, color, size }) => { + let name + switch (route.name) { + case 'Local': + name = 'home' + break + case 'Public': + name = 'globe' + break + case 'Post': + name = 'plus' + break + case 'Notifications': + name = 'bell' + break + case 'Me': + name = focused ? 'smile' : 'meh' + break + } + return + } + })} + tabBarOptions={{ + activeTintColor: 'black', + inactiveTintColor: 'gray', + showLabel: false + }} + > - {/* */} + diff --git a/src/components/TootTimeline.jsx b/src/components/TootTimeline.jsx index 4e15c8e5..7a1db132 100644 --- a/src/components/TootTimeline.jsx +++ b/src/components/TootTimeline.jsx @@ -5,7 +5,7 @@ import HTML from 'react-native-render-html' import relativeTime from 'src/utils/relativeTime' -export default function TootTimeline ({ item }) { +export default function TootTimeline ({ item, notification }) { return ( @@ -36,7 +36,13 @@ export default function TootTimeline ({ item }) { - {item.content ? : <>} + {notification ? ( + + ) : item.content ? ( + + ) : ( + <> + )} ) } @@ -54,7 +60,8 @@ TootTimeline.propTypes = { website: PropTypes.string }), content: PropTypes.string - }).isRequired + }).isRequired, + notification: PropTypes.bool } const styles = StyleSheet.create({ diff --git a/src/stacks/Local.jsx b/src/stacks/Local.jsx index 6342544f..e1164e16 100644 --- a/src/stacks/Local.jsx +++ b/src/stacks/Local.jsx @@ -5,6 +5,7 @@ import TimelinesCombined from 'src/stacks/common/TimelinesCombined' export default function Local () { return ( + const [renderHeader, setRenderHeader] = useState(false) + + useEffect(() => { + const nbr = setTimeout(() => setRenderHeader(true), 50) + return + }, []) + + return ( + + renderHeader ? ( + + ) : null, + headerTitle: '通知' + }} + > + + {props => } + + + ) } diff --git a/src/stacks/Public.jsx b/src/stacks/Public.jsx index 33114572..a5110b84 100644 --- a/src/stacks/Public.jsx +++ b/src/stacks/Public.jsx @@ -5,6 +5,7 @@ import TimelinesCombined from 'src/stacks/common/TimelinesCombined' export default function Public () { return ( { + return ( + <> + id} + renderItem={TootTimeline} + onRefresh={() => + dispatch( + fetch({ remote, endpoint, local, id: toots[0].id, newer: true }) + ) + } + refreshing={status === 'loading'} + onEndReached={() => + dispatch( + fetch({ remote, endpoint, local, id: toots[toots.length - 1].id }) + ) + } + onEndReachedThreshold={0.5} + style={{ height: '100%', width: '100%' }} + /> + {status === 'loading' && } + + ) +} + +const Notifications = ({ toots, status, endpoint }) => { + return ( + <> + id} + renderItem={({ item }) => ( + + )} + // 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 })) + // } + onEndReachedThreshold={0.5} + style={{ height: '100%', width: '100%' }} + /> + {status === 'loading' && } + + ) +} + export default function Timeline ({ remote, endpoint, local }) { const dispatch = useDispatch() const toots = useSelector(state => @@ -20,34 +70,26 @@ export default function Timeline ({ remote, endpoint, local }) { dispatch(fetch({ remote, endpoint, local })) } }, [status, dispatch]) - let content + let content if (status === 'error') { content = Error message } else { - content = ( - <> - id} - renderItem={TootTimeline} - onRefresh={() => - dispatch( - fetch({ remote, endpoint, local, id: toots[0].id, newer: true }) - ) - } - refreshing={status === 'loading'} - onEndReached={() => - dispatch( - fetch({ remote, endpoint, local, id: toots[toots.length - 1].id }) - ) - } - onEndReachedThreshold={0.5} - style={{ height: '100%', width: '100%' }} + if (endpoint === 'notifications') { + content = ( + + ) + } else { + content = ( + - {status === 'loading' && } - - ) + ) + } } return {content} diff --git a/src/stacks/common/TimelinesCombined.jsx b/src/stacks/common/TimelinesCombined.jsx index 1db0d4b2..19245bee 100644 --- a/src/stacks/common/TimelinesCombined.jsx +++ b/src/stacks/common/TimelinesCombined.jsx @@ -9,7 +9,7 @@ import Timeline from './Timeline' const Stack = createNativeStackNavigator() -export default function TimelinesCombined ({ route }) { +export default function TimelinesCombined ({ page, route }) { const [segment, setSegment] = useState(0) const [renderHeader, setRenderHeader] = useState(false) @@ -48,7 +48,7 @@ export default function TimelinesCombined ({ route }) { ) : null }} > - + {props => ( remote ? 'remote' : `${endpoint}${local ? '/local' : ''}` @@ -16,6 +17,8 @@ export const fetch = createAsyncThunk( async ({ remote, endpoint, local, id, newer }, { getState }) => { const instance = remote ? `${getState().instanceInfo.remote}/api/v1/timelines/public` + : endpoint === 'notifications' + ? `${getState().instanceInfo.current}/api/v1/${endpoint}` : `${getState().instanceInfo.current}/api/v1/timelines/${endpoint}` const query = { @@ -58,6 +61,10 @@ export const timelineSlice = createSlice({ remote: { toots: [], status: 'idle' + }, + notifications: { + toots: [], + status: 'idle' } }, extraReducers: {