Modified flow and added features like registratioin and profile update

Author: Vivek Chowdhury

src/api/LoginServices.js

@@ -1,22 +1,7 @@
+import { handleError, handleResponse } from "./serviceUtils";
 const baseUrl = process.env.REACT_APP_API_URL + "/Login";
 
 export function validateUser(userid, password) {
   const url = baseUrl + `?userid=${userid}&password=${password}`;
   return fetch(url).then(handleResponse).catch(handleError);
 }
-
-async function handleResponse(response) {
-  if (response.ok || response.status === 401) return response.json();
-  if (response.status === 400) {
-    // So, a server-side validation error occurred.
-    // Server side validation returns a string error message, so parse as text instead of json.
-    const error = await response.text();
-    throw new Error(error);
-  }
-  throw new Error("Network response was not ok.");
-}
-
-function handleError(error) {
-  console.error("API call failed. " + error);
-  throw error;
-}

src/api/UserService.js

@@ -0,0 +1,37 @@
+import { handleError, handleResponse } from "./serviceUtils";
+
+const baseUrl = process.env.REACT_APP_API_URL + "/users/";
+
+export function updateProfile(source) {
+  const user = clearRequestBody(source);
+  const userId = user.id || "";
+  const url = baseUrl + `${userId}`;
+
+  return fetch(url, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(user),
+  })
+    .then(handleResponse)
+    .catch(handleError);
+}
+
+export function registerUser(source) {
+  const user = clearRequestBody(source);
+  return fetch(baseUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(user),
+  })
+    .then(handleResponse)
+    .catch(handleError);
+}
+
+function clearRequestBody(source) {
+  const user = { ...source };
+  delete user.isLoggedIn;
+  delete user.iAgree;
+  delete user.rememberMe;
+  delete user.error;
+  return user;
+}

src/api/serviceUtils.js

@@ -0,0 +1,15 @@
+export async function handleResponse(response) {
+  if (response.ok || response.status === 401) return response.json();
+  if (response.status === 400) {
+    // So, a server-side validation error occurred.
+    // Server side validation returns a string error message, so parse as text instead of json.
+    const error = await response.text();
+    throw new Error(error);
+  }
+  throw new Error("Network response was not ok.");
+}
+
+export function handleError(error) {
+  console.error("API call failed. " + error);
+  throw error;
+}

src/app/Header/Header.js

@@ -4,9 +4,16 @@ import { NavLink } from "react-router-dom";
 import { connect } from "react-redux";
 
 function Header(props) {
+  // Contains true if scroll event is added.
   const [isListening, setIsListening] = useState(false);
+
+  // contains true if window is scrolled by user
   const [doChangeBackground, setDoChangeBackground] = useState(false);
 
+  /**
+   * @description This function is responsible for adding scroll event listener and
+   * removing it when Header is removed from display list.
+   */
   useEffect(() => {
     if (!isListening) {
       setIsListening(true);
@@ -19,6 +26,12 @@ function Header(props) {
     };
   }, [isListening]);
 
+  /**
+   * @description This method is invoked when user scroll window, it is responsible
+   * for setting member variable which will further change the background color of header
+   * component.
+   * @param {*} event
+   */
   const handleScroll = (event) => {
     event.preventDefault();
     setDoChangeBackground(window.scrollY > 40);
@@ -33,17 +46,19 @@ function Header(props) {
       <div className="container">
         <div className="collapse navbar-collapse full-width">
           <ul className="navbar-nav mr-auto">
-            <li className="nav-item">
-              <NavLink
-                className={
-                  doChangeBackground ? "nav_link_light" : "nav_link_dark"
-                }
-                to="/feeds"
-              >
-                Feeds
-              </NavLink>
-            </li>
-            {props.user.id && (
+            {props.user.isLoggedIn && (
+              <li className="nav-item">
+                <NavLink
+                  className={
+                    doChangeBackground ? "nav_link_light" : "nav_link_dark"
+                  }
+                  to="/feeds"
+                >
+                  Feeds
+                </NavLink>
+              </li>
+            )}
+            {props.user.isLoggedIn && (
               <li className="nav-item">
                 <NavLink
                   className={
@@ -86,7 +101,6 @@ function Header(props) {
               }
               onClick={props.onSignIn}
             >
-              {" "}
               {!props.user.isLoggedIn ? "Sign In" : "Sign Out"}
             </button>
           </ul>
@@ -96,6 +110,10 @@ function Header(props) {
   );
 }
 
+/**
+ * @description This method retrieve slice of state from store
+ * @param {*} state
+ */
 function mapToStateProps(state) {
   return {
     user: state.user,

src/app/Login/Login.js

@@ -11,7 +11,9 @@ function DisplayPicture(props) {
         className="displayPicture"
         alt="Logo"
       ></img>
-      {props.name && <div className="nameHolder">{props.name}</div>}
+      {props.fname && props.lname && (
+        <div className="nameHolder">{props.fname + " " + props.lname}</div>
+      )}
     </div>
   );
 }