added login api and services for mock validation [Work in progress]

Author: Vivek Chowdhury

package-lock.json

@@ -19,7 +19,7 @@
     "prestart:api": "node tools/createMockDatabase.js",
     "start:api": "node tools/localServer.js",
     "start": "run-p start:api start:dev",
-    "start:dev": "react-scripts start",
+    "start:dev": "cross-env REACT_APP_API_URL=http://localhost:3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -40,6 +40,7 @@
     ]
   },
   "devDependencies": {
+    "cross-env": "^7.0.2",
     "json-server": "^0.16.1",
     "npm-run-all": "^4.1.5"
   }

package.json

@@ -0,0 +1,22 @@
+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) 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/LoginServices.js

@@ -2,11 +2,27 @@ import React, { useState } from "react";
 import "./Login.css";
 import LoginForm from "./LoginForm/LoginForm";
 import bubbleimage from "./../../assets/placeholders/bubble-image.png";
+import * as LoginServices from "./../../api/LoginServices";
+
+function Login(props) {
+  const [user, setUser] = useState({ userId: "", password: "" });
+
+  const handleChange = ({ target }) => {
+    setUser({
+      ...user,
+      [target.name]: target.value,
+    });
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    console.log(user);
+    LoginServices.validateUser(user.userId, user.password).then((response) => {
+      console.log(response);
+      props.history.push("/feeds");
+    });
+  };
 
-function Login() {
-  const [user] = useState({ userid: "", password: "" });
-  const handleChange = ({ target }) => {};
-  const handleSubmit = () => {};
   return (
     <div style={{ backgroundImage: `url(${bubbleimage})` }}>
       {/* <div>

src/api/UserService.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Footer from "./Footer/Footer";
 import Header from "./Header/Header";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, Redirect } from "react-router-dom";
 import "./TechMarketShell.css";
 
 import Feeds from "./Feeds/Feeds";
@@ -11,14 +11,22 @@ import ContactUs from "./ContactUs/ContactUs";
 import Login from "./Login/Login";
 
 function TechMarketShell(props) {
+  function enforceAuthentication(component, path, user) {
+    if (!user) {
+      return <Redirect exact from={path} to="/" />;
+    }
+    return <Route exact path={path} component={component} />;
+  }
+  console.log(process.env.BASE_URL, "BASE_URL===>");
   return (
     <div className="rootContainer">
       <Header />
       <div className="container-fluid contentContainer">
         <Switch>
           <Route path="/" exact component={Login} />
-          <Route path="/feeds" exact component={Feeds} />
-          <Route path="/profile" component={Profile} />
+          <Route path="/feeds" component={Feeds} />
+          {/* <Route path="/profile" component={Profile} /> */}
+          {enforceAuthentication(Profile, "/profile", null)}
           <Route path="/about" component={About} />
           <Route path="/contact" component={ContactUs} />
         </Switch>

src/app/Login/Login.js

@@ -46,6 +46,38 @@ server.post("/users/", function (req, res, next) {
   }
 });
 
+server.get("/login/", function (req, res, next) {
+  const query = req.query;
+  const users = router.db.getState().users;
+  let match;
+  if (users) {
+    match = users.filter((u) => {
+      return u.id === query.userid && u.password === query.password;
+    });
+    if (match && match.length > 0) {
+      res.status(200).send(match[0]);
+    }
+  }
+  if (!match || match.length === 0) {
+    const error = { errorCode: 404, error: "No record found" };
+    res.status(404).send(error);
+  }
+  // next();
+});
+
+server.get("/login/validateUserId/", function (req, res, next) {
+  const query = req.query;
+  const users = router.db.getState().users;
+  let match = isUserIdUnique(users, query.userid);
+  if (!match || match.length === 0) {
+    const message = { message: "No match found" };
+    res.status(200).send(message);
+  } else {
+    const error = { errorCode: 404, error: "User id already exist" };
+    res.status(404).send(error);
+  }
+});
+
 // Use default router
 server.use(router);
 
@@ -55,6 +87,16 @@ server.listen(port, () => {
   console.log(`JSON Server is running on port ${port}`);
 });
 
+function isUserIdUnique(users, userid) {
+  let match;
+  if (users) {
+    match = users.filter((u) => {
+      return u.id === userid;
+    });
+  }
+  return match;
+}
+
 function validateUser(user) {
   if (!user.userId) return "User id is required.";
   if (!user.passwore) return "Password is required.";