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 Login from "../Login/Login";
import Signup from '../Signup/Signup'; import Signup from "../Signup/Signup";
import Guest from "../../Button/Guest/Guest";
const Auth = (props) => { const Auth = (props) => {
const [ showForm, setShowForm ] = useState('login') const [showForm, setShowForm] = useState("login");
const { state, dispatch } = props; const { state, dispatch } = props;
return ( return (
<> <>
<div <div
className="nav__section nav__section--auth" className="nav__section nav__section--auth"
onClick={()=>{setShowForm('login')}} onClick={() => {
setShowForm("login");
}}
> >
<p <p className="nav__section__label">Login</p>
className="nav__section__label"
>Login</p>
{ {showForm === "login" ? (
showForm === 'login' <Login dispatch={dispatch} state={state} />
? <Login dispatch={dispatch} state={state}/> ) : (
: <></> <></>
} )}
</div> </div>
<div <div
className="nav__section nav__section--auth" className="nav__section nav__section--auth"
onClick={()=>{setShowForm('signup')}} onClick={() => {
setShowForm("signup");
}}
> >
<p <p className="nav__section__label">Signup</p>
className="nav__section__label"
>Signup</p>
{ {showForm === "signup" ? (
showForm === 'signup' <Signup dispatch={dispatch} state={state} />
? <Signup dispatch={dispatch} state={state}/> ) : (
: <></> <></>
} )}
</div>
<div className="nav__section nav__section--auth">
<Guest dispatch={dispatch} />
</div> </div>
</> </>
); );
} };
export default Auth; export default Auth;

View file

@ -1,20 +1,23 @@
export const authReducer = (state, action) => { export const authReducer = (state, action) => {
switch (action.message) { switch (action.message) {
case 'LOGIN': case "LOGIN":
return loginReducer(state, action); return loginReducer(state, action);
case 'SIGNUP': case "SIGNUP":
return loginReducer(state, action); return loginReducer(state, action);
case 'LOGOUT': case "GUEST":
return loginReducer(state, action);
case "LOGOUT":
return state; return state;
default: default:
return state; return state;
} }
} };
function loginReducer(state, action) { function loginReducer(state, action) {
const newUser = action.body; 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 authEndpoint = config.authAddress;
const signupEndpoint = `${authEndpoint}/signup` const signupEndpoint = `${authEndpoint}/signup`;
const loginEndpoint = `${authEndpoint}/login` const loginEndpoint = `${authEndpoint}/login`;
const guestEndpoint = `${authEndpoint}/guest`;
var headers = new Headers(); var headers = new Headers();
headers.append('Content-Type', 'application/json'); headers.append("Content-Type", "application/json");
headers.append('Accept', 'application/json'); headers.append("Accept", "application/json");
headers.append('Sec-Fetch-Site', 'cross-site') headers.append("Sec-Fetch-Site", "cross-site");
const loginService = async(formData) => { const loginService = async (formData) => {
const response = await fetch(loginEndpoint, { const response = await fetch(loginEndpoint, {
method: 'POST', method: "POST",
credentials: 'include', credentials: "include",
body: JSON.stringify(formData), body: JSON.stringify(formData),
headers: headers headers: headers,
}) })
.then(res => res.text()) .then((res) => res.text())
.then(text => JSON.parse(text)) .then((text) => JSON.parse(text))
.catch(err => err); .catch((err) => err);
return response; return response;
} };
const signupService = async (formData) => { const signupService = async (formData) => {
const response = await fetch(signupEndpoint, { const response = await fetch(signupEndpoint, {
method: 'POST', method: "POST",
credentials: 'include', credentials: "include",
body: JSON.stringify(formData), body: JSON.stringify(formData),
headers: headers headers: headers,
}) })
.then(res => res.text()) .then((res) => res.text())
.then(text => JSON.parse(text)) .then((text) => JSON.parse(text))
.catch(err => err); .catch((err) => err);
return response; 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 { export default {
loginService, loginService,
signupService signupService,
} guestService,
};