Merge pull request #64 from potproject/development-2.0.0.beta8

Beta8

App.js

@@ -32,6 +32,7 @@ import theme from "./app/themes/default";
 import AuthorizeScreen from "./app/screens/AuthorizeScreen";
 import NavigationService from "./app/services/NavigationService";
 import SettingsScreen from "./app/screens/SettingsScreen";
+import SettingsThemesScreen from "./app/screens/SettingsThemesScreen";
 const Stack = createStackNavigator();
 
 export default function App(props) {
@@ -86,6 +87,7 @@ export default function App(props) {
                                     <Stack.Screen name={RouterName.Favourites} component={TimelineScreen} options={{ headerShown: false }} />
                                     <Stack.Screen name={RouterName.Bookmarks} component={TimelineScreen} options={{ headerShown: false }} />
                                     <Stack.Screen name={RouterName.Settings} component={SettingsScreen} options={{ title: t("settings_title")}} />
+                                    <Stack.Screen name={RouterName.Settings_Themes} component={SettingsThemesScreen} options={{ title: t("setting_themes")}} />
                                     <Stack.Screen name={RouterName.Toot} component={TootScreen} options={{ headerShown: false }} />
                                     <Stack.Screen name={RouterName.Search} component={SearchScreen} options={{ headerShown: false }} />
                                 </Stack.Navigator>

README.md

@@ -44,6 +44,7 @@ expo publish
 -   Streaming API Support
 -   i18n (EN/JP)
 -   Custom Emoji Support
+-   Multi Theme (Dark Mode And more...)
 
 ## Future
 
@@ -53,7 +54,7 @@ expo publish
 -   Misskey Support
 -   Movie Support
 -   Media upload Support
--   Multi Theme (Dark Mode And more...)
+-   Expo Push Notification
 
 ## ScreenShots
 

app.json

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

app/actions/actioncreators/appinit.js

@@ -3,7 +3,6 @@ import * as Config from "../actiontypes/config";
 import { AsyncStorage } from "react-native";
 import { getMinMaxId } from "../../util/manageid";
 import * as Session from "../../util/session";
-//import Font from "../../services/font";
 
 import * as CONST_API from "../../constants/api";
 import Networking from "../../services/Networking";
@@ -12,25 +11,28 @@ import * as CurrentUser from "../actiontypes/currentuser";
 import * as RouterName from "../../constants/RouterName";
 import NavigationService from "../../services/NavigationService";
 import * as AppInit from "../actiontypes/appinit";
+import { settingTheme } from "../../util/theme";
 
 const AUTO_LOGIN = true; // Auto Login
 
-export function appInit() {
+export function appInit(updateTheme) {
     return async dispatch => {
-
-        //config init load
+        // config init load
         let configstr = await AsyncStorage.getItem("config");
         let config = JSON.parse(configstr);
         if (config !== null) {
             await dispatch({ type: Config.CONFIG_LOAD, config });
+            // Theme init
+            if(typeof config.theme !== "undefined"){
+                settingTheme(updateTheme, config.theme)
+            }
         }
         //Session init
         await Session.init();
-        //fontload init
-        //await Font.init();
 
         //ここにトークンが生きてるか判断させる
         let { domain, access_token } = await Session.getDomainAndToken();
+        console.log(access_token);
         if (AUTO_LOGIN && access_token && domain) {
             try {
                 let user_credentials = await Networking.fetch(domain, CONST_API.GET_CURRENT_USER, null, {}, access_token);

app/actions/actioncreators/config.js

@@ -57,3 +57,7 @@ export function setTimelinePerform(value) {
         NavigationService.resetAndNavigate({ name: RouterName.Main });
     };
 }
+
+export function setTheme(value){
+    return { type: Config.CHANGE_THEME, theme: value }; 
+}

app/actions/actioncreators/mastorow.js

@@ -53,4 +53,21 @@ export function bookmark(id, tootid, bookmarked) {
         }
         return;
     };
+}
+
+export function follow(id, followed) {
+    return async dispatch => {
+        try {
+            dispatch({ type: Mastorow.FOLLOW_MASTOROW, id, followed });
+            let { domain, access_token } = await Session.getDomainAndToken();
+            let POST_URL = followed ? CONST_API.POST_FOLLOWED : CONST_API.POST_UNFOLLOWED;
+            let { following: followedResult } = await Networking.fetch(domain, POST_URL, id, {}, access_token);
+            console.log("follow:", id, followed, "result:", followedResult);
+        } catch (e) {
+            DropDownHolder.error(t("messages.network_error"), e.message);
+            dispatch({ type: Mastorow.FOLLOW_MASTOROW, id, followed: !followed });
+            return;
+        }
+        return;
+    };
 }

app/actions/actiontypes/config.js

@@ -6,6 +6,8 @@ export const INVISIBLE_SETTING = "INVISIBLE_SETTING";
 export const SMART_MODE = "SMART_MODE";
 export const TIMELINE_PERFORM = "TIMELINE_PERFORM";
 
+export const CHANGE_THEME = "CHANGE_THEME";
+
 export const CONFIG_LOAD = "CONFIG_LOAD";
 
 export const CONFIG_RESET = "CONFIG_RESET";

app/actions/actiontypes/mastorow.js

@@ -1,3 +1,4 @@
 export const BOOST_MASTOROW = "BOOST_MASTOROW";
 export const FAVOURITE_MASTOROW = "FAVOURITE_MASTOROW";
 export const BOOKMARK_MASTOROW = "BOOKMARK_MASTOROW";
+export const FOLLOW_MASTOROW = "FOLLOW_MASTOROW";

app/components/MastoList.js

@@ -5,7 +5,7 @@ import { Divider } from "react-native-elements";
 import ImageViewer from "react-native-image-zoom-viewer";
 import MastoRow from "../components/MastoRow";
 import { hide as HideAction, deleting as DeleteAction } from "../actions/actioncreators/main";
-import { boost as BoostAction, favourite as FavouriteAction, bookmark as BookmarkAction } from "../actions/actioncreators/mastorow";
+import { boost as BoostAction, favourite as FavouriteAction, bookmark as BookmarkAction, follow as FollowAction } from "../actions/actioncreators/mastorow";
 import { open as openImageViewerAction, close as closeImageViewerAction } from "../actions/actioncreators/imageviewer";
 import * as RouterName from "../constants/RouterName";
 
@@ -33,12 +33,14 @@ function MastoList({ navigation, type }) {
     const actions = {
         ReplyAction: (id, tootid, user, acct, image, body) => NavigationService.navigate({ name: RouterName.Toot, params: { id, tootid, user, acct, image, body }}),
 
-
         BoostAction: (id, tootid, boosted) => {dispatch(BoostAction(id, tootid, boosted))},
         FavouriteAction: (id, tootid, favourited) => {dispatch(FavouriteAction(id, tootid, favourited))},
         BookmarkAction: (id, tootid, bookmarked) => {dispatch(BookmarkAction(id, tootid, bookmarked))},
         HideAction: (id) => {dispatch(HideAction(id))},
         DeleteAction: (id) => {dispatch(DeleteAction(id))},
+
+        followAction: (id, followed) => {dispatch(FollowAction(id,followed))},
+
         openImageViewerAction: (media, index) => {dispatch(openImageViewerAction(media, index))},
         closeImageViewerAction: () => {dispatch(closeImageViewerAction())},
     };

app/components/MastoRowImage.js

@@ -1,13 +1,20 @@
 import React, { memo } from "react";
 import { Image, View, StyleSheet, TouchableOpacity } from "react-native";
 import PropTypes from "prop-types";
+import {open as openUrl} from "../util/url";
 
 function MastoRowImage({style, mediaAttachments, sensitive, openImageViewer, closeImageViewerAction}){
     return (
         <View style={[styles.container,style]}>
             { mediaAttachments.map((media, i) => {
                 return (
-                    <TouchableOpacity key={i} onPress={() => openImageViewer(mediaAttachments, i)}>
+                    <TouchableOpacity key={i} onPress={() => {
+                        if (media.type !== "image"){
+                            openUrl(media.url);
+                            return;
+                        }
+                        openImageViewer(mediaAttachments, i)
+                        }}>
                         <Image source={{uri: media.preview_url}} style={styles.photo} blurRadius={sensitive ? 20 : 0}/>
                     </TouchableOpacity>
                 );

app/components/NotificationsList.js

@@ -5,7 +5,7 @@ import { Divider } from "react-native-elements";
 import ImageViewer from "react-native-image-zoom-viewer";
 
 import { hide as HideAction, deleting as DeleteAction } from "../actions/actioncreators/main";
-import { boost as BoostAction, favourite as FavouriteAction, bookmark as BookmarkAction } from "../actions/actioncreators/mastorow";
+import { boost as BoostAction, favourite as FavouriteAction, bookmark as BookmarkAction, follow as FollowAction } from "../actions/actioncreators/mastorow";
 
 import NavigationService from "../services/NavigationService";
 import * as RouterName from "../constants/RouterName";
@@ -34,6 +34,9 @@ function NotificationsList({ type }) {
         BookmarkAction: (id, tootid, bookmarked) => {dispatch(BookmarkAction(id, tootid, bookmarked))},
         HideAction: (id) => {dispatch(HideAction(id))},
         DeleteAction: (id) => {dispatch(DeleteAction(id))},
+
+        FollowAction: (id, followed) => {dispatch(FollowAction(id,followed))},
+
         openImageViewerAction: (media, index) => {dispatch(openImageViewerAction(media, index))},
         closeImageViewerAction: () => {dispatch(closeImageViewerAction())},
     };

app/components/NotificationsRow.js

@@ -10,6 +10,7 @@ import { NEW_NOTIFICATION_TYPE } from "../util/notification";
 
 import { FontAwesome } from "@expo/vector-icons";
 import { ThemeContext, Image } from "react-native-elements";
+import Follow from "./item/Follow";
 
 const MAX_DISPLAY_IMAGE = 8;
 
@@ -36,9 +37,7 @@ const NotificationsRow = ({ item, current, actions }) => {
                             }
                             emojis = Object.assign(emojis, emojisArrayToObject(account.emojis));
                             return (
-                                <View key={i} style={styles.photoMargin}>
-                                    <Image style={styles.photo} source={{uri: account.avatar}} />
-                                </View>
+                                <Image key={i} style={styles.photo} source={{uri: account.avatar}} />
                             );
                         })
                         }
@@ -61,9 +60,7 @@ const NotificationsRow = ({ item, current, actions }) => {
                             }
                             emojis = Object.assign(emojis, emojisArrayToObject(account.emojis));
                             return (
-                                <View key={i} style={styles.photoMargin}>
-                                    <Image style={styles.photo} source={{uri: account.avatar}} />
-                                </View>
+                                <Image key={i} style={styles.photo} source={{uri: account.avatar}} />
                             );
                         })
                         }
@@ -89,13 +86,12 @@ const NotificationsRow = ({ item, current, actions }) => {
         return (
             <View key={id} style={[styles.container,{backgroundColor: theme.customColors.charBackground}]}>
                 <View style={styles.favAndBoostContainer}>
-                    <View style={{flex:0.18, borderWidth:0, alignItems:"flex-end"}}>
-                        <FontAwesome name={"user"} size={22} color={theme.customColors.item.boost} style={{marginRight:5}}/>
+                    <View style={{flex:0.18, flexDirection:"row-reverse"}}>
+                        <FontAwesome name={"user"} size={22} color={theme.customColors.item.boost} style={styles.icon}/>
                     </View>
                     <View style={{flex:0.82, flexDirection: "row", color: theme.colors.grey0}}>
-                        <View style={styles.photoMargin}>
-                            <Image style={styles.photo} source={{uri: account.avatar}} />
-                        </View>
+                        <Image style={styles.photo} source={{uri: account.avatar}} />
+                        <Follow id={account.id} style={styles.followIcon} onFollow={actions.FollowAction}/>
                     </View>
                 </View>
                 <View style={styles.followMessage}>
@@ -147,14 +143,12 @@ const styles = StyleSheet.create({
         flexDirection: "row",
     },
     photo: {
+        marginLeft: 2,
+        marginRight: 2,
         width: 30,
         height: 30,
         borderRadius: 4,
     },
-    photoMargin: {
-        marginLeft: 2,
-        marginRight: 2
-    },
     count: {
       fontSize: 16,
       fontWeight: "bold",
@@ -194,6 +188,10 @@ const styles = StyleSheet.create({
         fontWeight: "normal",
         fontSize: 16
     },
+    followIcon: {
+        flex: 1,
+        paddingLeft: 5,
+    }
 });
 
 export default NotificationsRow;

app/components/TootButton.js

@@ -1,8 +1,9 @@
-import * as React from "react";
+import React, { useContext } from "react";
 import { View, StyleSheet } from "react-native";
-import { Icon } from "react-native-elements";
+import { Icon, ThemeContext } from "react-native-elements";
 
 export default function TootButton({onPress}){
+    const { theme } = useContext(ThemeContext);
     return(
         <View style={styles.shadow}>
             <Icon
@@ -11,7 +12,7 @@ export default function TootButton({onPress}){
                 size={28}
                 name='pencil'
                 type='font-awesome'
-                color='#f50'
+                color={theme.customColors.tootButton}
                 onPress={onPress}
             />
         </View>

app/components/item/Action.js

@@ -1,12 +1,15 @@
-import React, { memo } from "react";
+import React, { memo, useContext } from "react";
 import { TouchableOpacity, Clipboard, View, StyleSheet } from "react-native";
 import { FontAwesome } from "@expo/vector-icons";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import t from "../../services/I18n";
 import {open as openUrl} from "../../util/url";
 import { bodyFormat, bodyExtractionUrl } from "../../util/parser";
 import PropTypes from "prop-types";
+import { ThemeContext } from "react-native-elements";
+
 function Action({id, tootid, style, url, account_url, user, acct,image, body, myself, onReply, onHide, onDeleting}){
+    const { theme } = useContext(ThemeContext);
     const { showActionSheetWithOptions } = useActionSheet();
     const onOpenActionSheet = () => {
         let cancelButtonIndex = 6;
@@ -57,7 +60,7 @@ function Action({id, tootid, style, url, account_url, user, acct,image, body, my
     return (
         <View style={[style, styles.container]}>
             <TouchableOpacity style={style} onPress={() => onOpenActionSheet()}>
-                <FontAwesome name="ellipsis-h" size={20} color="#8899a6" />
+                <FontAwesome name="ellipsis-h" size={20} color={theme.customColors.item.none} />
             </TouchableOpacity>
             <View style={styles.container} />
         </View>

app/components/item/Follow.js

@@ -0,0 +1,55 @@
+import React, { useContext, useState, memo } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
+import PropTypes from "prop-types";
+
+import { ThemeContext } from "react-native-elements";
+import t from "../../services/I18n";
+import { getRelationship } from "../../util/relationships";
+
+function Follow({id, style, onFollow}){
+    const [stateFollowed, useStateFollowed] = useState(false);
+    const { theme } = useContext(ThemeContext);
+    const [load, useLoad] = useState(false);
+    if(!load){
+        useLoad(true);
+        getRelationship(id).then(({data, error}) => {
+            if(error === null && data.following){
+                useStateFollowed(true);
+            }
+        }
+        );
+    }
+    return (
+        <View style={[style, styles.container]}>
+            <TouchableOpacity style={style} onPress={() => {
+                useStateFollowed(!stateFollowed);
+                onFollow(id, !stateFollowed);
+            }}>
+                <Text style={styles.text}>
+                    <FontAwesome name={stateFollowed ? "user" : "user-plus"} size={26} color={stateFollowed ? theme.colors.primary : theme.customColors.item.none} />
+        <Text style={[{color: stateFollowed ? theme.colors.primary : theme.customColors.item.none}, styles.inlineText]}>{" "}{stateFollowed ? t("notifications.unfollow") : t("notifications.follow")}</Text>
+                </Text>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+Follow.propTypes = {
+    id: PropTypes.string,
+    userid: PropTypes.string,
+    style: PropTypes.object,
+    onFollow: PropTypes.func
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    text: {
+        fontSize: 16,
+        fontWeight: "bold",
+    },
+});
+
+export default Follow;

app/constants/RouterName.js

@@ -17,4 +17,5 @@ export const Timeline_Setting = "Timeline_Setting";
 export const Search = "Search";
 export const Favourites = "Favourites";
 export const Bookmarks = "Bookmarks";
-export const Settings = "Settings";
+export const Settings = "Settings";
+export const Settings_Themes = "Settings_Themes";