Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// a library to wrap and simplify api calls
import apisauce from 'apisauce'
// our "constructor"
const create = (baseURL = 'url') => {
// ------
// STEP 1
// ------
//
// Create and configure an apisauce-based api object.
//
const api = apisauce.create({
// base URL is read from the "constructor"
baseURL,
// here are some default headers
headers: {
'Cache-Control': 'no-cache'
},
// 10 second timeout...
timeout: 10000
})
// ------
// STEP 2
// ------
//
// Define some functions that call the api. The goal is to provide
// a thin wrapper of the api layer providing nicer feeling functions
// rather than "get", "post" and friends.
//
// I generally don't like wrapping the output at this level because
// sometimes specific actions need to be take on `403` or `401`, etc.
//
// Since we can't hide from that, we embrace it by getting out of the
// way at this level.
//
const loginUser = (params) => api.post('api/user/create', params)
const setHeader = (params) => api.setHeader('Authorization', params)
// ------
// STEP 3
// ------
//
// Return back a collection of functions that we would consider our
// interface. Most of the time it'll be just the list of all the
// methods in step 2.
//
// Notice we're not returning back the `api` created in step 1? That's
// because it is scoped privately. This is one way to create truly
// private scoped goodies in JavaScript.
//
return {
// a list of the API functions from step 2
loginUser,
setHeader
}
}
// let's return back our create method as the default.
export default {
create
}
/* ***********************************************************
* A short word on how to use this automagically generated file.
* We're often asked in the ignite gitter channel how to connect
* to a to a third party api, so we thought we'd demonstrate - but
* you should know you can use sagas for other flow control too.
*
* Other points:
* - You'll need to add this saga to sagas/index.js
* - This template uses the api declared in sagas/index.js, so
* you'll need to define a constant in that file.
*************************************************************/
import { call, put } from 'redux-saga/effects'
import LoginActions from '../Redux/LoginRedux'
import { NavigationActions } from 'react-navigation';
// import { LoginSelectors } from '../Redux/LoginRedux'
export function* loginUser(api, action) {
const { data } = action
// get current data from Store
// const currentData = yield select(LoginSelectors.getData)
// make the call to the api
const response = yield call(api.loginUser, data)
// success?
if (response.ok) {
// You might need to change the response here - do this with a 'transform',
// located in ../Transforms/. Otherwise, just pass the data back from the api.
yield put(LoginActions.loginSuccess(response.data))
// TODO: Move to Actions
yield call([api, 'setHeader'], `Bearer ${response.data.data[1].token}`)
yield put(NavigationActions.navigate({ routeName: 'LaunchScreen' }));
} else {
yield put(LoginActions.loginFailure())
}
}
import { put, select, call } from 'redux-saga/effects'
import GithubActions, { GithubSelectors } from '../Redux/GithubRedux'
import { LoginSelectors } from '../Redux/LoginRedux';
import { isNil } from 'ramda'
import { NavigationActions } from 'react-navigation';
import API from '../Services/Api'
// exported to make available for tests
export const selectAvatar = GithubSelectors.selectAvatar
export const getToken = LoginSelectors.getData
// process STARTUP actions
export function* startup(api, action) {
/*
if (__DEV__ && console.tron) {
// straight-up string logging
console.tron.log('Hello, I\'m an example of how to log via Reactotron.')
// logging an object for better clarity
console.tron.log({
message: 'pass objects for better logging',
someGeneratorFunction: selectAvatar
})
// fully customized!
const subObject = { a: 1, b: [1, 2, 3], c: true }
subObject.circularDependency = subObject // osnap!
console.tron.display({
name: '🔥 IGNITE 🔥',
preview: 'You should totally expand this',
value: {
'💃': 'Welcome to the future!',
subObject,
someInlineFunction: () => true,
someGeneratorFunction: startup,
someNormalFunction: selectAvatar
}
})
}
*/
const token = yield select(getToken)
// only get if we don't have it yet
console.log("API token", token);
if (!isNil(token)) {
yield put(NavigationActions.navigate({ routeName: 'LaunchScreen' }));
yield call([api, 'setHeader'], `Bearer ${token.data[1].token}`)
}
else {
yield put(NavigationActions.navigate({ routeName: 'LoginScreen' }));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.