Initial commit.

Author: mrstebo

.env

@@ -0,0 +1,4 @@
+CLIENT_ID=
+AUTHORIZATION_ENDPOINT_URL=https://auth.monzo.com
+TOKEN_ENDPOINT_URL=https://murmuring-mesa-43528.herokuapp.com/oauth/token
+MONZO_API_URL=https://murmuring-mesa-43528.herokuapp.com

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+build

.eslintrc

@@ -0,0 +1,45 @@
+{
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true,
+        "generators": true,
+        "experimentalObjectRestSpread": true
+      }
+    },
+    "plugins": ["import", "jsx-a11y", "react"],
+    "settings": {
+      "react": {
+        "createClass": "createReactClass",
+        "pragma": "React",
+        "version": "16.0",
+        "flowVersion": "0.53"
+      },
+      "propWrapperFunctions": [ "forbidExtraProps" ]
+    },
+    "env": {
+      "es6": true,
+      "browser": true,
+      "jest": true,
+      "node": true,
+      "mocha": true
+    },
+    "extends": [
+      "es2015",
+      "eslint:recommended",
+      "plugin:react/recommended"
+    ],
+    "rules": {
+      "comma-dangle": ["error", "always-multiline"],
+      "eol-last": ["error", "always"],
+      "indent": ["error", 2, { "SwitchCase": 1 }],
+      "object-curly-spacing": ["error", "always"],
+      "quotes": ["error", "double"],
+      "semi": ["error"],
+      "space-before-blocks": ["error", "always"],
+      "react/jsx-uses-react": "error",
+      "react/jsx-uses-vars": "error"
+    }
+  }

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# expo
+.expo/
+
+# dependencies
+/node_modules
+
+# misc
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*.jks
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "editor.renderWhitespace": "all",
+    "editor.tabSize": 2,
+    "eslint.alwaysShowStatus": true,
+    "eslint.autoFixOnSave": true,
+    "eslint.packageManager": "yarn",
+    "eslint.provideLintTask": true,
+    "files.trimTrailingWhitespace": true,
+    "files.insertFinalNewline": true,
+    "git.ignoreLimitWarning": true
+}

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { View } from "react-native";
+import { createStackNavigator, createAppContainer } from "react-navigation";
+import { connect, Provider } from "react-redux";
+import { createStore, combineReducers, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import {
+  createReduxContainer,
+  createReactNavigationReduxMiddleware,
+  createNavigationReducer,
+} from "react-navigation-redux-helpers";
+import { AppScreen, LoadingScreen, LoginScreen } from "./screens";
+import * as reducers from "./reducers";
+
+const RootNavigator = createStackNavigator({
+  Loading: LoadingScreen,
+  Login: LoginScreen,
+  App: AppScreen,
+});
+
+const store = createStore(
+  combineReducers({
+    ...reducers,
+    nav: createNavigationReducer(RootNavigator),
+  }),
+  applyMiddleware(
+    thunk,
+    createReactNavigationReduxMiddleware(state => state.nav),
+  )
+);
+
+const AppContainer = createAppContainer(RootNavigator);
+const AppNavigator = createReduxContainer(AppContainer);
+const mapStateToProps = (state) => ({
+  state: state.nav,
+});
+const AppWithNavigationState = connect(mapStateToProps)(AppNavigator);
+
+const App = () => (
+  <View style={{ flex: 1 }}>
+    <Provider store={store}>
+      <AppWithNavigationState />
+    </Provider>
+  </View>
+);
+
+export default App;
+
+// export default class App extends Component {
+
+//   render() {
+//     return (
+//       <Provider store={store}>
+//         <Navigation />
+//       </Provider>
+//     );
+//   }
+
+// }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Steven Atkinson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,36 @@
+# #5 - Developers React To Monzo API (App)
+
+![Behind the Buzzword](behind-the-buzzword-logo.jpeg)
+
+A React Native App that uses the Monzo API
+
+## Building
+
+Run the following commands:
+
+```bash
+yarn install
+yarn start
+```
+
+## Running on your device
+
+After running the start script you will be able to open the Expo app on your device and scan the QR code.
+
+## Challenges
+
+### Part 1
+
+1. Create an OAuth Client on the Monzo Developer Portal
+1. Replace the mock authentication service with calls to the Monzo Authentication API
+
+### Part 2
+
+1. Build a new page for selecting a Monzo account
+1. Build a new page for displaying all the transactions
+1. Implement a feature to be able to mark a transaction as an expense
+
+## Additional
+
+You may not want to store the OAuth secret inside the app...so you can delegate exchanging the authorisation code to another web service.
+If you are new to OAuth then you can use [this repository](https://github.com/behind-the-buzzword/5-developers-react-to-monzo-api-server) to deploy a server to Heroku, and that will handle the exchange.

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "react-native-monzo-app",
+    "slug": "react-native-monzo-app",
+    "privacy": "public",
+    "sdkVersion": "33.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

assets/behind-the-buzzword-logo.jpeg

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo", "module:react-native-dotenv"],
+  };
+};

