refactor: Split component to make social login buttons

see: #8

.gitignore

@@ -4,4 +4,4 @@ dist
 yarn-error.log
 .idea
 package-lock.json
-git rm -r --cached .
+src/social-config.json

src/App.js

@@ -17,7 +17,7 @@ const AsyncNoMatch = importedComponent(() =>
 	LoadingComponent: Loading
 })
 
-const Signup = importedComponent(() => import(/* webpackChunkName:'Login' */ "./signup"), {
+const Signup = importedComponent(() => import(/* webpackChunkName:'Login' */ "./sign-up"), {
 	LoadingComponent: Loading
 })
 

src/components/Header.js

@@ -1,18 +1,11 @@
 import React from "react"
 import PropTypes from "prop-types"
-
-import { withStyles } from "@material-ui/core/styles"
 import { connect } from "react-redux"
-import AppBar from "@material-ui/core/AppBar"
-import Toolbar from "@material-ui/core/Toolbar"
-import Typography from "@material-ui/core/Typography"
-import Button from "@material-ui/core/Button"
-import Icon from '@material-ui/core/Icon';
-
-import IconButton from "@material-ui/core/IconButton"
-import MenuIcon from "@material-ui/icons/Menu"
 import { Link } from "react-router-dom"
+import { withStyles } from "@material-ui/core/styles"
+import { AppBar, Toolbar, Typography, Button } from "@material-ui/core"
 import { modalRequest } from "../modal/actions"
+import { SIGN_IN_MODAL } from "../modal/constants"
 
 const styles = {
 	root: {
@@ -39,7 +32,7 @@ const Header = (props) => {
 						</Typography>
 					</Link>
 					<Button
-						onClick={ () => props.modalRequest({modalProps: true, modalType: "SIGN_IN"}) }
+						onClick={ () => modalRequest({modalProps: true, modalType: SIGN_IN_MODAL}) }
 						color="inherit">Sign in</Button>
 				</Toolbar>
 			</AppBar>
@@ -50,19 +43,7 @@ const Header = (props) => {
 Header.propTypes = {
 	classes: PropTypes.object.isRequired
 }
-//
-// const mapDispatchToProps = (dispatch) => {
-// 	return {
-// 		// showModal: () => dispatch(showModal({
-// 		// 	modalType: "SINGIN",
-// 		// 	modalProps: true
-// 		// }))
-// 		openModal: () => dispatch(openModal({
-// 			modalType: "SIGN_IN",
-// 			modalProps: true
-// 		}))
-// 	}
-// }
+
 
 export default withStyles(styles)(connect(null, {modalRequest})(Header))
 

src/modal/actions.js

@@ -1,4 +1,4 @@
-import { MODAL_REQUESTING, MODAL_SUCCESS, MODAL_FAIL } from "./constants"
+import { MODAL_REQUESTING } from "./constants"
 
 export const modalRequest = ({modalProps, modalType}) => {
 	return {

src/modal/constants.js

@@ -1,3 +1,14 @@
+// signin-signup contents
+export const INIT_MODAL = "INIT_MODAL"
+export const SIGN_IN_MODAL = "SIGN_IN_MODAL"
+export const SIGN_UP_MODAL = "SING_UP_MODAL"
+
+/**
+ * sagas
+ */
+
+// show or hide modal
 export const MODAL_REQUESTING = "MODAL_REQUESTING"
 export const MODAL_SUCCESS = "MODAL_SUCCESS"
 export const MODAL_FAIL = "MODAL_FAIL"
+

src/modal/contents.js

@@ -1,3 +1,5 @@
+import { SIGN_IN_MODAL, SIGN_UP_MODAL} from "./constants"
+
 export const modalContents = ({state}) => {
 	const initState = {
 		title: "",
@@ -10,26 +12,26 @@ export const modalContents = ({state}) => {
 	}
 
 	switch (state) {
-		case "SIGN_IN":
+		case SIGN_IN_MODAL:
 			return {
 				title: "Welcome back.",
 				subtitle: "Sign in to make your karaoke vocal music and record your singing.",
 				facebook: "Sign in with facebook",
 				google: "Sign in with Google",
 				bottom: "No account?",
 				button: "Create one.",
-				nextView: "SIGN_UP"
+				nextView: SIGN_UP_MODAL
 
 			}
-		case "SIGN_UP":
+		case SIGN_UP_MODAL:
 			return {
 				title: "Join!",
 				subtitle: "Sign up to make your karaoke vocal music and record your singing.",
 				facebook: "Sign up with facebook",
 				google: "Sign up with Google",
 				bottom: "Already have an account?",
 				button: "Sign in.",
-				nextView: "SIGN_IN"
+				nextView: SIGN_IN_MODAL
 			}
 		default:
 			return initState

src/modal/index.js

@@ -5,8 +5,10 @@ import { withStyles } from "@material-ui/core/styles"
 import { Modal, Button, IconButton, Typography, Icon } from "@material-ui/core"
 import CloseIcon from "@material-ui/icons/Close"
 import { modalRequest } from "./actions"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { modalContents } from "./contents"
+
+import Signup from "../sign-up"
+
 import { alignStyle } from "../common-styles"
 
 const styles = theme => ({
@@ -51,16 +53,7 @@ const getModalStyle = () => {
 	}
 }
 
-// Signin.propTypes = {
-// 	classes: PropTypes.object.isRequired,
-// 	view: PropTypes.string.isRequired,
-// 	modalRequest: PropTypes.func.isRequired
-// }
-
-const Signin = (props) => {
-
-	const {classes, modalRequest, view} = props
-
+const Signin = ({classes, modalRequest, view}) => {
 	const body = modalContents({state: view})
 	return (
 		<div className={ classes.container }>
@@ -71,18 +64,10 @@ const Signin = (props) => {
 				{ body.subtitle }
 			</Typography>
 			<div className={ `${classes.container} ${classes.buttonGroup}` }>
-				<Button variant="outlined" className={ classes.social }>
-					<FontAwesomeIcon
-						icon={ ["fab", "facebook"] }
-						className={ classes.icon }/>
-					{ body.facebook }
-				</Button>
-				<Button variant="outlined" className={ classes.social }>
-					<FontAwesomeIcon
-						className={ classes.icon }
-						icon={ ["fab", "google"] }/>
-					{ body.google }
-				</Button>
+				<Signup
+					textButton={ {facebook: body.facebook, google: body.google} }
+					classes={ classes }
+				/>
 			</div>
 			<div>
 				<Button disabled={ true }>{ body.bottom }</Button>
@@ -95,6 +80,12 @@ const Signin = (props) => {
 	)
 }
 
+// Signin.propTypes = {
+// 	classes: PropTypes.object.isRequired,
+// 	view: PropTypes.string.isRequired,
+// 	modalRequest: PropTypes.func.isRequired
+// }
+
 // SigninModal.propTypes = {
 // 	classes: PropTypes.object.isRequired,
 // 	_isOpen: PropTypes.bool.isRequired,
@@ -113,19 +104,17 @@ class SigninModal extends React.Component {
 				>
 					<div style={ getModalStyle() } className={ classes.paper }>
 						<div className={ classes.closeButton }>
-
 							<IconButton className={ classes.button }
 							            aria-label="SING_IN"
 							            onClick={ () => modalRequest({modalProps: false}) }
 							>
 								<CloseIcon/>
-
 							</IconButton>
 						</div>
 						<Signin
 							classes={ classes }
-							modalRequest={ modalRequest }
 							view={ modalView }
+							modalRequest={ modalRequest }
 						/>
 					</div>
 				</Modal>

src/modal/reducer.js

@@ -1,9 +1,10 @@
 import {
+	INIT_MODAL,
 	MODAL_REQUESTING, MODAL_SUCCESS, MODAL_FAIL
 } from "./constants"
 
 const initialState = {
-	modalType: null,
+	modalType: INIT_MODAL,
 	modalProps: false,
 	requesting: false,
 	successful: false,

src/modal/sagas.js

@@ -2,7 +2,6 @@ import { call, put, takeLatest, takeEvery } from "redux-saga/effects"
 import { MODAL_REQUESTING, MODAL_SUCCESS, MODAL_FAIL } from "./constants"
 
 function* modalFlow(action) {
-	console.log(action)
 	try {
 		const { modalProps, modalType } = action
 		yield put({ type: MODAL_SUCCESS, modalProps, modalType })

src/reducers/index.js

@@ -1,6 +1,6 @@
 import { combineReducers } from "redux"
 import { routerReducer } from "react-router-redux"
-import signup from '../signup/reducer'
+import signup from '../sign-up/reducer'
 import modal from "../modal/reducer"
 export default combineReducers({
 	routing: routerReducer,

src/sagas/index.js

@@ -1,9 +1,11 @@
 import { all } from "redux-saga/effects"
 import ModalSaga from "../modal/sagas"
+import SignupSaga from "../sign-up/sagas"
 
 export default function* rootSagas() {
 
 	yield all([
-		ModalSaga()
+		ModalSaga(),
+		SignupSaga()
 	])
 }