Fixed bug with site manifest not finding an image. Refactored SignUpF…

…orm (React) fields.
iamshivex · Jul 22, 2021 · d2cf3ba · d2cf3ba
1 parent 936ebf9
commit d2cf3ba
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 123 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,8 @@ git clone https://github.com/zero-to-mastery/book-tracker.git
 
 ### Install dependencies
 
+For the client side:
+
 ```sh
 cd book-tracker
 npm install

diff --git a/backend/src/controllers/user.controller.js b/backend/src/controllers/user.controller.js
@@ -1,70 +1,68 @@
-const {
-	User,
-	validateRegister,
-	validateLogin,
-} = require('../models/User.model');
-const bcrypt = require('bcryptjs');
+const { User, validateRegister, validateLogin } = require("../models/User.model");
+const bcrypt = require("bcryptjs");
 
-const collectErrorMessage = (error) => ({ [error.details[0].context.key]: error.details[0].message })
+const collectErrorMessage = (error) => ({ [error.details[0].context.key]: error.details[0].message });
 
 export default {
-	signUp: async (req, res) => {
-		const { error } = validateRegister(req.body);
-		if (error) return res.status(400).send({
-      type: error.name, details: collectErrorMessage(error)
-		});
+  signUp: async (req, res) => {
+    const { error } = validateRegister(req.body);
+    if (error)
+      return res.status(400).send({
+        type: error.name,
+        details: collectErrorMessage(error),
+      });
 
-		const { email, password, name } = req.body;
+    const { email, password, name } = req.body;
 
-		let user = await User.findOne({ email }); // Verify if user already exist.
-		if (user) {
-			return res.status(400).json({
-				message: 'User already registered.',
-			});
-		}
+    let user = await User.findOne({ email }); // Verify if user already exist.
+    if (user) {
+      return res.status(400).json({
+        message: "User already registered.",
+      });
+    }
 
-		user = new User({
-			name,
-			email,
-			password,
-		});
+    user = new User({
+      name,
+      email,
+      password,
+    });
 
-		try {
-			const salt = await bcrypt.genSalt(10);
-			user.password = await bcrypt.hash(password, salt);
-			await user.save();
+    try {
+      const salt = await bcrypt.genSalt(10);
+      user.password = await bcrypt.hash(password, salt);
+      await user.save();
 
-			const token = user.generateAuthToken();
+      const token = user.generateAuthToken();
 
-			res.header('x-auth-token', token).status(201).send({
-				message: 'User successfully registered',
-				user: user._id,
-			});
-		} catch (err) {
-			res.status(400).json(err);
-		}
-	},
+      res.header("x-auth-token", token).status(201).send({
+        message: "User successfully registered",
+        user: user._id,
+      });
+    } catch (err) {
+      res.status(400).json(err);
+    }
+  },
 
-	login: async (req, res) => {
-		// const { error } = validateLogin(req.body);
-		// if (error) return res.status(400).send(error.details[0].message);
-		console.log(req.body);
+  login: async (req, res) => {
+    // const { error } = validateLogin(req.body);
+    // if (error) return res.status(400).send(error.details[0].message);
+    console.log(req.body);
 
-		const { email, password } = req.body;
-		const user = await User.findOne({ email });
+    const { email, password } = req.body;
+    const user = await User.findOne({ email });
 
-		if (!user) return res.status(400).send('Invalid email or password');
+    if (!user) return res.status(400).send("Invalid email or password");
 
-		const validPass = await bcrypt.compare(password, user.password);
-		if (!validPass) {
-			return res.status(400).send('Invalid email or password.');
-		}
+    const validPass = await bcrypt.compare(password, user.password);
+    if (!validPass) {
+      return res.status(400).send("Invalid email or password.");
+    }
 
-		const token = user.generateAuthToken();
+    const token = user.generateAuthToken();
 
-		res.header('x-auth-token', token).status(200).send({
-			message: 'Successfully logged in!',
-			token,
-		});
-	},
+    res.header("x-auth-token", token).status(200).send({
+      message: "Successfully logged in!",
+      token,
+    });
+  },
 };
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "booktracker",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:5000/",
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",

diff --git a/public/favicon_package/site.webmanifest b/public/favicon_package/site.webmanifest
@@ -1,19 +1,20 @@
 {
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-384x384.png",
-            "sizes": "384x384",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "../",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
 }
diff --git a/public/manifest.json b/public/manifest.json
@@ -3,22 +3,22 @@
   "name": "Book-Tracker Web App",
   "icons": [
     {
-      "src": "/favicon.ico",
+      "src": "favicon.ico",
       "sizes": "32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/android-chrome-384x384.png",
+      "src": "android-chrome-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": "/",
   "display": "standalone",
   "theme_color": "#ffffff",
   "background_color": "#ffffff"

diff --git a/src/components/SignUpPage/AlteredTextField/AlteredTextField.js b/src/components/SignUpPage/AlteredTextField/AlteredTextField.js
@@ -1,14 +1,13 @@
 import React from "react";
 import { TextField } from "@material-ui/core";
 
-export const AlteredTextField = ({
-  id, type, label, onChange, value, error
-}) => {
+export const AlteredTextField = ({ required, id, name, type, label, onChange, value, error }) => {
   return (
     <TextField
+      required={required}
       id={id}
       label={label}
-      name={id}
+      name={name}
       type={type}
       variant="outlined"
       onChange={onChange}
@@ -18,5 +17,5 @@ export const AlteredTextField = ({
       fullWidth
       margin="normal"
     />
-  )
-}
+  );
+};
diff --git a/src/components/SignUpPage/SignUpFormFields.js b/src/components/SignUpPage/SignUpFormFields.js
@@ -0,0 +1,30 @@
+export const formFields = [
+  {
+    id: "name",
+    name: "name",
+    type: "text",
+    label: "Name",
+    isRequired: true,
+  },
+  {
+    id: "email",
+    name: "email",
+    type: "email",
+    label: "Email",
+    isRequired: true,
+  },
+  {
+    id: "password",
+    name: "password",
+    type: "password",
+    label: "Password",
+    isRequired: true,
+  },
+  {
+    id: "confirmPassword",
+    name: "confirmPassword",
+    type: "password",
+    label: "Confirm Password",
+    isRequired: true,
+  },
+];
diff --git a/src/components/SignUpPage/SignUpPage.js b/src/components/SignUpPage/SignUpPage.js
@@ -1,7 +1,14 @@
 import React, { Component } from "react";
+
+// API
 import SignUpService from "../../services/signUp.service";
+
+// Custom form component
 import { AlteredTextField } from "./AlteredTextField/AlteredTextField";
 
+// Form fields moved to data file
+import { formFields } from "./SignUpFormFields";
+
 class SignUpPage extends Component {
   state = {
     data: { name: "", email: "", password: "", confirmPassword: "" },
@@ -10,41 +17,64 @@ class SignUpPage extends Component {
 
   handleChange = (e) => {
     const { name, value } = e.target;
-    this.setState(prevState => {
+    this.setState((prevState) => {
       return {
         data: {
           ...prevState.data,
-          [name]: value
-        }
-      }
-    })
+          [name]: value,
+        },
+      };
+    });
   };
 
   handleSubmit = async (e) => {
     e.preventDefault();
     const { name, email, password, confirmPassword } = this.state.data;
+    console.log(`Form fields: ${name}, ${email}, ${password}`);
 
-    if (password !== confirmPassword) {/* alert("Password doesn't match")*/
+    if (password !== confirmPassword) {
       this.setState({
         errors: {
-          confirmPassword: "Password doesn't match"
-        }
-      })
-    } else {
-      const response = await SignUpService.request(JSON.stringify({ name, email, password }))
-      if (response.error) {
-        this.setState((prevState) => ({
-          errors: { ...response.body.details }
-        }));
-      }
+          confirmPassword: "Password doesn't match",
+        },
+      });
+      return;
+    }
+
+    // Since we're using async/await,
+    // we wrap them call in a try/catch block
+    try {
+      const response = await SignUpService.request(JSON.stringify({ name, email, password }));
+      const data = await response.json();
+      console.log(data);
+    } catch (error) {
+      console.log(error);
+      this.setState((prevState) => ({
+        ...prevState,
+        errors: { error },
+      }));
     }
   };
 
   render() {
     return (
       <form onSubmit={this.handleSubmit} className="form-container">
         <h2>Sign Up</h2>
-        <AlteredTextField
+        {/* Render form fields */}
+        {formFields.map((field, index) => (
+          <AlteredTextField
+            key={index}
+            required={field.isRequired}
+            id={field.id}
+            name={field.name}
+            type={field.type}
+            label={field.label}
+            onChange={this.handleChange}
+            error={this.state.errors[field.name]}
+          />
+        ))}
+
+        {/* <AlteredTextField
           id="name"
           type="text"
           label="Name"
@@ -75,8 +105,8 @@ class SignUpPage extends Component {
           onChange={this.handleChange}
           value={this.state.data.confirmPassword}
           error={this.state.errors.confirmPassword}
-        />
-        <button>Register</button>
+        /> */}
+        <button type="submit">Register</button>
       </form>
     );
   }