add FE service to post to auth/guest
This commit is contained in:
parent
2f1174c21b
commit
1e6050a486
4 changed files with 115 additions and 59 deletions
34
packages/play-node-go/src/components/Button/Guest/Guest.js
Normal file
34
packages/play-node-go/src/components/Button/Guest/Guest.js
Normal 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;
|
|
@ -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;
|
||||||
|
|
|
@ -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 };
|
||||||
}
|
}
|
|
@ -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,
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in a new issue