```javascript
// AdEdit.js
{ad?.address && ad?.price ? (
  <AdEditForm action={ad.action} type={ad.type} ad={ad} setAd={setAd} />
) : (
  ""
)}
```

\
```javascript
// components/forms/AdEditForm.js
import CurrencyInput from "react-currency-input-field";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { GOOGLE_PLACES_KEY } from "../../config";
import ImageUpload from "./ImageUpload";
import toast from "react-hot-toast";
import axios from "axios";
import { useNavigate } from "react-router-dom";

export default function AdEditForm({ action, type, ad, setAd }) {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if (!ad.photos?.length) {
        toast.error("Photo is required");
        return;
      } else if (!ad.price) {
        toast.error("Price is required");
        return;
      } else if (!ad.description) {
        toast.error("Description is required");
        return;
      } else {
        setAd({ ...ad, loading: true });
        const { data } = await axios.put(`/ad/${ad._id}`, ad);
        console.log("update response => ", data);
        if (data?.error) {
          toast.error(data.error);
          setAd({ ...ad, loading: false });
        } else {
          if (data?.ok) {
            toast.success("Ad updated successfully");
            navigate("/dashboard");
          }
        }
      }
    } catch (err) {
      console.log(err);
      setAd({ ...ad, loading: false });
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <ImageUpload ad={ad} setAd={setAd} />

        <div className="mb-3 form-control">
          <GooglePlacesAutocomplete
            apiKey={GOOGLE_PLACES_KEY}
            apiOptions={{ region: "au" }}
            selectProps={{
              defaultInputValue: ad?.address,
              placeholder: "Search for address..",
              onChange: ({ value }) => {
                // console.log("address onchange => ", value.description);
                setAd({ ...ad, address: value.description });
              },
            }}
          />
        </div>

        <CurrencyInput
          placeholder="Enter price"
          defaultValue={ad.price}
          className="form-control mb-3"
          onValueChange={(value) => setAd({ ...ad, price: value })}
        />

        {type === "House" ? (
          <>
            <input
              type="number"
              min="0"
              className="form-control mb-3"
              placeholder="Enter how many bedrooms"
              value={ad.bedrooms}
              onChange={(e) => setAd({ ...ad, bedrooms: e.target.value })}
              required
            />

            <input
              type="number"
              min="0"
              className="form-control mb-3"
              placeholder="Enter how many bathrooms"
              value={ad.bathrooms}
              onChange={(e) => setAd({ ...ad, bathrooms: e.target.value })}
              required
            />

            <input
              type="number"
              min="0"
              className="form-control mb-3"
              placeholder="Enter how many car parks"
              value={ad.carpark}
              onChange={(e) => setAd({ ...ad, carpark: e.target.value })}
            />
          </>
        ) : (
          ""
        )}

        <input
          type="text"
          className="form-control mb-3"
          placeholder="Size of land"
          value={ad.landsize}
          onChange={(e) => setAd({ ...ad, landsize: e.target.value })}
        />

        <input
          type="text"
          className="form-control mb-3"
          placeholder="Enter title"
          value={ad.title}
          onChange={(e) => setAd({ ...ad, title: e.target.value })}
          required
        />

        <textarea
          className="form-control mb-3"
          value={ad.description}
          placeholder="Write description"
          onChange={(e) => setAd({ ...ad, description: e.target.value })}
        />

        <button disabled={ad.loading} className="btn btn-primary">
          {ad.loading ? "Saving..." : "Submit"}
        </button>
      </form>
      <br />
      {/* <pre>{JSON.stringify(ad, null, 4)}</pre> */}
    </>
  );
}
```

\
Create backend route and controller to update ad

\
```javascript
// routes/ad.js
router.put("/ad/:_id", requireSignin, ad.update);

// controllers/ad.js
export const update = async (req, res) => {
  try {
    // console.log("req.body update => ", req.body);
    const { photos, price, type, address, description } = req.body;

    let ad = await Ad.findById(req.params._id);
    const owner = req.user._id == ad?.postedBy;
    if (!owner) {
      return res.json({ error: "Permission denied" });
    } else {
      //validation
      if (!photos?.length) {
        return res.json({ error: "Photos are required" });
      }
      if (!price) {
        return res.json({ error: "Price is required" });
      }
      if (!type) {
        return res.json({ error: "Is property house or land?" });
      }
      if (!address) {
        return res.json({ error: "Address is required" });
      }
      if (!description) {
        return res.json({ error: "Description is required" });
      }

      const geo = await config.GOOGLE_GEOCODER.geocode(address);
      // console.log("geo => ", [geo?.[0]?.longitude, geo?.[0]?.latitude]);

      await ad.update({
        ...req.body,
        slug: ad.slug,
        location: {
          type: "Point",
          coordinates: [geo?.[0]?.longitude, geo?.[0]?.latitude],
        },
      });
      res.json({ ok: true });
    }
  } catch (err) {
    console.log(err);
  }
};
```

\


How to create Update component to edit Ad?

Ever dreamed of building a production quality **Real Estate Marketplace App using React Node MongoDB** (full stack JavaScript)? This tutorial series will teach you how to code such app from scratch. But first let’s make you are ready for this.

\
You should consider yourself lucky to find such learning resources. When I was first trying to learn how to build full stack apps with React, Node, JavaScript, it was extremely hard.

\
All you could find is how to build todo or notes app. They are good learning projects but nowhere near as good as building such real world full stack app.

\
Once you can build such massive app, the amount of knowledge in terms of coding, planning, designing and developing such app becomes extremely rewarding.

For example this real estate app would literally cost you hundreds of thousands of dollars to build by hiring qualified developers wish vast industry experience and a very long time to make it production ready.

\
So join me in this once in a lifetime journey to the awesome world of coding. Let me show you how you can build one of the most amazing full stack JavaScript React Node project ever.

## [Learn NodeJs for free](https://www.udemy.com/course/node-js-api-tutorial/)

I recommend you to learn NodeJs before React to get better understanding and learning experience.

## [Learn React for free](https://www.udemy.com/course/react-tutorial/)

This course also includes modern JavaScript which is essential to understand React.

## [All React Node courses](https://www.udemy.com/user/e4938520-fe50-4d1b-b78d-4188406b14a9/)

\
\


Course Introduction

We will build production quality real world real estate marketplace app.

\
List of similar websites

