closes #148 : Google drive

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@buttercup/dropbox-client": "^0.1.1",
+    "@buttercup/googledrive-client": "^0.2.1",
     "@perrymitchell/react-native-prompt": "^1.1.0",
     "@tradle/react-native-http": "^2.0.0",
     "@yfuks/react-native-action-sheet": "0.0.4",

source/actions/googleDrive.js

@@ -0,0 +1,12 @@
+import { createAction } from "redux-actions";
+import {
+    GOOGLE_DRIVE_RESET_AUTH,
+    GOOGLE_DRIVE_SET_AUTHENTICATED,
+    GOOGLE_DRIVE_SET_AUTHENTICATING,
+    GOOGLE_DRIVE_SET_AUTH_TOKEN
+} from "./types.js";
+
+export const resetGoogleDriveAuth = createAction(GOOGLE_DRIVE_RESET_AUTH);
+export const setGoogleDriveAuthenticated = createAction(GOOGLE_DRIVE_SET_AUTHENTICATED);
+export const setGoogleDriveAuthenticating = createAction(GOOGLE_DRIVE_SET_AUTHENTICATING);
+export const setGoogleDriveAuthToken = createAction(GOOGLE_DRIVE_SET_AUTH_TOKEN);

source/actions/types.js

@@ -33,6 +33,11 @@ export const DROPBOX_SET_AUTHENTICATED = "dropbox/setAuthenticated";
 export const DROPBOX_SET_AUTHENTICATING = "dropbox/setAuthenticating";
 export const DROPBOX_SET_AUTH_TOKEN = "dropbox/setAuthToken";
 
+export const GOOGLE_DRIVE_RESET_AUTH = "googleDrive/resetAuthentication";
+export const GOOGLE_DRIVE_SET_AUTHENTICATED = "googleDrive/setAuthenticated";
+export const GOOGLE_DRIVE_SET_AUTHENTICATING = "googleDrive/setAuthenticating";
+export const GOOGLE_DRIVE_SET_AUTH_TOKEN = "googleDrive/setAuthToken";
+
 export const ENTRY_LOAD = "entry/load";
 export const ENTRY_NEW_CLEAR = "entry/clearNew";
 export const ENTRY_NEW_META_CLEAR = "entry/clearNewMeta";

source/components/GoogleDriveAuthButton.js

@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Cell, CellGroup } from "react-native-cell-components";
+
+class GoogleDriveAuthButton extends Component {
+    beginAuthentication() {
+        this.props.onClick();
+    }
+
+    render() {
+        const title = this.props.authenticated ? "Authenticated" : "Authenticate";
+        return (
+            <CellGroup>
+                <Cell
+                    title={title}
+                    icon={{ name: "google-drive", source: "font-awesome" }}
+                    onPress={() => this.beginAuthentication()}
+                    tintColor="#1144FF"
+                    disabled={this.props.authenticating || this.props.authenticated}
+                />
+            </CellGroup>
+        );
+    }
+}
+
+GoogleDriveAuthButton.propTypes = {
+    authenticated: PropTypes.bool.isRequired,
+    authenticating: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired
+};
+
+export default GoogleDriveAuthButton;

source/components/RemoteConnectPage.js

@@ -3,6 +3,7 @@ import { Keyboard, StyleSheet, TouchableWithoutFeedback, View } from "react-nati
 import { Cell, CellGroup, CellInput } from "react-native-cell-components";
 import PropTypes from "prop-types";
 import DropboxAuthButton from "../containers/DropboxAuthButton.js";
