refactor to fetch to ensure proper cookie storage
This commit is contained in:
parent
1ee4c28d4c
commit
d77216d762
5 changed files with 54 additions and 20 deletions
|
@ -1,17 +1,14 @@
|
|||
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 config from './config';
|
||||
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
|
||||
import MainWrapper from './components/MainWrapper/MainWrapper';
|
||||
|
||||
import { stateReducer } from './reducers/stateReducer';
|
||||
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() {
|
||||
|
@ -25,18 +22,17 @@ function App() {
|
|||
initState
|
||||
);
|
||||
|
||||
const fetchIndexAPI = () => {
|
||||
fetch(config.apiAddress)
|
||||
.then(res => res.text())
|
||||
.catch(err => setError([...error, err]))
|
||||
.then(data => {
|
||||
const fetchIndexAPI = async () => {
|
||||
const response = await indexServices.indexService();
|
||||
if (response.body) {
|
||||
console.log(response.body)
|
||||
const action = {
|
||||
type: 'INDEX',
|
||||
message: 'INDEX_DATA',
|
||||
body: data
|
||||
message: 'SET_USER',
|
||||
body: response.body
|
||||
}
|
||||
dispatch(action)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const socketConnect = () => {
|
||||
|
|
|
@ -7,7 +7,9 @@ const production = {
|
|||
}
|
||||
|
||||
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'
|
||||
}
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import type { state, action } from '../stateReducer';
|
|||
export const indexReducer = (state: state, action: action):state => {
|
||||
switch(action.message) {
|
||||
|
||||
case 'INDEX_DATA':
|
||||
case 'SET_USER':
|
||||
const parsedData = indexDataParse(action.body);
|
||||
return state;
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -1,16 +1,28 @@
|
|||
import config from '../config';
|
||||
import Axios from 'axios';
|
||||
|
||||
const authEndpoint = `${config.apiAddress}/auth`;
|
||||
const authEndpoint = config.authAddress;
|
||||
const signupEndpoint = `${authEndpoint}/signup`
|
||||
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 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 => {
|
||||
return res;
|
||||
}).catch(err => {
|
||||
|
|
Loading…
Reference in a new issue