* [Zillow](https://www.zillow.com/) - The most popular real estate website in USA

  Monthly visits 250M - 300M
* [Real Estate](https://www.realestate.com.au/) - The most popular real estate website in Australia

  Monthly visits over 50M
* [99acres](https://99acres.com/) - The most popular real estate website in India

  Monthly visits 10M - 15M

\


What are we building?

First make sure you have [latest version of NodeJs](https://nodejs.org/en/) installed in your computer.

\
```javascript
mkdir realist
cd realist
mkdir server
cd server
npm init -y
code .
```

\
Install dependencies

\
```javascript
npm i express nodemon morgan mongoose jsonwebtoken bcrypt nanoid cors email-validator slugify node-geocoder
```

\


How to initialize a NodeJs project using npm?

```javascript
// server/server.js
import express from "express";
import morgan from "morgan";
import cors from "cors";

const app = express();

// middlewares
app.use(express.json());
app.use(morgan("dev"));
app.use(cors());

// routes
app.get("/api", (req, res) => {
  res.json({ data: "hello world from nodejs api" });
});

app.listen(8000, () => console.log("Server running in port 8000"));
```

\


How to create NodeJs express server?

```javascript
// update package.json
  "type": "module",
  "scripts": {
    "start": "nodemon server.js"
  },
```

Now visit

[http://localhost:8000/api]()

How to run NodeJs server that uses import export syntax?

```javascript
// server/config.js
export const DATABASE = "mongodb://127.0.0.1:27017/realist";

// server.js
// user mongo atlas to get connection string or use local install of mongodb
import mongoose from "mongoose";
import { DATABASE } from "./config.js";

// db
mongoose.set("strictQuery", false);
mongoose
  .connect(DATABASE)
  .then(() => console.log("db_connected"))
  .catch((err) => console.log(err));
```

\


How to use MongoDB with NodeJs using Mongoose ODM?

```javascript
// server/routes/auth.js
import express from "express";

const router = express.Router();

router.get("/api", (req, res) => {
  res.json({ data: "hello world from nodejs api" });
});

export default router;

// server/server.js
// import
import authRoutes from "./routes/auth.js";

// apply as middleware
app.use("/", authRoutes);
```

\


How to load route files in NodeJs?

```javascript
// controllers/auth.js
export const hello = (req, res) => {
  res.json({ data: "hello world from nodejs api" });
};

// routes/auth.js
import * as auth from "../controllers/auth.js";

router.get("/", auth.hello);
```

\


How to use controller functions in NodeJs?

```javascript
import { model, Schema, ObjectId } from "mongoose";

const schema = new Schema(
  {
    username: {
      type: String,
      trim: true,
      required: true,
      unique: true,
      lowercase: true,
    },
    name: {
      type: String,
      trim: true,
      default: "",
    },
    email: {
      type: String,
      trim: true,
      required: true,
      unique: true,
      lowercase: true,
    },
    password: {
      type: String,
      required: true,
      maxlength: 256,
    },
    address: { type: String, default: "" },
    company: { type: String, default: "" },
    phone: { type: String, default: "" },
    photo: {},
    role: {
      type: [String],
      default: ["Buyer"],
      enum: ["Buyer", "Seller", "Admin"],
    },
    enquiredProperties: [{ type: ObjectId, ref: "Ad" }],
    wishlist: [{ type: ObjectId, ref: "Ad" }],
    resetCode: "",
  },
  { timestamps: true }
);

export default model("User", schema);
```

\


How to create a database Model in MongoDB using MongooseJs?

You can send confirmation email to user before saving in database. Only user with valid email will be able to receive the email and click on the link to complete registration.

\
Create POST route

```javascript
// routes/auth.js
router.post("/pre-register", auth.preRegister);
```

\
Create controller function

```javascript
// controllers/auth.js
// create jwt with email and password then email as clickable link
// only when user click on that email link, registeration completes
export const preRegister = async (req, res) => {
  try {
    console.log(req.body);
    // to send email use AWS SES
    const emailSent = true;
    if (emailSent) {
      console.log("Check email to complete registration");
      return res.json({ ok: true });
    } else {
      console.log("Provide a valid email address");
      return res.json({ ok: false });
    }
  } catch (err) {
    console.log(err);
    res.json({ error: "Something went wrong. Try again." });
  }
};
```

\
No try making POST request using Postman and check your server console.

How to register users with valid email address only

* [Signup to AWS](https://aws.amazon.com/console/)
* Go to Services > IAM > Users then click on Add Users
* Copy the `access_key_id` and `secret_access_key` and put somewhere safe
* On the sidebar click on User groups
* Click on Create group
* Attach the following permission policies to use SES (for email) and S3 (for storage)

  ```javascript
  AmazonSESFullAccess
  AmazonS3FullAccess
  ```
* Now go back to users, find the user you just created then assign that user to the group you just created
* Now go to Services > SES
* On the sidebar click on Verified Identities
* Click on the Create Identity button to verity the email address (you are only allowed to use this address to send emails)
* Once done, check your email and click on the link to complete verification

\


Signup to AWS for using SES (for emails) and S3 (for storage)

```javascript
npm i aws-sdk
```

\
```javascript
// config.js
import SES from "aws-sdk/clients/ses.js";

export const DATABASE = "mongodb://127.0.0.1:27017/realistcc";

export const EMAIL_FROM = '"John Doe" <youremail@gmail.com>';
export const REPLY_TO = "youremail@gmail.com";

const awsConfig = {
  accessKeyId: "XXXXXXXXX",
  secretAccessKey: "xxxxxxxx/xxxxxxxx",
  region: "us-east-1",
  apiVersion: "2010-12-01",
};

export const AWSSES = new SES(awsConfig);
```

\
Now try sending test email from `preRegister` controller function. To test this, make POST request from Postman.

```javascript
// controllers/auth
import * as config from "../config.js";

export const preRegister = async (req, res) => {
  try {
    console.log(req.body);

    // send test email
    AWSSES.sendEmail(
      {
        Source: config.EMAIL_FROM,
        Destination: {
          ToAddresses: ["yourmail@gmail.com"],
        },
        Message: {
          Body: {
            Html: {
              Charset: "UTF-8",
              Data: `
                        <html>
                         <h1>Welcome to Realist App</h1>
                        <html>    
                    `,
            },
          },
          Subject: {
            Charset: "UTF-8",
            Data: "Welcome to Realist",
          },
        },
      },
      (err, data) => {
        if (err) {
          console.log("Provide a valid email address", err);
          return res.json({ ok: false });
        } else {
          console.log("Check email to complete registration", data);
          return res.json({ ok: true });
        }
      }
    );
  } catch (err) {
    console.log(err);
  }
};
```

\
Now you should receive an email on the email address you used in `ToAddresses`

Make sure to check spam folder if you don’t see the email.

How to send email using AWS SES (simple email service)

```javascript
// config.js
export const CLIENT_URL = "http://localhost:3000";
export const JWT_SECRET = "XXXXXXXXXXXX";

// controllers/auth
import * as config from "../config.js";

export const preRegister = async (req, res) => {
  try {
    const { email, password } = req.body;
    // generate jwt using email and password
    const token = jwt.sign({ email, password }, config.JWT_SECRET, {
      expiresIn: "1h",
    });
    // send test email
    config.AWSSES.sendEmail(
      {
        Source: config.EMAIL_FROM,
        ReplyToAddresses: [config.REPLY_TO],
        Destination: {
          ToAddresses: [email],
        },
        Message: {
          Body: {
            Html: {
              Charset: "UTF-8",
              Data: `
              <html>
              <h1>Welcome to Realist App</h1>
              <p>Please click the button below to activate your account.</p>
              <a href="${config.CLIENT_URL}/auth/account-activate/${token}" target="_blank">Activate my account</a>
          </html>    
                    `,
            },
          },
          Subject: {
            Charset: "UTF-8",
            Data: "Welcome to Realist",
          },
        },
      },
      (err, data) => {
        if (err) {
          console.log("Provide a valid email address", err);
          return res.json({ ok: false });
        } else {
          console.log("Check email to complete registration", data);
          return res.json({ ok: true });
        }
      }
    );
  } catch (err) {
    console.log(err);
  }
};
```

\


How to send dynamic email using AWS SES

```javascript
// server/helpers/email.js
import * as config from "../config.js";

const style = `
    background: #eee;
    padding: 20px;
    border-radius: 20px;
`;

export const emailTemplate = (email, content, replyTo, subject) => {
  return {
    Source: config.EMAIL_FROM,
    ReplyToAddresses: [replyTo],
    Destination: {
      ToAddresses: [email],
    },
    Message: {
      Body: {
        Html: {
          Charset: "UTF-8",
          Data: `
            <html>
              <div style="${style}">
                <h1>Welcome to Realist App</h1>
                ${content}
                <p>&copy; ${new Date().getFullYear()}</p>
              <div>
          </html>    
                    `,
        },
      },
      Subject: {
        Charset: "UTF-8",
        Data: subject,
      },
    },
  };
};
```

\
Now use in auth controller

```javascript
import { emailTemplate } from "../helpers/email.js";

export const preRegister = async (req, res) => {
  try {
    const { email, password } = req.body;
    // generate jwt using email and password
    const token = jwt.sign({ email, password }, config.JWT_SECRET, {
      expiresIn: "1h",
    });
    // send test email
    config.AWSSES.sendEmail(
      emailTemplate(
        email,
        `
        <p>Please click the link below to activate your account.</p>
        <a href="${config.CLIENT_URL}/auth/account-activate/${token}">Activate my account</a>
    `,
        config.REPLY_TO,
        "Welcome to Realist app"
      ),
      (err, data) => {
        if (err) {
          return res.json({ error: "Provide a valid email address" });
        } else {
          return res.json({ error: "Check email to complete registration" });
        }
      }
    );
  } catch (err) {
    console.log(err);
    res.json({ error: "Something went wrong. Try again." });
  }
};
```

\


How to build your own template to send emails using AWS SES

When you click the email link, you will land on the following page

```javascript
http://localhost:3000/auth/account-activate/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im1lcm5jbXNAZ21hawicGFzc3dvcmQiOiJtbW1tbW0iLCJpYXQiOjE2NzE2MTAzNjAsImV4cCI6MTY3MTYxMzk2MH0.6H1Yliip-Vdbs6TLYR3KexTMjWBDPT9ffnqqE5p0
```

\
This will work only when we have React frontend. To try this using Postman, copy the `token` after `/account-activate/` and use in Postman to send a POST request to `/api/register` endpoint

\
Create register endpoint

\
```javascript
// routes/auth
router.post("/register", auth.register);

// controllers/auth
export const register = async (req, res) => {
  try {
    const decoded = jwt.verify(req.body.token, config.JWT_SECRET);
    console.log(decoded); // email , password
  } catch (err) {
    console.log(err);
    res.json({ error: "Could not complete registration. Try again." });
  }
};
```

\
To try it, use Postman to make a POST request by sending `token` in `req.body`

```javascript
// url
http://localhost:8000/api/register

// token in body
{
    "token": "eyJhbGciOiJIUzI565cCI6IkpXVCJ9.eyJlbWFpbCI6Im1lcm5jbXNAZ21haWwuY29tIiwicGFzc3dvcmQ56CJpYXQiOjE2NzE2MTAzNjAsImV4cCI6MTY3MTYxMzk2MH0.6H1Yl56-Vdbs6TLYR3KexTMjWBDPT9ffnqqE5p06V8"
}
```

\


How to decode JWT (json web token)?

Before saving user in database, you must hash the password. 

Later on login, you will compare the plain password (provided by user) against the hashed password you saved in the database.

Create helper functions to hash and compare password using [bcrypt](https://www.npmjs.com/package/bcrypt) library.

\
```javascript
// helpers/auth.js
import bcrypt from "bcrypt";

export const hashPassword = (password) => {
  return new Promise((resolve, reject) => {
    bcrypt.genSalt(12, (err, salt) => {
      if (err) {
        reject(err);
      }
      bcrypt.hash(password, salt, (err, hash) => {
        if (err) {
          reject(err);
        }
        resolve(hash);
      });
    });
  });
};

export const comparePassword = (password, hashed) => {
  return bcrypt.compare(password, hashed);
};
```

\


How to hash and compare password using bcrypt in NodeJs?

```javascript
// conttollers/auth
import { hashPassword, comparePassword } from "../helpers/auth.js";
import User from "../models/user.js";
import { nanoid } from "nanoid";

export const register = async (req, res) => {
  try {
    // decode email, password from token
    const { email, password } = jwt.verify(req.body.token, config.JWT_SECRET);
    // hash password
    const hashedPassword = await hashPassword(password);
    // create user and save
    const user = await new User({
      username: nanoid(6),
      email,
      password: hashedPassword,
    }).save();
    // create token
    const jwtToken = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "1d",
    });
    // create refresh token
    const refreshToken = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "30d",
    });
    // hide fields
    user.password = undefined;
    user.resetCode = undefined;
    // send response
    return res.json({
      user,
      token: jwtToken,
      refreshToken,
    });
  } catch (err) {
    console.log(err);
    res.json({ error: "Invalid or expired token. Try again." });
  }
};
```

\


How to register or save user in MongoDB?

Compare the user entered password against the password that you have saved in database (hashed version). If they both match, you can login user.

\
```javascript
// routes/auth
router.post("/login", auth.login);

// controllers/auth
export const login = async (req, res) => {
  try {
    const { email, password } = req.body;
    // 1. find user by email
    const user = await User.findOne({ email });
    if (!user) {
      return res.json({ error: "Please register first" });
    }
    // 2. compare password
    const match = await comparePassword(password, user.password);
    if (!match) {
      return res.json({
        error: "Wrong password",
      });
    }
    // 3. create jwt tokens
    const token = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "1d",
    });
    const refreshToken = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "30d",
    });
    // 4. send user and token as response excluding password
    user.password = undefined;
    user.resetCode = undefined;

    res.json({
      user,
      token,
      refreshToken,
    });
  } catch (err) {
    console.log(err);
    res.json({ error: "Something went wrong. Try again." });
  }
};
```

\


How to login user in NodeJs?

## Here are the steps

* If user forgot password, you need to ask their email address.
* Then query your database to see if any user with that email exist.
* If yes, then you can send a link to their email.
* Upon click you can login the user so that he can update his password from his profile update page (you need to have that feature)
* This last step could also be replaced by asking user to provide new password before login (after the email link click).

\
```javascript
// routes/auth
router.post("/forgot-password", auth.forgotPassword);

// controllers/auth
export const forgotPassword = async (req, res) => {
  try {
    const { email } = req.body;

    const user = await User.findOne({ email });
    if (!user) {
      res.json({ error: "Could not find user with that email" });
    } else {
      const resetCode = nanoid();

      const token = jwt.sign({ resetCode }, config.JWT_SECRET, {
        expiresIn: "60m",
      });
      // save to user db
      user.resetCode = resetCode;
      user.save();

      // send email
      config.AWSSES.sendEmail(
        emailTemplate(
          email,
          `
        <p>Please click the link below to access your account.</p>
        <a href="${config.CLIENT_URL}/auth/access-password/${token}">Access my account</a>
    `,
          config.REPLY_TO,
          "Access your account"
        ),
        (err, data) => {
          if (err) {
            return res.json({ error: "Provide a valid email address" });
          } else {
            return res.json({ error: "Check email to access your account" });
          }
        }
      );
    }
  } catch (err) {
    console.log(err);
    res.json({ error: "Something went wrong. Try again." });
  }
};
```

\


How to implement forgot password feature in NodeJs?

Once user clicks on email link, you can decode the resetCode from url.

Then send that resetCode to server to find user by that resetCode.

If found allow him to access his account.

Once logged in (account is accessible), he can update his password.

\
```javascript
// routes/auth
router.post("/access-account", auth.accessAccount);

// controllers/auth
export const accessAccount = async (req, res) => {
  try {
    // verify token and check expiry
    const { resetCode } = jwt.verify(req.body.token, config.JWT_SECRET);

    const user = await User.findOneAndUpdate(
      { resetCode },
      { resetCode: "" }
    );

    console.log("user", user, resetCode);
    // return;

    // generate token
    const token = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "1d",
    });
    // generate refresh token
    const refreshToken = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "30d",
    });

    user.password = undefined;
    user.resetCode = undefined;
    return res.json({
      token,
      refreshToken,
      user,
    });
  } catch (err) {
    console.log(err);
    res.json({ error: "Expired or invalid token. Try again." });
  }
};
```

\


How to allow user to reset password by allowing to access their account on email link click?

Create a middleware that checks if user is logged in. Then apply that middleware on each routes that requires protection.

\
```javascript
// server/middlewares/auth.js
import jwt from "jsonwebtoken";
import * as config from "../config.js";

export const requireSignin = (req, res, next) => {
  // console.log("__REQ_HEADERS__", req.headers);
  try {
    const decoded = jwt.verify(req.headers.authorization, config.JWT_SECRET);
    // console.log("DECODED => ", decoded);
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(401).json({ error: "Invalid or expired token" });
  }
};
```

\
Now apply `requireSignin` middleware in any routes you want to protect.

\
```javascript
// routes/auth
import { requireSignin } from "../middlewares/auth.js";

router.get("/", requireSignin, auth.hello);
```

\
Now `‘/api‘` is only accessible if you send the token in `req.headers`

How to protect routes from not logged in users?

```javascript
// routes/auth
router.get("/refresh-token", auth.refreshToken);

// controllers/auth
export const refreshToken = async (req, res) => {
  try {
    // console.log("you hit refresh token endpoint => ", req.headers);

    const { _id } = jwt.verify(req.headers.refresh_token, config.JWT_SECRET);

    const user = await User.findById(_id);
    const token = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "7d",
    });
    const refreshToken = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
      expiresIn: "365d",
    });
    // send user and token as response excluding password
    user.password = undefined;
    user.resetCode = undefined;
    res.json({
      user,
      token,
      refreshToken,
    });
  } catch (err) {
    console.log("===> ", err.name);
    return res.status(403).json({ error: "Refresh token failed" }); // 403 is important
  }
};
```

\
To test this, send `refresh_token` in headers using Postman.

How to generate fresh token from refresh token?

```javascript
// routes/auth
router.get("/current-user", requireSignin, auth.currentUser);

// controllers/auth
export const currentUser = async (req, res) => {
  try {
    const user = await User.findById(req.user._id);
    user.password = undefined;
    user.resetCode = undefined;
    res.json(user);
  } catch (err) {
    console.log(err);
    return res.status(403).json({ error: "Unauthorized" });
  }
};
```

\
To test this, send `Authorization` token in `req.headers` using Postman

How to get currently logged in user from MongoDB?

```javascript
// routes/auth
router.get("/profile/:userId", auth.publicProfile);

// controllers/auth
export const publicProfile = async (req, res) => {
  try {
    const user = await User.findById(req.params.userId);
    user.password = undefined;
    user.resetCode = undefined;
    res.json(user);
  } catch (err) {
    console.log(err);
    return res.status(403).json({ error: err });
  }
};
```

\
To test this endpoint, try making request to the following url by sending `user._id`

```javascript
http://localhost:8000/api/profile/xxxxxxxxx
```

\


How to create a user public profile endpoint?

```javascript
// routes/auth
router.put("/update-password", requireSignin, auth.updatePassword);

// controllers/auth
export const updatePassword = async (req, res) => {
  try {
    const { password } = req.body;

    if (!password) {
      return res.json({ error: "Password is required" });
    }

    // check if password meets the requirement
    if (password && password?.length < 6) {
      return res.json({
        error: "Min 6 characters long password is required",
      });
    }

    const user = await User.findById(req.user._id);
    const hashedPassword = await hashPassword(password);

    await User.findByIdAndUpdate(user._id, {
      password: hashedPassword,
    });

    res.json({ ok: true });
  } catch (err) {
    console.log(err);
    return res.status(403).json({ error: "Unauthorized" });
  }
};
```

\
To test this, make `PUT` request with `password` in `req.body`

How to implement user password update?

```javascript
// routes/auth
router.put("/update-profile", requireSignin, auth.updateProfile);

// controllers/auth
// name username company image phone about
export const updateProfile = async (req, res) => {
  try {
    const user = await User.findByIdAndUpdate(
      req.user._id,
      {
        ...req.body,
      },
      { new: true }
    );

    user.password = undefined;
    user.resetCode = undefined;
    res.json(user);
  } catch (err) {
    console.log(err);
    if (err.codeName === "DuplicateKey") {
      return res.status(403).json({ error: "Username is taken" });
    } else {
      return res.status(403).json({ error: "Unauhorized" });
    }
  }
};
```

\
To test this endpoint, try making `PUT` request using Postman. Send for example `username` in req.body and see how it updates.

How to update user profile?

```javascript
// create a project called client
npx create-react-app client

cd client
npm start
// visit http://localhost:3000/
```

\
Update `src/App.js`

\
```javascript
export default function App() {
  return (
    <div>
      <h1>App</h1>
    </div>
  );
}
```

\


How to create a new React project?

Use [Bootstwatch Materia](https://bootswatch.com/) theme

\
```javascript
// public/index.html
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/materia/bootstrap.min.css"
/>
```

\
Trying bootstrap css

\
```javascript
// App.js
export default function App() {
  return (
    <div>
      <h1 className="display-1 bg-primary text-light p-5">App</h1>
    </div>
  );
}
```

\


How to use Material Bootstrap theme in React?

Create few pages inside `src/pages` folder

\
```javascript
// pages/Home.js
export default function Home() {
  return (
    <div>
      <h1 className="display-1 bg-primary text-light p-5">Home</h1>
    </div>
  );
}
```

\
Repeat the process for Login and Register

\
```javascript
// App.js
import Home from "./pages/Home";
import Register from "./pages/Register";
import Login from "./pages/Login";

export default function App() {
  return (
    <>
      <Home />
    </>
  );
}
```

\
Install react router dom

\
```javascript
npm i react-router-dom
```

\
```javascript
// App.js
import Home from "./pages/Home";
import Register from "./pages/Register";
import Login from "./pages/Login";
import { BrowserRouter, Routes, Route } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/register" element={<Register />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}
```

\
Now you can visit different pages by typing in the url. For ex /login to view login page.

How to add multi page routing system in React?

To store user information and token after successful login, we need a global store which is accessible for all pages.  We can use React context for that.

\
```javascript
// src/context/auth.js
import { useState, createContext, useContext } from "react";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState({
    user: null,
    token: "",
    refreshToken: "",
  });

  return (
    <AuthContext.Provider value={[auth, setAuth]}>
      {children}
    </AuthContext.Provider>
  );
};

const useAuth = () => useContext(AuthContext); // [auth, setAuth]

export { useAuth, AuthProvider }; // wrap the app with provider
```

\
Now wrap entire app with AuthProvider

\
```javascript
// App.js
import { AuthProvider } from "./context/auth";

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}
```

\
Now try accessing context state in Home page

\
```javascript
// Home.js
import { useAuth } from "../context/auth";

export default function Home() {
  // context
  const [auth, setAuth] = useAuth();

  return (
    <div>
      <h1 className="display-1 bg-primary text-light p-5">Home</h1>
      <pre>{JSON.stringify(auth, null, 4)}</pre>
    </div>
  );
}
```

\


How to create and access a global state in react using context?

```javascript
// src/components/nav/Menu.js
import { NavLink } from "react-router-dom";

export default function Menu() {
  return (
    <ul className="nav d-flex justify-content-between p-2 lead">
      <li>
        <NavLink className="nav-link" to="/">
          Home
        </NavLink>
      </li>
      <li>
        <NavLink className="nav-link" to="/login">
          Login
        </NavLink>
      </li>
      <li>
        <NavLink className="nav-link" to="/register">
          Register
        </NavLink>
      </li>

      <div className="dropdown">
        <li>
          <a
            className="nav-link pointer dropdown-toggle"
            data-bs-toggle="dropdown"
          >
            User
          </a>
          <ul className="dropdown-menu">
            <li>
              <NavLink className="nav-link" to={`/dashboard`}>
                Dashboard
              </NavLink>
            </li>
            <li>
              <a className="nav-link">Logout</a>
            </li>
          </ul>
        </li>
      </div>
    </ul>
  );
}
```

\
\
Import and use in App

\
```javascript
import Menu from "./components/nav/Menu";

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Menu />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}
```

\
\
To make the dropdown menu work, include `bootstrap.js` CDN link in `public/index.html`

\
```javascript
<script
   src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
   integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
   crossorigin="anonymous"
></script>
```

\
To make the logout link show pointer on hover use your own `pointer` className

\
```javascript
<a className="nav-link pointer">Logout</a>

// index.css
.pointer {
  cursor: pointer;
}

.active {
  color: white;
  background: #2196f3;
}
```

\
\


How create a navigation menu in React?

```javascript
export default function Register() {
  return (
    <div>
      <h1 className="display-1 bg-primary text-light p-5">Register</h1>

      <div className="container">
        <div className="row">
          <div className="col-md-4 offset-md-4 mt-5">
            <form>
              <input
                type="text"
                placeholder="Enter your email"
                className="form-control mb-4"
                required
                autoFocus
              />

              <input
                type="password"
                placeholder="Enter your password"
                className="form-control mb-4"
                required
              />

              <button className="btn btn-primary col-12 mb-4">Login</button>
            </form>

            <a className="text-danger pointer">Forgot Password</a>
          </div>
        </div>
      </div>
    </div>
  );
}
```

\


How to create a user registration page in React?

```javascript
// Register.js
import { useState } from "react";

export default function Register() {
  // state
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      console.log(email, password);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <h1 className="display-1 bg-primary text-light p-5">Register</h1>

      <div className="container">
        <div className="row">
          <div className="col-md-4 offset-md-4 mt-5">
            <form onSubmit={handleSubmit}>
              <input
                type="email"
                placeholder="Enter your email"
                className="form-control mb-4"
                value={email}
                onChange={(e) => setEmail(e.target.value.toLowerCase())}
                required
                autoFocus
              />

              <input
                type="password"
                placeholder="Enter your password"
                className="form-control mb-4"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />

              <button className="btn btn-primary col-12 mb-4">Login</button>
            </form>

            <a className="text-danger pointer">Forgot Password</a>
          </div>
        </div>
      </div>
    </div>
  );
}
```

\


How to store user input in local component state in React?

```javascript
// src/config.js
export const API = "http://localhost:8000/api";
```

\
Install axios

```javascript
npm i axios
```

\
```javascript
// Register.js
import axios from "axios";
import { API } from "../config";

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // console.log(email, password);
      const { data } = await axios.post(`${API}/pre-register`, {
        email,
        password,
      });
      console.log(data);
    } catch (err) {
      console.log(err);
    }
  };
```

\


How to make a POST request using axios?

You can use [react-hot-toast](https://www.npmjs.com/package/react-hot-toast) npm package

\
```javascript
npm i react-hot-toast
```

\
User toaster component in `App.js` to be able to show toast notifications

\
```javascript
// App.js
import { Toaster } from "react-hot-toast";

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Menu />
        <Toaster />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}
```

\
Now show error or success message using toast in register page

\
```javascript
// Register
import toast from "react-hot-toast";

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // console.log(email, password);
      const { data } = await axios.post(`${API}/pre-register`, {
        email,
        password,
      });
      console.log(data);
      if (data?.error) {
        toast.error(data?.error);
      } else {
        toast.success("Please check your email to complete registration");
      }
    } catch (err) {
      console.log(err);
      toast.error("Something went wrong. Try again.");
    }
  };
```

\
Does your server check for valid email and password length before sending confirmation email to complete registration? If not add this check to your controller

\
```javascript
// server/controllers/auth.js
// import
import validator from "email-validator";

// preRegister()
// put inside try { }
// validate
    if (!validator.validate(email)) {
      return res.json({ error: "A valid email is required" });
    }
    if (!email) {
      return res.json({ error: "Email is required" });
    }
    if (!password) {
      return res.json({ error: "Email is required" });
    }
    if (password && password?.length < 6) {
      return res.json({
        error: "Password should be at least 6 characters long",
      });
    }
    // important - check if user with that email already exist? 
    const user = await User.findOne({ email });
    if (user) {
      return res.json({ error: "Email is already registered" });
    }
```

\


How to show server error messages as toast notifications in React?

You can configure axios globally to automatically include baseURL, token in headers etc 

\
```javascript
// context/auth.js
import axios from "axios";
import { API } from "../config";

 // config axios
 axios.defaults.baseURL = API;
```

\
Now you can remove API part from axios request.

\
```javascript
// Register.js
// const { data } = await axios.post(`${API}/pre-register`, {
const { data } = await axios.post(`/pre-register`, {
```

\


How to configure axios globally in React?

```javascript
// Register
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      // console.log(email, password);
      const { data } = await axios.post(`/pre-register`, {
        email,
        password,
      });
      // console.log(data);
      if (data?.error) {
        toast.error(data?.error);
        setLoading(false);
      } else {
        setLoading(true);
        toast.success("Please check your email to complete registration");
      }
    } catch (err) {
      console.log(err);
      setLoading(false);
      toast.error("Something went wrong. Try again.");
    }
  };
```

\
Now show loading status on the button.

\
```javascript
<button
  className="btn btn-primary col-12 mb-4"
  disabled={loading}
>
  {loading ? "Waiting..." : "Login"}
</button>
```

\
Redirect user to home page after success response

\
```javascript
// import
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

// in axios
setAuth(data);
setLoading(true);
toast.success("Please check your email to complete registration");
navigate("/");
```

\


How to show loading status and redirect user in React?

Create a page where user will land after clicking on email link. That’s where you need to grab token from route params.

Use useParams hook to grab route params

\
```javascript
// pages/auth/AccountActivate.js
import { useParams } from "react-router-dom";
import { useAuth } from "../../context/auth";

export default function AccountActivate() {

  const { token } = useParams();
  console.log(token);

  return (
    <div
      className="display-1 d-flex justify-content-center align-items-center vh-100"
      style={{ marginTop: "-5%" }}
    >
      Please wait...
    </div>
  );
}
```

\
Import in App.js

\
```javascript
import AccountActivate from "./pages/auth/AccountActivate";


<Route
  path="/auth/account-activate/:token"
  element={<AccountActivate />}
/>
```

\


How to grab a route params in React?

The route param(jwt) includes, email and password. It can be decoded in the server before registering user.

On successful response, save user and token info in context.

\
```javascript
// AccountActivate.js
import { useEffect } from "react";
import axios from "axios";
import toast from "react-hot-toast";
import { useParams, useNavigate } from "react-router-dom";
import { useAuth } from "../../context/auth";

export default function AccountActivate() {
  const [auth, setAuth] = useAuth();
  // hooks
  const { token } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    if (token) requestActivation();
  }, [token]);

  const requestActivation = async () => {
    const { data } = await axios.post(`/register`, {
      token,
    });
    if (data.error) {
      toast.error(data.error);
    } else {
      setAuth(data);
      toast.success("You are logged in. Welcome to Realist app");
      navigate("/");
    }
  };

  return (
    <div
      className="display-1 d-flex justify-content-center align-items-center vh-100"
      style={{ marginTop: "-5%" }}
    >
      Please wait...
    </div>
  );
}
```

\
Now user is logged in. The user and token response is received. But it is lost on page refresh, we will fix it later.

Register user sending route params (jwt)

When you try to activate account twice by clicking on email link or trying the link after it is expired?

Do you see 2 toast notifications that says Invalid or expired token?

\
That happens due to this in `index.js`

```javascript
<React.StrictMode>
```

\
You can try removing that to see the issue fixed. StrictMode is only for development mode so you don’t have to worry about it in production.

Axios makes 2 requests for same endpoint in React?

You can use localStorage to store login or register response.

Then get from localStorage on page refresh.

\
```javascript
// AccountActivate.js
// in axios request
setAuth(data);
localStorage.setItem("auth", JSON.stringify(data));
```

\
Now get from localStorage in context

\
```javascript
// context/auth.js
  useEffect(() => {
    let fromLS = localStorage.getItem("auth");
    if (fromLS) setAuth(JSON.parse(fromLS));
  }, []);
```

\
Now to remove data from localStorage, you can manually clear data by opening browser dev tools  > Application > Storage > Clear site data

How to prevent React context data lost on page refresh?

React router dom `NavLink` component automatically adds active class name

You can style active class

\
```javascript
// index.css
.active{
  color: white;
  background: #2196f3;
}
```

\
If you applied `p-2` class in your `NavLink` previously remove that for better styling.

How to create login page in react?

On logout remove user and token data from local storage. Also remove it from context.

\
```javascript
// Menu.js
import { useAuth } from "../../context/auth";
import {useNavigate} from 'react-router-dom';

// access context
const [auth, setAuth] = useAuth();
const navigate = useNavigate();

const logout = () => {
  setAuth({ user: null, token: "", refreshToken: "" });
  localStorage.removeItem("auth");
  navigate('/login')
};

// return
<li>
  <a onClick={logout} className="nav-link pointer">
    Logout
  </a>
</li>
```

\


How to implement logout feature in react app?

If user is logged in, show dropdown menu with logout.

If user is not logged in, show login and register links.

\
```javascript
// components/nav/Menu.js
import { NavLink } from "react-router-dom";
import { useAuth } from "../../context/auth";

export default function Menu() {
  // context
  const [auth, setAuth] = useAuth();

  const loggedIn = auth?.user !== null && auth?.token !== "";

  const logout = () => {
    setAuth({ user: null, token: "", refreshToken: "" });
    localStorage.removeItem("auth");
  };

  return (
    <ul className="nav d-flex justify-content-between lead">
      <li>
        <NavLink className="nav-link" to="/">
          Home
        </NavLink>
      </li>
      {!loggedIn ? (
        <>
          <li>
            <NavLink className="nav-link" to="/login">
              Login
            </NavLink>
          </li>
          <li>
            <NavLink className="nav-link" to="/register">
              Register
            </NavLink>
          </li>
        </>
      ) : (
        ""
      )}

      {loggedIn ? (
        <div className="dropdown">
          <li>
            <a
              className="nav-link pointer dropdown-toggle"
              data-bs-toggle="dropdown"
            >
              {auth?.user?.name ? auth.user.name : auth.user.username}
            </a>
            <ul className="dropdown-menu">
              <li>
                <NavLink className="nav-link" to={`/dashboard`}>
                  Dashboard
                </NavLink>
              </li>
              <li>
                <a onClick={logout} className="nav-link pointer">
                  Logout
                </a>
              </li>
            </ul>
          </li>
        </div>
      ) : (
        ""
      )}
    </ul>
  );
}
```

\


How to add forgot password feature in react?

When user click on the email link to access account. you get token in the route params.

\
```javascript
// pages/auth/AccessAccount.js
import { useEffect } from "react";
import axios from "axios";
import toast from "react-hot-toast";
import { useParams, useNavigate } from "react-router-dom";
import { useAuth } from "../../context/auth";

export default function AccessAccount() {
  const [auth, setAuth] = useAuth();
  // hooks
  const { token } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    if (token) requestAccess();
  }, [token]);

  const requestAccess = async () => {
    const { data } = await axios.post(`/access-account`, {
      token,
    });
    if (data.error) {
      toast.error(data.error);
    } else {
      setAuth(data);
      localStorage.setItem("auth", JSON.stringify(data));
      toast.success("Please update your password in profile page");
      navigate("/");
    }
  };

  return (
    <div
      className="display-1 d-flex justify-content-center align-items-center vh-100"
      style={{ marginTop: "-5%" }}
    >
      Please wait...
    </div>
  );
}
```

\


How to allow user to access account on password forgot?

```javascript
// components/nav/Sidebar.js
// even though it's called sidebar, it will sit on top, just below main nav
// feel free to put it on side
import { NavLink } from "react-router-dom";

export default function Sidebar() {
  return (
    <ul className="nav nav-tabs">
      <li className="nav-item">
        <NavLink className="nav-link" to="/dashboard">
          Dashboard
        </NavLink>
      </li>
      <li className="nav-item">
        <NavLink className="nav-link" to="/ad/create">
          Create Ad
        </NavLink>
      </li>
    </ul>
  );
}
```

\
Now import in Dashboard

\
```javascript
import Sidebar from "../../components/nav/Sidebar";

export default function Dashboard() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <div className="container mt-2">
        <h2>User Dashboard</h2>
      </div>
    </div>
  );
}
```

\
Import in Ad create page

\
```javascript
// pages/user/ad/AdCreate.js
import Sidebar from "../../components/nav/Sidebar";

export default function AdCreate() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <div className="container mt-2">
        <h2>Ad Create Page</h2>
      </div>
    </div>
  );
}
```

\
```javascript
// App.js
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/ad/create" element={<AdCreate />} />
```

\


How to create user dashboard with sidebar menu?

```javascript
// components/routes/PrivateRoute.js
import { useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
import { useAuth } from "../../context/auth";
import axios from "axios";

const PrivateRoute = () => {
  const [auth, setAuth] = useAuth();
  const [ok, setOk] = useState(false);

  useEffect(() => {
    if (auth?.token) getCurrentUser();
  }, [auth?.token]);

  const getCurrentUser = async () => {
    try {
      const { data } = await axios.get(`/current-user`, {
        headers: {
          Authorization: auth?.token,
        },
      });
      setOk(true);
    } catch (err) {
      setOk(false);
    }
  };

  return ok ? <Outlet /> : "";
};

export default PrivateRoute;
```

\
Now wrap the components that needs protection

\
```javascript
// App.js
<Route path="/" element={<PrivateRoute />}>
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="ad/create" element={<AdCreate />} />
</Route>
```

\


How to protect pages from not logged in users?

Use axios interceptor to handle expired token. If token expired, make another request to refresh token.

\
```javascript
// context/auth.js
// config axios
  axios.defaults.baseURL = API;
  axios.defaults.headers.common["Authorization"] = auth?.token;
  axios.defaults.headers.common["refresh_token"] = auth?.refreshToken;

  axios.interceptors.response.use(
    (res) => {
      return res;
    },
    async (err) => {
      const originalConfig = err.config;

      if (err.response) {
        // token is expired
        if (err.response.status === 401 && !originalConfig._retry) {
          originalConfig._retry = true;

          try {
            const { data } = await axios.get("/refresh-token");
            axios.defaults.headers.common["token"] = data.token;
            axios.defaults.headers.common["refresh_token"] = data.refreshToken;

            setAuth(data);
            localStorage.setItem("auth", JSON.stringify(data));

            return axios(originalConfig);
          } catch (_error) {
            if (_error.response && _error.response.data) {
              return Promise.reject(_error.response.data);
            }

            return Promise.reject(_error);
          }
        }

        if (err.response.status === 403 && err.response.data) {
          return Promise.reject(err.response.data);
        }
      }

      return Promise.reject(err);
    }
  );
```

\
Now you can remove headers from `PrivateRotue` api request

\
To try it, you can set token expiry to just 10second in your controller and try

\
```javascript
// login and refreshToken controller
const token = jwt.sign({ _id: user._id }, config.JWT_SECRET, {
  expiresIn: "10s",
});
```

\


How to refresh token using Axios interceptors in React and NodeJs?

```javascript
// Menu.js
<li>
  <NavLink className="nav-link" to="/ad/create">
    Post Ad
  </NavLink>
</li>
```

\
## Horizontally and vertically centered buttons

Show options to either sell or rent

\
```javascript
// pages/user/ad/AdCreate.js
import Sidebar from "../../../components/nav/Sidebar";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

export default function AdCreate() {
  // state
  const [sell, setSell] = useState(false);
  const [rent, setRent] = useState(false);
  // hooks
  const navigate = useNavigate();

  const handleSell = () => {
    setSell(true);
    setRent(false);
  };

  const handleRent = () => {
    setRent(true);
    setSell(false);
  };

  return (
    <div className="container-fluid mt-2">
      <Sidebar />
      <div
        className="d-flex justify-content-center align-items-center vh-100"
        style={{ marginTop: "-7%" }}
      >
        <div className="col-lg-6">
          <button
            onClick={handleSell}
            className="btn btn-secondary p-5 col-12 h2"
          >
            <span className="h2">Sell</span>
          </button>

          {sell && "show sell house or land options"}
        </div>

        <div className="col-lg-6">
          <button onClick={handleRent} className="btn btn-secondary p-5 col-12">
            <span className="h2">Rent</span>
          </button>
          {rent && "show rent house or land options"}
        </div>
      </div>
    </div>
  );
}
```

\


Create Ad page with options to sell or rent

```javascript
// pages/user/ad/AdCreate.js
<div className="container-fluid mt-2">
  <Sidebar />
  <div
    className="d-flex justify-content-center align-items-center vh-100"
    style={{ marginTop: "-7%" }}
  >
    <div className="col-lg-6">
      <button onClick={handleSell} className="btn btn-secondary p-5 col-12">
        <span className="h2">Sell</span>
      </button>
      {/* on Sell click show options */}
      {sell && (
        <div className="my-1">
          <button
            onClick={() => navigate(`/ad/create/sell/House`)}
            className="btn btn-secondary p-5 col-6"
          >
            House
          </button>
          <button
            onClick={() => navigate(`/ad/create/sell/Land`)}
            className="btn btn-secondary p-5 col-6"
          >
            Land
          </button>
        </div>
      )}
    </div>

    <div className="col-lg-6">
      <button onClick={handleRent} className="btn btn-secondary p-5 col-12">
        <span className="h2">Rent</span>
      </button>
      {/* on Rent click show options */}
      {rent && (
        <div className="my-1">
          <button
            onClick={() => navigate(`/ad/create/rent/House`)}
            className="btn btn-secondary p-5 col-6"
          >
            House
          </button>
          <button
            onClick={() => navigate(`/ad/create/rent/Land`)}
            className="btn btn-secondary p-5 col-6"
          >
            Land
          </button>
        </div>
      )}
    </div>
  </div>
</div>
```

\


How to implement sell or rent house and land options?

```javascript
// components/forms/AdForm.js
export default function AdForm({ action, type }) {
  return (
    <>
      <p>This is ad create form</p>
      {action} / {type}
    </>
  );
}
```

\
Now create pages to sell house, sell land, rent house and rent land.

\
```javascript
// pages/user/ad/SellHouse.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function SellHouse() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Sell House</h1>
      <div className="container mt-2">
        <AdForm action="Sell" type="House" />
      </div>
    </div>
  );
}


// pages/user/ad/SellLand.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function SellLand() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Sell Land</h1>
      <div className="container mt-2">
        <AdForm action="Sell" type="Land" />
      </div>
    </div>
  );
}


// pages/user/ad/RentHouse.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function RentHouse() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Rent House</h1>
      <div className="container mt-2">
        <AdForm action="Rent" type="House" />
      </div>
    </div>
  );
}


// pages/user/ad/RentLand.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function RentLand() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Rent Land</h1>
      <div className="container mt-2">
        <AdForm action="Rent" type="Land" />
      </div>
    </div>
  );
}
```

\
Import them all in `App.js`

\
```javascript
<Route path="/" element={<PrivateRoute />}>
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="ad/create" element={<AdCreate />} />
  <Route path="ad/create/sell/House" element={<SellHouse />} />
  <Route path="ad/create/sell/Land" element={<SellLand />} />
  <Route path="ad/create/rent/House" element={<RentHouse />} />
  <Route path="ad/create/rent/Land" element={<RentLand />} />
</Route>
```

\


How to use single Ad create form for selling or renting house and lands?

* Visit <https://console.developers.google.com>
* On the top menu bar, next to Google Cloud > NEW PROJECT
* On the sidebar, click on Credentials > CREATE CREDENTIALS
* CREATE CREDENTIALS > API Key
* Copy the API key and place in your `config.js `

  ```javascript
  export const GOOGLE_PLACES_KEY = "xxx-xxx";
  ```
* To start using google services, you may need to enable the services by providing your credit card details

\
Before we start using it create a state in AdForm.js

\
```javascript
  const [ad, setAd] = useState({
    photos: [],
    uploading: "",
    price: "",
    address: "",
    bedrooms: "",
    bathrooms: "",
    carpark: "",
    landsize: "",
    type: "",
    title: "",
    description: "",
    loading: "",
  });
```

\


How to get Google places API keys?

```javascript
// components/forms/AdForm.js
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { GOOGLE_PLACES_KEY } from "../../config";

<div className="mb-3 form-control">
  <GooglePlacesAutocomplete
    apiKey={GOOGLE_PLACES_KEY}
    apiOptions={{ region: "au" }}
    selectProps={{
      defaultInputValue: ad?.address,
      placeholder: "Search for address..",
      onChange: ({ value }) => {
        // console.log("address onchange => ", value.description);
        setAd({ ...ad, address: value.description });
      },
    }}
  />
</div>
```

\


How to use Google places to auto-complete address dropdown?

```javascript
// components/forms/AdForm.js
import { useState } from "react";
import CurrencyInput from "react-currency-input-field";

export default function AdForm({ action, type }) {
  const [ad, setAd] = useState({
    photos: "",
    price: "",
    address: "",
    bedrooms: "",
    toilets: "",
    carpark: "",
    landsize: "",
    landsizetype: "",
    type: "",
    title: "",
    description: "",
    features: "",
    nearby: "",
    loading: "",
  });

  const handleSubmit = async (e) => {
    try {
      e.preventDefault();
      console.log(ad);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <CurrencyInput
          placeholder="Enter price"
          defaultValue={ad.price}
          className="form-control mb-3"
          onValueChange={(value) => setAd({ ...ad, price: value })}
        />
      </form>
      <pre>{JSON.stringify(ad, null, 4)}</pre>
    </>
  );
}
```

\


How to create a price field with comma separated currency format in React?

```javascript
<input
  type="number"
  min="0"
  className="form-control mb-3"
  placeholder="Enter how many bedrooms"
  value={ad.bedrooms}
  onChange={(e) => setAd({ ...ad, bedrooms: e.target.value })}
  required
/>

<input
  type="number"
  min="0"
  className="form-control mb-3"
  placeholder="Enter how many bathrooms"
  value={ad.toilets}
  onChange={(e) => setAd({ ...ad, bathrooms: e.target.value })}
  required
/>

<input
  type="number"
  min="0"
  className="form-control mb-3"
  placeholder="Enter how many car parks"
  value={ad.carpark}
  onChange={(e) => setAd({ ...ad, carpark: e.target.value })}
/>

<input
  type="text"
  className="form-control mb-3"
  placeholder="Size of land"
  value={ad.landsize}
  onChange={(e) => setAd({ ...ad, landsize: e.target.value })}
/>

<input
  type="text"
  className="form-control mb-3"
  placeholder="Enter title"
  value={ad.title}
  onChange={(e) => setAd({ ...ad, title: e.target.value })}
  required
/>

<textarea
  className="form-control mb-3"
  value={ad.description}
  placeholder="Write description"
  onChange={(e) => setAd({ ...ad, description: e.target.value })}
/>

<button className="btn btn-primary">Submit</button>
```

\


Add additional form fields to the Ad create form

```javascript
// components/forms/ImageUpload.js
export default function ImageUpload({ ad, setAd }) {
  const handleUpload = (e) => {
    let files = e.target.files;
    files = [...files];
    if (files?.length) {
      setAd({ ...ad, uploading: true });
    } else {
      setAd({ ...ad, uploading: false });
    }
  };

  const handleDelete = async (photo) => {
    setAd({ ...ad, uploading: true });
    try {
      console.log("send API request to remove file");
    } catch (err) {
      console.log(err);
      setAd({ ...ad, removing: false });
    }
  };

  return (
    <>
      <div className="d-flex mt-4">
        <label className="btn btn-secondary">
          {ad.uploading
            ? "Uploading..."
            : ad.removing
            ? "Removing..."
            : "Upload photos"}
          <input
            onChange={handleUpload}
            type="file"
            accept="image/*"
            multiple
            hidden
          />
        </label>
      </div>
    </>
  );
}
```

\
Now import and use in AdCreate.js

\
```javascript
<ImageUpload ad={ad} setAd={setAd} />
```

\


How to create image upload component in React?

```javascript
npm i react-image-file-resizer
```

\
```javascript
// components/forms/ImageUpload.js
const handleUpload = (e) => {
    let files = e.target.files;
    files = [...files];
    if (files?.length) {
      setAd({ ...ad, uploading: true });
      files.map((f) => {
        // upload
        new Promise((resolve) => {
          Resizer.imageFileResizer(
            f,
            1080,
            720,
            "JPEG",
            100,
            0,
            async (uri) => {
              try {
                const { data } = await axios.post("/upload-image", {
                  image: uri,
                });
                setAd((prev) => ({
                  ...prev,
                  photos: [data, ...prev.photos],
                  uploading: false,
                }));
              } catch (err) {
                console.log("photo upload err => ", err);
                setAd({ ...ad, uploading: false });
              }
            },
            "base64"
          );
        });
      });
    } else {
      setAd({ ...ad, uploading: false });
    }
  };
```

\


How to resize file client side in React then upload to server?

Before uploading images to S3, you need to add a bucket policy in AWS S3

\
* Create a bucket in AWS S3 > Buckets > Create Bucket
* Give your bucket a name then click Create Bucket
* Click on the bucket name from the list
* From Permissions tab > Bucket Policy > Edit
* Click on Policy generator button
* Select S3 Bucket Policy from dropdown
* Type the user ARN in Principle field (Go to IAM > Users then click on user name to copy User ARN)
* Select `GetObject` and `GetObjectVersion` from the Actions dropdown
* Copy Bucket ARN then paste into the ARN filed
* Paste the generated policy then click Save changes

\
**Important**: Add `/*` ad the end of Resource string manually

\
Your policy should look something like this

\
```javascript
{
    "Version": "2012-10-17",
    "Id": "Policy123456",
    "Statement": [
        {
            "Sid": "Stmt123456",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::987654321:user/user_name"
            },
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::user-bucket-name/*"
        }
    ]
}
```

\
To make sure your images can be accessed publicly enable ACL (access control list)

\
* S3 > your_bucket_name > Permissions > Object Ownership > Edit
* Click ACLs enabled
* Check Bucket owner preferred

\
You also need to turn off **Block public access (bucket settings)**

How to generate bucket policy in AWS S3?

```javascript
// config.js
import S3 from "aws-sdk/clients/s3.js";

export const AWSS3 = new S3(awsConfig)
```

\
Create upload-image endpoint in server

\
```javascript
// routes/ad.js
import express from "express";

const router = express.Router();

import * as ad from "../controllers/ad.js";
import { requireSignin } from "../middlewares/auth.js";

router.post("/upload-image", requireSignin, ad.uploadImage);

export default router;
```

\
Import route in server.js to apply as middleware

\
```javascript
// import
app.use("/api", adRoutes);

app.use("/api", adRoutes);
```

\
\
```javascript
// controllers/ad.js
import { nanoid } from "nanoid";
import * as config from "../config.js";

export const uploadImage = async (req, res) => {
  try {
    console.log(req.body);
    const { image } = req.body;
    if (!image) return res.status(400).send("No image");

    // prepare the image
    const base64Data = new Buffer.from(
      image.replace(/^data:image\/\w+;base64,/, ""),
      "base64"
    );
    const type = image.split(";")[0].split("/")[1];

    // image params
    const params = {
      Bucket: "realist-udemy-image-bucket",
      Key: `${nanoid()}.${type}`,
      Body: base64Data,
      ACL: "public-read",
      ContentEncoding: "base64",
      ContentType: `image/${type}`,
    };

    // upload to s3
    config.AWSS3.upload(params, (err, data) => {
      if (err) {
        console.log(err);
        res.sendStatus(400);
      } else {
        console.log(data);
        res.send(data);
      }
    });
  } catch (err) {
    console.log(err);
    res.json({ error: "Upload failed. Try again." });
  }
};
```

\
Now you should see the success response in server terminal and also in react page, where we are using `JSON.stringify(ad)`

## PayloadTooLargeError: request entity too large

If you this error, try this in your server

\
```javascript
// server.js
app.use(express.json({ limit: "5mb" }));
```

\


How to upload image to AWS S3 from NodeJs?

```javascript
// ImageUpload.js
import { Avatar } from "antd";

return (
    <>
      <div className="d-flex mt-4">
        <label className="btn btn-secondary mr-1">
          {ad.uploading
            ? "Uploading..."
            : ad.removing
            ? "Removing..."
            : "Upload photos"}
          <input
            onChange={handleUpload}
            type="file"
            accept="image/*"
            multiple
            hidden
          />
        </label>

        {ad.photos?.map((file) => (
          <Avatar
            src={file?.Location}
            shape="square"
            size={46}
            className="mx-1"
          />
        ))}
      </div>
    </>
  );
```

\


How to display array of uploaded images?

```javascript
// routes.js
router.post("/remove-image", requireSignin, ad.removeImage);

// controllers.js
export const removeImage = async (req, res) => {
  try {
    const { Key, Bucket } = req.body;

    // upload to s3
    config.AWSS3.deleteObject({ Bucket, Key }, (err, data) => {
      if (err) {
        console.log(err);
        res.sendStatus(400);
      } else {
        // console.log(data);
        res.send({ ok: true });
      }
    });
  } catch (err) {
    console.log(err);
  }
};
```

\
Now make API request to remove image on click from React

\
```javascript
// ImageUpload.js
<Avatar
  src={file?.Location}
  shape="square"
  size={46}
  className="mx-1 pointer"
  onClick={() => handleDelete(file)}
/>

const handleDelete = async (file) => {
  const answer = window.confirm("Delete image?");
  if (!answer) return;
  setAd({ ...ad, uploading: true });
  try {
    const { data } = await axios.post("/remove-image", file);
    if (data?.ok) {
      setAd((prev) => ({
        ...prev,
        photos: prev.photos.filter((p) => p.Key !== file.Key),
        uploading: false,
      }));
    }
  } catch (err) {
    console.log(err);
    setAd({ ...ad, uploading: false });
  }
};
```

\


How to delete image from AWS S3?

```javascript
// models/ad.js
import mongoose from "mongoose";
const { Schema, ObjectId } = mongoose;

const adSchema = new Schema(
  {
    photos: [{}],
    price: {
      type: Number,
      maxLength: 255,
    },
    address: {
      type: String,
      required: true,
      maxLength: 255,
    },
    bedrooms: Number,
    bathrooms: Number,
    landsize: String,
    carpark: Number,
    location: {
      type: {
        type: String,
        enum: ["Point"],
        default: "Point",
      },
      coordinates: {
        type: [Number],
        default: [85.323959, 27.717245],
      },
    },
    title: {
      type: String,
      maxLength: 255,
    },
    slug: {
      type: String,
      lowercase: true,
      unique: true,
    },
    description: {},
    postedBy: { type: ObjectId, ref: "User" },
    sold: { type: Boolean, default: false },
    published: { type: Boolean, default: true },
    googleMap: {},
    type: {
      type: String,
      default: "Other", // House, Land, Appartment
    },
    action: {
      type: String,
      default: "Sell",
    },
    views: {
      type: Number,
      default: 0,
    },
  },
  { timestamps: true }
);

adSchema.index({ location: "2dsphere" });
export default mongoose.model("Ad", adSchema);
```

\


How to create Ad model using mongoose?

```javascript
// routes/ad
router.post("/ad", requireSignin, ad.create);

// controllers/ad
// imports
import { nanoid } from "nanoid";
import * as config from "../config.js";
import Ad from "../models/ad.js";
import User from "../models/user.js";
import slugify from "slugify";

export const create = async (req, res) => {
  try {
    const { photos, description, address, price, type, landsize } = req.body;

    if (!photos?.length) {
      return res.json({ error: "Photos are required" });
    }
    if (!price) {
      return res.json({ error: "Price is required" });
    }
    if (!type) {
      return res.json({ error: "Is property house or land?" });
    }
    if (!address) {
      return res.json({ error: "Address is required" });
    }
    if (!description) {
      return res.json({ error: "Description is required" });
    }

    const geo = await config.GOOGLE_GEOCODER.geocode(address);
    const ad = await new Ad({
      ...req.body,
      slug: slugify(`${type}-${address}-${price}-${nanoid(6)}`),
      postedBy: req.user._id,
      location: {
        type: "Point",
        coordinates: [geo?.[0]?.longitude, geo?.[0]?.latitude],
      },
      googleMap: geo,
    }).save();

    const user = await User.findByIdAndUpdate(
      req.user._id,
      {
        $addToSet: { role: "Seller" },
      },
      { new: true }
    );
    user.password = undefined;
    user.resetCode = undefined;
    res.json({
      ad,
      user,
    });
  } catch (err) {
    console.log(err);
    res.json({ error: "Something went wrong. Try later." });
  }
};
```

\


How to save new Ad in MongoDB?

```javascript
// AdForm.js
// imports
import toast from "react-hot-toast";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    setAd({ ...ad, loading: true });
    const { data } = await axios.post("/ad", ad);
    if (data?.error) {
      toast.error(data.error);
      setAd({ ...ad, loading: false });
    } else {
      // console.log("ad create response => ", data);
      toast.success("Ad created successfully");
      navigate("/dashboard");
    }
  } catch (err) {
    console.log(err);
    setAd({ ...ad, loading: false });
  }
};
```

\


How to send new Ad data from React to Node API?

```javascript
// ImageUpload.js
<input
  onChange={handleUpload}
  type="file"
  accept="image/*"
  multiple
  hidden
  disabled={ad.uploading}
/>

// AdForm.js
<button disabled={ad.loading} className="btn btn-primary">
  {ad.loading ? "Saving..." : "Submit"}
</button>
```

\


How to disable button on loading state?

```javascript
// routes/ad
router.get("/ads", ad.ads);

// controllers/ad
export const ads = async (req, res) => {
  try {
    const adsForSell = await Ad.find({ action: "Sell", published: true })
      .select(
        "-photos.Key -photos.key -photos.ETag -photos.Bucket -location -googleMap"
      )
      .populate("postedBy", "name username email phone company")
      .sort({ createdAt: -1 })
      .limit(12);

    const adsForRent = await Ad.find({ action: "Rent", published: true })
      .select(
        "-photos.Key -photos.key -photos.ETag -photos.Bucket -location -googleMap"
      )
      .populate("postedBy", "name username email phone company")
      .sort({ createdAt: -1 })
      .limit(12);

    res.json({ adsForSell, adsForRent });
  } catch (err) {
    console.log(err);
  }
};
```

\


How to query all Ads for sell and rent from MongoDB?

```javascript
// Home.js
import { useState, useEffect } from "react";
import { useAuth } from "../context/auth";
import axios from "axios";

export default function Home() {
  // context
  const [auth, setAuth] = useAuth();
  // state
  const [adsForSell, setAdsForSell] = useState([]);
  const [adsForRent, setAdsForRent] = useState([]);

  useEffect(() => {
    fetchAds();
  }, []);

  const fetchAds = async () => {
    try {
      const { data } = await axios.get("/ads");
      console.log(data);
      setAdsForSell(data.adsForSell);
      setAdsForRent(data.adsForRent);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <h1 className="display-1 bg-primary text-light p-5">Home</h1>
      <pre>{JSON.stringify({ adsForSell, adsForRent }, null, 4)}</pre>
    </div>
  );
}
```

\


How to fetch Ads for sell and rent in React?

```javascript
// components/cards/AdCard.js
export default function AdCard({ ad }) {
  return (
    <div className="col-lg-4 p-4 gx-4 gy-4">
      <div className="card hoverable shadow">
        <img
          src={ad?.photos?.[0]?.Location}
          alt={`${ad?.type}-${ad?.address}-${ad?.action}-${ad?.price}`}
          style={{ height: "250px", objectFit: "cover" }}
        />

        <div className="card-body">
          <div className="d-flex justify-content-between">
            <h3>{ad?.price}</h3>
          </div>

          <p>Ad features</p>
        </div>
      </div>
    </div>
  );
}
```

\
Now import in Home.js

\
```javascript
// Home.js
  return (
    <div>
      <h2 className="display-1 bg-primary text-light p-5 h1">For Sell</h2>
      <div className="container">
        <div className="row">
          {adsForSell?.map((ad) => (
            <AdCard ad={ad} key={ad._id} />
          ))}
        </div>
      </div>

      <h2 className="display-1 bg-primary text-light p-5 h1 mt-2">For Rent</h2>
      <div className="container">
        <div className="row">
          {adsForRent?.map((ad) => (
            <AdCard ad={ad} key={ad._id} />
          ))}
        </div>
      </div>
    </div>
  );
}
```

\


How to create reusable card component in React?

If the sell or rent ad is for Land then do not show bedrooms, bathrooms and car park options. Show only for House.

\
```javascript
// AdForm.js
{type === "House" ? (
    <>
      <input
        type="number"
        min="0"
        className="form-control mb-3"
        placeholder="Enter how many bedrooms"
        value={ad.bedrooms}
        onChange={(e) => setAd({ ...ad, bedrooms: e.target.value })}
        required
      />

      <input
        type="number"
        min="0"
        className="form-control mb-3"
        placeholder="Enter how many bathrooms"
        value={ad.bathrooms}
        onChange={(e) => setAd({ ...ad, bathrooms: e.target.value })}
        required
      />

      <input
        type="number"
        min="0"
        className="form-control mb-3"
        placeholder="Enter how many car parks"
        value={ad.carpark}
        onChange={(e) => setAd({ ...ad, carpark: e.target.value })}
      />
    </>
  ) : (
    ""
  )}
```

\


How to conditionally show and hide form fields?

```javascript
// index.css
.hoverable:hover {
  transform: scale(1.01);
  box-shadow: 0.4rem 0.4rem 1rem rgba(0, 0, 0, 0.15) !important;
}
```

\
Now use class name `hoverable` in your div.

How to make a card hover effect using css?

```javascript
npm i react-icons
```

\
```javascript
// AdCard.js
// import
import { IoBedOutline } from "react-icons/io5";
import { TbBath } from "react-icons/tb";
import { BiArea } from "react-icons/bi";


<p className="card-text d-flex justify-content-between">
  {ad?.bedrooms ? (
    <span>
      <IoBedOutline /> {ad?.bedrooms}
    </span>
  ) : (
    ""
  )}

  {ad?.bathrooms ? (
    <span>
      <TbBath /> {ad?.bathrooms}
    </span>
  ) : (
    ""
  )}

  {ad?.landsize ? (
    <span>
      <BiArea /> {ad?.landsize}
    </span>
  ) : (
    ""
  )}
  <span>{ad?.type}</span>
</p>
```

\


How to use all popular icons in React?

```javascript
// AdCard.js  
function formatNumber(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

<h3>${formatNumber(ad?.price)}</h3>
<p className="card-text">{ad?.address}</p>
```

\


How to format price with comma?

```javascript
// AdForm.js
import { Badge } from "antd";

export default function AdCard({ ad }) {
  return (
    <div className="col-lg-4 p-4 gx-4 gy-4">
      <Badge.Ribbon
        text={`${ad?.type} for ${ad?.action}`}
        color={ad?.action === "Sell" ? "blue" : "red"}
      >
        {/* rest of content */}
      </Badge.Ribbon>
    </div>
  );
}
```

\


How to use Ribbon Badge in card component in React?

```javascript
// routes/ad.js
router.get("/ad/:slug", ad.read);

// controllers/ad.js
export const read = async (req, res) => {
  try {
    const { slug } = req.params;

    const ad = await Ad.findOne({ slug })
      // .select("-photos.Key -photos.key -photos.ETag -photos.Bucket")
      .populate("postedBy", "name username email phone company photo.Location");

    const geo = await config.GOOGLE_GEOCODER.geocode(ad.address);
    // related
    const related = await Ad.find({
      _id: { $ne: ad._id },
      action: ad?.action,
      type: ad?.type,
      address: {
        $regex: ad.googleMap?.[0]?.administrativeLevels?.level2long || "",
        $options: "i",
      },
    })
      .limit(3)
      .select("-photos.Key -photos.key -photos.ETag -photos.Bucket -googleMap")
      .populate("postedBy", "name username email phone company photo.Location");

    console.log("AD => ", ad);

    res.json({ ad, related });
  } catch (err) {
    console.log(err);
  }
};
```

\


How to fetch single Ad with related ads from MongoDB?

```javascript
// AdCard.js
import { Link } from "react-router-dom";

export default function AdCard({ ad }) {
    return (
      <div className="col-lg-4 p-4 gx-4 gy-4">
        <Link to={`/ad/${ad.slug}`} className="nav-link">
          {/* rest of content */}
        </Link>
      </div>
    );
  }
```

\
Create a page and grab slug from route params

\
```javascript
// pages/AdView.js
import { useParams } from "react-router-dom";

export default function AdView() {
  const params = useParams();
  return <>{params.slug}</>;
}
```

\
```javascript
// App.js
<Route path="/ad/:slug" element={<AdView />} />
```

\


How to create single Ad view page in React?

```javascript
// AdView.js
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

export default function AdView() {
  const [ad, setAd] = useState({});
  const [related, setRelated] = useState([]);

  const params = useParams();

  useEffect(() => {
    fetchAd();
  }, []);

  const fetchAd = async () => {
    try {
      const { data } = await axios.get(`/ad/${params?.slug}`);
      setAd(data);
      setRelated(data.related);
    } catch (err) {
      console.log(err);
    }
  };

  return <pre>{JSON.stringify({ad,related}, null, 4)}</pre>;
}
```

\


How to fetch individual Ad based on route param?

```javascript
npm i react-photo-gallery
```

\
```javascript
// AdView.js
  const photos = [
    {
      src: "https://image-bucket.s3.amazonaws.com/xxx.jpeg",
      width: 4,
      height: 3,
    },
    {
      src: "https://image-bucket.s3.amazonaws.com/xxx.jpeg",
      width: 1,
      height: 1,
    },
  ];

  return (
    <>
      <Gallery photos={photos} />
      <pre>{JSON.stringify(ad, null, 4)}</pre>
    </>
  );
```

\


How to create image gallery in React?

```javascript
npm i react-images
```

\
```javascript
// components/cards/ImageGallery.js
import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";

const photos = [
  {
    src: "https://image-bucket.s3.amazonaws.com/xxx.jpeg",
    width: 4,
    height: 3,
  },
  {
    src: "https://image-bucket.s3.amazonaws.com/xxx.jpeg",
    width: 1,
    height: 1,
  },
];

export default function ImageGallery() {
  const [current, setCurrent] = useState(0);
  const [isOpen, setIsOpen] = useState(false);

  const openLightbox = useCallback((event, { photo, index }) => {
    setCurrent(index);
    setIsOpen(true);
  }, []);

  const closeLightbox = () => {
    setCurrent(0);
    setIsOpen(false);
  };

  return (
    <div>
      <Gallery photos={photos} onClick={openLightbox} />
      <ModalGateway>
        {isOpen ? (
          <Modal onClose={closeLightbox}>
            <Carousel
              currentIndex={current}
              views={photos.map((x) => ({
                ...x,
                srcset: x.srcSet,
                caption: x.title,
              }))}
            />
          </Modal>
        ) : null}
      </ModalGateway>
    </div>
  );
}
```

\
Import and use in AdView

\
```javascript
<ImageGallery />
```

\


How to show image gallery photos in a Modal?

What our current photo object looks like?

\
```javascript
{
    "Location": "https://realist-udemy-image-bucket.s3.amazonaws.com/9YmeTI7dYJtATskDybfDr.jpeg"
},
```

\
What we need?

\
```javascript
{
    src: "https://image-bucket.s3.amazonaws.com/xxx.jpeg",
    width: 4,
    height: 3,
  },
```

\
```javascript
// AdView
import Logo from "../../src/logo.svg";

  const generatePhotosArray = (photos) => {
    if (photos?.length > 0) {
      const x = photos?.length === 1 ? 2 : 4;
      let arr = [];
      photos.map((p) =>
        arr.push({
          src: p.Location,
          width: x,
          height: x,
        })
      );
      return arr;
    } else {
      return [
        {
          src: Logo,
          width: 2,
          height: 1,
        },
      ];
    }
  };

return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-lg-4">4</div>
          <div className="col-lg-8">
            <ImageGallery photos={generatePhotosArray(ad?.photos)} />
          </div>
        </div>
      </div>
      <pre>{JSON.stringify({ ad, related }, null, 4)}</pre>
    </>
  );
```

\
```javascript
export default function ImageGallery({ photos }) {}
```

\
Control the height of the images

\
```javascript
// index.css
.react-photo-gallery--gallery img {
  object-fit: cover;
  max-height: 500px !important;
}
```

\


How to generate photos array to use in React Images carousel?

The following topics must include in single Ad view page

\
* Ad type 
* Ad for sale or rent
* Ad like and unlike
* Contact seller
* Google map
* Related properties

\


How to structure Single Ad view page?

```javascript
// AdView.js
return (
    <>
      <div className="container-fluid">
        <div className="row mt-2">
          <div className="col-lg-4 mt-2">
            {/* ad.type ? House/Land for sell/rent */}
            <button className="btn btn-primary disabled mt-5">
              {ad.type ? ad.type : ""} for {ad.action ? ad.action : ""}
            </button>
            <br />
            <p className="text-danger h5 m-2 mt-5">
              {ad?.sold ? "Off market" : "In market"}
            </p>
            <h1 className="mt-5">{ad.address}</h1>
          </div>
          <div className="col-lg-8">
            <ImageGallery photos={generatePhotosArray(ad?.photos)} />
          </div>
        </div>
      </div>
      <pre>{JSON.stringify({ ad, related }, null, 4)}</pre>
    </>
  );
```

\


How to show Ad main info beside image gallery?

First move the existing Ad features from `AdCard.js` it’s own component.

\
```javascript
// components/cards/AdFeatures.js
// move code from AdCard.js
import { IoBedOutline } from "react-icons/io5";
import { TbBath } from "react-icons/tb";
import { BiArea } from "react-icons/bi";

export default function AdFeatures({ ad }) {
  return (
    <p className="card-text d-flex justify-content-between mt-3">
      {ad?.bedrooms ? (
        <span>
          <IoBedOutline /> {ad?.bedrooms}
        </span>
      ) : (
        ""
      )}

      {ad?.bathrooms ? (
        <span>
          <TbBath /> {ad?.bathrooms}
        </span>
      ) : (
        ""
      )}

      {ad?.landsize ? (
        <span>
          <BiArea /> {ad?.landsize}
        </span>
      ) : (
        ""
      )}
      <span>{ad?.type}</span>
    </p>
  );
}
```

\
Import and use in AdCard and AdView

\
```javascript
<AdCard ad={ad} />
```

\


How to show Ad features in single Ad view page?

```javascript
// src/helpers/ad.js
export function formatNumber(x) {
  return x?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// AdCard.js
import { formatNumber } from "../../helpers/ad";

// AdView.js
import { formatNumber } from "../../helpers/ad";

// under AdFeatures
<h3 className="mt-5 h2">${formatNumber(ad?.price)}</h3>
```

\
Use day.js for date formatting

\
```javascript
npm i dayjs
```

\
```javascript
// AdView.js
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

// under price
<p className="d-flex justify-content-between mt-4">
  <span>Added {dayjs(ad?.createdAt).fromNow()}</span>{" "}
  <span>{ad?.views} Views</span>
</p>
```

\


Show Ad price, date and views count

```javascript
// routes/ad.js
router.post("/wishlist", requireSignin, ad.addToWishlist);
router.delete("/wishlist/:adId", requireSignin, ad.removeFromWishlist);
```

\
```javascript
// controllers/ad.js
export const addToWishlist = async (req, res) => {
  try {
    const user = await User.findByIdAndUpdate(
      req.user._id,
      {
        $addToSet: { wishlist: req.body.adId },
      },
      { new: true }
    );
    const { password, resetCode, ...rest } = user._doc;
    res.json(rest);
  } catch (err) {
    console.log(err);
  }
};

export const removeFromWishlist = async (req, res) => {
  try {
    const user = await User.findByIdAndUpdate(
      req.user._id,
      {
        $pull: { wishlist: req.params.adId },
      },
      { new: true }
    );
    const { password, resetCode, ...rest } = user._doc;
    res.json(rest);
  } catch (err) {
    console.log(err);
  }
};
```

\


How to add like and unlike feature in NodeJs?

```javascript
// components/cards/LikeUnlike.js
import axios from "axios";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { useAuth } from "../../context/auth";
import toast from "react-hot-toast";
import { FcLike, FcLikePlaceholder } from "react-icons/fc";
import { useNavigate } from "react-router-dom";

dayjs.extend(relativeTime);

export default function LikeUnlike({ ad }) {
  // context
  const [auth, setAuth] = useAuth();
  // hooks
  const navigate = useNavigate();

  const handleLike = async (adId) => {
    if (auth.user === null) {
      navigate("/login");
      return;
    }
    try {
      const { data } = await axios.post("/wishlist", { adId: ad._id });
      console.log("added to wishlist => ", data);
      setAuth({ ...auth, user: data });
      const fromLS = JSON.parse(localStorage.getItem("auth"));
      if (fromLS) {
        fromLS.user = data;
        localStorage.setItem("auth", JSON.stringify(fromLS));
      }
      toast.success("Added to your wishlist");
    } catch (err) {
      console.log(err);
      toast.error("Something went wrong. Try again.");
    }
  };

  const handleUnlike = async (adId) => {
    if (auth.user === null) {
      navigate("/login");
      return;
    }
    try {
      const { data } = await axios.delete(`/wishlist/${ad._id}`);
      console.log("removed from wishlist => ", data);
      setAuth({ ...auth, user: data });
      const fromLS = JSON.parse(localStorage.getItem("auth"));
      if (fromLS) {
        fromLS.user = data;
        localStorage.setItem("auth", JSON.stringify(fromLS));
      }
      toast.error("Removed from your wishlist");
    } catch (err) {
      console.log(err);
      toast.error("Something went wrong. Try again.");
    }
  };

  return (
    <>
      {auth?.user?.wishlist?.includes(ad?._id) ? (
        <span onClick={() => handleUnlike(ad)}>
          <FcLike className="pointer h2 m-2" />
        </span>
      ) : (
        <span onClick={() => handleLike(ad)}>
          <FcLikePlaceholder className="pointer h2 m-2" />
        </span>
      )}
    </>
  );
}
```

\
Now import in AdView, pass ad as props

\
```javascript
// AdView
<LikeUnlike ad={ad} />
```

\


How to add like unlike feature in React?

If not logged in user clicks on like, he will get redirected to login page. After login you should redirect him back the page he was previously.

\
```javascript
// LikeUnlike.js
// add this in your handleLike and handleUnlike
if (auth.user === null) {
  navigate("/login", {
    state: `/ad/${ad.slug}`,
  });
  return;
}
```

\
Now check for route state in login page

\
```javascript
// Login.js
import { Link, useNavigate, useLocation } from "react-router-dom";

const location = useLocation();

// handleSubmit()
location?.state !== null ? navigate(location.state) : navigate("/");
```

\


How to redirect user to intended page after login?

Login to Google developer console, create app then get API keys. You need to enable maps service by providing Credit card before using it.

\
```javascript
npm i google-map-react
```

\
```javascript
// config.js
export const GOOGLE_MAPS_KEY = "xxx-xxx";
```

\
```javascript
// components/cards/MapCard.js
import GoogleMapReact from "google-map-react";
import { GOOGLE_MAPS_KEY } from "../../config";

export default function MapCard({ ad }) {
  const defaultProps = {
    center: {
      //   lat: -33.865143,
      //   lng: 151.2099,
      lat: ad?.location?.coordinates[1],
      lng: ad?.location?.coordinates[0],
    },
    zoom: 11,
  };

  if (ad?.location?.coordinates?.length) {
    return (
      // Important! Always set the container height explicitly
      <div style={{ width: "100%", height: "350px" }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: GOOGLE_MAPS_KEY }}
          defaultCenter={defaultProps.center}
          defaultZoom={defaultProps.zoom}
        >
          <div
            lat={ad?.location?.coordinates[1]}
            lng={ad?.location?.coordinates[0]}
          >
            <span className="lead">📍</span>
          </div>
        </GoogleMapReact>
      </div>
    );
  }
}
```

\
Now import and use in AdView

\
```javascript
// AdView.js
<div className="row mt-2">
  <div className="col-md-7">
    <MapCard ad={ad} />
  </div>

  <div className="col-md-5">Contact form</div>
</div>
```

\


How to use Google maps in React?

Showing Ad title and description. To make description more readable, add line breaks wherever there is full stop.

\
```javascript
<h1 className="mt-3">
  {ad?.type} in {ad?.address} for {ad?.action} ${ad?.price}
</h1>

<AdFeatures ad={ad} />

<hr />

<h3 className="lead">{ad?.title}</h3>

<p className="lead">
  {ad?.description?.replaceAll(". ", "<br/><br/>")}
</p>
```

\


How to add line breaks in textarea content?

```javascript
import AdCard from "../components/cards/AdCard";

<h4 className="text-center">Related Ads</h4>

<div className="container">
  <div className="row">
    {related?.map((ad) => (
      <>
        <AdCard ad={ad} />
      </>
    ))}
  </div>
</div>
```

\
If you don’t see ad view changed when clicked on related ads, add the dependency to useEffect

\
```javascript
// AdView  
useEffect(() => {
    fetchAd();
  }, [params]);
```

\


How to display related Ads in the single Ad view page?

```javascript
// components/nav/Footer.js
export default function Footer() {
  return (
    <div className="text-center p-4 bg-dark text-light mt-4">
      <h4 className="mt-4">Realist App - Buy Sell or Rent Properties</h4>
      <p className="mt-3">
        &copy; {new Date().getFullYear()} All rights reserved
      </p>
      <p>domain.com</p>
    </div>
  );
}
```

\
Now import in `App.js` and put under `</Routes>`

How to create footer section with copyright and current year?

```javascript
// nav/Sidebar.js
<li className="nav-item">
  <NavLink className="nav-link" to="/user/profile">
    Update Profile
  </NavLink>
</li>
```

\
To create unique usernames that can be used as slug to display user public profile, use `slugify` from npm

\
```javascript
npm i slugify
```

\
```javascript
// pages/user/Profile.js
import Sidebar from "../../components/nav/Sidebar";
import ProfileUpdate from "../../components/forms/ProfileUpdate";

export default function Profile() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <div className="container mt-2">
        <ProfileUpdate />
      </div>
    </div>
  );
}

// import in App.js
<Route path="user/profile" element={<Profile />} />
```

\
```javascript
// components/forms/ProfileUpdate.js
import { useState, useEffect } from "react";
import { useAuth } from "../../context/auth";
import axios from "axios";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import slugify from "slugify";
import ProfileUpload from "./ProfileUpload";

// gets prop from main nav
export default function ProfileUpdate() {
  // context
  const [auth, setAuth] = useAuth();
  // state
  // username name email company address phone about
  const [username, setUsername] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  const [address, setAddress] = useState("");
  const [phone, setPhone] = useState("");
  const [about, setAbout] = useState("");
  const [loading, setLoading] = useState(false);
  const [photo, setPhoto] = useState(null);
  const [uploading, setUploading] = useState(false);
  // hooks
  const navigate = useNavigate();

  useEffect(() => {
    if (auth.user) {
      setUsername(auth.user?.username);
      setName(auth.user?.name);
      setEmail(auth.user?.email);
      setCompany(auth.user?.company);
      setAddress(auth.user?.address);
      setPhone(auth.user?.phone);
      setAbout(auth.user?.about);
      setPhoto(auth.user?.photo);
    }
  }, [auth.user]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      console.log(username, name, email, company, address, phone, about, photo);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-8 offset-lg-2 mt-1">
          <form onSubmit={handleSubmit}>
            <div className="d-flex justify-content-between">
              <label htmlFor="">
                Username <small>Must be unique</small>
              </label>
            </div>

            <input
              name="username"
              type="text"
              placeholder="Update your username"
              className="form-control mb-4"
              value={username}
              onChange={(e) =>
                setUsername(slugify(e.target.value.toLowerCase()))
              }
            />

            <input
              type="text"
              placeholder="Enter your name"
              className="form-control mb-4"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <input
              type="text"
              placeholder={email}
              className="form-control mb-4"
              disabled={true}
            />
            <input
              type="text"
              placeholder="Enter your company name"
              className="form-control mb-4"
              value={company}
              onChange={(e) => setCompany(e.target.value)}
            />
            <input
              type="text"
              placeholder="Enter address"
              className="form-control mb-4"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
            />
            <input
              type="text"
              placeholder="Enter your phone number"
              className="form-control mb-4"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
            <textarea
              placeholder="Write something interesting about yourself"
              className="form-control mb-4"
              value={about}
              onChange={(e) => setAbout(e.target.value)}
            />

            <button className="btn btn-primary col-12 mb-4" disabled={loading}>
              {loading ? "Processing..." : "Update profile"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}
```

\
```javascript
// App.js
<Route path="user/profile" element={<ProfileUpdate />} />
```

\


How to create user profile update page?

```javascript
// components/forms/ProfileUpload.js
import Resizer from "react-image-file-resizer";
import axios from "axios";
import { Avatar } from "antd";
import { useAuth } from "../../context/auth";

export default function ImageUpload({
  photo,
  setPhoto,
  uploading,
  setUploading,
}) {
  // context
  const [auth, setAuth] = useAuth();

  const handleUpload = (e) => {
    let file = e.target.files[0];
    if (file) {
      setUploading(true);
      // upload
      new Promise((resolve) => {
        Resizer.imageFileResizer(
          file,
          1080,
          720,
          "JPEG",
          100,
          0,
          async (uri) => {
            try {
              const { data } = await axios.post("/upload-image", {
                image: uri,
              });
              setPhoto(data);
              setUploading(false);
            } catch (err) {
              console.log("photo upload err => ", err);
              setUploading(false);
            }
          },
          "base64"
        );
      });
    } else {
      setUploading(false);
    }
  };

  const handleDelete = async () => {
    const answer = window.confirm("Delete image?");
    if (!answer) return;
    setUploading(true);
    try {
      const { data } = await axios.post("/remove-image", photo);
      if (data?.ok) {
        setPhoto(null);
        setUploading(false);
      }
    } catch (err) {
      console.log(err);
      setUploading(false);
    }
  };

  return (
    <>
      <div className="d-flex mt-4">
        <label className="btn btn-secondary mr-1">
          {uploading ? "Processing..." : "Upload photos"}
          <input
            onChange={handleUpload}
            type="file"
            accept="image/*"
            hidden
            disabled={uploading}
          />
        </label>

        {photo?.Location ? (
          <Avatar
            src={photo?.Location}
            shape="square"
            size={46}
            className="mx-1 pointer"
            onClick={() => handleDelete()}
          />
        ) : (
          ""
        )}

        <pre>{JSON.stringify(photo, null, 4)}</pre>
      </div>
    </>
  );
}
```

\
Now import and use in `ProfileUpdate.js`

\
```javascript
<ProfileUpload
  photo={photo}
  setPhoto={setPhoto}
  uploading={uploading}
  setUploading={setUploading}
/>
```

\


How to support image upload on user profile update?

```javascript
// ProfileUpdate.js
const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      // console.log(username, name, email, company, address, phone, about, photo);
      const { data } = await axios.put("/update-profile", {
        username,
        name,
        email,
        company,
        address,
        phone,
        about,
        photo,
      });
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        console.log("profile update response => ", data);
        setAuth({ ...auth, user: data });

        let fromLS = JSON.parse(localStorage.getItem("auth"));
        fromLS.user = data;
        localStorage.setItem("auth", JSON.stringify(fromLS));
        setLoading(false);
        toast.success("Profile updated");
      }
    } catch (err) {
      console.log(err);
      toast.error("Profile update failed. Try again.");
      setLoading(false);
    }
  };
```

\


How to make Axios PUT request your API to update user profile from React?

Create settings page to allow user to update password.

\
```javascript
// components/nav/Sidebar.js
<li className="nav-item">
  <NavLink className="nav-link" to="/user/settings">
    Settings
  </NavLink>
</li>

// pages/user/Settings.js
import Sidebar from "../../components/nav/Sidebar";
import PasswordUpdate from "../../components/forms/PasswordUpdate";

export default function Profile() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <div className="container mt-2">
        <PasswordUpdate />
      </div>
    </div>
  );
}

// App.js
<Route path="user/settings" element={<Settings />} />
```

\
\
```javascript
// components/forms/PasswordUpdate.js
import { useState } from "react";
import axios from "axios";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";

// gets prop from main nav
export default function ProfileUpdate() {
  // state
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  // hooks
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      // console.log(username, name, email, company, address, phone, about, photo);
      const { data } = await axios.put("/update-password", { password });
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        setLoading(false);
        toast.success("Password updated");
      }
    } catch (err) {
      console.log(err);
      toast.error("Password update failed. Try again.");
      setLoading(false);
    }
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-8 offset-lg-2 mt-1">
          <form onSubmit={handleSubmit}>
            <input
              name="password"
              type="password"
              placeholder="Update your password"
              className="form-control mb-4"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />

            <button className="btn btn-primary col-12 mb-4" disabled={loading}>
              {loading ? "Updating..." : "Update password"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}
```

\


How to allow user to update password?

```javascript
// pages/AdView
<div className="col-md-5">
  <ContactSeller ad={ad} />
</div>
```

\
```javascript
// components/forms/ContactSeller.js
import { useState, useEffect } from "react";
import { Avatar } from "antd";
import toast from "react-hot-toast";
import axios from "axios";
import { useAuth } from "../../context/auth";
import { Link, useNavigate } from "react-router-dom";

export default function ContactSeller({ ad }) {
  // context
  const [auth, setAuth] = useAuth();
  // state

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [phone, setPhone] = useState("");
  const [loading, setLoading] = useState(false);

  // hooks
  const navigate = useNavigate();

  useEffect(() => {
    if (auth?.user) {
      setName(auth.user?.name);
      setEmail(auth.user?.email);
      setPhone(auth.user?.phone);
    }
  }, [auth?.user]);

  const handleSubmit = async () => {
    setLoading(true);
    try {
      console.log(name, email, message, phone);
    } catch (err) {
      console.log(err);
      setLoading(false);
      toast.error("Something went wrong. Try again.");
    }
  };

  return (
    <div className="card shadow px-3 py-3">
      <div className="row">
        <div className="col">
          <div className="row mx-2 mb-3 mt-3">
            <div>
              <h4>Contact {ad.postedBy?.name ?? ad.postedBy?.username}</h4>
              <p>
                About {ad?.type} in {ad?.address} for {ad?.action} ${ad?.price}
              </p>
            </div>

            <textarea
              className="form-control mb-3"
              name="message"
              value={message}
              placeholder="✍️ Write description"
              onChange={(e) => setMessage(e.target.value)}
            />

            <input
              name="name"
              type="text"
              className="form-control mb-3 text-danger"
              placeholder="Enter your name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              disabled={auth?.user?.name}
              required
            />

            <input
              type="email"
              placeholder="Enter your email"
              className="form-control mb-3 text-danger"
              value={email}
              onChange={(e) => setEmail(e.target.value?.toLowerCase())}
              disabled={auth?.user?.email}
              required
            />

            <input
              name="phone"
              type="text"
              className="form-control mb-3 text-danger"
              placeholder="Enter your phone"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              disabled={auth?.user?.phone}
            />

            <button
              className="btn btn-primary"
              disabled={!name || !email || loading}
              onClick={handleSubmit}
            >
              {loading ? "Please wait.." : "Send enquiry"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
```

\


How to create contact seller component in React?

```javascript
// components/forms/ContactSeller.js
  const handleSubmit = async () => {
    if (auth.user === null && auth.token === "") {
      navigate("/login", {
        state: `/ad/${ad.slug}`,
      });
    }
    setLoading(true);
    try {
      // console.log(name, email, message, phone);
      const { data } = await axios.post("/contact-seller", {
        name,
        email,
        message,
        phone,
        adId: ad._id,
      });
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success("Thank you for your enquiry");
        setLoading(false);
      }
    } catch (err) {
      console.log(err);
      setLoading(false);
      toast.error("Something went wrong. Try again.");
    }
  };
```

\
Create route and controller function to send email

\
```javascript
// routes/ad
router.post("/contact-seller", ad.contactSeller);

// controllers/ad
export const contactSeller = async (req, res) => {
  try {
    const { name, email, message, phone, adId } = req.body;

    const user = await User.findOneAndUpdate(
      { email },
      {
        $addToSet: { enquiredProperties: adId },
      }
    );

    const ad = await Ad.findById(adId).populate("postedBy", "email");

    if (!user) {
      res.json({ error: "Could not find user with that email" });
    } else {
      // send email
      config.AWSSES.sendEmail(
        emailTemplate(
          ad.postedBy.email,
          `
        <p>You have received a new customer enquiry.</p>
        
        <h4>Customer details</h4>
        <p>Name: ${name}</p>
        <p>Email ${email}</p>
        <p>Phone: ${phone}</p>
        <p>Message: ${message}</p>
        <p>Enquiried property:</p>
        <a href="${config.APP_NAME}/ad/${ad.slug}">${ad?.type} in ${ad?.address} for ${ad?.action} $${ad?.price}</a>
    `,
          email,
          "New enquiry received"
        ),
        (err, data) => {
          if (err) {
            return res.json({ error: "Provide a valid email address" });
          } else {
            return res.json({ success: "Check email to access your account" });
          }
        }
      );
    }
  } catch (err) {
    console.log(err);
    res.json({ error: "Something went wrong. Try again." });
  }
};
```

\


How to send contact email using AWS SES?

* User ads list
* Update ad
* Wishlist
* Enquired properties list
* Agents page (list users with public profile)
* Load more
* Search
* Deploy

\


Project recap and what are the next stpes?

```javascript
// routes/ad
router.get("/user-ads", requireSignin, ad.userAds);

// controllers
export const userAds = async (req, res) => {
  try {
    const perPage = 2; // change as required
    const page = req.params.page ? req.params.page : 1;

    const total = await Ad.find({
      postedBy: req.user._id,
    });

    const ads = await Ad.find({ postedBy: req.user._id })
      .select(
        "-photos.Key -photos.key -photos.ETag -photos.Bucket -location -googleMap"
      )
      .populate("postedBy", "name username email phone company")
      .skip((page - 1) * perPage)
      .sort({ createdAt: -1 })
      .limit(perPage);
    res.json({ ads, total: total?.length });
  } catch (err) {
    console.log(err);
  }
};
```

\


Build Real Estate App using React Node (Full Stack JavaScript)

How to create Update component to edit Ad?

Fullstack JavaScript React Node Courses on Udemy