Updates

src/@types/mastodon.d.ts

@@ -187,7 +187,7 @@ declare namespace mastodon {
   type Status = {
     // Base
     id: string
-    urk: string
+    url: string
     created_at: string
     account: Account
     content: string

src/components/Toot/Actions.tsx

@@ -1,12 +1,22 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
-import { Modal, Pressable, StyleSheet, Text, View } from 'react-native'
+import {
+  ActionSheetIOS,
+  Clipboard,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native'
 import { useDispatch } from 'react-redux'
 import { Feather } from '@expo/vector-icons'
 
 import action from './action'
+import Success from './Responses/Success'
 
 export interface Props {
   id: string
+  url: string
   replies_count: number
   reblogs_count: number
   reblogged?: boolean
@@ -17,6 +27,7 @@ export interface Props {
 
 const Actions: React.FC<Props> = ({
   id,
+  url,
   replies_count,
   reblogs_count,
   reblogged,
@@ -27,8 +38,19 @@ const Actions: React.FC<Props> = ({
   const dispatch = useDispatch()
   const [modalVisible, setModalVisible] = useState(false)
 
+  const [successMessage, setSuccessMessage] = useState()
+  useEffect(() => {
+    setTimeout(() => {
+      setSuccessMessage(undefined)
+      console.log('ajwieorjawioejri')
+    }, 2000)
+    return () => {}
+  }, [successMessage])
+
   return (
     <>
+      <Success message={successMessage} />
+
       <View style={styles.actions}>
         <Pressable style={styles.action}>
           <Feather name='message-circle' color='gray' />
@@ -96,7 +118,38 @@ const Actions: React.FC<Props> = ({
           onPress={() => setModalVisible(false)}
         >
           <View style={styles.modalSheet}>
-            <Text>分享，复制链接，（删除）</Text>
+            <Pressable
+              onPress={() =>
+                ActionSheetIOS.showShareActionSheetWithOptions(
+                  {
+                    url,
+                    excludedActivityTypes: [
+                      'com.apple.UIKit.activity.Mail',
+                      'com.apple.UIKit.activity.Print',
+                      'com.apple.UIKit.activity.SaveToCameraRoll',
+                      'com.apple.UIKit.activity.OpenInIBooks'
+                    ]
+                  },
+                  () => {},
+                  () => {
+                    setModalVisible(false)
+                    setSuccessMessage('分享成功！')
+                  }
+                )
+              }
+            >
+              <Text>分享</Text>
+            </Pressable>
+            <Pressable
+              onPress={() => {
+                Clipboard.setString(url)
+                // Success message
+                setModalVisible(false)
+              }}
+            >
+              <Text>复制链接</Text>
+            </Pressable>
+            <Text>（删除）</Text>
             <Text>（静音），（置顶）</Text>
             <Text>静音用户，屏蔽用户，屏蔽域名，举报用户</Text>
           </View>

src/components/Toot/Responses/Success.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from 'react'
+import { Animated, StyleSheet, Text, View } from 'react-native'
+
+export interface Props {
+  message?: string
+}
+
+const Success: React.FC<Props> = ({ message }) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current
+  useEffect(() => {
+    console.log(message)
+    if (message !== undefined) {
+      fadeIn()
+    } else {
+      fadeOut()
+    }
+  }, [message])
+
+  const fadeIn = () => {
+    // Will change fadeAnim value to 1 in 5 seconds
+    Animated.timing(fadeAnim, {
+      useNativeDriver: false,
+      toValue: 300,
+      duration: 1000
+    }).start()
+  }
+
+  const fadeOut = () => {
+    // Will change fadeAnim value to 0 in 5 seconds
+    Animated.timing(fadeAnim, {
+      useNativeDriver: false,
+      toValue: 400,
+      duration: 1000
+    }).start()
+  }
+
+  return (
+    <Animated.View
+      style={[
+        styles.success,
+        {
+          top: fadeAnim
+        }
+      ]}
+    >
+      <Text>{message}</Text>
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  success: {
+    width: '80%',
+    height: 25,
+    position: 'absolute',
+    top: 400,
+    backgroundColor: 'red',
+    zIndex: 50
+  }
+})
+
+export default Success

src/components/Toot/action.ts

@@ -17,7 +17,6 @@ const action = async ({
   stateKey: 'favourited' | 'reblogged' | 'bookmarked' | 'muted' | 'pinned'
   statePrev: boolean
 }): Promise<void> => {
-  console.log(stateKey + ' --- ' + statePrev)
   const alert = {
     title: 'This is a title',
     message: 'This is a message'
@@ -37,7 +36,6 @@ const action = async ({
 
   if (!res.body[stateKey] === statePrev) {
     dispatch(updateStatus(res.body))
-    console.log('------ ' + res.body[stateKey])
   } else {
     Alert.alert(alert.title, alert.message, [
       { text: 'OK', onPress: () => console.log('OK Pressed') }

src/components/TootTimeline.tsx

@@ -20,7 +20,7 @@ const TootTimeline: React.FC<Props> = ({ toot }) => {
 
   let actualContent = toot.reblog ? toot.reblog : toot
 
-  // const tootView = useMemo(() => {
+  const tootView = useMemo(() => {
     return (
       <View style={styles.tootTimeline}>
         {toot.reblog && (
@@ -76,6 +76,7 @@ const TootTimeline: React.FC<Props> = ({ toot }) => {
             </Pressable>
             <Actions
               id={actualContent.id}
+              url={actualContent.url}
               replies_count={actualContent.replies_count}
               reblogs_count={actualContent.reblogs_count}
               reblogged={actualContent.reblogged}
@@ -87,9 +88,9 @@ const TootTimeline: React.FC<Props> = ({ toot }) => {
         </View>
       </View>
     )
-  // }, [toot])
+  }, [toot])
 
-  // return tootView
+  return tootView
 }
 
 const styles = StyleSheet.create({

src/stacks/common/Timeline.tsx

@@ -19,7 +19,6 @@ 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(() => {
@@ -28,7 +27,6 @@ const Timeline: React.FC<{
       dispatch(fetch({ page, hashtag, list, toot, account }))
       setTimelineReady(true)
     }
-    setUpdateStatus(!updateStatus)
     return () => {
       mounted = false
     }