diff --git a/src/components/Toot/Actions.tsx b/src/components/Toot/Actions.tsx index db7caaaf..ab35ba30 100644 --- a/src/components/Toot/Actions.tsx +++ b/src/components/Toot/Actions.tsx @@ -1,8 +1,9 @@ -import React from 'react' -import { Pressable, StyleSheet, Text, View } from 'react-native' +import React, { useState } from 'react' +import { Modal, Pressable, StyleSheet, Text, View } from 'react-native' +import { useDispatch } from 'react-redux' import { Feather } from '@expo/vector-icons' -import action from 'src/components/action' +import action from './action' export interface Props { id: string @@ -11,6 +12,7 @@ export interface Props { reblogged?: boolean favourites_count: number favourited?: boolean + bookmarked: boolean } const Actions: React.FC = ({ @@ -19,51 +21,119 @@ const Actions: React.FC = ({ reblogs_count, reblogged, favourites_count, - favourited + favourited, + bookmarked }) => { + const dispatch = useDispatch() + const [modalVisible, setModalVisible] = useState(false) + return ( - - - - {replies_count} - - - - {reblogs_count} - - - action({ - id, - type: 'favourite', - stateKey: 'favourited', - statePrev: favourited || false - }) - } + <> + + + + {replies_count > 0 && {replies_count}} + + + + action({ + dispatch, + id, + type: 'reblog', + stateKey: 'reblogged', + statePrev: reblogged || false + }) + } + > + + + + + action({ + dispatch, + id, + type: 'favourite', + stateKey: 'favourited', + statePrev: favourited || false + }) + } + > + + + + + action({ + dispatch, + id, + type: 'bookmark', + stateKey: 'bookmarked', + statePrev: bookmarked + }) + } + > + + + + setModalVisible(true)}> + + + + + - - {favourites_count} - - - - - + setModalVisible(false)} + > + + 分享，复制链接，（删除） + （静音），（置顶） + 静音用户，屏蔽用户，屏蔽域名，举报用户 + + + + ) } const styles = StyleSheet.create({ actions: { + width: '100%', flex: 1, flexDirection: 'row', - marginTop: 4 + marginTop: 8 }, action: { - width: '25%', + width: '20%', flexDirection: 'row', justifyContent: 'center', paddingTop: 8, paddingBottom: 8 + }, + modalBackground: { + width: '100%', + height: '100%', + backgroundColor: 'rgba(0, 0, 0, 0.75)', + flex: 1, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'flex-end' + }, + modalSheet: { + width: '100%', + height: '50%', + backgroundColor: 'white', + flex: 1 } }) diff --git a/src/components/action.ts b/src/components/Toot/action.ts similarity index 59% rename from src/components/action.ts rename to src/components/Toot/action.ts index 62ec191d..c28801b5 100644 --- a/src/components/action.ts +++ b/src/components/Toot/action.ts @@ -1,36 +1,43 @@ +import { Dispatch } from '@reduxjs/toolkit' import { Alert } from 'react-native' import client from 'src/api/client' - -export interface params { - id: string -} +import { updateStatus } from 'src/stacks/common/timelineSlice' const action = async ({ + dispatch, id, type, stateKey, statePrev }: { + dispatch: Dispatch id: string type: 'favourite' | 'reblog' | 'bookmark' | 'mute' | 'pin' stateKey: 'favourited' | 'reblogged' | 'bookmarked' | 'muted' | 'pinned' statePrev: boolean }): Promise => { + console.log(stateKey + ' --- ' + statePrev) const alert = { title: 'This is a title', message: 'This is a message' } - const res = await client({ + // ISSUE: https://github.com/tootsuite/mastodon/issues/3166 + let res = await client({ + method: 'post', + instance: 'local', + endpoint: `statuses/${id}/${statePrev ? 'un' : ''}${type}` + }) + res = await client({ method: 'post', instance: 'local', endpoint: `statuses/${id}/${statePrev ? 'un' : ''}${type}` }) if (!res.body[stateKey] === statePrev) { - // Update redux - console.log('OK!!!') + dispatch(updateStatus(res.body)) + console.log('------ ' + res.body[stateKey]) } else { Alert.alert(alert.title, alert.message, [ { text: 'OK', onPress: () => console.log('OK Pressed') } diff --git a/src/components/TootNotification.tsx b/src/components/TootNotification.tsx index f967a9a6..48f470fe 100644 --- a/src/components/TootNotification.tsx +++ b/src/components/TootNotification.tsx @@ -75,6 +75,7 @@ const TootNotification: React.FC = ({ toot }) => { reblogged={toot.status.reblogged} favourites_count={toot.status.favourites_count} favourited={toot.status.favourited} + bookmarked={toot.status.bookmarked} /> )} diff --git a/src/components/TootTimeline.tsx b/src/components/TootTimeline.tsx index af17e701..9721e557 100644 --- a/src/components/TootTimeline.tsx +++ b/src/components/TootTimeline.tsx @@ -20,7 +20,7 @@ const TootTimeline: React.FC = ({ toot }) => { let actualContent = toot.reblog ? toot.reblog : toot - const tootView = useMemo(() => { + // const tootView = useMemo(() => { return ( {toot.reblog && ( @@ -81,14 +81,15 @@ const TootTimeline: React.FC = ({ toot }) => { reblogged={actualContent.reblogged} favourites_count={actualContent.favourites_count} favourited={actualContent.favourited} + bookmarked={actualContent.bookmarked} /> ) - }, [toot]) + // }, [toot]) - return tootView + // return tootView } const styles = StyleSheet.create({ diff --git a/src/stacks/common/Timeline.tsx b/src/stacks/common/Timeline.tsx index ce41f81f..0bb3c149 100644 --- a/src/stacks/common/Timeline.tsx +++ b/src/stacks/common/Timeline.tsx @@ -19,6 +19,7 @@ const Timeline: React.FC<{ }> = ({ page, hashtag, list, toot, account, disableRefresh = false }) => { const dispatch = useDispatch() const state = useSelector((state: RootState) => state.timelines[page]) + const [updateStatus, setUpdateStatus] = useState(false) const [timelineReady, setTimelineReady] = useState(false) useEffect(() => { @@ -27,6 +28,7 @@ const Timeline: React.FC<{ dispatch(fetch({ page, hashtag, list, toot, account })) setTimelineReady(true) } + setUpdateStatus(!updateStatus) return () => { mounted = false } diff --git a/src/stacks/common/timelineSlice.ts b/src/stacks/common/timelineSlice.ts index 5649f7c5..3497bb2d 100644 --- a/src/stacks/common/timelineSlice.ts +++ b/src/stacks/common/timelineSlice.ts @@ -4,6 +4,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' +import store from 'src' import client from 'src/api/client' @@ -214,8 +215,21 @@ export const timelineSlice = createSlice({ Account_Media: timelineInitState }, reducers: { - reset: (state, action: PayloadAction) => { + reset (state, action: PayloadAction) { + //@ts-ignore state[action.payload] = timelineInitState + }, + updateStatus (state, action) { + Object.keys(state).map((page: store.TimelinePage) => { + //@ts-ignore + const index: number = state[page].toots.findIndex( + (toot: mastodon.Status) => toot.id === action.payload.id + ) + if (index !== -1) { + //@ts-ignore + state[page].toots[index] = action.payload + } + }) } }, extraReducers: builder => { @@ -252,5 +266,5 @@ export const timelineSlice = createSlice({ } }) -export const { reset } = timelineSlice.actions +export const { reset, updateStatus } = timelineSlice.actions export default timelineSlice.reducer diff --git a/tsconfig.json b/tsconfig.json index ea642720..64d9c21f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,5 +12,6 @@ "paths": { "src/*": ["src/*"] } - } + }, + "exclude": ["node_modules"] }