Skip to content

Instantly share code, notes, and snippets.

@luizamboni
Created May 17, 2018 22:00
Show Gist options
  • Save luizamboni/14f5733f3193fa4168e22d0cdbf67f4d to your computer and use it in GitHub Desktop.
Save luizamboni/14f5733f3193fa4168e22d0cdbf67f4d to your computer and use it in GitHub Desktop.
redux to consume 3rd level maturity
const { createStore, applyMiddleware, combineReducers } = require('redux');
const thunk = require('redux-thunk').default;
const Axios = require("axios");
const ROOT = ""
// users edition of users
const usersReducer = (state = { list: []} , action) => {
const { payload, type } = action
switch(type) {
case "USER_LIST_FETCHED":
return { ...state, list: payload.resource , count: payload.meta.count }
break;
default:
return state
}
}
// controls the resource links to interactions of session
const sessionReducers = (state = { token: null, links: [], currentUser: null }, action) => {
const { payload, type, origin } = action
switch(type) {
case "USER_LOGIN":
return { ...state, token: payload.token, links: payload.links, origin }
case "USER_CURRENT":
return { ...state, links: payload.links, currentUser: payload.user, origin }
case "USER_LIST_FETCHED":
// return { ...state, links: [ ...state.links, payload.links ] }
return { ...state, links: payload.links, origin: origin }
case "USER_LOGIN_FAIL":
return { ...state, error: payload, origin: origin }
case "USER_LOGOUT":
return {}
default:
return state
}
}
const combined = combineReducers({
users: usersReducer,
session: sessionReducers,
});
const store = createStore(combined, {}, applyMiddleware(thunk));
class ClientApi {
constructor(dispatch) {
this.token = null
this.dispatch = dispatch
this.resources = {
"/users/current" : { method: "GET", success: "USER_CURRENT" },
"/users/list" : { method: "GET", success: "USER_LIST_FETCHED" },
}
}
consumeResource({ rel, href }, data) {
const link = rel === "self" ? { method: "GET", href, success: "SELF" } : this.resources[rel]
return Axios({
method: link.method ,
url: href,
headers: { Authorization: this.token },
data
}).then(res => {
this.dispatch({ type: link.success, payload: res.data, origin: rel })
})
}
login({ email, password }) {
Axios.post(`${ROOT}/api/admin/v1/login`, {
email, password
})
.then(res => {
this.token = res.data.token;
return this.dispatch({ type: "USER_LOGIN", payload: res.data, origin: "login" })
})
.catch(err => (
this.dispatch({ type: "USER_LOGIN_FAIL", payload: err })
))
}
}
const clientApi = new ClientApi(store.dispatch)
store.subscribe(() => {
const { session, profile, users } = store.getState()
console.log(session)
const profileResource = session.links.find(link => link.rel === "/users/current")
if(profileResource)
clientApi.consumeResource(profileResource)
const firstPage = session.links.find(link => link.rel === "/users/list")
if(firstPage)
clientApi.consumeResource(firstPage)
debugger
if(session.origin === "/users/list") {
for(const user of users.list) {
console.log(user.name)
const getUserLink = user.links.find(l => l.rel === "self")
// clientApi.consumeResource(getUserLink)
}
}
})
store.subscribe(() => {
console.log("subscribe --------------------------------------------------")
})
clientApi.login({ email: "admin@hotmail.com" , password: "staging" })
// ClientApi.login({ email: "admin@hotmail.com" , password: "stging" })
// ClientApi.getUsers({ page: 1 , size: 20})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment