Merge pull request #60 from potproject/development-2.0.0.beta7

development-2.0.0.beta7

app.json

@@ -4,7 +4,7 @@
         "description": "ikuradon - Mastodon Client App",
         "slug": "potproject-ikuradon",
         "sdkVersion": "37.0.0",
-        "version": "2.0.0.beta6",
+        "version": "2.0.0.beta7",
         "platforms": ["android", "ios"],
         "githubUrl": "https://github.com/potproject/ikuradon",
         "icon": "assets/image/icon512.png",

app/actions/actioncreators/streaming.js

@@ -1,75 +1,52 @@
-import * as Streaming from "../actiontypes/streaming";
 import * as Main from "../actiontypes/main";
-import * as CONST_API from "../../constants/api";
-import Stream from "../../services/Stream";
 import t from "../../services/I18n";
 import DropDownHolder from "../../services/DropDownHolder";
-import * as Session from "../../util/session";
 import { bodyFormat } from "../../util/parser";
+import * as Streaming from "../../actions/actiontypes/streaming"
 
-export function start(reducerType) {
+export function receive(reducerType, event, data){
     return async dispatch => {
-        try {
-            let { domain, access_token } = await Session.getDomainAndToken();
-            Stream.init(domain, CONST_API.STREAMING, access_token, reducerType);
-            await Stream.open(reducerType);
-            DropDownHolder.success(t("messages.streaming_enabled"));
-            dispatch({ type: Streaming.STREAM_START, reducerType });
-            Stream.receive(streamMessage => {
-                if (streamMessage.event === "update" && streamMessage.payload) {
-                    dispatch({ type: Main.NEW_UPDATE_MASTOLIST, data: [JSON.parse(streamMessage.payload)], reducerType, streaming: true });
-                } else if (streamMessage.event === "notification" && streamMessage.payload) {
-                    let data = JSON.parse(streamMessage.payload);
-                    let name = data.account.display_name !== "" ? data.account.display_name : data.account.username;
-                    let title = "";
-                    let message = "";
-                    switch (data.type) {
-                        case "follow":
-                            title = name + t("notifications.followed");
-                            message = null;
-                            break;
-                        case "favourite":
-                            title = name + t("notifications.favourited");
-                            message = bodyFormat(data.status.content);
-                            break;
-                        case "reblog":
-                            title = name + t("notifications.boosted");
-                            message = bodyFormat(data.status.content);
-                            break;
-                        case "mention":
-                            title = name + t("notifications.mentioned");
-                            message = bodyFormat(data.status.content);
-                            break;
-                        default:
-                            return;
-                    }
-                    DropDownHolder.info(title, message);
-                    dispatch({ type: Main.NEW_UPDATE_MASTOLIST, data: [data], reducerType: "notifications", streaming: true });
-                } else if (streamMessage.event === "delete" && streamMessage.payload) {
-                    //いつか実装します
+        switch(event){
+            case "update":
+                dispatch({ type: Main.NEW_UPDATE_MASTOLIST, data: [data], reducerType, streaming: true });
+                break;
+            case "notification":
+                let name = data.account.display_name !== "" ? data.account.display_name : data.account.username;
+                let title = "";
+                let message = "";
+                switch (data.type) {
+                    case "follow":
+                        title = name + t("notifications.followed");
+                        message = null;
+                        break;
+                    case "favourite":
+                        title = name + t("notifications.favourited");
+                        message = bodyFormat(data.status.content);
+                        break;
+                    case "reblog":
+                        title = name + t("notifications.boosted");
+                        message = bodyFormat(data.status.content);
+                        break;
+                    case "mention":
+                        title = name + t("notifications.mentioned");
+                        message = bodyFormat(data.status.content);
+                        break;
+                    default:
+                        return;
                 }
-            }, reducerType);
-        } catch (e) {
-            DropDownHolder.error(t("messages.streaming_failed"), e.message);
-            dispatch({ type: Streaming.STREAM_STOP, reducerType });
-            return;
+                DropDownHolder.info(title, message);
+                dispatch({ type: Main.NEW_UPDATE_MASTOLIST, data: [data], reducerType: "notifications", streaming: true });    
+                break;
+            case "delete":
+                break;
         }
-    };
+    }
 }
 
-export function stop(reducerType) {
-    return async dispatch => {
-        try {
-            let closeCode = await Stream.close(reducerType);
-            if (closeCode < 1000 && closeCode > 1015) {
-                //不明な切断
-                return;
-            }
-            DropDownHolder.info(t("messages.streaming_disabled"));
-        } catch (e) {
-            DropDownHolder.error(t("messages.streaming_failed"));
-            return;
-        }
-        dispatch({ type: Streaming.STREAM_STOP, reducerType });
-    };
+export function stop(reducerType){
+    return { type: Streaming.STREAM_STOP, reducerType };
 }
+
+export function start(reducerType){
+    return { type: Streaming.STREAM_START, reducerType };
+}

app/components/MastoList.js

@@ -47,6 +47,7 @@ function MastoList({ navigation, type }) {
             <FlatList
                 keyExtractor={data => data.id}
                 data={listdata.data}
+                extraData={listdata.data}
                 refreshControl={
                     <RefreshControl 
                         enabled={!streamingType} 

app/components/NotificationsRow.js

@@ -25,8 +25,9 @@ const NotificationsRow = ({ item, current, actions }) => {
             <View key={id} style={[styles.container,{backgroundColor: theme.customColors.charBackground}]}>
                 { boostAccounts.length > 0 &&
                 <View style={styles.favAndBoostContainer}>
-                    <View style={{flex:0.18, borderWidth:0, alignItems:"flex-end"}}>
-                        <FontAwesome name={"retweet"} size={22} color={theme.customColors.item.boost} style={{marginRight:5}}/>
+                    <View style={{flex:0.18, flexDirection: "row-reverse"}}>
+                        <FontAwesome name={"retweet"} size={22} color={theme.customColors.item.boost} style={styles.icon}/>
+                        <Text style={[{color: theme.colors.grey0},styles.count]}>{boostAccounts.length}</Text>
                     </View>
                     <View style={{flex:0.82, flexDirection: "row", color: theme.colors.grey0}}>
                         {boostAccounts.map((account, i) => {
@@ -49,8 +50,9 @@ const NotificationsRow = ({ item, current, actions }) => {
                 }
                 { favouriteAccounts.length > 0 &&
                 <View style={styles.favAndBoostContainer}>
-                    <View style={{flex:0.18, borderWidth:0, alignItems:"flex-end"}}>
-                        <FontAwesome name={"star"} size={22} color={theme.customColors.item.favourite} style={{marginRight:5}}/>
+                    <View style={{flex:0.18, flexDirection: "row-reverse"}}>
+                        <FontAwesome name={"star"} size={22} color={theme.customColors.item.favourite} style={styles.icon}/>
+                        <Text style={[{color: theme.colors.grey0},styles.count]}>{favouriteAccounts.length}</Text>
                     </View>
                     <View style={{flex:0.82, flexDirection: "row", color: theme.colors.grey0}}>
                         {favouriteAccounts.map((account, i) => {
@@ -153,6 +155,19 @@ const styles = StyleSheet.create({
         marginLeft: 2,
         marginRight: 2
     },
+    count: {
+      fontSize: 16,
+      fontWeight: "bold",
+      marginRight: 5,
+      alignSelf: "center",
+
+    },
+    icon:{
+        width:25,
+        height:25,
+        marginRight: 5,
+        alignSelf: "center"
+    },
     followMessage: {
         flex: 1,
         flexDirection: "row",

app/components/TimelineStreamingButton.js

@@ -1,20 +1,79 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef, useEffect } from "react";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { FontAwesome } from "@expo/vector-icons";
-import { useDispatch } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 
 import { ThemeContext } from "react-native-elements";
+import { start, stop, receive } from "../actions/actioncreators/streaming";
+import { STREAMING } from "../constants/api";
 
-import { start, stop } from "../actions/actioncreators/streaming";
+const CurrentUserReducerSelector = state => state.currentUserReducer;
 
 export default function TimelineStreamingButton({ type }){
     const dispatch = useDispatch();
+    const {instance, access_token} = useSelector(CurrentUserReducerSelector);
     const { theme } = useContext(ThemeContext);
     const [enabled, useEnabled] = useState(false);
+    const webSocket = useRef(null);
     const streamSwitch = () => {
-        !enabled ? dispatch(start(type)) : dispatch(stop(type));
         useEnabled(!enabled);
     };
+    useEffect(() => {
+        if(enabled && instance){
+            // ON
+            let stream;
+            switch (type) {
+                case "federal":
+                    stream = "public";
+                    break;
+                case "local":
+                    stream = "public:local";
+                    break;
+                case "home":
+                default:
+                    stream = "user";
+                    break;
+            }
+            let url = instance.urls.streaming_api + STREAMING.url + "?access_token=" + access_token + "&stream=" + stream;
+            webSocket.current = new WebSocket(url);
+            webSocket.current.onopen = () => {
+                // connection opened
+                console.log("[WS] OPEN:" + type);
+              };
+            webSocket.current.onmessage = (message) => {
+                let data = JSON.parse(message.data);
+                if(data !== null){
+                    let {event, payload} = data;
+                    dispatch(receive(type, event, JSON.parse(payload)));
+                }
+            };
+            webSocket.current.onclose = (event) => {
+                console.log("[WS] CLOSE:" + type + " event:" + JSON.stringify(event));
+            };
+            webSocket.current.onerror = (event) => {
+                console.log("[WS] ERROR:" + type + " event:" + JSON.stringify(event));
+                dispatch(stop(type));
+                useEnabled(false);
+            };
+            dispatch(start(type));
+        }else{
+            dispatch(stop(type));
+            if(webSocket.current !== null && webSocket.current.readyState === WebSocket.OPEN){
+                webSocket.current.close();
+            }
+        }
+        return
+    },[enabled]);
+    useEffect(() => {
+        return () => {
+            // unmount
+            dispatch(stop(type));
+            if(webSocket.current !== null && webSocket.current.readyState === WebSocket.OPEN){
+                webSocket.current.close();
+                console.log("[WS] UNMOUNTCLOSE:" + type);
+            }
+        };
+      }, []);
     return (
         <View>
             <TouchableOpacity onPress={() => streamSwitch()} style={styles.view}>

package.json

@@ -46,7 +46,7 @@
         "react-native-safe-area-context": "0.7.3",
         "react-native-screens": "~2.2.0",
         "react-native-web": "~0.11.7",
-        "react-native-webview": "^9.4.0",
+        "react-native-webview": "^10.0.0",
         "react-redux": "^7.2.0",
         "redux": "^4.0.5",
         "redux-logger": "^3.0.6",

yarn.lock

@@ -6682,10 +6682,10 @@ react-native-web@~0.11.7:
     prop-types "^15.6.0"
     react-timer-mixin "^0.13.4"
 
-react-native-webview@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-9.4.0.tgz#108da34a6c7e1c032dcabc942b7e4947ca1d8028"
-  integrity sha512-BBOFUuza0p04+7fNi7TJmB0arpDJzGxHYwTCgI4vj5n/fl7u4jbm7ETp88mf7lo9lP6C6HGLo38KnEy1aXCQkg==
+react-native-webview@^10.0.0:
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-10.2.3.tgz#78aef542deaa8f97f581743c205e6a6ada73559c"
+  integrity sha512-nGAw3S/Pjy3m3Jlymr1Zrk+Cy+Vdq+jRe3wqJ68NJDUlKhQHDXK2NsQnre4HwcRtRYoJqcfqR93VXZOoU1Uoeg==
   dependencies:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"