From e31b989274954d83803e1e273527b5db6b80c8a0 Mon Sep 17 00:00:00 2001 From: TaishiM Date: Sun, 16 Jun 2019 18:51:22 +0900 Subject: [PATCH 1/6] Open PR From 62ff074782bbcb64e94ce705e56da05496d06b90 Mon Sep 17 00:00:00 2001 From: TaishiM Date: Mon, 17 Jun 2019 08:16:21 +0900 Subject: [PATCH 2/6] Add axios package --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 38 insertions(+) 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", From 3eb9751b69218ea254bfce722e615440691a1e5f Mon Sep 17 00:00:00 2001 From: TaishiM Date: Tue, 25 Jun 2019 10:13:02 +0900 Subject: [PATCH 3/6] Add basic axios and check if it works properly --- src/actions/users.ts | 14 ++++++++++++++ src/common/constants/url.ts | 13 +++++++++++++ src/components/molecules/SNSButtons/index.tsx | 17 ++++++++++------- 3 files changed, 37 insertions(+), 7 deletions(-) create mode 100644 src/actions/users.ts create mode 100644 src/common/constants/url.ts diff --git a/src/actions/users.ts b/src/actions/users.ts new file mode 100644 index 0000000..4becec8 --- /dev/null +++ b/src/actions/users.ts @@ -0,0 +1,14 @@ +import axios from 'axios' +import { ThunkAction } from 'redux-thunk' +import { rootURL } from '../common/constants/url' + +export const createUser = (): ThunkAction, {}, {}, any> => { + return dispatch => { + return axios + .post(rootURL) + .then(res => { + dispatch({ type: 'hoge', statusCode: res.status }) + }) + .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/SNSButtons/index.tsx b/src/components/molecules/SNSButtons/index.tsx index fdef315..b698ed3 100644 --- a/src/components/molecules/SNSButtons/index.tsx +++ b/src/components/molecules/SNSButtons/index.tsx @@ -1,12 +1,15 @@ 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 = () => { @@ -23,7 +26,7 @@ const onClickTwitterSignin = () => { }) } -const SNSButtons: React.FC = ({ type }) => { +const SNSButtons: React.FC = ({ type, createUser }) => { return (

@@ -33,13 +36,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) From a0ffbba6e71b6c8728b59aff6830e9627c39032b Mon Sep 17 00:00:00 2001 From: TaishiM Date: Wed, 26 Jun 2019 19:55:46 +0900 Subject: [PATCH 4/6] Add request body --- src/actions/users.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/actions/users.ts b/src/actions/users.ts index 4becec8..cbe98b7 100644 --- a/src/actions/users.ts +++ b/src/actions/users.ts @@ -4,10 +4,16 @@ import { rootURL } from '../common/constants/url' export const createUser = (): ThunkAction, {}, {}, any> => { return dispatch => { - return axios - .post(rootURL) + return axios({ + method: 'post', + url: rootURL, + data: { + name: 'Sunny', + email: 'bokusunny@example.com', + }, + }) .then(res => { - dispatch({ type: 'hoge', statusCode: res.status }) + dispatch({ type: 'hoge', newUser: res.data }) }) .catch(e => console.error(e)) } From 45261144a95abf5a62120f19af0326aac1ccd414 Mon Sep 17 00:00:00 2001 From: TaishiM Date: Sun, 30 Jun 2019 12:48:08 +0900 Subject: [PATCH 5/6] Set jwt to localstorage when signin or signup --- src/components/molecules/SNSButtons/index.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/molecules/SNSButtons/index.tsx b/src/components/molecules/SNSButtons/index.tsx index b698ed3..b4b4d9e 100644 --- a/src/components/molecules/SNSButtons/index.tsx +++ b/src/components/molecules/SNSButtons/index.tsx @@ -14,14 +14,22 @@ interface Props { 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) }) } From de4d311f48449df04d897aef7f2b3935152a1227 Mon Sep 17 00:00:00 2001 From: TaishiM Date: Sun, 30 Jun 2019 12:58:44 +0900 Subject: [PATCH 6/6] Add request headers with jwt --- src/actions/users.ts | 1 + src/components/molecules/HeaderRight/index.tsx | 13 ++++++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/actions/users.ts b/src/actions/users.ts index cbe98b7..220f52d 100644 --- a/src/actions/users.ts +++ b/src/actions/users.ts @@ -7,6 +7,7 @@ export const createUser = (): ThunkAction, {}, {}, any> => { return axios({ method: 'post', url: rootURL, + headers: { Authorization: `Bearer ${localStorage.getItem('elaborate-jwt')}` }, data: { name: 'Sunny', email: 'bokusunny@example.com', 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 )