refactor to fetch to ensure proper cookie storage

This commit is contained in:
Sorrel Bri 2020-01-17 19:57:27 -08:00
parent 3ea7dafb85
commit fb0641fa0d
5 changed files with 54 additions and 20 deletions

View file

@ -1,17 +1,14 @@
import React, {useState, useEffect, useReducer} from 'react'; import React, {useState, useEffect, useReducer} from 'react';
import './App.scss';
import config from './config';
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import socketIOClient from 'socket.io-client'; import socketIOClient from 'socket.io-client';
import config from './config';
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import MainWrapper from './components/MainWrapper/MainWrapper'; import MainWrapper from './components/MainWrapper/MainWrapper';
import { stateReducer } from './reducers/stateReducer'; import { stateReducer } from './reducers/stateReducer';
import { initState } from './reducers/init/stateReducer.init'; import { initState } from './reducers/init/stateReducer.init';
import indexServices from './services/api/indexServices';
import './App.scss';
export const socket = socketIOClient(config.apiAddress); export const socket = socketIOClient(config.socketAddress);
function App() { function App() {
@ -25,18 +22,17 @@ function App() {
initState initState
); );
const fetchIndexAPI = () => { const fetchIndexAPI = async () => {
fetch(config.apiAddress) const response = await indexServices.indexService();
.then(res => res.text()) if (response.body) {
.catch(err => setError([...error, err])) console.log(response.body)
.then(data => {
const action = { const action = {
type: 'INDEX', type: 'INDEX',
message: 'INDEX_DATA', message: 'SET_USER',
body: data body: response.body
} }
dispatch(action) dispatch(action)
}) }
} }
const socketConnect = () => { const socketConnect = () => {

View file

@ -7,7 +7,9 @@ const production = {
} }
const development = { const development = {
apiAddress: 'http://localhost:8000', authAddress: 'http://localhost:8000/auth',
apiAddress: 'http://localhost:8000/api/v1',
socketAddress: 'http://localhost:8000',
endpoint: 'http://localhost:3000' endpoint: 'http://localhost:3000'
} }

View file

@ -4,7 +4,7 @@ import type { state, action } from '../stateReducer';
export const indexReducer = (state: state, action: action):state => { export const indexReducer = (state: state, action: action):state => {
switch(action.message) { switch(action.message) {
case 'INDEX_DATA': case 'SET_USER':
const parsedData = indexDataParse(action.body); const parsedData = indexDataParse(action.body);
return state; return state;

View file

@ -0,0 +1,24 @@
import config from '../../config';
const apiAddress = config.apiAddress;
var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Sec-Fetch-Site', 'cross-site')
const indexService = async () => {
const response = await fetch(apiAddress,
{method: 'GET', credentials: 'include', headers: headers}
)
.then(res => {
return res;
}).catch(err => {
return err;
});
return response;
}
export default {
indexService
}

View file

@ -1,16 +1,28 @@
import config from '../config'; import config from '../config';
import Axios from 'axios'; import Axios from 'axios';
const authEndpoint = `${config.apiAddress}/auth`; const authEndpoint = config.authAddress;
const signupEndpoint = `${authEndpoint}/signup` const signupEndpoint = `${authEndpoint}/signup`
const loginEndpoint = `${authEndpoint}/login` const loginEndpoint = `${authEndpoint}/login`
var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Sec-Fetch-Site', 'cross-site')
const loginService = () => { const loginService = () => {
} }
const signupService = async (formData) => { const signupService = async (formData) => {
const response = await Axios.post(signupEndpoint, {...formData }) // const response = await Axios.post(signupEndpoint, {...formData }, {credentials: 'include', headers: headers})
console.log(formData)
const response = await fetch(signupEndpoint, {
method: 'POST',
credentials: 'include',
body: JSON.stringify(formData),
headers: headers
})
.then(res => { .then(res => {
return res; return res;
}).catch(err => { }).catch(err => {