assets/icon.png

@@ -0,0 +1,68 @@
+import reducer from "../reducer";
+import {
+  GET_ACCOUNTS_PENDING,
+  GET_ACCOUNTS_SUCCESS,
+  GET_ACCOUNTS_FAILURE,
+} from "../types";
+
+describe("reducer", () => {
+  it("has a default state", () => {
+    expect(reducer()).toStrictEqual({
+      busy: false,
+      items: [],
+    });
+  });
+
+  it("handles GET_ACCOUNTS_PENDING", () => {
+    const state = {};
+    const action = {
+      type: GET_ACCOUNTS_PENDING,
+    };
+    expect(reducer(state, action)).toStrictEqual({
+      busy: true,
+      items: [],
+    });
+  });
+
+  it("handles GET_ACCOUNTS_SUCCESS", () => {
+    const state = {};
+    const action = {
+      type: GET_ACCOUNTS_SUCCESS,
+      payload: {
+        accounts: [{
+          id: "acc_00009237aqC8c5umZmrRdh",
+          description: "Peter Pan's Account",
+          created: "2015-11-13T12:17:42Z",
+        }],
+      },
+    };
+    expect(reducer(state, action)).toStrictEqual({
+      busy: false,
+      items: [{
+        id: "acc_00009237aqC8c5umZmrRdh",
+        description: "Peter Pan's Account",
+        created: "2015-11-13T12:17:42Z",
+      }],
+    });
+  });
+
+  it("handles GET_ACCOUNTS_FAILURE", () => {
+    const state = {};
+    const action = {
+      type: GET_ACCOUNTS_FAILURE,
+      payload: {
+        error: {
+          code: "error.code",
+          message: "Something went wrong",
+        },
+      },
+    };
+    expect(reducer(state, action)).toStrictEqual({
+      busy: false,
+      error: {
+        code: "error.code",
+        message: "Something went wrong",
+      },
+    });
+  });
+});

assets/monzo-logo.png

@@ -0,0 +1,44 @@
+import {
+  MONZO_API_URL,
+} from "react-native-dotenv";
+import {
+  GET_ACCOUNTS_PENDING,
+  GET_ACCOUNTS_SUCCESS,
+  GET_ACCOUNTS_FAILURE,
+} from "./types";
+
+export const getAccounts = () => async (dispatch, getState) => {
+  try {
+    dispatch({ type: GET_ACCOUNTS_PENDING });
+
+    const state = await getState();
+    const token = state.auth.user.access_token;
+    const response = await fetch(`${MONZO_API_URL}/accounts`, {
+      method: "GET",
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "Accept": "application/json",
+      },
+    });
+    const body = await response.json();
+
+    if (body.code === "bad_request.invalid_token") {
+      throw body;
+    }
+
+    dispatch({
+      type: GET_ACCOUNTS_SUCCESS,
+      payload: {
+        accounts: body.accounts,
+      },
+    });
+  }
+  catch (err) {
+    dispatch({
+      type: GET_ACCOUNTS_FAILURE,
+      payload: {
+        error: err,
+      },
+    });
+  }
+};

assets/splash.png

@@ -0,0 +1,6 @@
+import * as actions from "./actions";
+import * as types from "./types";
+import reducer from "./reducer";
+
+export { actions, types };
+export default reducer;

babel.config.js

@@ -0,0 +1,26 @@
+import {
+  GET_ACCOUNTS_PENDING,
+  GET_ACCOUNTS_SUCCESS,
+  GET_ACCOUNTS_FAILURE,
+} from "./types";
+
+const initialState = {
+  busy: false,
+  items: [],
+};
+
+export default function reducer(state = initialState, { type, payload } = {}) {
+  switch (type) {
+    case GET_ACCOUNTS_PENDING:
+      return { ...state, busy: true, items: [] };
+
+    case GET_ACCOUNTS_SUCCESS:
+      return { ...state, busy: false, items: payload.accounts };
+
+    case GET_ACCOUNTS_FAILURE:
+      return { ...state, busy: false, error: payload.error };
+
+    default:
+      return state;
+  }
+}