add FE service to post to auth/guest

This commit is contained in:
sorrelbri 2020-06-26 17:55:52 -07:00
parent 2f1174c21b
commit 1e6050a486
4 changed files with 115 additions and 59 deletions

View file

@ -0,0 +1,34 @@
import React from "react";
import authServices from "../../../services/authServices";
const Guest = ({ dispatch }) => {
const handleClick = async (e) => {
e.preventDefault();
// dispatch to guest endpoint
const guestResponse = await authServices.guestService();
if (guestResponse.errors) {
const authError = guestResponse.errors[0].auth;
return dispatch({
type: "ERR",
message: "AUTH_ERROR",
body: { authError },
});
}
return dispatch({
type: "AUTH",
message: "GUEST",
body: guestResponse,
});
};
return (
<>
<button className="nav__section__button" onClick={handleClick}>
Continue As Guest
</button>
</>
);
};
export default Guest;

View file

@ -1,45 +1,49 @@
import React, { useState } from 'react';
import React, { useState } from "react";
import Login from '../Login/Login';
import Signup from '../Signup/Signup';
import Login from "../Login/Login";
import Signup from "../Signup/Signup";
import Guest from "../../Button/Guest/Guest";
const Auth = (props) => {
const [ showForm, setShowForm ] = useState('login')
const [showForm, setShowForm] = useState("login");
const { state, dispatch } = props;
return (
<>
<div
className="nav__section nav__section--auth"
onClick={()=>{setShowForm('login')}}
onClick={() => {
setShowForm("login");
}}
>
<p
className="nav__section__label"
>Login</p>
<p className="nav__section__label">Login</p>
{
showForm === 'login'
? <Login dispatch={dispatch} state={state}/>
: <></>
}
{showForm === "login" ? (
<Login dispatch={dispatch} state={state} />
) : (
<></>
)}
</div>
<div
className="nav__section nav__section--auth"
onClick={()=>{setShowForm('signup')}}
onClick={() => {
setShowForm("signup");
}}
>
<p
className="nav__section__label"
>Signup</p>
<p className="nav__section__label">Signup</p>
{
showForm === 'signup'
? <Signup dispatch={dispatch} state={state}/>
: <></>
}
{showForm === "signup" ? (
<Signup dispatch={dispatch} state={state} />
) : (
<></>
)}
</div>
<div className="nav__section nav__section--auth">
<Guest dispatch={dispatch} />
</div>
</>
);
}
};
export default Auth;

View file

@ -1,20 +1,23 @@
export const authReducer = (state, action) => {
switch (action.message) {
case 'LOGIN':
case "LOGIN":
return loginReducer(state, action);
case 'SIGNUP':
case "SIGNUP":
return loginReducer(state, action);
case 'LOGOUT':
case "GUEST":
return loginReducer(state, action);
case "LOGOUT":
return state;
default:
return state;
}
}
};
function loginReducer(state, action) {
const newUser = action.body;
return {...state, user: newUser };
return { ...state, user: newUser };
}

View file

@ -1,43 +1,58 @@
import config from '../config';
import config from "../config";
const authEndpoint = config.authAddress;
const signupEndpoint = `${authEndpoint}/signup`
const loginEndpoint = `${authEndpoint}/login`
const signupEndpoint = `${authEndpoint}/signup`;
const loginEndpoint = `${authEndpoint}/login`;
const guestEndpoint = `${authEndpoint}/guest`;
var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Sec-Fetch-Site', 'cross-site')
headers.append("Content-Type", "application/json");
headers.append("Accept", "application/json");
headers.append("Sec-Fetch-Site", "cross-site");
const loginService = async(formData) => {
const loginService = async (formData) => {
const response = await fetch(loginEndpoint, {
method: 'POST',
credentials: 'include',
method: "POST",
credentials: "include",
body: JSON.stringify(formData),
headers: headers
headers: headers,
})
.then(res => res.text())
.then(text => JSON.parse(text))
.catch(err => err);
.then((res) => res.text())
.then((text) => JSON.parse(text))
.catch((err) => err);
return response;
}
};
const signupService = async (formData) => {
const response = await fetch(signupEndpoint, {
method: 'POST',
credentials: 'include',
method: "POST",
credentials: "include",
body: JSON.stringify(formData),
headers: headers
headers: headers,
})
.then(res => res.text())
.then(text => JSON.parse(text))
.catch(err => err);
.then((res) => res.text())
.then((text) => JSON.parse(text))
.catch((err) => err);
return response;
}
};
const guestService = async () => {
const response = await fetch(guestEndpoint, {
method: "POST",
credentials: "include",
headers,
})
.then((res) => res.text())
.then((text) => JSON.parse(text))
.catch((err) => err);
return response;
};
export default {
loginService,
signupService
}
signupService,
guestService,
};