Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 15, 2016 15:50
Show Gist options
  • Save anonymous/39020288671aca2af1f585dd4e83c716 to your computer and use it in GitHub Desktop.
Save anonymous/39020288671aca2af1f585dd4e83c716 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/fowacudise
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
</head>
<body>
<div id="app"></div>
<script id="jsbin-javascript">
// Action Types
"use strict";
var CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN";
var DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN";
var UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE";
// Action Creators
var createAuthToken = function createAuthToken() {
return { type: CREATE_AUTH_TOKEN, token: "random_secret_token" };
};
var deleteAuthToken = function deleteAuthToken() {
return { type: DELETE_AUTH_TOKEN, token: null };
};
var updateCurrentProfile = function updateCurrentProfile(profile) {
return { type: UPDATE_CURRENT_PROFILE, profile: profile };
};
// Reducers
var auth = function auth(state, action) {
if (state === undefined) state = { token: null };
switch (action.type) {
case CREATE_AUTH_TOKEN:
return Object.assign({}, state, { token: action.token });
case DELETE_AUTH_TOKEN:
return Object.assign({}, state, { token: action.token });
default:
return state;
}
};
var currentProfile = function currentProfile(state, action) {
if (state === undefined) state = {};
if (!action.profile) return {};
switch (action.type) {
case UPDATE_CURRENT_PROFILE:
return Object.assign({}, state, action.profile);
default:
return state;
}
};
var authService = Redux.combineReducers({
auth: auth,
currentProfile: currentProfile
});
// Components
var AuthButton = function AuthButton(_ref) {
var isLoggedIn = _ref.isLoggedIn;
var onButtonClick = _ref.onButtonClick;
return React.createElement(
"button",
{ onClick: function () {
return onButtonClick(isLoggedIn);
} },
isLoggedIn ? 'Log Out' : 'Log In'
);
};
var ProfileInfo = function ProfileInfo(_ref2) {
var profile = _ref2.profile;
var info = profile.username ? "Welcome, " + profile.username : "";
return React.createElement(
"div",
null,
info
);
};
// Containers
var mapStateToPropsForAuth = function mapStateToPropsForAuth(state) {
return {
isLoggedIn: state.auth.token !== null
};
};
var mapDispatchToPropsForAuth = function mapDispatchToPropsForAuth(dispatch) {
return {
onButtonClick: function onButtonClick(isLoggedIn) {
if (!isLoggedIn) {
dispatch(createAuthToken());
dispatch(updateCurrentProfile({
id: 1,
username: "john"
}));
return;
}
dispatch(deleteAuthToken());
dispatch(updateCurrentProfile({}));
}
};
};
var LoginButton = ReactRedux.connect(mapStateToPropsForAuth, mapDispatchToPropsForAuth)(AuthButton);
var mapStateToPropsForCurrentProfile = function mapStateToPropsForCurrentProfile(state) {
return {
profile: state.currentProfile
};
};
var CurrentProfileInfo = ReactRedux.connect(mapStateToPropsForCurrentProfile)(ProfileInfo);
// Store
var store = Redux.createStore(authService);
var Provider = ReactRedux.Provider;
// Code
console.log(store.getState());
unsubscribe = store.subscribe(function () {
console.log(store.getState());
});
// unsubscribe()
ReactDOM.render(React.createElement(
Provider,
{ store: store },
React.createElement(
"div",
null,
React.createElement(CurrentProfileInfo, null),
React.createElement(LoginButton, null)
)
), document.getElementById('app'));
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Action Types
const CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN"
const DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN"
const UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE"
// Action Creators
const createAuthToken = ()=> {
return {type: CREATE_AUTH_TOKEN, token: "random_secret_token"}
}
const deleteAuthToken = ()=> {
return {type: DELETE_AUTH_TOKEN, token: null}
}
const updateCurrentProfile = (profile)=> {
return {type: UPDATE_CURRENT_PROFILE, profile: profile}
}
// Reducers
const auth = (state = {token: null}, action)=> {
switch (action.type) {
case CREATE_AUTH_TOKEN:
return Object.assign({}, state, {token: action.token})
case DELETE_AUTH_TOKEN:
return Object.assign({}, state, {token: action.token})
default:
return state
}
}
const currentProfile = (state = {}, action)=> {
if (!action.profile) return {}
switch (action.type) {
case UPDATE_CURRENT_PROFILE:
return Object.assign({}, state, action.profile)
default:
return state
}
}
let authService = Redux.combineReducers({
auth: auth,
currentProfile: currentProfile
})
// Components
const AuthButton = ({isLoggedIn, onButtonClick})=> {
return (
<button onClick={() => onButtonClick(isLoggedIn)}>{isLoggedIn ? 'Log Out' : 'Log In'}</button>
)
}
const ProfileInfo = ({profile})=> {
let info = profile.username ? "Welcome, " + profile.username : ""
return (
<div>{info}</div>
)
}
// Containers
const mapStateToPropsForAuth = (state)=> {
return {
isLoggedIn: state.auth.token !== null
}
}
const mapDispatchToPropsForAuth = (dispatch)=> {
return {
onButtonClick: (isLoggedIn)=> {
if (!isLoggedIn) {
dispatch(createAuthToken())
dispatch(updateCurrentProfile({
id: 1,
username: "john"
}))
return
}
dispatch(deleteAuthToken())
dispatch(updateCurrentProfile({}))
}
}
}
const LoginButton = ReactRedux.connect(
mapStateToPropsForAuth,
mapDispatchToPropsForAuth
)(AuthButton)
const mapStateToPropsForCurrentProfile = (state)=> {
return {
profile: state.currentProfile
}
}
const CurrentProfileInfo = ReactRedux.connect(
mapStateToPropsForCurrentProfile
)(ProfileInfo)
// Store
let store = Redux.createStore(authService)
let Provider = ReactRedux.Provider
// Code
console.log(store.getState())
unsubscribe = store.subscribe(() => {
console.log(store.getState())
})
// unsubscribe()
ReactDOM.render(
<Provider store={store}>
<div>
<CurrentProfileInfo />
<LoginButton />
</div>
</Provider>,
document.getElementById('app')
)
</script></body>
</html>
Raw
jsbin.fowacudise.js
// Action Types
"use strict";
var CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN";
var DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN";
var UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE";
// Action Creators
var createAuthToken = function createAuthToken() {
return { type: CREATE_AUTH_TOKEN, token: "random_secret_token" };
};
var deleteAuthToken = function deleteAuthToken() {
return { type: DELETE_AUTH_TOKEN, token: null };
};
var updateCurrentProfile = function updateCurrentProfile(profile) {
return { type: UPDATE_CURRENT_PROFILE, profile: profile };
};
// Reducers
var auth = function auth(state, action) {
if (state === undefined) state = { token: null };
switch (action.type) {
case CREATE_AUTH_TOKEN:
return Object.assign({}, state, { token: action.token });
case DELETE_AUTH_TOKEN:
return Object.assign({}, state, { token: action.token });
default:
return state;
}
};
var currentProfile = function currentProfile(state, action) {
if (state === undefined) state = {};
if (!action.profile) return {};
switch (action.type) {
case UPDATE_CURRENT_PROFILE:
return Object.assign({}, state, action.profile);
default:
return state;
}
};
var authService = Redux.combineReducers({
auth: auth,
currentProfile: currentProfile
});
// Components
var AuthButton = function AuthButton(_ref) {
var isLoggedIn = _ref.isLoggedIn;
var onButtonClick = _ref.onButtonClick;
return React.createElement(
"button",
{ onClick: function () {
return onButtonClick(isLoggedIn);
} },
isLoggedIn ? 'Log Out' : 'Log In'
);
};
var ProfileInfo = function ProfileInfo(_ref2) {
var profile = _ref2.profile;
var info = profile.username ? "Welcome, " + profile.username : "";
return React.createElement(
"div",
null,
info
);
};
// Containers
var mapStateToPropsForAuth = function mapStateToPropsForAuth(state) {
return {
isLoggedIn: state.auth.token !== null
};
};
var mapDispatchToPropsForAuth = function mapDispatchToPropsForAuth(dispatch) {
return {
onButtonClick: function onButtonClick(isLoggedIn) {
if (!isLoggedIn) {
dispatch(createAuthToken());
dispatch(updateCurrentProfile({
id: 1,
username: "john"
}));
return;
}
dispatch(deleteAuthToken());
dispatch(updateCurrentProfile({}));
}
};
};
var LoginButton = ReactRedux.connect(mapStateToPropsForAuth, mapDispatchToPropsForAuth)(AuthButton);
var mapStateToPropsForCurrentProfile = function mapStateToPropsForCurrentProfile(state) {
return {
profile: state.currentProfile
};
};
var CurrentProfileInfo = ReactRedux.connect(mapStateToPropsForCurrentProfile)(ProfileInfo);
// Store
var store = Redux.createStore(authService);
var Provider = ReactRedux.Provider;
// Code
console.log(store.getState());
unsubscribe = store.subscribe(function () {
console.log(store.getState());
});
// unsubscribe()
ReactDOM.render(React.createElement(
Provider,
{ store: store },
React.createElement(
"div",
null,
React.createElement(CurrentProfileInfo, null),
React.createElement(LoginButton, null)
)
), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment