add FE service to post to auth/guest

packages/play-node-go/src/components/Button/Guest/Guest.js

@@ -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;

packages/play-node-go/src/components/Form/Auth/Auth.js

@@ -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 [ 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 
+        <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
         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>
     </>
   );
-}
+};
 
 export default Auth;

packages/play-node-go/src/reducers/auth/reducer.auth.js

@@ -1,18 +1,21 @@
 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;

packages/play-node-go/src/services/authServices.js

@@ -1,43 +1,58 @@
-import config from '../config';
+import config from "../config";
 
 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();
-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 response = await fetch(loginEndpoint, {
-    method: 'POST',
+    method: "POST",
-    credentials: 'include',
+    credentials: "include",
     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;
-}
+};
 
 const signupService = async (formData) => {
   const response = await fetch(signupEndpoint, {
-    method: 'POST',
+    method: "POST",
-    credentials: 'include',
+    credentials: "include",
     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;
-}
+};
+
+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,
+};