[Base] [Do not merge] Replace backend with Go API server

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",

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<Promise<void>, {}, {}, 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))
+  }
+}

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'
+  }
+})()

src/components/molecules/HeaderRight/index.tsx

@@ -11,6 +11,13 @@ interface Props {
   handleModalOpen?: React.Dispatch<React.SetStateAction<OpenModalType>>
 }
 
+const onClickSignOut = () => {
+  auth.signOut().then(() => {
+    localStorage.removeItem('elaborate-jwt')
+    Alert.success('Successfully signed out.')
+  })
+}
+
 const HeaderRight: React.FC<Props> = ({ colorType, pageType, handleModalOpen }) => {
   switch (pageType) {
     case 'landing':
@@ -22,11 +29,7 @@ const HeaderRight: React.FC<Props> = ({ colorType, pageType, handleModalOpen })
 
     case 'myPage':
       return (
-        <BasicButton
-          colorType={colorType}
-          className="signOut"
-          onClick={() => auth.signOut().then(() => Alert.success('Successfully signed out.'))}
-        >
+        <BasicButton colorType={colorType} className="signOut" onClick={onClickSignOut}>
           Sign out
         </BasicButton>
       )

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<void>
 }
 
 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<Props> = ({ type }) => {
+const SNSButtons: React.FC<Props> = ({ type, createUser }) => {
   return (
     <div className={buttonsWrapper}>
       <h2 className={welcomeMessage}>
@@ -33,13 +44,13 @@ const SNSButtons: React.FC<Props> = ({ type }) => {
       <p className={modalTitle}>{`${type} with`}</p>
       <SNSSignInButton type="google" onClick={onClickGoogleSignin} />
       <SNSSignInButton type="twitter" onClick={onClickTwitterSignin} />
-      <SNSSignInButton
-        disabled
-        type="facebook"
-        onClick={() => alert(`Sorry, Facebook auth is not available now...`)}
-      />
+      {/* TODO: 一時的に一番影響が小さそうなfacebookボタンでaxiosをテスト、あとで削除する */}
+      <SNSSignInButton disabled type="facebook" onClick={() => createUser()} />
     </div>
   )
 }
 
-export default SNSButtons
+export default connect(
+  null,
+  { createUser }
+)(SNSButtons)