How to use @aws-amplify/core - 10 common examples

* Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
 * the License. A copy of the License is located at
 *
 *     http://aws.amazon.com/apache2.0/
 *
 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
 * and limitations under the License.
 */

import StorageClass from './Storage';
import { StorageProvider } from './types';

import Amplify, { ConsoleLogger as Logger } from '@aws-amplify/core';

const logger = new Logger('Storage');

let _instance: StorageClass = null;

if (!_instance) {
    logger.debug('Create Storage Instance');
    _instance = new StorageClass();
    _instance.vault = new StorageClass();
    
    const old_configure = _instance.configure;
    _instance.configure = (options) => {
        logger.debug('storage configure called');
        const vaultConfig = {...old_configure.call(_instance, options)};

        // set level private for each provider for the vault
        Object.keys(vaultConfig).forEach((providerName) => {
            if (typeof vaultConfig[providerName] !== 'string') {

* Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
 * the License. A copy of the License is located at
 *
 *     http://aws.amazon.com/apache2.0/
 *
 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
 * and limitations under the License.
 */

// the session tracker for web

import { ConsoleLogger as Logger, Hub, JS, Constants } from '@aws-amplify/core';
import { SessionTrackOpts } from '../types';

const logger = new Logger('SessionTracker');

const defaultOpts: SessionTrackOpts = {
	enable: false,
	provider: 'AWSPinpoint',
};

let initialEventSent = false;

export default class SessionTracker {
	private _tracker;
	private _hasEnabled;
	private _config: SessionTrackOpts;

	private _hidden;
	private _visibilityChange;

// Do not sign the request if client has added 'Authorization' header,
        // which means custom authorizer.
        if (typeof params.headers['Authorization'] !== 'undefined') {
            params.headers = Object.keys(params.headers).reduce((acc, k) => {
                if (params.headers[k]) {
                    acc[k] = params.headers[k];
                }
                return acc;
                // tslint:disable-next-line:align
            }, {});
            return this._request(params, isAllResponse);

        }
        
        // Signing the request in case there credentials are available
        return Credentials.get()
            .then(
                credentials => this._signed({ ...params }, credentials, isAllResponse),
                err => {
                    logger.debug('No credentials available, the request will be unsigned');
                    return this._request(params, isAllResponse);
                }
                );
    }

// Do not sign the request if client has added 'Authorization' header,
		// which means custom authorizer.
		if (typeof params.headers['Authorization'] !== 'undefined') {
			params.headers = Object.keys(params.headers).reduce((acc, k) => {
				if (params.headers[k]) {
					acc[k] = params.headers[k];
				}
				return acc;
				// tslint:disable-next-line:align
			}, {});
			return this._request(params, isAllResponse);
		}

		// Signing the request in case there credentials are available
		return Credentials.get().then(
			credentials => this._signed({ ...params }, credentials, isAllResponse),
			err => {
				logger.debug('No credentials available, the request will be unsigned');
				return this._request(params, isAllResponse);
			}
		);
	}

AsyncStorage.getItem(cacheKey).then((lastToken) => {
            if (!lastToken || lastToken !== token) {
                logger.debug('refresh the device token with', token);
                const config = {
                    Address: token,
                    OptOut: 'NONE'
                };
                if (Amplify.Analytics && typeof Amplify.Analytics.updateEndpoint === 'function') {
                    Amplify.Analytics.updateEndpoint(config).then((data) => {
                        logger.debug('update endpoint success, setting token into cache');
                        AsyncStorage.setItem(cacheKey, token);
                    }).catch(e => {
                        // ........
                        logger.debug('update endpoint failed', e);
                    });
                } else {
                    logger.debug('Analytics module is not registered into Amplify');
                }
            }
        }).catch(e => {
            logger.debug('set device token in cache failed', e);

AsyncStorage.getItem(cacheKey).then((lastToken) => {
            if (!lastToken || lastToken !== token) {
                logger.debug('refresh the device token with', token);
                const config = {
                    Address: token,
                    OptOut: 'NONE'
                };
                if (Amplify.Analytics && typeof Amplify.Analytics.updateEndpoint === 'function') {
                    Amplify.Analytics.updateEndpoint(config).then((data) => {
                        logger.debug('update endpoint success, setting token into cache');
                        AsyncStorage.setItem(cacheKey, token);
                    }).catch(e => {
                        // ........
                        logger.debug('update endpoint failed', e);
                    });
                } else {
                    logger.debug('Analytics module is not registered into Amplify');
                }
            }
        }).catch(e => {
            logger.debug('set device token in cache failed', e);

.then(lastToken => {
				if (!lastToken || lastToken !== token) {
					logger.debug('refresh the device token with', token);
					const config = {
						Address: token,
						OptOut: 'NONE',
					};
					if (
						Amplify.Analytics &&
						typeof Amplify.Analytics.updateEndpoint === 'function'
					) {
						Amplify.Analytics.updateEndpoint(config)
							.then(data => {
								logger.debug(
									'update endpoint success, setting token into cache'
								);
								AsyncStorage.setItem(cacheKey, token);
							})
							.catch(e => {
								// ........
								logger.debug('update endpoint failed', e);
							});
					} else {
						logger.debug('Analytics module is not registered into Amplify');
					}
				}
			})
			.catch(e => {

.then(lastToken => {
				if (!lastToken || lastToken !== token) {
					logger.debug('refresh the device token with', token);
					const config = {
						Address: token,
						OptOut: 'NONE',
					};
					if (
						Amplify.Analytics &&
						typeof Amplify.Analytics.updateEndpoint === 'function'
					) {
						Amplify.Analytics.updateEndpoint(config)
							.then(data => {
								logger.debug(
									'update endpoint success, setting token into cache'
								);
								AsyncStorage.setItem(cacheKey, token);
							})
							.catch(e => {
								// ........
								logger.debug('update endpoint failed', e);
							});
					} else {
						logger.debug('Analytics module is not registered into Amplify');
					}
				}

// Config imports
import config from '../aws-exports'
import keys from '../keys'

// GraphQL mutations and queries
import CreatePicture from '../graphQL/CreatePicture'
import DeletePicture from '../graphQL/DeletePicture'
import listPictures from '../graphQL/listPictures'
import CreateLikePicture from '../graphQL/CreateLikePicture'
import DeleteLikePicture from '../graphQL/DeleteLikePicture'
import CreateFlagPicture from '../graphQL/CreateFlagPicture'

// Apollo components
import { graphql, compose } from 'react-apollo'

Amplify.configure(config)

class Feed extends React.Component {
  state = {
    optionsVisible: false,
    pictures: [],
    pictureOwnerId: '',
    likeOwnerId: '',
    pictureOwnerUsername: '',
    likeOwnerUsername: '',
    refreshing: false
  }

  componentDidMount = async () => {
    await Auth.currentAuthenticatedUser()
      .then(user => {
        this.setState(

import API, { graphqlOperation } from '@aws-amplify/api'
import Auth from '@aws-amplify/auth'
import Amplify from '@aws-amplify/core'

import { Card, Icon, Text } from 'native-base'

import config from '../aws-exports'
import { 
  createPost, 
  deletePost, 
  listPosts, 
  createLike, 
  deleteLike } from '../GraphQL/GraphQL'

// configure the app with Amplify 
Amplify.configure(config)

export default class Upload extends React.Component {
  state = { 
    posts: [],
    postsUser: '',
    postContent: '',
    postOwnerId: '',
    postOwnerUsername: '',
    modalVisible: false,
    likeOwnerUsername: '',
    likeOwnerId: '',
  }

  componentDidMount = async () => {
    await Auth.currentAuthenticatedUser()
    .then(user => {