+import GoogleDriveAuthButton from "../containers/GoogleDriveAuthButton.js";
 import Spinner from "./Spinner.js";
 
 const styles = StyleSheet.create({
@@ -30,6 +31,8 @@ class RemoteConnectPage extends Component {
 
     render() {
         switch (this.props.archiveType) {
+            case "googleDrive":
+                return this.renderGoogleDrive();
             case "dropbox":
                 return this.renderDropbox();
             case "webdav":
@@ -44,6 +47,28 @@ class RemoteConnectPage extends Component {
         }
     }
 
+    renderGoogleDrive() {
+        return (
+            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+                <View style={styles.container}>
+                    <View>
+                        <GoogleDriveAuthButton />
+                        <CellGroup>
+                            <Cell
+                                title="Connect"
+                                icon="cloud"
+                                onPress={() => this.submit()}
+                                tintColor="#1144FF"
+                                disabled={!this.props.googledriveAuthenticated}
+                            />
+                        </CellGroup>
+                    </View>
+                    <Spinner visible={this.props.connecting} text="Connecting" />
+                </View>
+            </TouchableWithoutFeedback>
+        );
+    }
+
     renderDropbox() {
         return (
             <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
@@ -127,6 +152,7 @@ RemoteConnectPage.propTypes = {
     archiveType: PropTypes.string,
     connecting: PropTypes.bool,
     dropboxAuthenticated: PropTypes.bool,
+    googledriveAuthenticated: PropTypes.bool,
     initiateConnection: PropTypes.func,
     onChangePassword: PropTypes.func,
     onChangeURL: PropTypes.func,
@@ -138,7 +164,8 @@ RemoteConnectPage.propTypes = {
 };
 
 RemoteConnectPage.defaultProps = {
-    dropboxAuthenticated: false
+    dropboxAuthenticated: false,
+    googledriveAuthenticated: false
 };
 
 export default RemoteConnectPage;

source/containers/GoogleDriveAuthButton.js

@@ -0,0 +1,22 @@
+import { connect } from "react-redux";
+import GoogleDriveAuthButton from "../components/GoogleDriveAuthButton.js";
+import { isAuthenticated, isAuthenticating } from "../selectors/googleDrive.js";
+import { setBrowserURL } from "../actions/browser.js";
+import { generateAuthorisationURL } from "../library/googleDrive.js";
+import { navigateToPopupBrowser } from "../actions/navigation.js";
+import { setGoogleDriveAuthenticating } from "../actions/googleDrive.js";
+
+export default connect(
+    (state, ownProps) => ({
+        authenticated: isAuthenticated(state),
+        authenticating: isAuthenticating(state)
+    }),
+    {
+        onClick: () => dispatch => {
+            const url = generateAuthorisationURL();
+            dispatch(setBrowserURL(url));
+            dispatch(setGoogleDriveAuthenticating(true));
+            dispatch(navigateToPopupBrowser("googleDrive"));
+        }
+    }
+)(GoogleDriveAuthButton);

source/containers/RemoteConnectPage.js

@@ -8,6 +8,7 @@ import {
     isConnecting
 } from "../selectors/RemoteConnectPage.js";
 import { getToken, isAuthenticated } from "../selectors/dropbox.js";
+import { getGoogleDriveToken, isGoogleDriveAuthenticated } from "../selectors/googleDrive.js";
 import {
     clearArchiveDetails,
     disconnect,
@@ -26,7 +27,8 @@ function handleConnectionCreation(dispatch, getState) {
     const state = getState();
     const remoteConnInfo = getRemoteConnectionInfo(state);
     const dropboxToken = getToken(state);
-    return createRemoteConnection({ ...remoteConnInfo, dropboxToken })
+    const googleToken = getGoogleDriveToken(state);
+    return createRemoteConnection({ ...remoteConnInfo, dropboxToken, googleToken })
         .then(function __onConnected() {
             const state = getState();
             let title = "Remote";
@@ -36,6 +38,8 @@ function handleConnectionCreation(dispatch, getState) {
                 title = domain;
             } else if (dropboxToken) {
                 title = "dropbox.com";
+            } else if (dropboxToken) {
+                title = "drive.google.com";
             }
             dispatch(onConnected());
             dispatch(navigateToRemoteExplorer({ title }));
@@ -51,6 +55,7 @@ export default connect(
         archiveType: getArchiveType(state),
         connecting: isConnecting(state),
         dropboxAuthenticated: isAuthenticated(state),
+        googleDriveAuthenticated: isGoogleDriveAuthenticated(state),
         url: getRemoteURL(state),
         ...getRemoteCredentials(state)
     }),

source/library/archives.js

@@ -2,6 +2,11 @@ import { formatArchiveTypeTitle } from "./format.js";
 
 export function getArchiveTypeDetails() {
     return [
+        {
+            type: "googleDrive",
+            title: formatArchiveTypeTitle("googleDrive"),
+            image: require("../../resources/images/googledrive-256.png")
+        },
         {
             type: "dropbox",
             title: formatArchiveTypeTitle("dropbox"),

source/library/format.js

@@ -15,6 +15,8 @@ export function formatArchiveTypeTitle(type) {
             return "Nextcloud";
         case "dropbox":
             return "Dropbox";
+        case "googleDrive":
+            return "Google Drive";
         default:
             return type;
     }