diff --git a/package-lock.json b/package-lock.json index fc82f8b..927ebff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3811,6 +3811,43 @@ "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", "dev": true }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "is-buffer": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz", + "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "babel-helper-evaluate-path": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/babel-helper-evaluate-path/-/babel-helper-evaluate-path-0.5.0.tgz", diff --git a/package.json b/package.json index d7e3fcd..58ecbc6 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@types/react-dom": "16.8.3", "@types/react-redux": "7.0.6", "@types/react-router-dom": "4.3.1", + "axios": "0.19.0", "diff": "4.0.1", "diff2html": "2.9.0", "dotenv": "7.0.0", diff --git a/src/actions/users.ts b/src/actions/users.ts new file mode 100644 index 0000000..220f52d --- /dev/null +++ b/src/actions/users.ts @@ -0,0 +1,21 @@ +import axios from 'axios' +import { ThunkAction } from 'redux-thunk' +import { rootURL } from '../common/constants/url' + +export const createUser = (): ThunkAction, {}, {}, any> => { + return dispatch => { + return axios({ + method: 'post', + url: rootURL, + headers: { Authorization: `Bearer ${localStorage.getItem('elaborate-jwt')}` }, + data: { + name: 'Sunny', + email: 'bokusunny@example.com', + }, + }) + .then(res => { + dispatch({ type: 'hoge', newUser: res.data }) + }) + .catch(e => console.error(e)) + } +} diff --git a/src/common/constants/url.ts b/src/common/constants/url.ts new file mode 100644 index 0000000..88243d1 --- /dev/null +++ b/src/common/constants/url.ts @@ -0,0 +1,13 @@ +export const rootURL = (() => { + switch (process.env.NODE_ENV) { + case 'development': + return 'http://localhost:3000' + + case 'production': + return 'https://elabor-8.com' + + default: + console.warn("'NODE_ENV' is not found in .env and temporarily set localhost:3000 instead.") + return 'http://localhost:3000' + } +})() diff --git a/src/components/molecules/HeaderRight/index.tsx b/src/components/molecules/HeaderRight/index.tsx index d8d7e8f..0e03581 100644 --- a/src/components/molecules/HeaderRight/index.tsx +++ b/src/components/molecules/HeaderRight/index.tsx @@ -11,6 +11,13 @@ interface Props { handleModalOpen?: React.Dispatch> } +const onClickSignOut = () => { + auth.signOut().then(() => { + localStorage.removeItem('elaborate-jwt') + Alert.success('Successfully signed out.') + }) +} + const HeaderRight: React.FC = ({ colorType, pageType, handleModalOpen }) => { switch (pageType) { case 'landing': @@ -22,11 +29,7 @@ const HeaderRight: React.FC = ({ colorType, pageType, handleModalOpen }) case 'myPage': return ( - auth.signOut().then(() => Alert.success('Successfully signed out.'))} - > + Sign out ) diff --git a/src/components/molecules/SNSButtons/index.tsx b/src/components/molecules/SNSButtons/index.tsx index fdef315..b4b4d9e 100644 --- a/src/components/molecules/SNSButtons/index.tsx +++ b/src/components/molecules/SNSButtons/index.tsx @@ -1,29 +1,40 @@ import React from 'react' +import { connect } from 'react-redux' import Alert from 'react-s-alert' import { firebase, auth } from '../../../utils/firebase' import SNSSignInButton from '../../atoms/Buttons/SNSSignInButton' +import { createUser } from '../../../actions/users' import * as styles from './style.css' const { buttonsWrapper, modalTitle, welcomeMessage, modalElaborate } = styles interface Props { type: 'Sign in' | 'Sign up' | null + createUser: () => Promise } const onClickGoogleSignin = () => { const provider = new firebase.auth.GoogleAuthProvider() - auth.signInWithPopup(provider).then(() => { + auth.signInWithPopup(provider).then(res => { + const user = res.user as firebase.User + user.getIdToken().then(token => { + localStorage.setItem('elaborate-jwt', token) + }) setTimeout(() => Alert.info('Successfully signed in!'), 800) }) } const onClickTwitterSignin = () => { const provider = new firebase.auth.TwitterAuthProvider() - auth.signInWithPopup(provider).then(() => { + auth.signInWithPopup(provider).then(res => { + const user = res.user as firebase.User + user.getIdToken().then(token => { + localStorage.setItem('elaborate-jwt', token) + }) setTimeout(() => Alert.info('Successfully signed in!'), 800) }) } -const SNSButtons: React.FC = ({ type }) => { +const SNSButtons: React.FC = ({ type, createUser }) => { return (

@@ -33,13 +44,13 @@ const SNSButtons: React.FC = ({ type }) => {

{`${type} with`}

- alert(`Sorry, Facebook auth is not available now...`)} - /> + {/* TODO: 一時的に一番影響が小さそうなfacebookボタンでaxiosをテスト、あとで削除する */} + createUser()} />

) } -export default SNSButtons +export default connect( + null, + { createUser } +)(SNSButtons)