Jeyloh

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { Rehydrated } from 'aws-appsync-react'
import { ApolloProvider } from 'react-apollo'
import Client from 'aws-appsync'
import Amplify, { Auth } from 'aws-amplify'

Jeyloh

import { graphql } from 'react-apollo'
import ListRecipes from '../queries/ListRecipes'
import CreateRecipe from '../mutations/CreateRecipe'
import DeleteRecipe from '../mutations/RemoveRecipe'
import NewRecipeSubscription from '../subscriptions/NewRecipeSubscription'
import DeleteRecipeSubscription from '../subscriptions/DeleteRecipeSubscription'


export const listRecipeGQLAction = graphql(ListRecipes, {
  options: {

Jeyloh

class App extends Component {

  state = {
    name: "",
    ingredient: "",
    direction: "",
    ingredients: [],
    directions: []
  }

Jeyloh

import React from "react";
import { Auth } from "aws-amplify"

const Header = () => {

    const handleLogout = () => {
      Auth.signOut().then( () => {
        window.location.reload()
      })
    }

Jeyloh

{"lastUpload":"2018-05-22T06:58:19.438Z","extensionVersion":"v2.9.2"}

Jeyloh

import React from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, Button } from 'react-native';
import { API, graphqlOperation } from 'aws-amplify';
import * as queries from "./graphql/queries";
import * as mutations from "./graphql/mutations";
import * as subscriptions from "./graphql/subscriptions";


export default class Root extends React.Component {

Jeyloh

import React from "react";
import { Switch } from "react-router-dom";
import posed, { PoseGroup } from "react-pose";
import "./styles.css";

/**
 * This component is used to control the routing animation.
 * It controls what should happen after animation complete (onRest).
 * It differs animation direction based on routePopped props. (Set in router.action.js and available from routerReducer).
 * @param location React router location used as key in Switch

Jeyloh

import React from "react";
import { Route, withRouter } from "react-router-dom";
import { AnimatedSwitch } from "./AnimatedSwitch";

/**
 * The ".page" class is key to animating a full page and not receive bumps while
 * animating pages in/out. It is position: fixed to allow the animation to play
 * without the DOM elements messing up.
 *
 * Try to remove .page to see the effect.

Jeyloh

.page {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  width: 100vw;
}

Jeyloh

import React from "react";

const Page1 = React.lazy(() => import("./Page1"));
const Page2 = React.lazy(() => import("./Page2"));
const Page3 = React.lazy(() => import("./Page3"));

const routes = [
    {
        Component: Page1,
        path: "page1",