From 5ed3a84e7278fd5b2a48db50a2ff2412ceef3245 Mon Sep 17 00:00:00 2001 From: sujinleeme Date: Wed, 11 Jul 2018 16:57:05 +0900 Subject: [PATCH] feat: Integrate facebook social login and get response see: #8 --- src/sign-up/actions.js | 10 ++++++ src/sign-up/constants.js | 3 ++ src/sign-up/index.js | 69 ++++++++++++++++++++++++++++++++++++++++ src/sign-up/reducer.js | 58 +++++++++++++++++++++++++++++++++ src/sign-up/sagas.js | 62 ++++++++++++++++++++++++++++++++++++ 5 files changed, 202 insertions(+) create mode 100644 src/sign-up/actions.js create mode 100644 src/sign-up/constants.js create mode 100644 src/sign-up/index.js create mode 100644 src/sign-up/reducer.js create mode 100644 src/sign-up/sagas.js diff --git a/src/sign-up/actions.js b/src/sign-up/actions.js new file mode 100644 index 0000000..53b6de8 --- /dev/null +++ b/src/sign-up/actions.js @@ -0,0 +1,10 @@ +import { SIGNUP_REQUESTING } from "./constants" + +export const signupRequest = ({response, channel}) => { + console.log("called") + return { + type: SIGNUP_REQUESTING, + response, + channel + } +} diff --git a/src/sign-up/constants.js b/src/sign-up/constants.js new file mode 100644 index 0000000..18dfe86 --- /dev/null +++ b/src/sign-up/constants.js @@ -0,0 +1,3 @@ +export const SIGNUP_REQUESTING = "SIGNUP_REQUESTING" +export const SIGNUP_SUCCESS = "SIGNUP_SUCCESS" +export const SIGNUP_ERROR = "SIGNUP_ERROR" diff --git a/src/sign-up/index.js b/src/sign-up/index.js new file mode 100644 index 0000000..4d2d72e --- /dev/null +++ b/src/sign-up/index.js @@ -0,0 +1,69 @@ +import React from "react" +import PropTypes from "prop-types" +import { connect } from "react-redux" +import { Button } from "@material-ui/core" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { signupRequest } from "./actions" +import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props" +import config from "../social-config.json" + +// Signin.propTypes = { +// classes: PropTypes.object.isRequired, +// view: PropTypes.string.isRequired, +// modalRequest: PropTypes.func.isRequired +// } +// + +const SocialSignInButton = ({buttonCSSClass, iconCSSClass, textButton, onClick, channel}) => { + + const FONTAWESOME_ICONS = { + facebook: ["fab", "facebook"], + google: ["fab", "google"] + } + + return ( + + ) +} + +const Signup = (props) => { + + const {classes, signupRequest, textButton} = props + + return ( +
+ console.log(response) } + render={ renderProps => ( + + ) } + /> + + + +
+ ) +} + +export default connect(null, {signupRequest})(Signup) + diff --git a/src/sign-up/reducer.js b/src/sign-up/reducer.js new file mode 100644 index 0000000..9507a35 --- /dev/null +++ b/src/sign-up/reducer.js @@ -0,0 +1,58 @@ +import { + SIGNUP_REQUESTING, + SIGNUP_SUCCESS, + SIGNUP_ERROR +} from "./constants" + +const initialState = { + requesting: false, + successful: false, + messages: [], + errors: [] +} + +const reducer = (state = initialState, action) => { + switch (action.type) { + case SIGNUP_REQUESTING: + return { + requesting: true, + successful: false, + messages: [{body: "Signing up...", time: new Date()}], + errors: [] + } + + // reset the state and add a body message of success! + // remember our successful returned payload will be: + // {"email": "of the new user", "id": "of the user"} + case SIGNUP_SUCCESS: + return { + errors: [], + messages: [{ + body: `Successfully created account for ${action.response.email}`, + time: new Date() + }], + requesting: false, + successful: true + } + + // reset the state but with errors! + // the error payload returned is actually far + // more detailed, but we'll just stick with + // the base message for now + case SIGNUP_ERROR: + return { + errors: state.errors.concat([{ + body: action.error.toString(), + time: new Date() + }]), + messages: [], + requesting: false, + successful: false + } + + default: + return state + } +} + +export default reducer diff --git a/src/sign-up/sagas.js b/src/sign-up/sagas.js new file mode 100644 index 0000000..0c97375 --- /dev/null +++ b/src/sign-up/sagas.js @@ -0,0 +1,62 @@ +import { call, put, takeLatest } from "redux-saga/effects" +// import { handleApiErrors } from "../lib/api-errors" +import { + SIGNUP_REQUESTING, + SIGNUP_SUCCESS, + SIGNUP_ERROR +} from "./constants" + +// The url derived from our .env file +const signupUrl = `${process.env.REACT_APP_API_URL}/api/Clients` + +function signupApi(email, password) { + // call to the "fetch". this is a "native" function for browsers + // that's conveniently polyfilled in create-react-app if not available + return fetch(signupUrl, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({email, password}) + }) + .then(handleApiErrors) // we'll make this in a second + .then(response => response.json()) + .then(json => json) + .catch((error) => { + throw error + }) +} + +// This will be run when the SIGNUP_REQUESTING +// Action is found by the watcher +function* signupFlow(action) { + // try { + // const {email, password} = action + // // pulls "calls" to our signupApi with our email and password + // // from our dispatched sign-up action, and will PAUSE + // // here until the API async function, is complete! + // const response = yield call(signupApi, email, password) + // + // // when the above api call has completed it will "put", + // // or dispatch, an action of type SIGNUP_SUCCESS with + // // the successful response. + // yield put({type: SIGNUP_SUCCESS, response}) + // } catch (error) { + // // if the api call fails, it will "put" the SIGNUP_ERROR + // // into the dispatch along with the error. + // yield put({type: SIGNUP_ERROR, error}) + // } +} + +// Watches for the SIGNUP_REQUESTING action type +// When it gets it, it will call signupFlow() +// WITH the action we dispatched +function* signupWatcher() { + // takeLatest() takes the LATEST call of that action and runs it + // if we we're to use takeEvery, it would take every single + // one of the actions and kick off a new task to handle it + // CONCURRENTLY!!! + yield takeLatest(SIGNUP_REQUESTING, signupFlow) +} + +export default signupWatcher