```js
npm init -y
````

Install packages
```js
npm install express mongoose dotenv colors express-async-handler cors
```
- Express for rest API
- Mongoose for MongoDB ODM
- dotenv for working with `dotenv` files
- colors for seeing things better in the terminal
- express-async-handler for handling exceptions inside async express routes and passing them to your express error handlers
- cors for sharing resources between servers (backend) and clients (frontend)

Install `nodemon` as a dev dependency`
```js
npm install -D nodemon
```

Create backend folder and `server.js` file inside it 

Update package.json file
```js
{
  "name": "quote-gen",
  "version": "1.0.0",
  "description": "A fullstack quote generator",
  "main": "server.js",
  "scripts": {
    "start": "node backend/server.js",
    "dev": "nodemon backend/server.js"
  },
  "author": "Kolade Chris",
  "license": "MIT",
  "dependencies": {
    "colors": "^1.4.0",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "express-async-handler": "^1.2.0",
    "mongoose": "^6.2.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}
```
Put a test code inside server.js
```js
console.log("Hello codecontinuers");
```
Run the development server
```js
npm run dev //Output: Hello codecontinuers
```

This is what the folder structure looks like so far:

 ![folder-structure](https://tutorial-image-bucket.s3.amazonaws.com/huN0fpQFNUMzh_cJTZ-XZ.jpeg)

Initialize the project

Bring in express, colors, and dotenv
```js
const express = require("express");
const colors = require("colors");
const dotenv = require("dotenv").config();
```
Declare port variable
```
const port = 5000;
```
Initialize express
```js
const app = express();
```
Set up the app to listen for changes at the port
```js
app.listen(port, () => console.log(`Server running on port ${port}`));
```
Create .env file and put the following inside
```
NODE_ENV = development
PORT = 5000
```
Modify port variable to use the port from the .env file

```js
const port = process.env.PORT || 5000;
```

Set up a get rout inside server.js
```js
app.get("/api/quotes", (req, res) => {
  res.send("Get quotes");
});
```

Test the get route with Postman

 ![gwt-quotes](https://tutorial-image-bucket.s3.amazonaws.com/JMTNiGLyzsvSusif27TIb.jpeg)

Setup server.js

Create `quoteRoutes.js` file inside the route folder

Bring in express and express router into the `quoteRoutes.js` file
```js
const express = require("express");
const router = express.Router();
```

Export the router 
```js
module.exports = router;
```

Set up the get route inside the `quoteRoutes.js` file
```js
router.get("/", (req, res) => {
  res.status(200).json({ message: "Get quotes" });
});
```
Modify server.js to use the get route
```js
app.use("/api/quotes", require("./routes/quoteRoutes"));
```

Set up the post route inside the `quoteRoutes.js` file
```js
router.post("/", (req, res) => {
  res.status(200).json({ message: "Create quote" });
});
```

Set up the update route inside the `quoteRoutes.js` file
```js
router.put("/:id", (req, res) => {
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
});
```

Set up the delete route inside the `quoteRoutes.js` file
```js
router.delete("/:id", (req, res) => {
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
});

```

Test the get route with Postman
 ![getRoute](https://tutorial-image-bucket.s3.amazonaws.com/8dEt0SZ8nZnr0pMOiXmKK.jpeg)

Test the post route with Postman
 ![postRoute](https://tutorial-image-bucket.s3.amazonaws.com/n5-mUoCkuayB6Sr2RTPIh.jpeg)

Test the update route with Postman
 ![updateRoute](https://tutorial-image-bucket.s3.amazonaws.com/wI-9oyV1G3AtMPqwPc_el.jpeg)

Test the delete route with Postman
 ![deleteRoute](https://tutorial-image-bucket.s3.amazonaws.com/zgFBn4-cB0Bm6EEAdD3JD.jpeg)

Setup route subfolder inside backend folder to clean up server.js file

Set up the get function to get quotes
```js
const getQuotes = (req, res) => {
  res.status(200).json({ message: "Get quotes" });
};
```

Set up the post function to create a quote
```js
const createQuote = (req, res) => {
  res.status(200).json({ message: "Create quote" });
};
```

Set up the update function to update a quote 
```js
const updateQuote = (req, res) => {
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
};
```

Set up the delete function to delete a quote 
```js
const deleteQuote = (req, res) => {
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
};
```

Export the functions
```js
module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
```

Import the functions into the `quoteController.js` file
```js
const {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
} = require("../controllers/quoteController.js");
```

Replace the quoteRoute.js functions with the ones imported from the controllers
```js
router.get("/", getQuotes);

router.post("/", createQuote);

router.put("/:id", updateQuote);

router.delete("/:id", deleteQuote);
```

Make sure the router is exported
```js
module.exports = router;
```

Test the get route with Postman once again
 ![getRoute](https://tutorial-image-bucket.s3.amazonaws.com/8dEt0SZ8nZnr0pMOiXmKK.jpeg)

Test the post route with Postman once again
 ![postRoute](https://tutorial-image-bucket.s3.amazonaws.com/n5-mUoCkuayB6Sr2RTPIh.jpeg)

Test the update route with Postman once again
 ![updateRoute](https://tutorial-image-bucket.s3.amazonaws.com/wI-9oyV1G3AtMPqwPc_el.jpeg)

Test the delete route with Postman once again
 ![deleteRoute](https://tutorial-image-bucket.s3.amazonaws.com/zgFBn4-cB0Bm6EEAdD3JD.jpeg)

Setup controller folder and quoteController.js file to add functionalities

Set up express middlewares inside the `server.js`  to receive body data
```js
app.use(express.json());
```

Set up error handler for the post route
```js
const createQuote = (req, res) => {
if (!req.body) {
    res.status(400);
    throw new Error("Please add a quote and author field");
  }
  res.status(200).json({ message: "Create quote" });
};
```

Set up error handler for the update route
```js
const updateQuote = (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
};
```

Set up error handler for the delete route
```js
const deleteQuote = (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
};
```

Change the default express error by adding error handler middleware in an `errorMiddleware.js` file inside a middleware folder to be created

```js
const errorHandler = (err, req, res, next) => {
  const statusCode = res.statusCode ? res.statusCode : 500;

  res.status(statusCode);

  res.json({
    message: err.message,
    stack: process.env.NODE_ENV === "production" ? null : err.stack,
  });
};

You might need this later

module.exports = {
  errorHandler,
};
```

Bring in the error handler middleware into `server.js` and use it
```js
const { errorHandler } = require("./middleware/errorMiddleware");

app.use(errorHandler);
```

Test the post route to make sure the error handler is working by inputting no data to the body

 ![errortest](https://tutorial-image-bucket.s3.amazonaws.com/ylrEVOlJMP1st-2btvt86.jpeg)

Set up error handler and the server to receive body data

Require the express-async-handler package in the `quoteController.js` file 
```js
const asyncHandler = require("express-async-handler");
```

Wrap the controller functions with async 
```js
const asyncHandler = require("express-async-handler");

const getQuotes = async (req, res) => {
  res.status(200).json({ message: "Get quotes" });
};

const createQuote = async (req, res) => {
  if (!req.body.text) {
    res.status(400);
    throw new Error("Please add a text field");
  }
  res.status(200).json({ message: "Create quote" });
};

const updateQuote = async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
};

const deleteQuote = async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
};

module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
```

Wrap the controller functions with asyncHandler
```js
const asyncHandler = require("express-async-handler");

const getQuotes = asyncHandler(async (req, res) => {
  res.status(200).json({ message: "Get quotes" });
});

const createQuote = asyncHandler(async (req, res) => {
  if (!req.body.text) {
    res.status(400);
    throw new Error("Please add a text field");
  }
  res.status(200).json({ message: "Create quote" });
});

const updateQuote = asyncHandler(async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Update quote, ${req.params.id}` });
});

const deleteQuote = asyncHandler(async (req, res) => {
  if (!goal) {
    res.status(400);
    throw new Error("Goal not found");
  }
  res.status(200).json({ message: `Delete quote, ${req.params.id}` });
});

module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
``` 


Set up the controller functions to use a async await with the express-async-handler package

Put the MongoDB URO in the .env file
```js
MONGO_URI = mongodb://localhost:27017/quoteGenerator
```

If you are using Mongo Atlas instead of Mongo local, you can replace the URI with it

Make sure you restart the server once you make changes to the .env file

Create config folder inside the backend folder

Create `db.js` file to connect with the MongoDB database

Bring in Mongoose into the `db.js` file
```js
const mongoose = require("mongoose");
```
Bring in colors package into the `server.js` file in order to see the console texts in a specified color

```js
const colors = require("colors");
```

Write the function to connect to the MongoDB database
```js
const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGO_URI);

    console.log(`MongoDB Connected: ${conn.connection.host}`.yellow.underline);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};
```

Export the function
```js
module.exports = connectDB;
```

Bring in the function to connect the database into `server.js`
```js
const connectDB = require("./config/db");
```

Initialize the function
```js
connectDB();
```

Run the development server in order to connect to the database
```js
npm run dev
```
 ![runningDB](https://tutorial-image-bucket.s3.amazonaws.com/v-MMIJHjPT7amCnyyVyM8.jpeg)

Create and Connect MongoDB Database

Create models folder

Create `quotesModel.js` inside the model folder

Bring in mongoose
```js
const mongoose = require("mongoose");
```

Create quote Schema
```js
const mongoose = require("mongoose");

const quoteSchema = mongoose.Schema({
  quote: {
    type: String,
    required: [true, "Quote  is required"],
    maxlength: [250, "Quote cannot be More than 250 Characters"],
    trim: true,
  },

  author: {
    type: String,
    maxlength: [20, "Author's name canot be more than 10 characters"],
  },
});

module.exports = mongoose.model("Quote", quoteSchema);

```

Export the schema
```js
module.exports = mongoose.model("Quote", quoteSchema);
```

Create Model For Interacting with the Database

Create read controller to get all quotes
```js
const getQuotes = asyncHandler(async (req, res) => {
  //Find quotes
  res.status(200).json({ quotes });

  res.status(200).json(quotes);
});
```

Create post controller to create a quote
```js
const createQuote = asyncHandler(async (req, res) => {
  if (!req.body) {
    res.status(400);
    throw new Error("Please add a quote and author field");
  }

  // Create quote
  const quote = await Quote.create(req.body);
  res.status(200).json(quote);
});
```

Create update controller to update a quote
```js
const updateQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  // Update the quote
  const updatedQuote = await Quote.findByIdAndUpdate(req.params.id, req.body, {
    new: true,
  });

  res.status(200).json(updatedQuote);
});
```

Create update controller to delete a quote
```js
const deleteQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  //   Delete the quote
  await quote.remove();

  res
    .status(200)
    .json({ message: `Quote with the id ${req.params.id} deleted` });
});
```

**N.B.**: We won't be needing the update and delete routes in production. I decided to include the 2 so beginners can learn how to make a full CRUD (Create, Read, Update and Delete) API.

Create the Read, Post, Update and Delete Controllers with the Quote Model

 ![addQuotes](https://tutorial-image-bucket.s3.amazonaws.com/IESkZlOkSrvCB1U_-A65j.jpeg)

Add the Quotes to the Database

`server.js` in the root

The only new thing here is that I have added and used `cors`

```js
const express = require("express");
const colors = require("colors");
const dotenv = require("dotenv").config();
const cors = require("cors");
const { errorHandler } = require("./middleares/errorMiddleware");
const connectDB = require("./config/db");

const port = process.env.PORT || 5000;

connectDB();

const app = express();

app.use(express.json());
app.use(cors());

app.use("/api/quotes", require("./routes/quoteRoutes"));
// app.use(errorHandler);

app.listen(port, () => console.log(`Server running on port ${port}`));
```

`db.js` inside config subfolder in the backend folder
```js
const mongoose = require("mongoose");

const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGO_URI);

    console.log(`MongoDB Connected: ${conn.connection.host}`.yellow.underline);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

module.exports = connectDB;
```

`quoteController.js` inside controllers subfolder in the backend folder
```js
const asyncHandler = require("express-async-handler");
const Quote = require("../models/quotesModel");

const getQuotes = asyncHandler(async (req, res) => {
  //Find quotes
  const quotes = await Quote.find();

  res.status(200).json({ quotes });
});

const createQuote = asyncHandler(async (req, res) => {
  if (!req.body) {
    res.status(400);
    throw new Error("Please add a quote and author field");
  }

  // Create quote
  const quote = await Quote.create(req.body);
  return res.status(200).json(quote);
});

const updateQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  // Update the quote
  const updatedQuote = await Quote.findByIdAndUpdate(req.params.id, req.body, {
    new: true,
  });

  res.status(200).json(updatedQuote);
});

const deleteQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  //   Delete the quote
  await quote.remove();

  res
    .status(200)
    .json({ message: `Quote with the id ${req.params.id} deleted` });
});

module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};
```

`errorMiddleware.js` inside middleware subfolder in the backend folder
```js
const errorHandler = (err, req, res, next) => {
  const statusCode = res.statusCode ? res.statusCode : 500;

  res.status(statusCode);

  res.json({
    message: err.message,
    stack: process.env.NODE_ENV === "production" ? null : err.stack,
  });
};

module.exports = {
  errorHandler,
};
```

`quoteModel.js` inside models folder in the backend subfolder
```js
const mongoose = require("mongoose");

const quoteSchema = mongoose.Schema({
  quote: {
    type: String,
    required: [true, "Quote  is required"],
    maxlength: [250, "Quote cannot be More than 250 Characters"],
    trim: true,
  },

  author: {
    type: String,
    maxlength: [20, "Author's name canot be more than 10 characters"],
  },
});

module.exports = mongoose.model("Quote", quoteSchema);
```

`quoteRoutes.js` file inside routes subfolder in the backend folder
```js
const express = require("express");
const router = express.Router();

const {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
} = require("../controllers/quoteController.js");

router.get("/", getQuotes);

router.post("/", createQuote);

router.put("/:id", updateQuote);

router.delete("/:id", deleteQuote);

module.exports = router;
```

The screenshot below shows what the folder structure looks like
 ![folderstructure](https://tutorial-image-bucket.s3.amazonaws.com/muyfFv_yDGxQ6M4ApTbDq.jpeg)

The full Backend Codes and Location of the Files

**Before We Start!**

The main thing we are going to do in the frontend is to make an API request to the server, get the quotes added to the database, and display each of them randomly.

The algorithm we will be using to display the quotes randomly is in the code snippet below:
```js
let randomNum = Math.floor(Math.random() * quotes.length);
let randomQuote = quotes[randomNum];
```

### Install react

Make sure you are in the root directory (not the backend folder), then open your terminal and run `npx-create-react-app frontend`

This will install react in a folder called frontend

run `cd frontend` and then `npm start` to open up the development server in your default browser

You should see something like this when it finishes loading:
![FPAoGIIXsAAhEBU](https://tutorial-image-bucket.s3.amazonaws.com/OTvwE-wfKqiy0b7d2AOQR.jpeg)

The project will have a button that will be clicked to display the quotes randomly and another button you can click to share the quote on Twitter. So, we have to install an icon package from NPM.

The icon package I will be using is React Icons, so open the terminal again and run `npm i react-icons`

When you install react and react-icons, your package.json file should look like this:
```json
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```

In the next chapter, we will start creating the components.

Start Working with the Frontend

Before you create any component, create a component subfolder inside the `src` folder, then create a NAv.js component inside the component subfolder

In addition, create an images subfolder inside the `src` folder, download the following images, and put them there:

![kantehead](https://tutorial-image-bucket.s3.amazonaws.com/Kqh-e00nXax6hVFEhBOch.jpeg) 

![p116594](https://tutorial-image-bucket.s3.amazonaws.com/cbh25P0S_8ZOG-u5Lc7Jb.jpeg)

Our Nav components codes look as shown in the snippet below:

```js
import KanteHead from "../images/kantehead.png";

// Reloads the windo any thime invoked
const handleClick = () => {
  return window.location.reload();
};

const Nav = () => {
  return (
    <div>
      <nav className="navbar">
        <div className="logo">
          <a href="#" onClick={handleClick}>
            <img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
          </a>
          <a href="#">
            <h1 className="logo-text">
              KANTE <br /> QUOTES
            </h1>
          </a>
        </div>

        <ul>
          <li>
            <a href="#"> Random Quote</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Nav;
```
```

Create the Navbar Component

The `QuoteBody.js`  component will contain every other thing apart from the navbar and footer

Inside the `component` subfolder in the `src` folder, create a file named `QuoteBody.js` 

**Import useState and useEffect hooks**
```js
import React, { useState, useEffect } from "react";
import { FaTwitter, FaRandom } from "react-icons/fa";
```

**Import an image**
```js
import KantePic2 from "../images/p116594.png";
```

**Declare an API variable to be used for the API call**
```js
const api = `http://localhost:5000/api/quotes`;
```

The rest of the codes are well commented so you can understand it. It look like this:

```js
const QuoteBody = () => {
  const [quote, setQuotes] = useState("");
  const [author, setAuthor] = useState("");

  // Call Quotes API
  useEffect(() => {
    fetchQuotes();
  }, []);

  // Make the API request
  const fetchQuotes = async () => {
    try {
      const res = await fetch(api);
      const { quotes } = await res.json();

      console.log(quotes);
      // Get random quotes
      let randomNum = Math.floor(Math.random() * quotes.length);
      let randomQuote = quotes[randomNum];

      setQuotes(randomQuote.quote);
      setAuthor(randomQuote.author);
    } catch (error) {
      console.log(error);
    }
  };

  // Handleclick function that will fetch the quotes
  const handleClick = () => {
    fetchQuotes();
  };

  // The functionality for sharing quotes on Twitter
  let tweetURL = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;

  return (
    <section className="quote-body">
      <div className="quote-container">
        <img src={KantePic2} alt="Kante" className="kante-bg" />
        <br />
        <div className="quote">
          <p className="quote-item">{quote}</p>
          <p className="quote-author"> – {author}</p>
        </div>
        <div className="quote-btn-container">
          {/* Twitter Button  */}
          <a className="btn tweet-btn" href={tweetURL} target="_blank">
            <FaTwitter /> Tweet
          </a>
          {/* Random quote Button  */}
          <button onClick={handleClick} className="btn quote-btn">
            <FaRandom /> New Quote
          </button>
        </div>
      </div>
    </section>
  );
};

export default QuoteBody;
```


Create the QuoteBody Component

Inside the components subfolder, create a file and name it `Footer.js`

Our footer component contains some text and two buttons to fetch random quotes and contact the developer:

```js
import React from "react";

const handleClick = () => {
  return window.location.reload();
};

const Footer = () => {
  return (
    <section className="footer">
      <div className="footer-items">
        <p>
          Made with the MERN Stack by Kolade Chris Ksound, <br />
          Web developer and Technical Copywriter focusing on frontend
          technologies and passionate Chelsea FC supporter. <br /> Dedicated to
          N'golo Kante.
        </p>
        <ol>
          <li>
            <a href="#" onClick={handleClick}>
              Random Quote
            </a>
          </li>
          <li>
            <a href="https://twitter.com/koladechris">Contact Developer</a>
          </li>
        </ol>
      </div>
    </section>
  );
};

export default Footer;
```

Create the Footer Component

Inside the components subfolder, create a file and name it `Quote.js`

The Quote component will contain every other components, so we can import only the Quote component to the `app.js file`

```js
import Nav from "./Nav";
import QuoteBody from "./QuoteBody";
import Footer from "./Footer";

const Quote = () => {
  return (
    <div>
      <Nav />
      <QuoteBody />
      <Footer />
    </div>
  );
};
export default Quote;

```

Create the Quote Component

Get rid of everything inside the `App.js` file and paste in the following:

```js
import Quote from "./components/Quote";

import "./App.css";

function App() {
  return (
    <div>
      <Quote />
    </div>
  );
}

export default App;
```

By now, the output looks like this in the browser:
![ssgif](https://tutorial-image-bucket.s3.amazonaws.com/0slgVwh5fT1J0aGTJJthk.jpeg)

Things are working as expected, but we need to add some CSS in the next chapter 

Update App.js File

Inside the App.css file, paste in the following codes:

```css
:root {
  --link-color-1: #3498db;
  --link-color-2: #13486b;
  --bg-color-1: #f1eeee;
  --bg-color-2: #ced8fc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--link-color-1);
}

a:hover {
  color: var(--link-color-2);
}

/* Nav */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3.8rem;
  border-bottom: 1px solid var(--bg-color-1);
  box-shadow: 2px 2px 4px 0px var(--bg-color-2);
  color: var(--link-color-1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kante-pic {
  height: 80%;
  width: 80%;
}

ul {
  display: flex;
  gap: 40px;
}

/* quote Body */
.quote-body {
  max-width: 800px;
  margin: 30px auto;
  width: 90%;
}

.kante-bg {
  opacity: 0.1;
}

.quote-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 2rem;
  border: 1px solid var(--bg-color-2);
  box-shadow: 2px 2px 4px 2px var(--bg-color-2);
}

.quote-item {
  margin-bottom: 6px;
}

.quote {
  position: absolute;
  top: 340px;
  left: 70px;
}

.quote-btn-container {
  position: absolute;
  top: 420px;
  left: 70px;
  padding: 15px 0;
  display: flex;
  gap: 280px;
}

.btn {
  padding: 4px 8px;
  border-radius: 4px;
  outline: 0;
  border: 1px solid green;
  cursor: pointer;
}

.tweet-btn {
  background-color: #3498db;
  color: black;
}

.tweet-btn:hover {
  background-color: #6fbaec;
  color: black;
}

.quote-btn {
  background-color: #2ecc71;
}

.quote-btn:hover {
  background-color: #4ae798;
}

/* Footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
}
.footer-items {
  display: flex;
  height: 15vh;
  gap: 200px;
  align-items: center;
  justify-content: center;
}

ol li {
  padding: 4px;
}

.submit-text {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media screen and (max-width: 720px) {
  nav {
    padding: 0rem 1.2rem;
  }

  nav h1 {
    font-size: 1.2rem;
  }

  ul li {
    font-size: 1rem;
  }

  .burger {
    display: block;
  }

  .logo {
    align-items: center;
    justify-content: space-between;
  }

  ul {
    gap: 10px;
  }

  .kante-bg {
    width: 90%;
  }

  .quote {
    position: absolute;
    top: 160px;
    left: 20px;
  }

  .quote-btn-container {
    position: absolute;
    top: 265px;
    left: 20px;
    gap: 80px;
  }

  .footer {
    margin-top: 70px;
    padding: 60px;
  }

  .footer-items {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media screen and (max-width: 420px) {
  nav {
    padding: 0rem 1.2rem;
  }

  nav h1 {
    font-size: 1rem;
    font-weight: 900;
  }

  ul li {
    font-size: 0.8rem;
  }

  .quote {
    top: 75px;
    left: 13px;
  }

  .quote-btn-container {
    top: 192px;
  }

  .footer {
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 118px 30px;
  }

  .footer-items {
    gap: 20px;
  }
}

@media screen and (max-width: 375px) {
  .quote-container {
    position: relative;
    top: 30px;
  }

  .footer {
    margin-top: 103px;
    padding: 129px 30px;
  }

  .quote {
    top: 55px;
  }

  .quote-btn-container {
    top: 181px;
  }
}

@media screen and (max-width: 321px) {
  nav h1 {
    font-size: 0.5rem;
    font-weight: 900;
  }

  ul li {
    font-size: 0.6rem;
  }
  .quote {
    top: 35px;
  }

  .quote-btn-container {
    top: 141px;
  }
}
```

The project now looks a lot better and everything works as expected:

 ![ss2gif](https://tutorial-image-bucket.s3.amazonaws.com/JmX3n6BqBvUC_Eyp4AP0d.jpeg)

Add CSS to the Project

Here's the full frontend codes file by file

`App.js` inside `src` folder 
```js
import Quote from "./components/Quote";

import "./App.css";

function App() {
  return (
    <div>
      <Quote />
    </div>
  );
}

export default App;
```

`Quote.js` file inside `components` subfolder in the `src` folder:
```js
import Nav from "./Nav";
import QuoteBody from "./QuoteBody";
import Footer from "./Footer";

const Quote = () => {
  return (
    <div>
      <Nav />
      <QuoteBody />
      <Footer />
    </div>
  );
};

export default Quote;
```

`QuoteBody.js` inside `components` subfolder in the `src` folder:

```js
import React, { useState, useEffect } from "react";
import { FaTwitter, FaRandom } from "react-icons/fa";

import KantePic2 from "../images/p116594.png";

const api = `http://localhost:5000/api/quotes`; /*|| `${process.env.REACT_APP_API}/api/quotes`; */

const QuoteBody = () => {
  const [quote, setQuotes] = useState("");
  const [author, setAuthor] = useState("");

  // Call Quotes API
  useEffect(() => {
    fetchQuotes();
  }, []);

  // Make the API request
  const fetchQuotes = async () => {
    try {
      const res = await fetch(api);
      const { quotes } = await res.json();

      console.log(quotes);
      // Get random quotes
      let randomNum = Math.floor(Math.random() * quotes.length);
      let randomQuote = quotes[randomNum];

      setQuotes(randomQuote.quote);
      setAuthor(randomQuote.author);
    } catch (error) {
      console.log(error);
    }
  };

  // Handleclick function that will fetch the quotes
  const handleClick = () => {
    fetchQuotes();
  };

  // The functionality for sharing quotes on Twitter
  let tweetURL = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;

  return (
    <section className="quote-body">
      <div className="quote-container">
        <img src={KantePic2} alt="Kante" className="kante-bg" />
        <br />
        <div className="quote">
          <p className="quote-item">{quote}</p>
          <p className="quote-author"> – {author}</p>
        </div>
        <div className="quote-btn-container">
          {/* Twitter Button  */}
          <a className="btn tweet-btn" href={tweetURL} target="_blank">
            <FaTwitter /> Tweet
          </a>
          {/* Random quote Button  */}
          <button onClick={handleClick} className="btn quote-btn">
            <FaRandom /> New Quote
          </button>
        </div>
      </div>
    </section>
  );
};

export default QuoteBody;
```

`Nav.js` file inside `components` subfolder in the `src` folder:

```js
import KanteHead from "../images/kantehead.png";

// Reloads the windo any thime invoked
const handleClick = () => {
  return window.location.reload();
};

const Nav = () => {
  return (
    <div>
      <nav className="navbar">
        <div className="logo">
          <a href="#" onClick={handleClick}>
            <img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
          </a>
          <a href="#">
            <h1 className="logo-text">
              KANTE <br /> QUOTES
            </h1>
          </a>
        </div>

        <ul>
          <li>
            <a href="#"> Random Quote</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Nav;
```

`Footer.js` file inside `components` subfolder in the `src` folder: 

```js
import KanteHead from "../images/kantehead.png";

// Reloads the windo any thime invoked
const handleClick = () => {
  return window.location.reload();
};

const Nav = () => {
  return (
    <div>
      <nav className="navbar">
        <div className="logo">
          <a href="#" onClick={handleClick}>
            <img src={KanteHead} alt="N'golo Kante" className="kante-pic" />
          </a>
          <a href="#">
            <h1 className="logo-text">
              KANTE <br /> QUOTES
            </h1>
          </a>
        </div>

        <ul>
          <li>
            <a href="#"> Random Quote</a>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Nav;
```

`Footer.js` inside `components` subfolder in the `src` folder:

```js
import React from "react";

const handleClick = () => {
  return window.location.reload();
};

const Footer = () => {
  return (
    <section className="footer">
      <div className="footer-items">
        <p>
          Made with the MERN Stack by Kolade Chris Ksound, <br />
          Web developer and Technical Copywriter focusing on frontend
          technologies and passionate Chelsea FC supporter. <br /> Dedicated to
          N'golo Kante.
        </p>
        <ol>
          <li>
            <a href="#" onClick={handleClick}>
              Random Quote
            </a>
          </li>
          <li>
            <a href="https://twitter.com/koladechris">Contact Developer</a>
          </li>
        </ol>
      </div>
    </section>
  );
};

export default Footer;
```

You can find the project in this [GitHub repo](https://github.com/Ksound22/fullstack-quote-generator).

The Full Frontend Codes and File Locations

Kolade Chris

Fullstack Quote Generator

```js
mkdir cms
cd cms
npm init -y
npm install next react react-dom
```

Update `package.json` file
```js
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
```

Create pages folder
```js
mkdir pages
cd pages
touch pages/index.js
```

Write content for  home page `index.js`

```js
// index.js
export default function () {
  return <div>Welcome to Next.js!</div>;
}
```

Run the project
```js
npm run dev
```

Now visit http://localhost:3000 to see your nextjs app running.

Create next.js project

Create admin page inside admin folder. The entire app/cms should have a sidebar menu with a lot of admin option to manage the system. It will be something similar to WordPress dashboard.

```js
cd pages
mkdir admin
touch admin/index.js
```

```js
export default function () {
  return <div>Admin page</div>;
}
```

## Use ant design

```js
npm i antd @ant-design/icons
```

Use ant design css
```js
touch pages/_app.js
```

```js
// _app.js
import "antd/dist/antd.css";

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;
```

Now restart your server and try out ant component

```js
// pages/admin/index.js
import { Button } from "antd";

const Admin = () => {
  return (
    <div>
      <Button type="primary" onClick={() => alert("hello")}>
        Button
      </Button>
    </div>
  );
};

export default Admin;
```

Setup admin page

## Getting the dark and light CSS files ready

- Install ant design
- copy light/regular and dark theme css files from node_modules folder
- paste them in public/css folder
- rename files to dark.css and light.css

## Create theme context

```js
// context/theme.js
import React from "react";
import { useState, useEffect, createContext } from "react";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(false);

  useEffect(() => {
    if (localStorage.getItem("theme")) {
      setTheme(localStorage.getItem("theme"));
    }
  }, []);
  return (
    <ThemeContext.Provider value={[theme, setTheme]}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };
```

## Provide context using _app

```js
// pages/_app.js
import { ThemeProvider } from "../context/theme";
import TopNav from "../components/nav/TopNav";

const MyApp = ({ Component, pageProps }) => {
  return (
    <ThemeProvider>
      <TopNav />
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;
```

## Create toggle theme component

```js
// components/nav/ToggleTheme.js
import { useContext } from "react";
import { Switch } from "antd";
import { useTheme } from "next-themes";
import { ThemeContext } from "../../context/theme";
import Head from "next/head";

const ToggleTheme = () => {
  const [theme, setTheme] = useContext(ThemeContext);
  console.log("THEME => ", theme);

  const handleChange = (checked) => {
    console.log(checked);
  };

  return (
    <>
      <Head>
        <link rel="stylesheet" href={`/css/${theme}.css`} />
      </Head>

      {theme === "dark" ? (
        <span
          style={{ fontSize: "24px" }}
          onClick={() => {
            setTheme("light");
            localStorage.setItem("theme", "light");
          }}
        >
          🌞
        </span>
      ) : (
        <span
          style={{ fontSize: "24px" }}
          onClick={() => {
            setTheme("dark");
            localStorage.setItem("theme", "dark");
          }}
        >
          🌓
        </span>
      )}
    </>
  );
};

export default ToggleTheme;
```
Now import ToggleTheme component and place anywhere to show toggle theme option. This will allow users to toggle between light and dark theme.


Use dark theme in nextjs with ant design

Create `TopNav.js` in components/nav folder. Use ant design's Menu component to create a menu.

```js
// components/nav/Menu.js
import { useState } from "react";
import { Menu } from "antd";
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import ToggleTheme from "./ToggleTheme";

const { SubMenu } = Menu;

const TopNav = () => {
  return (
    <Menu
      onClick={(e) => setCurrent(e.key)}
      selectedKeys={[current]}
      mode="horizontal"
      theme={theme}
    >
      <Menu.Item key="mail" icon={<MailOutlined />}>
        Navigation One
      </Menu.Item>
      <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
        Navigation Two
      </Menu.Item>
      <SubMenu
        key="SubMenu"
        icon={<SettingOutlined />}
        title="Navigation Three - Submenu"
      >
        <Menu.ItemGroup title="Item 1">
          <Menu.Item key="setting:1">Option 1</Menu.Item>
          <Menu.Item key="setting:2">Option 2</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup title="Item 2">
          <Menu.Item key="setting:3">Option 3</Menu.Item>
          <Menu.Item key="setting:4">Option 4</Menu.Item>
        </Menu.ItemGroup>
      </SubMenu>
      <Menu.Item key="alipay">
        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
          Navigation Four - Link
        </a>
      </Menu.Item>

      <Menu.Item style={{ marginLeft: "auto" }}>
        <ToggleTheme />
      </Menu.Item>
    </Menu>
  );
};

export default TopNav;
```

Now import and use in `_app.js`

```js
import TopNav from "../components/nav/TopNav";

const MyApp = ({ Component, pageProps }) => {
  return (
    <ThemeProvider>
      <TopNav />
      <Component {...pageProps} />
    </ThemeProvider>
  );
};
```



Create navigation using ant design

Create a sidebar menu for admin dashboard. Just like in WordPress CMS, we will provide many options for users to create and manage contents.

```js
import React, { useState, useEffect } from "react";
import { Menu, Button } from "antd";
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from "@ant-design/icons";
import { Layout } from "antd";

const { Sider } = Layout;

const { SubMenu } = Menu;
const AdminNav = () => {
  // state
  const [collapsed, setCollapsed] = useState(false);
  const [menuTheme, setMenuTheme] = useState("");

  useEffect(() => {
    setMenuTheme(theme);
  }, [theme]);

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      style={{
        marginTop: 50,
      }}
    >
      <Menu
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["sub1"]}
        mode="inline"
        inlineCollapsed={collapsed}
        theme={menuTheme}
      >
        <Menu.Item key="1" icon={<PieChartOutlined />}>
          Option 1
        </Menu.Item>
        <Menu.Item key="2" icon={<DesktopOutlined />}>
          Option 2
        </Menu.Item>
        <Menu.Item key="3" icon={<ContainerOutlined />}>
          Option 3
        </Menu.Item>
        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <Menu.Item key="7">Option 7</Menu.Item>
          <Menu.Item key="8">Option 8</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="11">Option 11</Menu.Item>
            <Menu.Item key="12">Option 12</Menu.Item>
          </SubMenu>
        </SubMenu>
      </Menu>
    </Sider>
  );
};

export default AdminNav;
```

Now import and use in `/admin/index.js`

```js
// import
import AdminNav from "../../components/nav/AdminNav";

// render
<AdminNav />
```

Admin dashboard sidebar menu

We have created sidebar. Now it's time to use ant design's `Layout` component to align the sidebar and main content of the page side by side.

Let's try this in `admin/index.js`

```js
import { useState, useEffect } from "react";
import { Button, Layout } from "antd";
import { useTheme } from "next-themes";
import AdminNav from "../../components/nav/AdminNav";

const { Content } = Layout;

const Admin = () => {
  const { theme, setTheme } = useTheme("dark");
  const [menuTheme, setMenuTheme] = useState("");

  useEffect(() => {
    setMenuTheme(theme);
  }, [theme]);

  return (
    <Layout
      style={{
        minHeight: "100vh",
      }}
      hasSlider={true}
    >
      <AdminNav />

      <Layout
        style={{ backgroundColor: menuTheme === "dark" ? "black" : "white" }}
      >
        <Content style={{ margin: "0 16px" }}>
          <h1 style={{ color: menuTheme === "dark" ? "white" : "black" }}>Heading 1</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cum
            amet atque eos, ut quia doloribus consectetur dolores aperiam,
            expedita consequuntur harum tenetur pariatur similique quidem
            eligendi distinctio ratione aliquid!
          </p>
          <h2>Headeing 2</h2>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Admin;
```

Ant design layout

We have few pages in our app but we have to manually type the page in the url to access them.
Let's fix this by using nextjs `Link` component. It's similar to using `<a>` in regular html.

```js
// components/nav/TopNav.js
import Link from "next/link";

<Menu.Item key="mail" icon={<CloudTwoTone />}>
    <Link href="/">
        <a>CMS</a>
    </Link>
</Menu.Item>

<Menu.ItemGroup title="Management">
    <Menu.Item key="setting:1">
        <Link href="/admin">
            <a>Dashboard</a>
        </Link>
    </Menu.Item>
    <Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
```

Update other links the same way as needed.

Navigate between pages

Now we are going to create a complete sidebar menu with plenty of options for admin to manage the entire website.
This layout and options are inspired by WordPress dashboard.

 ![Screen Shot 2022-01-20 at 3.59.10 PM](https://tutorial-image-bucket.s3.amazonaws.com/-fs1u8mUEnxZy6Np9f7F5.jpeg)

```js
// components/nav/AdminNav.js
import React, { useState, useEffect } from "react";
import { Menu, Button } from "antd";
import {
  PushpinOutlined,
  CameraOutlined,
  FileTextOutlined,
  CommentOutlined,
  UserSwitchOutlined,
  SettingOutlined,
  DesktopOutlined,
} from "@ant-design/icons";
import { useTheme } from "next-themes";
import { Layout } from "antd";

const { Sider } = Layout;

const { SubMenu } = Menu;
const AdminNav = () => {
  // theme
  const { theme, setTheme } = useTheme();
  // state
  const [collapsed, setCollapsed] = useState(false);
  const [menuTheme, setMenuTheme] = useState("");

  useEffect(() => {
    setMenuTheme(theme);
  }, [theme]);

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      theme={menuTheme}
    >
      <Menu
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["1"]}
        mode="inline"
        inlineCollapsed={collapsed}
        theme={menuTheme}
      >
        <SubMenu key="1" icon={<PushpinOutlined />} title="Posts">
          <Menu.Item key="2">All Posts</Menu.Item>
          <Menu.Item key="3">Add New</Menu.Item>
          <Menu.Item key="4">Categories</Menu.Item>
          <Menu.Item key="5">Tags</Menu.Item>
        </SubMenu>
        <SubMenu key="6" icon={<CameraOutlined />} title="Media">
          <Menu.Item key="7">Library</Menu.Item>
          <Menu.Item key="8">Add New</Menu.Item>
        </SubMenu>
        <SubMenu key="9" icon={<FileTextOutlined />} title="Pages">
          <Menu.Item key="10">All Pages</Menu.Item>
          <Menu.Item key="11">Add New</Menu.Item>
        </SubMenu>
        <Menu.Item key="12" icon={<CommentOutlined />}>
          Comments
        </Menu.Item>
        <Menu.Item key="13" icon={<DesktopOutlined />}>
          Apperance
        </Menu.Item>
        <SubMenu key="14" icon={<UserSwitchOutlined />} title="Users">
          <Menu.Item key="15">All Users</Menu.Item>
          <Menu.Item key="16">Add New</Menu.Item>
          <Menu.Item key="17">Profile</Menu.Item>
        </SubMenu>
        <Menu.Item key="18" icon={<SettingOutlined />}>
          Settings
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default AdminNav;
```

Creating sidebar menu (inspired by WordPress)

We need to protect routes (admin pages) for loggedin user only who has the role of admin.
Later we will also allow other users to leave a comment on the posts.

For all this we need to implement login and registration system along with forgot/reset password
We can start from creating sign in page.

Also add a link to signup page in the `TopNav.js` so that we can easily navigate.

```js
<Menu.Item
    key="signup"
    icon={<UserAddOutlined />}
    style={{ marginLeft: "auto" }}
    >
    <Link href="/signup">
        <a>Sign Up</a>
    </Link>
</Menu.Item>

<Menu.Item key="toggle">
    <ToggleTheme />
</Menu.Item>
```

Sign up page

```js
const SignUp = () => {
  return <div>Sign up</div>;
};

export default SignUp;
```


Create sign up page

Let's use ant design's `Form` component to create interactive form with validation.

 ![ant design form with error validation](https://tutorial-image-bucket.s3.amazonaws.com/wUJE-g1CslCj32VvMzMyQ.jpeg)

```js
// signup.js
import { useState, useEffect } from "react";
import useCurrentTheme from "../hooks/useCurrentTheme";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";

const { Title } = Typography;

const SignUp = () => {
  const onFinish = (values) => {
    console.log("Success:", values);
  };

  return (
    <Row>
      <Col span={12} offset={6} style={{ paddingTop: "10%" }}>
        <Title>Sign Up</Title>

        <Form initialValues={{ email: "" }} onFinish={onFinish}>
          <Form.Item
            name="email"
            rules={[
              {
                type: "email",
                message: "The input is not valid E-mail!",
              },
              {
                required: true,
                message: "Please input your E-mail!",
              },
            ]}
            hasFeedback
          >
            <Input prefix={<MailOutlined />} placeholder="Email" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
                min: 6,
                max: 24,
              },
            ]}
            hasFeedback
          >
            <Input.Password
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item
            name="confirm"
            dependencies={["password"]}
            hasFeedback
            placeholder="Confirm Password"
            rules={[
              {
                required: true,
                message: "Please confirm your password!",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }

                  return Promise.reject(
                    new Error(
                      "The two passwords that you entered do not match!"
                    )
                  );
                },
              }),
            ]}
          >
            <Input.Password prefix={<LockOutlined />} />
          </Form.Item>

          <Form.Item>
            <a href="">Forgot password</a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              Log in
            </Button>
            <br /> Or <a href="">Register now!</a>
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
};

export default SignUp;
```

Signup form using ant design

To fast forward API development, I will be using `kaloraat` from npm which will generate server/API in a matter of seconds. 

```js
npm i kaloraat -g
```

Create server folder inside  your project. Then get inside server and run this command.

```js
kaloraat-make-auth
```

Now update `.env` variables with database connection uri and sendgrid key for sending emails.

Now run `npm install && npm start` and visit `http://localhost:8000/api` to see your api running.

Look into `server/routes` folder for all the available endpoints.


Generate server using kaloraat cli

- Install axios to make API requests
- Install react-hot-toast to show toast notifications
```js
// pages/signup.js
// onFinish() and the rest of the code
import { useState, useEffect } from "react";
import useCurrentTheme from "../hooks/useCurrentTheme";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined, UserOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";
import axios from "axios";
import toast, { Toaster } from "react-hot-toast";

const { Title } = Typography;

const SignUp = () => {
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    // console.log("Success:", values);
    try {
      setLoading(true);
      const { data } = await axios.post(
        `http://localhost:8000/api/signup`,
        values
      );
      console.log(data);
      if (data.error) {
        toast.error(data.error);
      } else {
        toast.success("Succeassfully registered");
        console.log(
          "save user and token response in context, localstorage then redirect user to dashboard"
        );
        setLoading(false);
      }
    } catch (err) {
      toast.error("Signup failed. Try again.");
      console.log(err);
    }
  };

  return (
    <Row>
      <Col span={12} offset={6} style={{ paddingTop: "10%" }}>
        <Toaster />
         <Title>Sign Up</Title>

        <Form initialValues={{ email: "" }} onFinish={onFinish}>
          <Form.Item
            name="name"
            rules={[
              {
                required: true,
                message: "Please enter your name!",
              },
            ]}
            hasFeedback
          >
            <Input prefix={<UserOutlined />} placeholder="Name" />
          </Form.Item>
          <Form.Item
            name="email"
            rules={[
              {
                type: "email",
                message: "The input is not valid E-mail!",
              },
              {
                required: true,
                message: "Please input your E-mail!",
              },
            ]}
            hasFeedback
          >
            <Input prefix={<MailOutlined />} placeholder="Email" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
                min: 6,
                max: 24,
              },
            ]}
            hasFeedback
          >
            <Input.Password
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item
            name="confirm"
            dependencies={["password"]}
            hasFeedback
            rules={[
              {
                required: true,
                message: "Please confirm your password!",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }

                  return Promise.reject(
                    new Error(
                      "The two passwords that you entered do not match!"
                    )
                  );
                },
              }),
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="Confirm Password"
            />
          </Form.Item>

          <Form.Item>
            <a href="">Forgot password</a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              Sign Up
            </Button>
            <br /> Or <a href="">Register now!</a>
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
};

export default SignUp;
```

Signup works. User is saved in the database. You are able to show error and success messages using `react-hot-toast` too.

Make axios post request to signup user

### Move the `Toaster` to `_app.js`

Instead of importing and rendering `<Toaster />` on each page, you an put it in `_app.js` to avoid repetition.

```js
// _app.js
import { ThemeProvider } from "../context/theme";
import TopNav from "../components/nav/TopNav";
import Head from "next/head";
import { Toaster } from "react-hot-toast";

const MyApp = ({ Component, pageProps }) => {
  return (
    <ThemeProvider>
      <Head>
        <link rel="stylesheet" href="/css/styles.css" />
      </Head>
      <TopNav />
      <Component {...pageProps} />
      <Toaster />
    </ThemeProvider>
  );
};

export default MyApp;
```

Global Toaster container

Instead of writing full api url on axios requests each time, we can create a custom hook. This way, later we can add token in the headers and easily handle errors too.

**NOTE**

*This hook will not be used later. We will configure `axios` in context so that it can easily be used anywhere by simply importing (the regular way)*

```js
// hooks/useAxios.js
import axios from "axios";

const useAxios = () => {
  axios.defaults.baseURL = "http://localhost:8000/api";
  // later add jwt token to axios header
  // handle error response from server

  return axios;
};

export default useAxios;
```

Now import and use it by replacing previous `axios` import in `signup.js`

```js
import useAxios from "../hooks/useAxios";

const SignUp = () => {
  const axios = useAxios();
  // rest of code
}
```

Create custom hook - useAxios

```js
// context/auth.js
import React from "react";
import { useState, useEffect, createContext } from "react";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState("whatever");

  useEffect(() => {
    if (localStorage.getItem("auth")) {
      setAuth(JSON.parse(localStorage.getItem("auth")));
    }
  }, []);

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

export { AuthContext, AuthProvider };
```

Now wrap your `_app.js` with `AuthContext`

```js
// _app.js
import { ThemeProvider } from "../context/theme";
import { AuthProvider } from "../context/auth";
import TopNav from "../components/nav/TopNav";
import Head from "next/head";
import { Toaster } from "react-hot-toast";

const MyApp = ({ Component, pageProps }) => {
  return (
    <ThemeProvider>
      <AuthProvider>
        <Head>
          <link rel="stylesheet" href="/css/styles.css" />
        </Head>
        <TopNav />
        <Component {...pageProps} />
        <Toaster />
      </AuthProvider>
    </ThemeProvider>
  );
};

export default MyApp;
```

Now try accessing auth from context state in `index.js`

```js
import { useContext } from "react";
import { AuthContext } from "../context/auth";

const Home = () => {
  const [auth, setAuth] = useContext(AuthContext);
  return <div>{JSON.stringify(auth, null)}</div>;
};

export default Home;
```

Create auth context

```js
// context/auth.js
import { useState, useEffect, useContext } from "react";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined, UserOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";
import toast from "react-hot-toast";
import useAxios from "../hooks/useAxios";
import { AuthContext } from "../context/auth";
import { useRouter } from "next/router";

const { Title } = Typography;

const SignUp = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const axios = useAxios();
  const router = useRouter();
  // state
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    // console.log("Success:", values);
    try {
      setLoading(true);
      const { data } = await axios.post(`/signup`, values);
      console.log(data);
      if (data.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        // save user and token response in context, localstorage then redirect user to dashboard
        setAuth({ user: data.user, token: data.token });
        localStorage.setItem("auth", JSON.stringify(data));
        toast.success("Successfully registered");
        setLoading(false);
        router.push("/");
        setLoading(false);
      }
    } catch (err) {
      toast.error("Signup failed. Try again.");
      console.log(err);
      setLoading(false);
    }
  };
  // rest of code
}
```

Add `loading` state to submit button. It will show loading icon while the value is `true`

```js
<Form.Item>
    <Button type="primary" htmlType="submit" loading={loading}>
      Sign Up
    </Button>
    <br /> Or <a href="">Register now!</a>
</Form.Item>
```

Now on user signup. Token and user info is saved in auth context and also in local storage. On page reload the data is retrieved from local storage.

Store signup response (user and token) in auth context

To use `.env` variables in nextjs, you can create a file called `.env.local`

env variables are accessible in server side mode only. If you need to make some env variables available in client mode, you should prefix them with `NEXT_PUBLIC_`

```js
// .env.local
API='http://localhost:8000/api'
NEXT_PUBLIC_API='http://localhost:8000/api'
```

Later we will be using `API` in server side mode while loading data in server mode for SEO benefits using `getServerSideProps()`

Now replace the hard coded api url in `context/axiosContext` with env variable

```js
import axios from "axios";

const useAxios = () => {
  //   axios.defaults.baseURL = "http://localhost:8000/api";
  if (process.server) {
    axios.defaults.baseURL = process.env.API;
  } else {
    axios.defaults.baseURL = process.env.NEXT_PUBLIC_API;
  }

  // later add jwt token to axios header
  // handle error response from server

  return axios;
};

export default useAxios;
```

Make sure to restart your server before trying.

Using .env variables in nextjs

```js
// pages/signin.js
import { useState, useEffect, useContext } from "react";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined, UserOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";
import toast from "react-hot-toast";
import useAxios from "../hooks/useAxios";
import { AuthContext } from "../context/auth";
import { useRouter } from "next/router";
import Link from "next/link";

const { Title } = Typography;

const SignIn = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const axios = useAxios();
  const router = useRouter();
  // state
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    // console.log("Success:", values);
    try {
      setLoading(true);
      const { data } = await axios.post(`/signin`, values);
      console.log(data);
      if (data.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        // save user and token response in context, localstorage then redirect user to dashboard
        setAuth({ user: data.user, token: data.token });
        localStorage.setItem("auth", JSON.stringify(data));
        toast.success("Successfully logged in");
        setLoading(false);
        router.push("/");
        setLoading(false);
      }
    } catch (err) {
      toast.error("SignIn failed. Try again.");
      console.log(err);
      setLoading(false);
    }
  };

  return (
    <Row>
      <Col span={12} offset={6} style={{ paddingTop: "10%" }}>
        {/* <Title>Sign Up</Title> */}

        <Form
          initialValues={{
            email: "ryan@gmail.com",
            password: "rrrrrr",
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="email"
            rules={[
              {
                type: "email",
                message: "The input is not valid E-mail!",
              },
              {
                required: true,
                message: "Please input your E-mail!",
              },
            ]}
            hasFeedback
          >
            <Input prefix={<MailOutlined />} placeholder="Email" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
                min: 6,
                max: 24,
              },
            ]}
            hasFeedback
          >
            <Input.Password
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item>
            <a href="">Forgot password</a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              Sign In
            </Button>
            <br /> Or{" "}
            <Link href="/signup">
              <a>Register now!</a>
            </Link>
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
};

export default SignIn;
```

Create sign in page

![conditional rendering logout](https://tutorial-image-bucket.s3.amazonaws.com/QucLLWqx0HWEq9uPjJF97.jpeg) 
![menu without logged in user](https://tutorial-image-bucket.s3.amazonaws.com/CacwfPEhFSPjaGnhJhTDw.jpeg)

```js
// components/nav/TopNav.js
  const signout = async () => {
    setAuth({ user: null, token: "" });
    localStorage.removeItem("auth");
    toast.success("Successfully logged out");
    router.push("/signin");
  };
```

### Conditionally show menu links
If signed in, show dashboard menu (with logout as submenu). If not signed in show signin and signout (hide dashboard and logout).

```js
// components/nav/TopNav.js
{auth?.user !== null && (
<SubMenu
    key="SubMenu"
    icon={<SettingOutlined />}
    title={auth?.user?.name || "Dashboard"}
    style={{ marginLeft: "auto" }}
>
    <Menu.ItemGroup title="Management">
    <Menu.Item key="setting:1">
        <Link href="/admin">
        <a>Dashboard</a>
        </Link>
    </Menu.Item>
    </Menu.ItemGroup>
    <Menu.ItemGroup title="Others">
    <Menu.Item key="setting:2" onClick={signout}>
        Sign out
    </Menu.Item>
    </Menu.ItemGroup>
</SubMenu>
)}

{auth?.user === null && (
<>
    <Menu.Item
    key="signin"
    icon={<UserAddOutlined />}
    style={{ marginLeft: "auto" }}
    >
    <Link href="/signin">
        <a>Sign In</a>
    </Link>
    </Menu.Item>

    <Menu.Item key="signup" icon={<UserAddOutlined />}>
    <Link href="/signup">
        <a>Sign Up</a>
    </Link>
    </Menu.Item>
</>
)}
``` 

Implement sign out feature

```js
// pages/forgot-password.js
import { useState, useEffect, useContext } from "react";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined, UserOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";
import toast from "react-hot-toast";
import useAxios from "../hooks/useAxios";
import { useRouter } from "next/router";
import Link from "next/link";

const { Title } = Typography;

const ForgotPassword = () => {
  // hooks
  const axios = useAxios();
  const router = useRouter();
  const [form] = Form.useForm();
  // state
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);

  const forgotPasswordRequest = async (values) => {
    try {
      setLoading(true);

      const { data } = await axios.post("/forgot-password", values);
      console.log(data);
      if (data.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success("Check your email. The request code is sent.");
        setVisible(true);
        setLoading(false);
      }
    } catch (err) {
      toast.error("ForgotPassword failed. Try again.");
      console.log(err);
      setLoading(false);
    }
  };

  const resetPasswordRequest = async (values) => {
    try {
      setLoading(true);

      const { data } = await axios.post("/reset-password", values);
      console.log(data);
      if (data.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success(
          "Password successfully changed. Please login with new password"
        );
        // clear form fields using ant form hook
        form.resetFields(["email"]);
        setVisible(false);
        setLoading(false);
        // redirect
        setTimeout(() => {
          router.push("/signin");
        }, 3000);
      }
    } catch (err) {
      toast.error("ForgotPassword failed. Try again.");
      console.log(err);
      setLoading(false);
    }
  };

  return (
    <Row>
      <Col span={12} offset={6} style={{ paddingTop: "10%" }}>
        <Title>Forgot Password</Title>

        <Form
          form={form}
          onFinish={visible ? resetPasswordRequest : forgotPasswordRequest}
        >
          <Form.Item
            name="email"
            rules={[
              {
                type: "email",
                message: "The input is not valid E-mail!",
              },
              {
                required: true,
                message: "Please input your E-mail!",
              },
            ]}
            hasFeedback
          >
            <Input prefix={<MailOutlined />} placeholder="Email" />
          </Form.Item>

          {/* if visible true, show password and resetCode input fields */}
          {visible && (
            <>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: "Please input your password!",
                    min: 6,
                    max: 24,
                  },
                ]}
                hasFeedback
              >
                <Input.Password
                  prefix={<LockOutlined />}
                  type="password"
                  placeholder="Password"
                />
              </Form.Item>

              <Form.Item
                name="resetCode"
                rules={[
                  {
                    required: true,
                    message: "Please enter reset code!",
                  },
                ]}
                hasFeedback
              >
                <Input prefix={<LockOutlined />} placeholder="Reset code" />
              </Form.Item>
            </>
          )}

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              Submit
            </Button>
            <br /> Or{" "}
            <Link href="/signin">
              <a>Login</a>
            </Link>
          </Form.Item>
        </Form>
      </Col>
    </Row>
  );
};

export default ForgotPassword;
```

Forgot password and reset

- Add links to categories in admin nav
- Use a `AdminLayout` component that includes sidebar (AdminNav), so that you can easily use `AdminLayout` to include sidebar on all pages as needed

```js
// components/layout/AdminLayout.js
import { Layout } from "antd";
import AdminNav from "../../components/nav/AdminNav";

const { Content } = Layout;

const AdminLayout = ({ children }) => {
  return (
    <Layout>
      <AdminNav />

      <Layout>
        <Content
          style={{
            margin: "16px 16px",
            overflow: "auto",
            height: "100vh",
            position: "fixed",
            marginTop: 54,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;
```

Now use `AdminLayout` in `pages/admin/index.js`
```js
import AdminLayout from "../../components/layout/AdminLayout";

const Admin = () => {
  return (
    <AdminLayout>
      <h1>Heading 1</h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti in
        delectus dicta maxime debitis ipsum, obcaecati vitae alias numquam culpa
        itaque possimus, dolorum corporis tempore assumenda nobis doloremque,
        sapiente saepe!
      </p>
    </AdminLayout>
  );
};

export default Admin;
```


Admin layout with sidebar

```js
// pages/admin/categories/index.js
import { useState, useEffect } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Typography, Form, Input, Button, Layout } from "antd";
import { EditOutlined } from "@ant-design/icons";

const { Content } = Layout;
const { Title } = Typography;

const Categories = () => {
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    try {
      setLoading(true);
      setTimeout(() => {
        console.log(values);
        setLoading(false);
      }, 1000);
    } catch (err) {
      console.log(err);
      setLoading(false);
    }
  };

  return (
    <AdminLayout>
      <Row>
        <Col>
          <Title level={4}>Categories</Title>

          <Form onFinish={onFinish}>
            <Form.Item
              name="name"
              rules={[
                {
                  required: true,
                  message: "Please give it a name!",
                },
              ]}
              hasFeedback
            >
              <Input prefix={<EditOutlined />} placeholder="Name" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading}>
                Create
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default Categories;
```

Create category page

Use `esm` to support import export syntax in nodejs.

```js
npm i esm
```
Update `package.json`
```js
"start": "nodemon -r esm index.js"
```

Now you can start using export import syntax.

Use import export syntax in nodejs

Before writing routes and controllers, create a category model.

```js
// models/category.js
import mongoose from "mongoose";

const categorySchema = new mongoose.Schema(
  {
    name: {
      type: String,
      required: true,
    },
    slug: {
      type: String,
      unique: true,
      lowercase: true,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Category", categorySchema);
```

Create category routes and  apply as middleware in `index.js`

**OPTIONAL**
You can use kaloraat cli to generate models routes and controllers.
```js
kaloraat-make-model
kaloraat-make-route
```

```js
// routes/category.js
const express = require("express");

const router = express.Router();

// controllers
const { create, read, update, remove } = require("../controllers/category");

router.post("/category", create);
router.get("/read", read);
router.put("/update", update);
router.delete("/remove", remove);

module.exports = router;
```

```js
// controllers/category.js
exports.create = async (req, res) => {
  console.log("HEADERS ===> ", req.headers);
};

exports.read = async (req, res) => {
  //
};

exports.update = async (req, res) => {
  //
};

exports.remove = async (req, res) => {
  //
};
```

Apply route as middleware

```js
// index.js
app.use("/api", authRoutes);
app.use("/api", categoryRoutes);
```

Category routes and controllers

```js
// server
npm i express-jwt
```

```js
// middlewares/index.js
import expressJwt from "express-jwt";

export const requireSignin = expressJwt({
  secret: process.env.JWT_SECRET,
  algorithms: ["HS256"],
});
```
Before allowing user to create category, we need to make sure the user is logged in.

Make a post request from `/admin/categories/index.js` to create a new category

```js
  const onFinish = async (values) => {
    try {
      // setLoading(true);
      const { data } = await axios.post("/category", values);
      console.log(data);
      // setTimeout(() => {
      //   console.log(values);
      //   setLoading(false);
      // }, 1000);
    } catch (err) {
      console.log(err);
      // setLoading(false);
    }
  };
```
### Send jwt token in axios headers
```js
import { useContext, useEffect, useState } from "react";
import axios from "axios";
import { AuthContext } from "../context/auth";

const useAxios = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);

  axios.defaults.baseURL = "http://localhost:8000/api";
  if (process.server) {
    axios.defaults.baseURL = process.env.API;
    axios.defaults.headers.common["Authorization"] = `Bearer ${auth.token}`;
  } else {
    axios.defaults.baseURL = process.env.NEXT_PUBLIC_API;
    axios.defaults.headers.common["Authorization"] = `Bearer ${auth.token}`;
  }

  return axios;
};

export default useAxios;
```

In server, try console log to see Authorization token in headers

```js
// controllers/category
exports.create = async (req, res) => {
  console.log("HEADERS ===> ", req.headers);
};
```

You should be able to see Bearer token send in the headers:

 ![axios headers bearer token jwt](https://tutorial-image-bucket.s3.amazonaws.com/qw-P52iTbyJi8TcZB0SAV.jpeg)

### Verify JWT
Apply `requireSignin` middleware in category create route.

```js
import { requireSignin } from "../middlewares";

router.post("/category", requireSignin, create);
```

Now try making request from client. you should see console log message in controller

```js
exports.create = async (req, res) => {
  console.log("CATEGORY CREATE CONTROLLER");
};
```

To try, you can modify your axios headers token with an extra space and make same request. This time you will get an error because the `requireSignin` could not verify the token. This is how you can protect route for only logged in users.

```js
// error in server console if wrong token is sent
POST /api/category 401 2.352 ms - 1391
UnauthorizedError: Format is Authorization: Bearer [token]
```

Remember to undo the white space you made in your axios headers token to the way it was.

Verify JWT using express-jwt

Create `isAdmin` middleware

```js
// middlewares
export const isAdmin = async (req, res, next) => {
  try {
    // you get req.user._id from verified jwt token
    const user = await User.findById(req.user._id);
    // console.log("isAdmin ===> ", user);
    if (user.role !== "Admin") {
      return res.status(400).send("Unauthorized");
    } else {
      next();
    }
  } catch (err) {
    console.log(err);
  }
};
```

Now apply `isAdmin` middleware in your routes. Those routes will only be accessible to users with the role of `admin`

 ![unauthorized-error](https://tutorial-image-bucket.s3.amazonaws.com/SYwzL-PlRnQ25rb6kJYKE.jpeg)

If you now make a request, you will get an unauthorized error:

Manually change user role to `admin` in your database. Then logout and login again.
Now if you make a request, it works.

Secure server route for admin user only

First make a change in `signin` and `signup` pages to redirect user to dashboard (if user role is admin).

Redirect to '/admin' page if user is admin.
```js
// router.push("/");
if (data?.user?.role === "Admin") {
  router.push("/admin");
} else {
  router.push("/");
}
```

Show the Dashboard link in the Menu only if user has role of `Admin`.

```js
{auth?.user?.role === "Admin" && (
    <Menu.ItemGroup title="Management">
      <Menu.Item key="setting:1">
        <Link href="/admin">
          <a>Dashboard</a>
        </Link>
      </Menu.Item>
    </Menu.ItemGroup>
  )}
```

Other users who will signup to our app will be able to do things like leave a comment etc.

If someone manually tried to visit admin pages, redirect away.

```js
// components/nav/AdminNav.js
import { AuthContext } from "../../context/auth";
import { useRouter } from "next/router";

const { Sider } = Layout;

const { SubMenu } = Menu;
const AdminNav = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();
  // state
  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
    if (auth?.user?.role !== "Admin") {
      router.push("/");
    }
  }, [auth]);
  // rest of code
}
```

Protect client side pages for admin user

A more secure way of protecting pages for non admin users is to make API request to server to check if user is admin instead of depending on `role` value from localStorage.

```js
// auth route
router.get("/current-admin", requireSignin, isAdmin, currentAdmin);
// auth controller
export const currentAdmin = async (req, res) => {
  try {
    const admin = await User.findById(req.user._id);
    // res.json(user);
    res.json({ ok: true });
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};
```

Create `components/layout/AdminLayout`

```js
import { Layout } from "antd";
import AdminNav from "../../components/nav/AdminNav";
import { useState, useEffect, useContext } from "react";
import { SyncOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import { AuthContext } from "../../context/auth";
import useAxios from "../../hooks/useAxios";

const { Content } = Layout;

const AdminLayout = ({ children }) => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();
  const axios = useAxios();
  // state
  const [loading, setLoading] = useState(true);

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

  const getCurrentAdmin = async () => {
    try {
      const { data } = await axios.get(`/current-admin`);
      console.log("current admin", data);
      if (data.ok) setLoading(false);
    } catch (err) {
      router.push("/");
    }
  };

  return loading ? (
    <SyncOutlined
      spin
      style={{
        padding: 200,
        display: "flex",
        justifyContent: "center",
        fontSize: "50px",
      }}
    />
  ) : (
    <Layout>
      <AdminNav />

      <Layout>
        <Content
          style={{
            margin: "16px 16px",
            overflow: "auto",
            height: "100vh",
            position: "fixed",
            marginTop: 54,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;
```



Protecting pages from non admin users

```js
// context/auth.js
  axios.interceptors.response.use(
    function (response) {
      // Do something before request is sent
      return response;
    },
    function (error) {
      // Do something with request error
      let res = error.response;
      if (res.status === 401 && res.config && !res.config.__isRetryRequest) {
        setAuth({
          user: null,
          token: "",
        });
        localStorage.removeItem("auth");
        router.push("/signin");
        console.log("LOGOUT FORCECULLY ======> ");
      }
    }
  );
```
Now try generating jwt that expires in few seconds in signin controller. Try login, and go to admin dashboard. It will fail. Bring back your token expiry to `'7d'` to make sure user can stay logged in for 7 day.

### Move code from `useAxios` hook to `context/auth`

It's easier to config axios in context and easily use axios anywhere rather than using `useAxios` hook. So let's refactor code.

```js
// context/auth.js
 if (process.server) {
    axios.defaults.baseURL = process.env.API;
    axios.defaults.headers.common["Authorization"] = `Bearer ${auth.token}`;
  } else {
    axios.defaults.baseURL = process.env.NEXT_PUBLIC_API;
    axios.defaults.headers.common["Authorization"] = `Bearer ${auth.token}`;
  }
```

Now you can simply import and use axios in any page/component without using `useAxios` hook we created earlier.

Handle expired jwt token using axios interceptors

```js
// components/layout/LoadingToRedirect.js
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";

const LoadingToRedirect = ({ path = "/" }) => {
  const [count, setCount] = useState(3);
  let router = useRouter();

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((currentCount) => --currentCount);
    }, 1000);
    // redirect once count is equal to 0
    count === 0 && router.push(path);
    // cleanup
    return () => clearInterval(interval);
  }, [count]);

  return (
    <div style={{ display: "flex", justifyContent: "center", height: "100vh" }}>
      <p
        style={{
          position: "absolute",
          top: "50%",
        }}
      >
        Redirecting in {count} second
      </p>
    </div>
  );
};

export default LoadingToRedirect;
```

Now import and use in `AdminNav` by replacing Loading spinner icon

If not logged in, redirect away in few seconds

### Client
```js
// pages/admin/categories/index.js
import { useState, useEffect } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Typography, Form, Input, Button, Layout } from "antd";
import { EditOutlined } from "@ant-design/icons";
import axios from "axios";
import toast from "react-hot-toast";

const Categories = () => {
  // state
  const [loading, setLoading] = useState(false);
  // hooks
  const [form] = Form.useForm();

  const onFinish = async (values) => {
    try {
      console.log(values);
      setLoading(true);
      const { data } = await axios.post("/category", values);
      setCategories([...categories, data]);
      form.resetFields(["name"]);
      setLoading(false);
      toast.success("Category created successfully");
    } catch (err) {
      toast.error("Duplicate error. Try different name.");
      console.log(err);
      setLoading(false);
    }
  };

  return (
    <AdminLayout>
      <Row>
        <Col sm={24} lg={12}>
          <h2>Categories</h2>

          <p>Add New Category</p>

          <Form onFinish={onFinish} form={form}>
            <Form.Item
              name="name"
              rules={[
                {
                  required: true,
                  message: "Please give it a name!",
                },
              ]}
              hasFeedback
            >
              <Input prefix={<EditOutlined />} placeholder="Name" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading}>
                Create
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col sm={24} lg={12}>
          List
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default Categories;
```

### Server

```js
// controllers/category.js
import Category from "../models/category";
import slugify from "slugify";

exports.create = async (req, res) => {
  // console.log("CATEGORY CREATE CONTROLLER", req.body);
  try {
    const { name } = req.body;
    const category = await new Category({
      name,
      slug: slugify(name),
    }).save();
    res.json(category);
  } catch (err) {
    console.log(err);
    res.status(400).send("Duplicate error!");
  }
};
```

Now you are able to create a new category. It is saved in mongodb.

Admin post pages

 ![Using rich markdown editor WYSIWYG editor with react and nextjs](https://tutorial-image-bucket.s3.amazonaws.com/_T9Cx9MlU9F0eSO4-rVU-.jpeg)

Make sure to use `yarn` instead of `npm` for this package to work.

```js
// pages/admin/posts/new
import { useState, useEffect, useContext } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Button } from "antd";
import Editor from "rich-markdown-editor";
import { ThemeContext } from "../../../context/theme";

const NewPost = () => {
  // state
  const [loading, setLoading] = useState(false);
  const [theme, setTheme] = useContext(ThemeContext);

  const onChange = (e) => console.log(e);
  console.log(theme);

  return (
    <AdminLayout>
      <Row>
        <Col span={16}>
          <p>Create</p>

          <Editor
            style={{ marginLeft: "20px" }}
            dark={theme === "light" ? false : true}
            defaultValue="Hello world!"
            uploadImage={async (file) => {
              // const result = await s3.upload(file);
              // return result.url;
              console.log("UPLOAD FILE => ", file);
            }}
            onChange={(v) => {
              console.log(v());
            }}
          />
        </Col>
        <Col span={8}>
          <Button
            type="primary"
            htmlType="submit"
            style={{ margin: "10px 0px 10px 0" }}
            block
          >
            Publish
          </Button>
          <p>Sidebar options</p>
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default NewPost;
```

Using rich markdown editor (WYSIWYG) editor with react and nextjs

### Insert image using Editor's image option:

```js
<Editor
    style={{ marginLeft: "20px", width: "100%" }}
    dark={theme === "light" ? false : true}
    placeholder="Write something..."
    defaultValue={content}
    // defaultValue="Write something..."
    uploadImage={uploadPostImage}
    onChange={(v) => handleContent(v())}
/>
```

### Resize and send image to server for uploading to cloudinary

```js
const resizeFile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        720,
        400,
        "JPEG",
        100,
        0,
        (uri) => {
          resolve(uri);
        },
        "base64"
      );
    });

  const uploadPostImage = async (file) => {
    try {
      const image = await resizeFile(file);
      const { data } = await axios.post("/upload-image", { image });
      // console.log("UPLOAD FILE RESULT => ", data);
      return data.url;
    } catch (err) {
      console.log(err);
    }
  };
```

### Image upload to cloudinary from nodejs

```js
// route
router.post("/upload-image", requireSignin, uploadImage);

// controller
import cloudinary from "cloudinary";

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_NAME,
  api_key: process.env.CLOUDINARY_KEY,
  api_secret: process.env.CLOUDINARY_SECRET,
});

export const uploadImage = async (req, res) => {
  try {
    // console.log(req.body.image);
    const result = await cloudinary.uploader.upload(req.body.image);
    console.log("uploaded image url => ", result);
    res.json({
      url: result.secure_url,
      public_id: result.public_id,
    });
  } catch (err) {
    console.log(err);
  }
};
```

Image upload with resize (react client with node server and cloudinary)

## Client
```js
const handlePublish = async () => {
    try {
      const { data } = await axios.post("/create-post", {
        title,
        content,
        categories,
      });
      // console.log("POST CREATED => ", data);
      if (data?.error) {
        toast.error(data.error);
      } else {
        toast.success("Post created successfully");
        localStorage.setItem("post-title", "");
        localStorage.setItem("post-content", "");
        router.push("/admin/posts");
      }
    } catch (err) {
      console.log(err);
      toast.error("Post create failed. Try again.");
    }
  };
```

## Server

```js
// route
router.post("/create-post", requireSignin, isAdmin, createPost);
// controller
exports.createPost = async (req, res) => {
  try {
    const { title, content, categories } = req.body;
    // check if title is taken
    const alreadyExist = await Post.findOne({
      slug: slugify(title.toLowerCase()),
    }).exec();
    if (alreadyExist) return res.json({ error: "Title is taken" });

    // get category ids based on category name
    let ids = [];
    for (let i = 0; i < categories.length; i++) {
      Category.findOne({ name: categories[i] }).exec((err, c) => {
        if (err) {
          console.log(err);
        }
        // console.log("c", c._id);
        ids.push(c._id);
      });
    }
    // save post
    setTimeout(async () => {
      const newPost = await new Post({
        title,
        slug: slugify(title),
        content,
        categories: ids,
        postedBy: req.user._id,
      }).save();
      return res.json(newPost);
    }, 1000);
  } catch (err) {
    console.log(err);
  }
};
```

Save post in database

![Show list of posts for admin](https://tutorial-image-bucket.s3.amazonaws.com/slJ0PKXB8JmsOpl2W8NnU.jpeg)

Fetch all the posts from database and render for admin to see, edit and delete.

```js
// pages/admin/posts/index
import { useState, useEffect } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Button, List } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import Link from "next/link";
import axios from "axios";

const Posts = () => {
  // state
  const [loading, setLoading] = useState(false);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const { data } = await axios.get("/posts");
        setPosts(data);
      } catch (err) {
        console.log(err);
      }
    };
    fetchPosts();
  }, []);

  const handleEdit = async () => {
    //
  };

  const handleDelete = async () => {
    //
  };

  return (
    <AdminLayout>
      <Row>
        <Col span={24}>
          <Button
            type="primary"
            htmlType="submit"
            style={{ margin: "10px 0px 10px 0" }}
          >
            <Link href="/admin/posts/new">
              <a>
                <PlusOutlined /> Add New
              </a>
            </Link>
          </Button>
          <h1>{posts?.length} Posts</h1>

          <List
            itemLayout="horizontal"
            dataSource={posts}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <a onClick={() => handleEdit(item)}>edit</a>,
                  <a onClick={() => handleDelete(item)}>delete</a>,
                ]}
              >
                <List.Item.Meta title={item.title} />
              </List.Item>
            )}
          />
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default Posts;
```

### All posts route and controller function (server)

```js
// route
router.get("/posts", posts);
// controller
export const posts = async (req, res) => {
  try {
    const posts = await Post.find({})
      .populate("postedBy", "_id name")
      .populate("categories", "_id name slug")
      .sort({ createdAt: -1 })
      .exec();
    return res.json(posts);
  } catch (err) {
    console.log(err);
  }
};
``` 

Show list of posts for admin

Create context by the name of `Content` which will be used to store posts and categories.

```js
// context/post.js
import React from "react";
import { useState, createContext } from "react";

const PostContext = createContext();

const PostProvider = ({ children }) => {
  const [post, setPost] = useState({
    posts: [],
    categories: [],
  });

  return (
    <PostContext.Provider value={[post, setPost]}>
      {children}
    </PostContext.Provider>
  );
};

export { PostContext, PostProvider };
```

Now wrap entire app by `PostProvider` along with the existing providers in `_app.js`

Now access `PostContext` in `/admin/posts/index.js` and replace local posts state with global context.

```js
import { useState, useEffect, useContext } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Button, List } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import Link from "next/link";
import axios from "axios";
import { PostContext } from "../../../context/post";

const Posts = () => {
  // context
  const [post, setPost] = useContext(PostContext);
  const { posts } = post;
  // state
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const { data } = await axios.get("/posts");
        setPost((prev) => ({ ...prev, posts: data }));
      } catch (err) {
        console.log(err);
      }
    };
    fetchPosts();
  }, []);
```

Do the same in `/admin/categories/index.js`
### Fetch all categories and update context
```js
  useEffect(() => {
    const getCategories = async () => {
      try {
        const { data } = await axios.get("/categories");
        console.log(data);
        setPost((prev) => ({ ...prev, categories: data }));
      } catch (err) {
        console.log(err);
      }
    };
    // execute
    getCategories();
  }, []);
```

### Update context categories on create
```js
  const onFinish = async (values) => {
    try {
      console.log(values);
      setLoading(true);
      const { data } = await axios.post("/category", values);
      setPost((prev) => ({
        ...prev,
        categories: [...prev.categories, data],
      }));
      form.resetFields(["name"]);
      setLoading(false);
      toast.success("Category created successfully");
    } catch (err) {
      toast.error("Duplicate error. Try different name.");
      console.log(err);
      setLoading(false);
    }
  };
```

### Update context categories on update
```js
const handleUpdate = async (values) => {
    console.log(values);
    try {
      const { data } = await axios.put(
        `category/${updatingCategory.slug}`,
        values
      );
      const newCategories = categories.map((cat) => {
        if (cat._id === data._id) {
          return data;
        }
        return cat;
      });
      setPost((prev) => ({ ...prev, categories: newCategories }));
      toast.success("Categories updated");
      setVisible(false);
      setUpdatingCategory({});
    } catch (err) {
      console.log(err);
      toast.error("Category update failed");
    }
  };
```

### Update context categories on delete
```js
  const handleDelete = async (item) => {
    console.log("delete", item);
    try {
      const { data } = await axios.delete(`/category/${item.slug}`);
      // setCategories(categories.filter((cat) => cat.slug !== item.slug));
      setPost((prev) => ({
        ...prev,
        categories: categories.filter((cat) => cat.slug !== item.slug),
      }));
      toast.success("Category deleted");
    } catch (err) {
      console.log(err);
      toast.error("Category delete falied");
    }
  };
```


Create global context for posts

We are building wordpress inspired Media modal with Upload files and Media library tabs to upload featured image and manage them.
Screenshots of wordpress Media:
 ![wordpress inspired upload files in media in react node app](https://tutorial-image-bucket.s3.amazonaws.com/sF9PklUpDr7D5kLJm4Y42.jpeg)
 ![wordpress inspired media library to mange images in react node](https://tutorial-image-bucket.s3.amazonaws.com/zmKyl3DEtUkpMWy7Mz3s3.jpeg)

```js
// admin/posts/new
// state to toggle modal visibility
const [visibleMedia, setVisibleMedia] = useState(false);

// Featured image button
{/* <Upload onChange={handleFileChange} multiple={false} maxCount={1}> */}
<Button
onClick={() => setVisibleMedia(true)}
style={{ marginTop: 10 }}
icon={<UploadOutlined />}
block
>
Featured Image
</Button>
{/* </Upload> */}

// modal
<Modal
    title="Media"
    centered
    visible={visibleMedia}
    onOk={() => setVisibleMedia(false)}
    onCancel={() => setVisibleMedia(false)}
    width={720}
    footer={null}
    >
    Show 'Media' component with two tabs 'Upload Files' and 'Media
    Library'
</Modal>
```

Modal preview

 ![ant modal preview](https://tutorial-image-bucket.s3.amazonaws.com/8znlODWVCSlqz1Sd8x4gj.jpeg)

Create components, bring them in Media and then import Media in `/admin/posts/new`

```js
// components/media/UploadFile.js
import React from "react";

const UploadFile = () => {
  return <>Upload File</>;
};

export default UploadFile;
```

```js
// components/media/MediaLibrary.js
import React from "react";

const MediaLibrary = () => {
  return <>Media Library</>;
};

export default MediaLibrary;
```

#### Use ant design's `Tabs` component

```js
// components/media/Media.js
import { Tabs } from "antd";
import UploadFile from "./UploadFile";
import MediaLibrary from "./MediaLibrary";

const { TabPane } = Tabs;

const Media = () => {
  return (
    <>
      <Tabs type="card">
        <TabPane tab="Upload Files" key="1">
          <UploadFile />
        </TabPane>
        <TabPane tab="Media Library" key="2">
          <MediaLibrary />
        </TabPane>
      </Tabs>
    </>
  );
};

export default Media;
```

Now import Media in `/admin/posts/new`

```js
<Modal
    title="Media"
    // centered
    style={{ top: 20 }}
    visible={visibleMedia}
    onOk={() => setVisibleMedia(false)}
    onCancel={() => setVisibleMedia(false)}
    width={720}
    footer={null}
    >
    <Media />
</Modal>
```

 ![using tabs in react using ant design component](https://tutorial-image-bucket.s3.amazonaws.com/xyd7PTWReK2HEdOk57ChQ.jpeg)

Media modal with Upload files and Media library tabs to upload featured image

```js
// components/media/UploadFile.js
import React, { useContext } from "react";
import { Upload, message, Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { AuthContext } from "../../context/auth";

const UploadFile = () => {
  const [auth, setAuth] = useContext(AuthContext);

  const props = {
    name: "file",
    action: `${process.env.NEXT_PUBLIC_API}/upload-image-file`,
    headers: {
      Authorization: `Bearer ${auth.token}`,
    },
    onChange(info) {
      if (info.file.status !== "uploading") {
        //   console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        // console.log("############ UPLOADED ============> ", info.file.response);
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };

  return (
    <Upload {...props} maxCount={1}>
      <Button icon={<UploadOutlined />}>Click to Upload</Button>
    </Upload>
  );
};

export default UploadFile;
```

### Backend route and controller to upload image/file using formdata (express-formidable)

```js
// route
import formidable from "express-formidable";

router.post(
  "/upload-image-file",
  formidable(),
  requireSignin,
  isAdmin,
  uploadImageFile
);

// controller
export const uploadImageFile = async (req, res) => {
  //   console.log(req.files); // [] of File {}
  try {
    // console.log(req.body.image);
    const result = await cloudinary.uploader.upload(req.files.file.path);
    // console.log("uploaded image url => ", result);

    res.json({
      url: result.secure_url,
      public_id: result.public_id,
    });
  } catch (err) {
    console.log(err);
  }
};
```

Upload File/Image using ant design Upload component

 ![Upload multiple files/images using ant design drag and drop - dark theme](https://tutorial-image-bucket.s3.amazonaws.com/33kbg2b1H-tNDxzHaNSNP.jpeg)

 ![Upload multiple files/images using ant design drag and drop - light theme](https://tutorial-image-bucket.s3.amazonaws.com/B3u4ffA8EISXIdTnb7Hwx.jpeg)

```js
// components/media/MediaLibrary.js
import React, { useContext } from "react";
import { Upload, message } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import { AuthContext } from "../../context/auth";

const { Dragger } = Upload;

const MediaLibrary = () => {
  const [auth, setAuth] = useContext(AuthContext);

  const props = {
    name: "file",
    multiple: true,
    action: `${process.env.NEXT_PUBLIC_API}/upload-image-file`,
    headers: {
      Authorization: `Bearer ${auth.token}`,
    },
    onChange(info) {
      const { status } = info.file;
      if (status !== "uploading") {
        // console.log(info.file, info.fileList);
      }
      if (status === "done") {
        // console.log("############ ============> ", info.file.response);
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };

  return (
    <>
      <Dragger {...props}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">
          Click or drag file to this area to upload
        </p>
      </Dragger>
    </>
  );
};

export default MediaLibrary;
```

Upload multiple files/images using ant design drag and drop

**Steps**

- Save uploaded images to server
- Model > route > controller
- Create media context
- On each upload response, update media context
- Show uploaded image as selected file with preview in `new.js`

### Server
```js
// models/media
import mongoose from "mongoose";
const { ObjectId } = mongoose.Schema;

const mediaSchema = new mongoose.Schema(
  {
    url: String,
    public_id: String,
    postedBy: {
      type: ObjectId,
      ref: "User",
    },
  },
  { timestamps: true }
);

export default mongoose.model("Media", mediaSchema);
```

```js
// routes/media
router.post(
  "/upload-image-file",
  formidable(),
  requireSignin,
  isAdmin,
  uploadImageFile
);
```

```js
// controllers/post
export const uploadImageFile = async (req, res) => {
  //   console.log(req.files); // [] of File {}
  try {
    // console.log(req.body.image);
    const result = await cloudinary.uploader.upload(req.files.file.path);
    // console.log("uploaded image url => ", result);
    // save to db
    const media = await new Media({
      url: result.secure_url,
      public_id: result.public_id,
      postedBy: req.user._id,
    }).save();
    res.json(media);
    // res.json({
    //   url: result.secure_url,
    //   public_id: result.public_id,
    // });
  } catch (err) {
    console.log(err);
  }
};
```

### Client
```js
import React from "react";
import { useState, createContext } from "react";

const MediaContext = createContext();

const MediaProvider = ({ children }) => {
  const [media, setMedia] = useState({
    images: [],
    selected: null,
  });

  return (
    <MediaContext.Provider value={[media, setMedia]}>
      {children}
    </MediaContext.Provider>
  );
};

export { MediaContext, MediaProvider };
```

```js
// add this line of code in props={} in 
// UploadFile.js <Upload {...props} /> 
// MediaLibrary.js <Dragger {...props}>
setMedia({
    images: [...media.images, info.file.response],
    selected: info.file.response,
});
```

Then in `new.js` show uploaded/selected file preview. Also send it to server on post create.

```js
// pages/admin/posts/new.js
{media.selected && (
  <>
    <div style={{ marginBottom: 15 }}></div>

    <Image width="100%" src={media.selected.url} />
  </>
)}
```

Update post create controller function
```js
// controllers/post
export const createPost = async (req, res) => {
  try {
    const { title, content, categories } = req.body;
    // check if title is taken
    const alreadyExist = await Post.findOne({
      slug: slugify(title.toLowerCase()),
    }).exec();
    if (alreadyExist) return res.json({ error: "Title is taken" });

    // get category ids based on category name
    let ids = [];
    for (let i = 0; i < categories.length; i++) {
      Category.findOne({ name: categories[i] }).exec((err, c) => {
        if (err) {
          console.log(err);
        }
        // console.log("c", c._id);
        ids.push(c._id);
      });
    }
    // save post
    setTimeout(async () => {
      const newPost = await new Post({
        ...req.body,
        slug: slugify(title),
        categories: ids,
        postedBy: req.user._id,
      }).save();
      return res.json(newPost);
    }, 1000);
  } catch (err) {
    console.log(err);
  }
};
```

Save images to database and use media context

Add showMediaModal prop to media context to control the visibility of media modal easily from any components.

```js
// context/media
const [media, setMedia] = useState({
  images: [],
  selected: null,
  showMediaModal: false,
});
```

On **Featured image** button click
```js
<Button
  // onClick={() => setVisibleMedia(true)}
  onClick={() => setMedia({ ...media, showMediaModal: true })}
  style={{ marginTop: 10 }}
  icon={<UploadOutlined />}
  block
>
  Featured Image
</Button>
```
Control the visibility of modal
```js
<Modal
  title="Media"
  // centered
  style={{ top: 20 }}
  visible={media.showMediaModal}
  onOk={() => setMedia({ ...media, showMediaModal: false })}
  onCancel={() => setMedia({ ...media, showMediaModal: false })}
  width={720}
  footer={null}
>
  <Media />
</Modal>
```
Update `<Upload {...props} />` in `UploadFile.js` to close the modal once upload completed
```js
setMedia({
  images: [...media.images, info.file.response],
  selected: info.file.response,
  showMediaModal: false,
});
```

Add showMediaModal prop to media context

Now let's work on showing available media files in MediaLibrary so that user can pick one from the list and use as featured image.

 ![Showing available media files in MediaLibrary](https://tutorial-image-bucket.s3.amazonaws.com/gtd7Mbyh22T5FG7-tazvY.jpeg)

Backend route and controller
```js
// routes
router.delete("/media/:id", requireSignin, isAdmin, removeMedia);
// controllers
export const removeMedia = async (req, res) => {
  try {
    const { id } = req.params;
    const media = await Media.findByIdAndDelete(id);
    return res.json({ ok: true });
  } catch (err) {
    console.log(err);
  }
};
```
Show all media in frontend. On click, set selected and allow delete

```js
// components/media/MediaLibrary.js
import React, { useContext, useEffect } from "react";
import { Upload, message, Image, Badge } from "antd";
import { InboxOutlined, CloseCircleFilled } from "@ant-design/icons";
import { AuthContext } from "../../context/auth";
import { MediaContext } from "../../context/media";
import axios from "axios";
import toast from "react-hot-toast";

const { Dragger } = Upload;

const MediaLibrary = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  const [media, setMedia] = useContext(MediaContext);

  useEffect(() => {
    const fetchMedia = async () => {
      try {
        const { data } = await axios.get("/media");
        // console.log(data);
        setMedia((prev) => ({ ...prev, images: data }));
      } catch (err) {
        console.log(err);
      }
    };
    // execute
    fetchMedia();
  }, []);

  const props = {
    name: "file",
    multiple: true,
    action: `${process.env.NEXT_PUBLIC_API}/upload-image-file`,
    headers: {
      Authorization: `Bearer ${auth.token}`,
    },
    onChange(info) {
      const { status } = info.file;
      if (status !== "uploading") {
        // console.log(info.file, info.fileList);
      }
      if (status === "done") {
        // console.log("############ ============> ", info.file.response);
        setMedia({
          images: [...media.images, info.file.response],
          showMediaModal: true,
          // selected: info.file.response,
        });
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log("Dropped files", e.dataTransfer.files);
    },
  };

  const handleImageDelete = async (imageId) => {
    try {
      const { data } = await axios.delete(`/media/${imageId}`);
      console.log(data);
      if (data.ok) {
        setMedia((prev) => ({
          ...prev,
          images: prev.images.filter((image) => image._id !== imageId),
          selected: null,
        }));
      }
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <>
      <Dragger {...props} accept="image/*">
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">
          Click or drag file to this area to upload
        </p>
      </Dragger>

      <div style={{ textAlign: "center" }}>
        {media?.images?.map((image) => (
          <Badge>
            <Image
              onClick={() => {
                setMedia({ ...media, selected: image });
                toast.success("Selected");
              }}
              style={{
                paddingTop: 5,
                paddingRight: 10,
                height: "100px",
                width: "100px",
                objectFit: "cover",
              }}
              src={image.url}
            />
            <br />
            <CloseCircleFilled
              style={{ marginRight: 10, color: "#f5222d" }}
              onClick={() => handleImageDelete(image._id)}
            />
          </Badge>
        ))}
      </div>
    </>
  );
};

export default MediaLibrary;
```

Showing available media files in MediaLibrary

### Make the sidebar auto collapse to give more space for main content in small screens

![Responsive ant grid layout with auto collapse sidebar on small screen](https://tutorial-image-bucket.s3.amazonaws.com/WzJ2NO79d-L9lJ296gIRR.jpeg)

```js
npm i @react-hook/window-size
```

```js
// components/nav/AdminNav

// import
import { useWindowWidth } from "@react-hook/window-size";

// state
const [collapsed, setCollapsed] = useState(false)

  // detect window size and collapse sidebar
  const onlyWidth = useWindowWidth();
  useEffect(() => {
    console.log("onlyWidth", onlyWidth);
    if (onlyWidth < 800) {
      setCollapsed(true);
    } else if (onlyWidth > 800) {
      setCollapsed(false);
    }
  }, [onlyWidth < 800]);
``` 

```js
<Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      style={{
        marginTop: 50,
      }}
    >
// rest of code
```

### Make responsive grid in ant design, making it total of 24 col grid

```js
// admin/posts/new
<AdminLayout>
      <Row>
        <Col sm={22} lg={14} offset={1}>
          // editor, input elements
        </Col>
        <Col sm={22} lg={6} offset={1}>
          // sidebar content
       </Col>
   </Row>
</AdminLayout>
```

Responsive ant grid layout with auto collapse sidebar on small screen

![Screen Shot 2022-02-16 at 11.17.42 PM](https://tutorial-image-bucket.s3.amazonaws.com/4Cdf2-3daqBE_66d3WtV5.jpeg)

Use `getServerSideProps` to load the content/posts before rendering any page content at all. This will be better for SEO because when the page is loaded, search engine crawlers will the actual page content (unlike `useEffect` which loads data after the component is rendered)

### Add posts link in Menu
```js
<Menu.Item key="posts" icon={<DatabaseOutlined />}>
<Link href="/posts">
  <a>Posts</a>
</Link>
</Menu.Item>
```

```js
// pages/posts.js
import axios from "axios";
import { Card, Row, Col, Avatar } from "antd";
import Head from "next/head";

const { Meta } = Card;

const Posts = ({ posts }) => {
  return (
    <>
      <Head>
        <title>Recent blog posts</title>
        <meta
          name="description"
          content="Blog posts about web development, programming, and more."
        />
      </Head>
      <div style={{ marginTop: "60px" }}></div>
      <Row gutter={12}>
        {posts.map((post) => (
          <Col sm={24} lg={8} style={{ marginBottom: 12 }}>
            <Card
              hoverable
              cover={
                <Avatar
                  shape="square"
                  style={{ height: "200px" }}
                  src={
                    post.featuredImage?.url ||
                    "https://via.placeholder.com/1200x800.png?text=..."
                  }
                  alt={post.title}
                />
              }
            >
              <Meta title={post.title} />
            </Card>
          </Col>
        ))}
      </Row>
    </>
  );
};

export async function getServerSideProps() {
  const { data } = await axios.get(`${process.env.API}/posts`);
  // console.log("DATA LENGTH =====> ", data.length);
  return {
    props: {
      posts: data,
    },
  };
}

export default Posts;
``` 

Posts page with SSR for SEO

 ![Single post view using ant design card component](https://tutorial-image-bucket.s3.amazonaws.com/OyS1DFWQmE-9sWNCy2D1S.jpeg)

1. Make the post clickable in `posts.js` by wrapping `Card` inside `Link`

```js
<Link href={`/post/${post.slug}`}>
```

2. Return single post from server
```js
// route
router.get("/post/:slug", singlePost);
// controller
export const singlePost = async (req, res) => {
  try {
    const { slug } = req.params;
    const post = await Post.findOne({ slug })
      .populate("postedBy", "_id name")
      .populate("categories", "_id name slug")
      .populate("featuredImage", "_id url");
    return res.json(post);
  } catch (err) {
    console.log(err);
  }
};
```

3. Display the post in `/pages/post/[slug].js`

```js
import { useContext } from "react";
import axios from "axios";
import { Card, Row, Col, Avatar, Tag, Typography } from "antd";
import Head from "next/head";
import Link from "next/link";
import dayjs from "dayjs";
import Editor from "rich-markdown-editor";
import { ThemeContext } from "../../context/theme";

const { Meta } = Card;
const { Title } = Typography;

const SinglePost = ({ post }) => {
  // context
  const [theme, setTheme] = useContext(ThemeContext);

  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta
          name="description"
          content="Blog posts about web development, programming, and more."
        />
      </Head>
      <div style={{ marginTop: "60px" }}></div>
      <Row gutter={12}>
        <Col sm={24} lg={18} style={{ marginBottom: 12 }}>
          <Card
            cover={
              <img
                src={
                  post.featuredImage?.url ||
                  "https://via.placeholder.com/1200x800.png?text=..."
                }
                alt={post.title}
              />
            }
          >
            <Title>{post.title}</Title>
            <p className="h2">
              {dayjs(post.createdAt).format("MMMM D, YYYY h:mm A")} / 0 Comments
              / in{" "}
              {post.categories?.map((c) => (
                <span key={c.name}>
                  <Link href={`/category/${c.slug}`}>
                    <a>{c.name} </a>
                  </Link>
                </span>
              ))}
              / by {post.postedBy?.name}
            </p>

            <Editor
              style={{ width: "100%" }}
              dark={theme === "light" ? false : true}
              defaultValue={post.content}
            />

            <br />
          </Card>
        </Col>
        {/* sidebar */}
        <Col sm={24} lg={6}>
          Sidebar
        </Col>
      </Row>
    </>
  );
};

export async function getServerSideProps({ params }) {
  const { data } = await axios.get(`${process.env.API}/post/${params.slug}`);
  return {
    props: {
      post: data,
    },
  };
}

export default SinglePost;
```

Single post view

### Server
```js
// route
router.delete("/post/:postId", requireSignin, isAdmin, removePost);
// controller
export const removePost = async (req, res) => {
  try {
    const { postId } = req.params;
    const post = await Post.findByIdAndDelete(postId);
    return res.json({ ok: true });
  } catch (err) {
    console.log(err);
  }
};
```

### Client
```js
<a onClick={() => handleDelete(item)}>delete</a>
```
```js
  const handleDelete = async (post) => {
    try {
      const answer = window.confirm("Are you sure you want to delete?");
      if (!answer) return;
      const { data } = await axios.delete(`/post/${post._id}`);
      if (data.ok) {
        setPost((prev) => ({
          ...prev,
          posts: prev.posts.filter((p) => p._id !== post._id),
        }));
      }
    } catch (err) {
      console.log(err);
    }
  };
```

Delete post

### Server
```js
// route
router.put("/post/:postId", requireSignin, isAdmin, editPost);
// controller
export const editPost = async (req, res) => {
  try {
    const { postId } = req.params;
    const { title, content, featuredImage, categories } = req.body;
    // get ids for catrgories
    let ids = [];
    for (let i = 0; i < categories.length; i++) {
      Category.findOne({ name: categories[i] }).exec((err, c) => {
        if (err) {
          console.log(err);
        }
        // console.log("c", c._id);
        ids.push(c._id);
      });
    }
    setTimeout(async () => {
      const post = await Post.findByIdAndUpdate(
        postId,
        {
          title,
          slug: slugify(title),
          content,
          categories: ids,
          featuredImage,
        },
        {
          new: true,
        }
      )
        .populate("postedBy", "_id name")
        .populate("categories", "_id name slug")
        .populate("featuredImage", "_id url");

      return res.json(post);
    }, 1000);
  } catch (err) {
    console.log(err);
  }
};
```

### Client
```js
// admin/posts/[slug].js
import { useState, useEffect, useContext } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Button, Modal, Input, Upload, Image } from "antd";
import Editor from "rich-markdown-editor";
import { ThemeContext } from "../../../context/theme";
import axios from "axios";
import { Select, Typography } from "antd";
import { Loading3QuartersOutlined, UploadOutlined } from "@ant-design/icons";
import Resizer from "react-image-file-resizer";
import toast from "react-hot-toast";
import Media from "../../../components/media/Media";
import { MediaContext } from "../../../context/media";
import { useRouter } from "next/router";

const { Text } = Typography;

const { Option } = Select;

const EditPost = ({ post }) => {
  // hooks
  const [theme, setTheme] = useContext(ThemeContext);
  const [media, setMedia] = useContext(MediaContext);
  const router = useRouter();
  // state
  const [title, setTitle] = useState(post?.title);
  const [content, setContent] = useState(post?.content);
  const [categories, setCatgories] = useState([]); // useEffect populated the names
  const [featuredImage, setFeaturedImage] = useState(post?.featuredImage);
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [loadedCatetories, setLoadedCatetories] = useState([]);

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

  useEffect(() => {
    // set post's existing categories
    let arr = [];
    post?.categories?.map((c) => arr.push(c.name));
    setCatgories(arr);
  }, []);

  const loadCategories = async () => {
    try {
      const { data } = await axios.get("/categories");
      setLoadedCatetories(data);
    } catch (err) {
      console.log(err);
    }
  };

  const resizeFile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        720,
        400,
        "JPEG",
        100,
        0,
        (uri) => {
          resolve(uri);
        },
        "base64"
      );
    });

  const uploadPostImage = async (file) => {
    try {
      const image = await resizeFile(file);
      const { data } = await axios.post("/upload-image", { image });
      // console.log("UPLOAD FILE RESULT => ", data);
      return data.url;
    } catch (err) {
      console.log(err);
    }
  };

  const handlePublish = async () => {
    try {
      setLoading(true);
      const { data } = await axios.put(`/post/${post._id}`, {
        title,
        content,
        categories,
        featuredImage: media?.selected?._id
          ? media.selected._id
          : featuredImage?._id
          ? featuredImage._id
          : "",
      });
      // console.log("POST UPDATED => ", data);
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success("Post updated successfully");
        setMedia({ ...media, selected: null });
        router.push("/admin/posts");
      }
    } catch (err) {
      console.log(err);
      toast.error("Post create failed. Try again.");
      setLoading(false);
    }
  };

  return (
    <AdminLayout>
      <Row>
        <Col sm={22} lg={14} offset={1}>
          <h4 style={{ marginBottom: "-10px" }}>Create Post</h4>
          {/* <pre>{JSON.stringify(media, null, 4)}</pre> */}
          <Input
            style={{ margin: "20px 0px 20px 0px" }}
            size="large"
            placeholder="Give it a title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />

          <Editor
            style={{ width: "100%" }}
            dark={theme === "light" ? false : true}
            defaultValue={content}
            // defaultValue="Write something..."
            uploadImage={uploadPostImage}
            onChange={(v) => setContent(v())}
          />
        </Col>
        <Col sm={22} lg={6} offset={1}>
          <Button
            type="default"
            htmlType="submit"
            style={{ margin: "10px 0px 10px 0" }}
            onClick={() => setVisible(true)}
          >
            Preview
          </Button>

          <h4>Categories</h4>
          <Select
            mode="multiple"
            allowClear
            style={{ width: "100%" }}
            placeholder="Please select"
            onChange={(v) => setCatgories(v)}
            value={[...categories]}
          >
            {loadedCatetories.map((item) => (
              <Option key={item.name}>{item.name}</Option>
            ))}
          </Select>

          {/* show selected/featured image */}
          {media.selected ? (
            <>
              <div style={{ marginBottom: 15 }}></div>

              <Image width="100%" src={media.selected.url} />
            </>
          ) : post?.featuredImage ? (
            <>
              <div style={{ marginBottom: 15 }}></div>

              <Image width="100%" src={post.featuredImage.url} />
            </>
          ) : (
            ""
          )}

          
          <Button
          
            onClick={() => setMedia({ ...media, showMediaModal: true })}
            style={{ marginTop: 10 }}
            icon={<UploadOutlined />}
            block
          >
            Featured Image
          </Button>
          {/* </Upload> */}

          <Button
            onClick={handlePublish}
            type="default"
            htmlType="submit"
            style={{ margin: "10px 0px 10px 0" }}
            loading={loading}
            block
          >
            Update
          </Button>
          {/* for post preview */}
          <Modal
            title="Preview"
            centered
            visible={visible}
            onOk={() => setVisible(false)}
            onCancel={() => setVisible(false)}
            width={720}
            footer={null}
          >
            <h1>{title}</h1>
            <img style={{ width: "100%" }} src={media.selected?.url} />
            <Editor
              dark={theme === "light" ? false : true}
              value={content}
              readOnly={true}
            />
          </Modal>
          {/* for media management */}
          <Modal
            title="Media"
            // centered
            style={{ top: 20 }}
            visible={media.showMediaModal}
            onOk={() => setMedia({ ...media, showMediaModal: false })}
            onCancel={() => setMedia({ ...media, showMediaModal: false })}
            width={720}
            footer={null}
          >
            <Media />
          </Modal>
        </Col>
      </Row>
    </AdminLayout>
  );
};

export async function getServerSideProps({ params }) {
  const { data } = await axios.get(`${process.env.API}/post/${params.slug}`);
  return {
    props: {
      post: data,
    },
  };
}

export default EditPost;
```

Update post

Let's extract resize and upload image functions so that they can be used in multiple files without code repitition.

Remove the following 2 functions from `/admin/posts/new.js` and `/admin/posts'[slug].js`

#### Remove these functions
```js
 const resizeFile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        720,
        400,
        "JPEG",
        100,
        0,
        (uri) => {
          resolve(uri);
        },
        "base64"
      );
    });

  const uploadPostImage = async (file) => {
    try {
      const image = await resizeFile(file);
      const { data } = await axios.post("/upload-image", { image });
      // console.log("UPLOAD FILE RESULT => ", data);
      return data.url;
    } catch (err) {
      console.log(err);
    }
  };
```

Move them to `/functions/upload.js`

```js
import axios from "axios";
import Resizer from "react-image-file-resizer";

const resizeFile = (file) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      720,
      400,
      "JPEG",
      100,
      0,
      (uri) => {
        resolve(uri);
      },
      "base64"
    );
  });

export const uploadImage = async (file) => {
  console.log("file", file);
  try {
    const image = await resizeFile(file);
    const { data } = await axios.post("/upload-image", { image });
    // console.log("UPLOAD FILE RESULT => ", data);
    return data.url;
  } catch (err) {
    console.log(err);
  }
};
```

Now import and use in `/new` and `/[slug]`

```js
// import
import { uploadImage } from "../../../functions/upload";
// use
<Editor
    style={{ width: "100%" }}
    dark={theme === "light" ? false : true}
    placeholder="Write something..."
    defaultValue={content}
    uploadImage={uploadImage}
    onChange={(v) => handleContent(v())}
/>
```

Extracting upload image functions

```css
/* styles.css */
.active {
  color: #1890ff !important;
  text-decoration: underline;
}
```

```js
import React, { useState, useContext, useEffect } from "react";
import { Menu, Button } from "antd";
import {
  PushpinOutlined,
  CameraOutlined,
  FileTextOutlined,
  CommentOutlined,
  UserSwitchOutlined,
  SettingOutlined,
  DesktopOutlined,
} from "@ant-design/icons";
import { Layout } from "antd";
import Link from "next/link";
import { AuthContext } from "../../context/auth";
import { useRouter } from "next/router";
import { useWindowWidth } from "@react-hook/window-size";

const { Sider } = Layout;

const { SubMenu } = Menu;
const AdminNav = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();
  // state
  const [collapsed, setCollapsed] = useState(false);
  const [current, setCurrent] = useState("");

  useEffect(() => {
    process.browser && setCurrent(window.location.pathname);
  }, [process.browser && window.location.pathname]);

  // detect window size and collapse sidebar
  const onlyWidth = useWindowWidth();
  useEffect(() => {
    console.log("onlyWidth", onlyWidth);
    if (onlyWidth < 800) {
      setCollapsed(true);
    } else if (onlyWidth > 800) {
      setCollapsed(false);
    }
  }, [onlyWidth < 800]);

  const activeName = (name) => `nav-link ${current === name && "active"}`;

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      style={{
        marginTop: 50,
      }}
    >
      <Menu
        // defaultSelectedKeys={["1"]}
        defaultOpenKeys={["1", "6", "9", "14"]}
        mode="inline"
        inlineCollapsed={collapsed}
      >
        <Menu.Item key="19" icon={<SettingOutlined />}>
          <Link href="/admin">
            <a className={activeName("/admin")}>Dashboard</a>
          </Link>
        </Menu.Item>
        {/* posts */}
        <SubMenu key="1" icon={<PushpinOutlined />} title="Posts">
          <Menu.Item key="2">
            <Link href="/admin/posts">
              <a className={activeName("/admin/posts")}>All Posts</a>
            </Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link href="/admin/posts/new">
              <a className={activeName("/admin/posts/new")}>Add New</a>
            </Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Link href="/admin/categories">
              <a className={activeName("/admin/categories")}>Categories</a>
            </Link>
          </Menu.Item>
        </SubMenu>
        {/* media */}
        <SubMenu key="6" icon={<CameraOutlined />} title="Media">
          <Menu.Item key="7">
            <Link href="/admin/media/library">
              <a className={activeName("/admin/media/library")}>Library</a>
            </Link>
          </Menu.Item>
          <Menu.Item key="8">
            <Link href="/admin/media/new">
              <a className={activeName("/admin/media/new")}>Add New</a>
            </Link>
          </Menu.Item>
        </SubMenu>
        {/* pages */}
        <SubMenu key="9" icon={<FileTextOutlined />} title="Pages">
          <Menu.Item key="10">All Pages</Menu.Item>
          <Menu.Item key="11">Add New</Menu.Item>
        </SubMenu>
        <Menu.Item key="12" icon={<CommentOutlined />}>
          Comments
        </Menu.Item>
        <Menu.Item key="13" icon={<DesktopOutlined />}>
          Apperance
        </Menu.Item>
        {/* users */}
        <SubMenu key="14" icon={<UserSwitchOutlined />} title="Users">
          <Menu.Item key="15">All Users</Menu.Item>
          <Menu.Item key="16">Add New</Menu.Item>
          <Menu.Item key="17">Profile</Menu.Item>
        </SubMenu>
        <Menu.Item key="18" icon={<SettingOutlined />}>
          Settings
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default AdminNav;
```

Media library and add new pages

 ![Screen Shot 2022-02-18 at 11.30.29 PM](https://tutorial-image-bucket.s3.amazonaws.com/t5c8hvy6ujcrctCbOe5_T.jpeg)

In WordPress, you can manually create a user and email him/her the password for login. Which they can change later. We will implement similar feature in this CMS.

#### Client
```js
// admin/users/new
import { useState, useEffect, useContext } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Button, Modal, Input, Upload, Image, Checkbox } from "antd";
import { ThemeContext } from "../../../context/theme";
import axios from "axios";
import { Select, Typography } from "antd";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import generator from "generate-password";

const { Option } = Select;

const NewUser = () => {
  // hooks

  const router = useRouter();
  // state
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [website, setWebsite] = useState("");
  const [password, setPassword] = useState(generator.generate({ length: 6 }));
  const [role, setRole] = useState("");
  const [checked, setChecked] = useState(false);
  const [loading, setLoading] = useState(false);

  const handlePublish = async () => {
    try {
      setLoading(true);
      const { data } = await axios.post("/create-user", {
        name,
        email,
        website,
        password,
        role,
        checked,
      });
      console.log("USER CREATED => ", data);
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success("User created successfully");
        setLoading(false);
      }
    } catch (err) {
      console.log(err);
      toast.error("User create failed. Try again.");
      setLoading(false);
    }
  };

  return (
    <AdminLayout>
      <Row>
        <Col span={12} offset={6}>
          <h4 style={{ marginBottom: "-10px" }}>Add new user</h4>
          <Input
            style={{ margin: "20px 0px 10px 0px" }}
            size="large"
            placeholder="Full name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <Input
            style={{ margin: "10px 0px 10px 0px" }}
            size="large"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />

          <div style={{ display: "flex" }}>
            <Button
              onClick={() => setPassword(generator.generate({ length: 6 }))}
              type="default"
              size="large"
              style={{ margin: "10px 0px 10px 0" }}
            >
              Generate Password
            </Button>
            <Input.Password
              style={{ margin: "10px 0px 10px 0px" }}
              size="large"
              placeholder="Password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>

          <Select
            defaultValue="Subscriber"
            style={{ width: "100%", margin: "10px 0px 10px 0px" }}
            onChange={(v) => setRole(v)}
          >
            <Option value="Subscriber">Subscriber</Option>
            <Option value="Author">Author</Option>
            <Option value="Admin">Admin</Option>
          </Select>

          <Checkbox
            checked={checked}
            onChange={(e) => setChecked(e.target.checked)}
          >
            Send the new user an email about their account.
          </Checkbox>

          <Button
            onClick={handlePublish}
            type="default"
            htmlType="submit"
            style={{ margin: "10px 0px 10px 0" }}
            loading={loading}
            block
          >
            Publish
          </Button>
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default NewUser;
```
#### Server

```js
// route
router.post("/create-user", requireSignin, isAdmin, createUser);
// controller
export const createUser = async (req, res) => {
  console.log("CREATE USER => ", req.body);
  try {
    const { name, email, password, role, checked } = req.body;
    if (!name) {
      return res.json({
        error: "Name is required",
      });
    }
    if (!email) {
      return res.json({
        error: "Email is required",
      });
    }
    if (!password || password.length < 6) {
      return res.json({
        error: "Password is required and should be 6 characters long",
      });
    }
    const exist = await User.findOne({ email });
    if (exist) {
      return res.json({
        error: "Email is taken",
      });
    }
    // hash password
    const hashedPassword = await hashPassword(password);

    try {
      const user = await new User({
        name,
        email,
        password: hashedPassword,
        role,
      }).save();

      // if checked, send email with login details
      if (user) {
        //
      }

      //   console.log(user);
      const { password, ...rest } = user._doc;
      return res.json(rest);
    } catch (err) {
      console.log(err);
    }
  } catch (err) {
    console.log(err);
  }
};
```

Creating a user

 ![account-created-email-confirmation-nodejs-react-sendgrid](https://tutorial-image-bucket.s3.amazonaws.com/YHomANm5KdmQPY6YvHM3a.jpeg)

```js
// controller
export const createUser = async (req, res) => {
  console.log("CREATE USER => ", req.body);
  try {
    const { name, email, password, role, checked, website } = req.body;
    if (!name) {
      return res.json({
        error: "Name is required",
      });
    }
    if (!email) {
      return res.json({
        error: "Email is required",
      });
    }
    if (!password || password.length < 6) {
      return res.json({
        error: "Password is required and should be 6 characters long",
      });
    }
    const exist = await User.findOne({ email });
    if (exist) {
      return res.json({
        error: "Email is taken",
      });
    }
    // hash password
    const hashedPassword = await hashPassword(password);

    // if checked, send email with login details
    if (checked) {
      // prepare email
      const emailData = {
        from: process.env.EMAIL_FROM,
        to: email,
        subject: "Account created",
        html: `
          <h2>Hi ${name},</h2>
          <p>Your CMS account has been created sucessfully</p>
          <h3>Your login details</h3>
          <h4 style="color:red;">Email: ${email}</h4>
          <h4 style="color:red;">Password: ${password}</h4>
          <p>We recommend you to change your password after login.</p>
        `,
      };

      try {
        const data = await sgMail.send(emailData);
        // console.log(data);
      } catch (err) {
        console.log(err);
      }
    }

    try {
      const user = await new User({
        name,
        email,
        password: hashedPassword,
        role,
        website,
      }).save();
      const { password, ...rest } = user._doc;
      return res.json(rest);
    } catch (err) {
      console.log(err);
    }
  } catch (err) {
    console.log(err);
  }
};
```

Send login details to users email using sendgrid

Now that we have a concept of admin and authors, we will need to share the a lot of same code/functionalities for both user types.

So we are going to move code from pages to components. Then you can just import the entire component and use for users with the role of author.

We will create a wrapper component called <AuthorLayout> which will check if user is author, if true allow author to create and manage posts.

```js
// components/posts/NewPostComponent
import { useState, useEffect, useContext } from "react";
import { Row, Col, Button, Modal, Input, Upload, Image } from "antd";
import Editor from "rich-markdown-editor";
import { ThemeContext } from "../../context/theme";
import axios from "axios";
import { Select, Typography } from "antd";
import { Loading3QuartersOutlined, UploadOutlined } from "@ant-design/icons";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import Media from "../media/Media";
import { MediaContext } from "../../context/media";
import { uploadImage } from "../../functions/upload";

const { Text } = Typography;

const { Option } = Select;
const NewPostComponent = () => {
  // from localstorage
  const savedTitle = () => {
    if (process.browser) {
      if (localStorage.getItem("post-title"))
        return JSON.parse(localStorage.getItem("post-title"));
    }
  };

  const savedContent = () => {
    if (process.browser) {
      if (localStorage.getItem("post-content"))
        return JSON.parse(localStorage.getItem("post-content"));
    }
  };
  // hooks
  const [theme, setTheme] = useContext(ThemeContext);
  const [media, setMedia] = useContext(MediaContext);
  const router = useRouter();
  // state
  const [title, setTitle] = useState(savedTitle());
  const [content, setContent] = useState(savedContent());
  const [categories, setCatgories] = useState([]);
  const [visible, setVisible] = useState(false);
  // const [visibleMedia, setVisibleMedia] = useState(false);
  const [loading, setLoading] = useState(false);
  const [typing, setTyping] = useState(false);
  const [loadedCatetories, setLoadedCatetories] = useState([]);

  // console.log("TITLE", title);
  // console.log("CONTENT", content);

  useEffect(() => {
    const loadCategories = async () => {
      const { data } = await axios.get("/categories");
      setLoadedCatetories(data);
    };
    loadCategories();
  }, []);

  const handleTitle = (e) => {
    setTitle(e.target.value);
    localStorage.setItem("post-title", JSON.stringify(e.target.value));
  };

  const handleContent = (value) => {
    setContent(value);
    localStorage.setItem("post-content", JSON.stringify(value));
    setTyping(true);
    setTimeout(() => {
      {
        setTyping(false);
      }
    }, 1000);
  };

  const handlePublish = async () => {
    try {
      setLoading(true);
      const { data } = await axios.post("/create-post", {
        title,
        content,
        categories,
        featuredImage: media?.selected?._id,
      });
      // console.log("POST CREATED => ", data);
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success("Post created successfully");
        localStorage.setItem("post-title", "");
        localStorage.setItem("post-content", "");
        setMedia({ ...media, selected: null });
        router.push("/admin/posts");
      }
    } catch (err) {
      console.log(err);
      toast.error("Post create failed. Try again.");
      setLoading(false);
    }
  };

  return (
    <Row>
      <Col sm={22} lg={14} offset={1}>
        <h4 style={{ marginBottom: "-10px" }}>Create Post</h4>
        {/* <pre>{JSON.stringify(media, null, 4)}</pre> */}
        <Input
          style={{ margin: "20px 0px 20px 0px" }}
          size="large"
          placeholder="Give it a title"
          value={title}
          onChange={handleTitle}
        />

        <Editor
          style={{ width: "100%" }}
          dark={theme === "light" ? false : true}
          placeholder="Write something..."
          defaultValue={content}
          // defaultValue="Write something..."
          uploadImage={uploadImage}
          onChange={(v) => handleContent(v())}
        />
      </Col>
      <Col sm={22} lg={6} offset={1}>
        <Button
          type="default"
          htmlType="submit"
          style={{ margin: "10px 0px 10px 0" }}
          onClick={() => setVisible(true)}
        >
          Preview
        </Button>

        {typing && (
          <>
            <Loading3QuartersOutlined spin style={{ marginLeft: 20 }} />{" "}
            <Text disabled>Saving draft...</Text>
          </>
        )}

        <h4>Categories</h4>
        <Select
          mode="multiple"
          allowClear
          style={{ width: "100%" }}
          placeholder="Please select"
          onChange={(v) => setCatgories(v)}
        >
          {loadedCatetories.map((item) => (
            <Option key={item.name}>{item.name}</Option>
          ))}
        </Select>

        {/* show selected/featured image */}
        {media.selected && (
          <>
            <div style={{ marginBottom: 15 }}></div>

            <Image width="100%" src={media.selected.url} />
          </>
        )}

        {/* <Upload onChange={handleFileChange} multiple={false} maxCount={1}> */}
        <Button
          // onClick={() => setVisibleMedia(true)}
          onClick={() => setMedia({ ...media, showMediaModal: true })}
          style={{ marginTop: 10 }}
          icon={<UploadOutlined />}
          block
        >
          Featured Image
        </Button>
        {/* </Upload> */}

        <Button
          onClick={handlePublish}
          type="default"
          htmlType="submit"
          style={{ margin: "10px 0px 10px 0" }}
          loading={loading}
          block
        >
          Publish
        </Button>
        {/* for post preview */}
        <Modal
          title="Preview"
          centered
          visible={visible}
          onOk={() => setVisible(false)}
          onCancel={() => setVisible(false)}
          width={720}
          footer={null}
        >
          <h1>{title}</h1>
          <img style={{ width: "100%" }} src={media.selected?.url} />
          <Editor
            dark={theme === "light" ? false : true}
            value={content}
            readOnly={true}
          />
        </Modal>
        {/* for media management */}
        <Modal
          title="Media"
          // centered
          style={{ top: 20 }}
          visible={media.showMediaModal}
          onOk={() => setMedia({ ...media, showMediaModal: false })}
          onCancel={() => setMedia({ ...media, showMediaModal: false })}
          width={720}
          footer={null}
        >
          <Media />
        </Modal>
      </Col>
    </Row>
  );
};

export default NewPostComponent;
```

Now import and use in `/admin/posts/new`

```js
import AdminLayout from "../../../components/layout/AdminLayout";
import NewPostComponent from "../../../components/posts/NewPostComponent";

const NewPost = () => {
  return (
    <AdminLayout>
      <NewPostComponent />
    </AdminLayout>
  );
};

export default NewPost;
```

Code refactoring to use for admin and authors

Repeat the same process for editing posts as done with create new post in previous chapter.

To render the list of posts, move the List component to it's own component so that it can later be used to show a list of posts for both admin and author.

```js
// components/posts/PostsList
import { List } from "antd";
import Link from "next/link";

const PostsList = ({ posts, handleDelete }) => {
  return (
    <List
      itemLayout="horizontal"
      dataSource={posts}
      renderItem={(item) => (
        <List.Item
          actions={[
            <Link href={`/admin/posts/${item.slug}`}>
              <a onClick={() => handleEdit(item)}>edit</a>
            </Link>,
            <a onClick={() => handleDelete(item)}>delete</a>,
          ]}
        >
          <List.Item.Meta title={item.title} />
        </List.Item>
      )}
    />
  );
};

export default PostsList;
```
Now import and use in `admin/posts/index.s`

```js
<PostsList posts={posts} handleDelete={handleDelete} />
```

Do the same for categories too.


More code refactoring

Now we are going to protect the routes for the user with the role of Author, just like we did previously for the users with the role of Admin.

### Server

```js
// middlewares
export const isAuthor = async (req, res, next) => {
  try {
    // you get req.user._id from verified jwt token
    const user = await User.findById(req.user._id);
    // console.log("isAdmin ===> ", user);
    if (user.role !== "Author") {
      return res.status(400).send("Unauthorized");
    } else {
      next();
    }
  } catch (err) {
    console.log(err);
  }
};

// route
// CHANGE THE previous currentAdmin controller function to currentUser
// so that it can be used multiple times
router.get("/current-admin", requireSignin, isAdmin, currentUser);
router.get("/current-author", requireSignin, isAuthor, currentUser);
```

Protected routes for user with the role of Author

 ![Author dashboard with limited sidebar menu](https://tutorial-image-bucket.s3.amazonaws.com/JsrB3H9O5-RQ3Y3pvYTkt.jpeg)
*Author sidebar nav with limited access*

- Create author nav (sidebar)
```js
// components/nav/AuthorNav
import React, { useState, useContext, useEffect } from "react";
import { Menu, Button } from "antd";
import {
  PushpinOutlined,
  CameraOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Layout } from "antd";
import Link from "next/link";
import { useWindowWidth } from "@react-hook/window-size";

const { Sider } = Layout;

const { SubMenu } = Menu;

const AuthorNav = () => {
  // state
  const [collapsed, setCollapsed] = useState(false);
  const [current, setCurrent] = useState("");

  useEffect(() => {
    process.browser && setCurrent(window.location.pathname);
  }, [process.browser && window.location.pathname]);

  // console.log("##### NAV ##### ", current);

  // detect window size and collapse sidebar
  const onlyWidth = useWindowWidth();
  useEffect(() => {
    console.log("onlyWidth", onlyWidth);
    if (onlyWidth < 800) {
      setCollapsed(true);
    } else if (onlyWidth > 800) {
      setCollapsed(false);
    }
  }, [onlyWidth < 800]);

  const activeName = (name) => `nav-link ${current === name && "active"}`;

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      style={{
        marginTop: 50,
      }}
    >
      <Menu
        // defaultSelectedKeys={["1"]}
        defaultOpenKeys={["1", "6", "9", "14"]}
        mode="inline"
        inlineCollapsed={collapsed}
      >
        <Menu.Item key="19" icon={<SettingOutlined />}>
          <Link href="/author">
            <a className={activeName("/author")}>Dashboard</a>
          </Link>
        </Menu.Item>
        {/* posts */}
        <SubMenu key="1" icon={<PushpinOutlined />} title="Posts">
          <Menu.Item key="2">
            <Link href="/author/posts">
              <a className={activeName("/author/posts")}>All Posts</a>
            </Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link href="/author/posts/new">
              <a className={activeName("/author/posts/new")}>Add New</a>
            </Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Link href="/author/categories">
              <a className={activeName("/author/categories")}>Categories</a>
            </Link>
          </Menu.Item>
        </SubMenu>
        {/* media */}
        <SubMenu key="6" icon={<CameraOutlined />} title="Media">
          <Menu.Item key="7">
            <Link href="/author/media/library">
              <a className={activeName("/author/media/library")}>Library</a>
            </Link>
          </Menu.Item>
          <Menu.Item key="8">
            <Link href="/author/media/new">
              <a className={activeName("/author/media/new")}>Add New</a>
            </Link>
          </Menu.Item>
        </SubMenu>

        <Menu.Item key="17" icon={<UserOutlined />}>
          <Link href="/users/profile">
            <a className={activeName("/users/profile")}>Profile</a>
          </Link>
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default AuthorNav;
```

- Create author layout

```js
// components/layout/AuthorLayout
import { Layout } from "antd";
import AuthorNav from "../../components/nav/AuthorNav";
import { useState, useEffect, useContext } from "react";
import { SyncOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import { AuthContext } from "../../context/auth";
import axios from "axios";
import LoadingToRedirect from "./LoadingToRedirect";

const { Content } = Layout;

const AuthorLayout = ({ children }) => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();

  // state
  const [loading, setLoading] = useState(true);

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

  const getCurrentAuthor = async () => {
    try {
      const { data } = await axios.get(`/current-author`);
      console.log("current author", data);
      if (data.ok) {
        setLoading(false);
      }
    } catch (err) {
      router.push("/");
    }
  };

  return loading ? (
    <LoadingToRedirect />
  ) : (
    <Layout>
      <AuthorNav />

      <Layout>
        <Content
          style={{
            margin: "16px 16px",
            overflow: "auto",
            height: "100vh",
            // position: "fixed",
            marginTop: 54,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default AuthorLayout;
```

- Show role based nav link 'Dashboard' that will take users to different page based on their role

```js
// components/nav/TopNav
  const roleBasedLink = () => {
    if (auth.user?.role === "Admin") {
      return "/admin";
    } else if (auth.user?.role === "Author") {
      return "/author";
    } else {
      return "/subscriber";
    }
  };

<Menu.ItemGroup title="Management">
    <Menu.Item key="setting:1">
    <Link href={roleBasedLink()}>
        <a>Dashboard</a>
    </Link>
    </Menu.Item>
</Menu.ItemGroup>
```

Protected routes for author - client side

Now not only `admin` but `author` can also create/edit/delete post. To enable this in server, we have to replace`isAdmin` middleware from from routes and replace with new middleware that will check if user is admin or author or both.

With this approach, we can add author features with very little code change in frontend. We just have to create few middlewares and apply them in our server routes.

### Middlewares
```js
// server/middlewares/index
export const canCreateRead = async (req, res, next) => {
  try {
    // you get req.user._id from verified jwt token
    const user = await User.findById(req.user._id);
    // console.log("isAdmin ===> ", user);
    switch (user.role) {
      case "Admin":
        next();
        break;
      case "Author":
        next();
        break;
      default:
        return res.status(400).send("Unauthorized");
    }
  } catch (err) {
    console.log(err);
  }
};

export const canUpdateDeletePost = async (req, res, next) => {
  try {
    const { postId } = req.params;
    const post = await Post.findById(postId);

    // you get req.user._id from verified jwt token
    const user = await User.findById(req.user._id);
    // console.log("isAdmin ===> ", user);
    switch (user.role) {
      case "Admin":
        next();
        break;
      case "Author":
        if (post.postedBy.toString() !== req.user._id.toString()) {
          return res.status(400).send("Unauthorized");
        } else {
          next();
        }
        break;
      default:
        return res.status(400).send("Unauthorized");
    }
  } catch (err) {
    console.log(err);
  }
};

export const canDeleteMedia = async (req, res, next) => {
  try {
    const { id } = req.params;
    const media = await Media.findById(id);

    // you get req.user._id from verified jwt token
    const user = await User.findById(req.user._id);
    // console.log("isAdmin ===> ", user);
    switch (user.role) {
      case "Admin":
        next();
        break;
      case "Author":
        if (media.postedBy.toString() !== req.user._id.toString()) {
          return res.status(400).send("Unauthorized");
        } else {
          next();
        }
        break;
      default:
        return res.status(400).send("Unauthorized");
    }
  } catch (err) {
    console.log(err);
  }
};
```

### Routes
Now update routes middlewares

```js
// server/routes/post
const express = require("express");
import formidable from "express-formidable";

const router = express.Router();

// controllers
const {
  uploadImage,
  uploadImageFile,
  createPost,
  posts,
  media,
  removeMedia,
  singlePost,
  removePost,
  editPost,
  postsByAuthor,
} = require("../controllers/post");

import {
  requireSignin,
  isAdmin,
  canCreateRead,
  canUpdateDeletePost,
  canDeleteMedia,
} from "../middlewares";

// APPLY canPost MIDDLEWARE (if role is admin or author)
router.post("/upload-image", requireSignin, isAdmin, uploadImage);
router.post(
  "/upload-image-file",
  formidable(),
  requireSignin,
  canCreateRead,
  uploadImageFile
);
router.post("/create-post", requireSignin, canCreateRead, createPost);
router.get("/posts", posts);
router.get("/media", requireSignin, canCreateRead, media);
router.delete("/media/:id", requireSignin, canDeleteMedia, removeMedia);
router.get("/post/:slug", singlePost);
router.put("/post/:postId", requireSignin, canUpdateDeletePost, editPost);
router.delete("/post/:postId", requireSignin, canUpdateDeletePost, removePost);
// author
router.get("/posts-by-author", requireSignin, postsByAuthor);

module.exports = router;
```

Admin and author can create update and remove posts and media - server

Create pages for author to allow posts and media files create update and delete

### Create post by author
```js
// pages/author/posts/new
import AuthorLayout from "../../../components/layout/AuthorLayout";
import NewPostComponent from "../../../components/posts/NewPostComponent";

const NewPost = () => {
  return (
    <AuthorLayout>
      <NewPostComponent />
    </AuthorLayout>
  );
};

export default NewPost;
```

### List of posts by author
```js
// pages/author/index
import { useState, useEffect, useContext } from "react";
import AuthorLayout from "../../../components/layout/AuthorLayout";
import { Row, Col, Button, List } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import Link from "next/link";
import axios from "axios";
import PostsList from "../../../components/posts/PostsList";
import { PostContext } from "../../../context/post";
import toast from "react-hot-toast";

const Posts = () => {
  // context
  const [post, setPost] = useContext(PostContext);
  const { posts } = post;
  // state
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const { data } = await axios.get("/posts-by-author");
        setPost((prev) => ({ ...prev, posts: data }));
      } catch (err) {
        console.log(err);
      }
    };
    fetchPosts();
  }, []);

  const handleDelete = async (post) => {
    try {
      const answer = window.confirm("Are you sure you want to delete?");
      if (!answer) return;
      const { data } = await axios.delete(`/post/${post._id}`);
      if (data.ok) {
        setPost((prev) => ({
          ...prev,
          posts: prev.posts.filter((p) => p._id !== post._id),
        }));
      }
    } catch (err) {
      console.log(err);
      toast.error("Delete failed. Try again.");
    }
  };

  return (
    <AuthorLayout>
      <Row>
        <Col span={24}>
          <Button
            type="primary"
            htmlType="submit"
            style={{ margin: "10px 0px 10px 0" }}
          >
            <Link href="/author/posts/new">
              <a>
                <PlusOutlined /> Add New
              </a>
            </Link>
          </Button>
          <h1>{posts?.length} Posts</h1>
           {/* pass page props to change the edit page link from 'admin' to 'author' */}
          <PostsList posts={posts} page="author" handleDelete={handleDelete} />
        </Col>
      </Row>
    </AuthorLayout>
  );
};

export default Posts;
```

### Author posts server route and controller

```js
// route
router.get("/posts-by-author", requireSignin, postsByAuthor);
// controller
export const postsByAuthor = async (req, res) => {
  try {
    const posts = await Post.find({ postedBy: req.user._id })
      .populate("postedBy", "_id name")
      .populate("categories", "_id name slug")
      .populate("featuredImage", "url")
      .sort({ createdAt: -1 })
      .exec();
    return res.json(posts);
  } catch (err) {
    console.log(err);
  }
};
```

```js
// components/posts/PostsList
import { List } from "antd";
import Link from "next/link";

const PostsList = ({ posts, handleDelete, page = "admin" }) => {
  return (
    <List
      itemLayout="horizontal"
      dataSource={posts}
      renderItem={(item) => (
        <List.Item
          actions={[
            <Link href={`/${page}/posts/${item.slug}`}>
              <a>edit</a>
            </Link>,
            <a onClick={() => handleDelete(item)}>delete</a>,
          ]}
        >
          <List.Item.Meta title={item.title} />
        </List.Item>
      )}
    />
  );
};

export default PostsList;
```

### Update posts by author

```js
// pages/author/posts/[slug].js
import AdminLayout from "../../../components/layout/AdminLayout";
import EditPostComponent from "../../../components/posts/EditPostComponent";

const EditPost = () => {
  return (
    <AdminLayout>
        <EditPostComponent page="author" />
    </AdminLayout>
  );
};

export default EditPost;
```

Repeat the process of passing `page` prop to redirect user after post create (in `/author/posts/new` and `/author/media/new`) too.

```js
// components/media/MediaLibrary.js
// show delete icon to author (to delete his uploaded images only)
// show delete icon to all images if user role is admin
{page === "author" && image.postedBy?._id === auth.user?._id ? (
    <CloseCircleFilled
      style={{ marginRight: 10, color: "#f5222d" }}
      onClick={() => handleImageDelete(image._id)}
    />
  ) : page === "admin" ? (
    <CloseCircleFilled
      style={{ marginRight: 10, color: "#f5222d" }}
      onClick={() => handleImageDelete(image._id)}
    />
  ) : (
    ""
  )}
```

Admin and author can create update and remove posts and media - client

All users who signin will get a role of `Subscriber` by default. We will allow subscribers to update their profile and also leave comments. Let's create a dashboard for subscribers.

```js
// server
router.get("/current-subscriber", requireSignin, currentUser);
```

Create `SubscriberNav`, `SubscriberLayout` and add few pages (comments, profile) for subscriber.

```js
// redirect to /subsscriber on login
if (data.user?.role === "Admin") {
    router.push("/admin");
  } else if (data.user?.role === "Author") {
    router.push("/author");
  } else {
    router.push("/subscriber");
}
```

```js
// components/nav/SubscriberNav
import React, { useState, useContext, useEffect } from "react";
import { Menu, Button } from "antd";
import {
  CommentOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { Layout } from "antd";
import Link from "next/link";
import { useWindowWidth } from "@react-hook/window-size";

const { Sider } = Layout;

const { SubMenu } = Menu;

const SubscriberNav = () => {
  // state
  const [collapsed, setCollapsed] = useState(false);
  const [current, setCurrent] = useState("");

  useEffect(() => {
    process.browser && setCurrent(window.location.pathname);
  }, [process.browser && window.location.pathname]);

  // console.log("##### NAV ##### ", current);

  // detect window size and collapse sidebar
  const onlyWidth = useWindowWidth();
  useEffect(() => {
    console.log("onlyWidth", onlyWidth);
    if (onlyWidth < 800) {
      setCollapsed(true);
    } else if (onlyWidth > 800) {
      setCollapsed(false);
    }
  }, [onlyWidth < 800]);

  const activeName = (name) => `nav-link ${current === name && "active"}`;

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={() => setCollapsed(!collapsed)}
      style={{
        marginTop: 50,
      }}
    >
      <Menu
        // defaultSelectedKeys={["1"]}
        mode="inline"
        inlineCollapsed={collapsed}
      >
        <Menu.Item key="19" icon={<SettingOutlined />}>
          <Link href="/subscriber">
            <a className={activeName("/subscriber")}>Dashboard</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="12" icon={<CommentOutlined />}>
          <Link href="/subscriber/comments">
            <a className={activeName("/subscriber/comments")}>Comments</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="17" icon={<UserOutlined />}>
          <Link href="/subscriber/profile">
            <a className={activeName("/subscriber/profile")}>Profile</a>
          </Link>
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

export default SubscriberNav;
```

```js
// components/layout/SubscriberLayout
import { Layout } from "antd";
import SubscriberNav from "../../components/nav/SubscriberNav";
import { useState, useEffect, useContext } from "react";
import { SyncOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import { AuthContext } from "../../context/auth";
import axios from "axios";
import LoadingToRedirect from "./LoadingToRedirect";

const { Content } = Layout;

const SubscriberLayout = ({ children }) => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();

  // state
  const [loading, setLoading] = useState(true);

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

  const getCurrentSubscriber = async () => {
    try {
      const { data } = await axios.get(`/current-subscriber`);
      if (data.ok) {
        setLoading(false);
      }
    } catch (err) {
      router.push("/");
    }
  };

  return loading ? (
    <LoadingToRedirect />
  ) : (
    <Layout>
      <SubscriberNav />

      <Layout>
        <Content
          style={{
            margin: "16px 16px",
            overflow: "auto",
            height: "100vh",
            // position: "fixed",
            marginTop: 54,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default SubscriberLayout;
```

```js
// pages/subscriber/index
import SubscriberLayout from "../../components/layout/SubscriberLayout";

const Subscriber = () => {
  return (
    <SubscriberLayout>
      <h1>Subscriber Dashboard</h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti in
        delectus dicta maxime debitis ipsum, obcaecati vitae alias numquam culpa
        itaque possimus, dolorum corporis tempore assumenda nobis doloremque,
        sapiente saepe!
      </p>
    </SubscriberLayout>
  );
};

export default Subscriber;
```

```js
// pages/subscriber/comments
import SubscriberLayout from "../../components/layout/SubscriberLayout";

const Comments = () => {
  return (
    <SubscriberLayout>
      <h1>Subscriber Dashboard</h1>
      <p>Comments...</p>
    </SubscriberLayout>
  );
};

export default Comments;
```

```js
// pages/subscriber/profile
import SubscriberLayout from "../../components/layout/SubscriberLayout";

const Comments = () => {
  return (
    <SubscriberLayout>
      <h1>Subscriber Dashboard</h1>
      <p>Profile...</p>
    </SubscriberLayout>
  );
};

export default Comments;
```

Subscriber dashboard

Show list of users for admin to view and allow update/delete 

![Show list of users using ant design list component](https://tutorial-image-bucket.s3.amazonaws.com/xqR26zmnCMXVog0SGd78N.jpeg)

```js
// pages/admin/users
import { useState, useEffect, useContext } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, List, Avatar } from "antd";
import axios from "axios";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import Link from "next/link";
import { AuthContext } from "../../../context/auth";

const AllUsers = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // console.log(auth);
  // hooks
  const router = useRouter();
  // state
  const [users, setUsers] = useState("");

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

  const loadUsers = async () => {
    try {
      const { data } = await axios.get("/users");
      setUsers(data);
    } catch (err) {
      console.log(err);
    }
  };

  const handleDelete = async (item) => {
    if (item._id === auth.user._id) {
      alert("You can not delete yourself");
      return;
    }
  };

  return (
    <AdminLayout>
      <Row>
        <Col span={24}>
          <h4 style={{ marginBottom: "-10px" }}>All users</h4>
          <br />

          <List
            itemLayout="horizontal"
            dataSource={users}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <Link href={`/admin/users/${item._id}`}>
                    <a>edit</a>
                  </Link>,
                  <a
                    onClick={() => handleDelete(item)}
                    disabled={item._id === auth.user._id}
                  >
                    delete
                  </a>,
                ]}
              >
                <Avatar src={item.image?.url}>{item.name[0]}</Avatar>
                <List.Item.Meta title={item.name} style={{ marginLeft: 10 }} />
                <List.Item.Meta
                  description={item.email}
                  style={{ marginLeft: 10 }}
                />
                <List.Item.Meta
                  description={item.role}
                  style={{ marginLeft: 10 }}
                />
                <List.Item.Meta
                  description={`${item.posts.length} post`}
                  style={{ marginLeft: 10 }}
                />
              </List.Item>
            )}
          />
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default AllUsers;
```

Make sure you have `posts` property added to `User` model and each time a post is created, you updated the user's `posts` property with `post._id` 

Update `createPost` controller

```js
// save post
    setTimeout(async () => {
      const newPost = await new Post({
        ...req.body,
        slug: slugify(title),
        categories: ids,
        postedBy: req.user._id,
      }).save();

      // push post id to user's posts array
      await User.findByIdAndUpdate(req.user._id, {
        $addToSet: { posts: newPost._id },
      });
      return res.json(newPost);
    }, 1000);
``

```js
// models/user
posts: [{ type: ObjectId, ref: "Post" }],

// route
router.get("/users", requireSignin, isAdmin, users);

// controller
export const users = async (req, res) => {
  try {
    const users = await User.find().select("-password -secret -resetCode");
    res.json(users);
  } catch (err) {
    console.log(err);
  }
};
```

All users list for admin

```js
// route
router.delete("/user/:userId", requireSignin, isAdmin, removeUser);
// controller
export const removeUser = async (req, res) => {
  try {
    const { userId } = req.params;
    if (userId === req.user._id) return; // cant delete yourself
    const user = await User.findByIdAndDelete(userId);
    res.json(user);
  } catch (err) {
    console.log(err);
  }
};
```

```js
  const handleDelete = async (item) => {
    if (item._id === auth.user._id) {
      alert("You can not delete yourself");
      return;
    }
    try {
      const { data } = await axios.delete(`/user/${item._id}`);
      if (data?.error) {
        toast.error(data.error);
      } else {
        console.log("user deleted", data);
        setUsers((previousUsers) =>
          previousUsers.filter((user) => user._id !== data._id)
        );
        toast.success("User deleted successfully");
      }
    } catch (err) {
      console.log(err);
    }
  };
```

Delete user by admin

### Update auth context
```js
// add profile property
  const [auth, setAuth] = useState({
    user: null,
    token: "",
    profile: {
      name: "",
      email: "",
      website: "",
      password: "",
      role: "",
    },
  });
```

To populate and make changes to the updating user data, we will use context state so that it's easy to re-use the component in many pages (for example admin can use it to update other users profile while each user can use the same component to update their profile)

```js
// admin/users/[id].js
  useEffect(() => {
    if (auth?.token) loadUser();
  }, [id, auth?.token]);

  const loadUser = async () => {
    try {
      const { data } = await axios.get(`/user/${id}`);
      setAuth({ ...auth, profile: data });
    } catch (err) {
      console.log(err);
    }
  };
```

### Server
We need 2 different endpoints to update user. One for all users including admin to update their own profile. The other is for admins to update other users profile (including their role)

```js
// route
router.put("/update-user", requireSignin, updateUser);
router.put("/update-user-by-admin", requireSignin, isAdmin, updateUserByAdmin);
// controller
export const updateUser = async (req, res) => {
  try {
    const { id, name, email, password, website } = req.body;

    const userFromDb = await User.findById(id);
    if (userFromDb._id.toString() !== req.user._id.toString()) {
      return res.json({ error: "Unauthorized" });
    }

    // check valid email
    if (!emailValidator.validate(email)) {
      return res.json({ error: "Invalid email" });
    }

    // check if email is taken
    const exist = await User.findOne({ email });
    if (exist && exist._id.toString() !== userFromDb._id.toString()) {
      return res.json({ error: "Email is taken" });
    }

    // check password length
    if (password && password.length < 6) {
      return res.json({
        error: "Password is required and should be 6 characters long",
      });
    }

    const hashedPassword = password ? await hashPassword(password) : undefined;
    const updated = await User.findByIdAndUpdate(
      id,
      {
        name: name || userFromDb.name,
        email: email || userFromDb.email,
        password: hashedPassword || userFromDb.password,
        website: website || userFromDb.website,
      },
      { new: true }
    );
    // console.log("updated user", updated);
    res.json(updated);
  } catch (err) {
    res.sendStatus(400);
    console.log(err);
  }
};

export const updateUserByAdmin = async (req, res) => {
  try {
    const { id, name, email, password, website, role } = req.body;

    const userFromDb = await User.findById(id);

    // check valid email
    if (!emailValidator.validate(email)) {
      return res.json({ error: "Invalid email" });
    }

    // check if email is taken
    const exist = await User.findOne({ email });
    if (exist && exist._id.toString() !== userFromDb._id.toString()) {
      return res.json({ error: "Email is taken" });
    }

    // check password length
    if (password && password.length < 6) {
      return res.json({
        error: "Password is required and should be 6 characters long",
      });
    }

    const hashedPassword = password ? await hashPassword(password) : undefined;
    const updated = await User.findByIdAndUpdate(
      id,
      {
        name: name || userFromDb.name,
        email: email || userFromDb.email,
        password: hashedPassword || userFromDb.password,
        website: website || userFromDb.website,
        role: role || userFromDb.role,
      },
      { new: true }
    );
    // console.log("updated user", updated);
    res.json(updated);
  } catch (err) {
    res.sendStatus(400);
    console.log(err);
  }
};
```
### Client

Pass props `title` from `/admin/users/[id].js` to `ProfileUpdate` component

```js
<ProfileUpdate title="Edit profile" user={user} />
```

```js
// components/user/ProfileUpdate
import { useState, useEffect, useContext } from "react";
import { Row, Col, Button, Modal, Input, Upload, Image, Checkbox } from "antd";
import { AuthContext } from "../../context/auth";
import axios from "axios";
import { Select, Typography } from "antd";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import generator from "generate-password";

const { Option } = Select;

// admin-updating-themself
// admin-updating-users
// users-updating-themself
const ProfileUpdate = ({ title }) => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();
  // console.log("ROUTER QUERY =>", router);
  // state
  const [id, setId] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [website, setWebsite] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState("");
  const [loading, setLoading] = useState(false);
  // to show/hide roles
  const [showRoles, setShowRoles] = useState(false);

  useEffect(() => {
    setName(auth.profile?.name);
    setEmail(auth.profile?.email);
    setWebsite(auth.profile?.website);
    setRole(auth.profile?.role);
    setId(auth.profile?._id);
  }, [auth]);

  useEffect(() => {
    if (router.query?.routename === "update-user-by-admin") {
      setShowRoles(true);
    }
  }, [router.query?.routename]);

  const handleSubmit = async () => {
    try {
      setLoading(true);
      const { data } = await axios.put(`/${router.query.routename}`, {
        id,
        name,
        email,
        website,
        password,
        role,
      });
      // console.log("PROFILE UPDATED => ", data);
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        console.log("data => ", data);
        setName(data.name);
        setEmail(data.email);
        setWebsite(data.website);
        setRole(data.role);
        setId(data._id);
        // update context and local storage
        setAuth({ ...auth, user: data });
        let fromLocalStorage = JSON.parse(localStorage.getItem("auth"));
        fromLocalStorage.user = data.user;
        localStorage.setItem("auth", JSON.stringify(fromLocalStorage));
        toast.success("Profile updated successfully");
        setLoading(false);
      }
    } catch (err) {
      console.log(err);
      toast.error("Profile update failed. Try again.");
      setLoading(false);
    }
  };

  return (
    <Row>
      <Col span={12} offset={6}>
        <h4 style={{ marginBottom: "-10px" }}>{title}</h4>
        <Input
          style={{ margin: "20px 0px 10px 0px" }}
          size="large"
          placeholder="Full name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <Input
          style={{ margin: "10px 0px 10px 0px" }}
          size="large"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Input
          style={{ margin: "10px 0px 10px 0px" }}
          size="large"
          placeholder="Website"
          value={website}
          onChange={(e) => setWebsite(e.target.value)}
        />

        <div style={{ display: "flex" }}>
          <Input.Password
            style={{ margin: "10px 0px 10px 0px" }}
            size="large"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        {showRoles && (
          <Select
            value={role}
            style={{ width: "100%", margin: "10px 0px 10px 0px" }}
            onChange={(v) => setRole(v)}
          >
            <Option value="Subscriber">Subscriber</Option>
            <Option value="Author">Author</Option>
            <Option value="Admin">Admin</Option>
          </Select>
        )}

        <Button
          onClick={handleSubmit}
          type="default"
          htmlType="submit"
          style={{ margin: "10px 0px 10px 0" }}
          loading={loading}
          block
        >
          Submit
        </Button>
      </Col>
    </Row>
  );
};

export default ProfileUpdate;

```

Pass the endpoint using route query so that if admin is trying to update other user's profile it will make to reach correct endpoint in the backend

```js
// admin/users/index.js
  const dynamicRoutename = (user) =>
    user._id === auth.user._id ? "update-user" : "update-user-by-admin";

<Link
  href={{
    pathname: `/admin/users/${item._id}`,
    query: { routename: dynamicRoutename(item) },
  }}
>
  <a>edit</a>
</Link>,
```


User profile update

```js
// components/nav/AuthorNav
<Menu.Item key="17" icon={<UserOutlined />}>
  <Link
    href={{
      pathname: `/author/${auth.user?._id}`,
      query: { routename: "update-user" },
    }}
  >
    <a className={activeName(`/author/${auth.user?._id}`)}>Profile</a>
  </Link>
</Menu.Item>
```

```js
// author/[id].js
import AuthorLayout from "../../components/layout/AuthorLayout";
import { useState, useEffect, useContext } from "react";
import { Row, Col, List, Avatar } from "antd";
import axios from "axios";
import toast from "react-hot-toast";
import { AuthContext } from "../../context/auth";
import { useRouter } from "next/router";
import ProfileUpdate from "../../components/user/ProfileUpdate";

const AuthorProfile = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const router = useRouter();
  const { id } = router.query;

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

  const loadUser = async () => {
    try {
      const { data } = await axios.get(`/user/${id}`);
      setAuth({ ...auth, profile: data });
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <AuthorLayout>
      <ProfileUpdate title="Edit profile" />
    </AuthorLayout>
  );
};

export default AuthorProfile;
```

Repeat the same process for subscribers and admin (on their nav link > Profile)

Allow users (author and subscribers) to update profile

 ![load more feature in react node mern stack](https://tutorial-image-bucket.s3.amazonaws.com/s0Qry3WfZceciqjVLHNKn.jpeg)

Add load more posts feature. For testing purpose we will load only 3 posts at first load. Then each time Load More button is clicked, we fetch additional posts and render.

```js
// route
router.get("/posts/:page", posts);
// controller updated
export const posts = async (req, res) => {
  try {
    const perPage = 3;
    const page = req.params.page ? req.params.page : 1;

    const posts = await Post.find({})
      .skip((page - 1) * perPage)
      .populate("postedBy", "_id name")
      .populate("categories", "_id name slug")
      .populate("featuredImage", "url")
      .sort({ createdAt: -1 })
      .limit(perPage)
      .exec();
    return res.json(posts);
  } catch (err) {
    console.log(err);
  }
};
```

Posts page

```js
import { useEffect, useState } from "react";
import axios from "axios";
import { Card, Row, Col, Avatar, Button } from "antd";
import Head from "next/head";
import Link from "next/link";

const { Meta } = Card;

const Posts = ({ posts }) => {
  const [allPosts, setAllPosts] = useState(posts);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

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

  useEffect(() => {
    if (page === 1) return;
    loadMore();
  }, [page]);

  const getTotal = async () => {
    try {
      const { data } = await axios.get("/post-count");
      setTotal(data);
    } catch (err) {
      console.log(err);
    }
  };

  const loadMore = async () => {
    try {
      setLoading(true);
      const { data } = await axios.get(`/posts/${page}`);
      setAllPosts([...allPosts, ...data]);
      setLoading(false);
    } catch (err) {
      setLoading(false);
      console.log(err);
    }
  };

  return (
    <>
      <Head>
        <title>Recent blog posts</title>
        <meta
          name="description"
          content="Blog posts about web development, programming, and more."
        />
      </Head>
      <div style={{ marginTop: "60px" }}></div>
      <Row gutter={12}>
        {allPosts.map((post) => (
          <Col xs={24} xl={8} style={{ marginBottom: 12 }}>
            <Link href={`/post/${post.slug}`}>
              <a>
                <Card
                  hoverable
                  cover={
                    <Avatar
                      shape="square"
                      style={{ height: "200px" }}
                      src={
                        post.featuredImage?.url ||
                        "https://via.placeholder.com/1200x800.png?text=..."
                      }
                      alt={post.title}
                    />
                  }
                >
                  <Meta title={post.title} />
                </Card>
              </a>
            </Link>
          </Col>
        ))}
      </Row>

      <Row>
        <Col span={24} style={{ textAlign: "center" }}>
          {allPosts?.length < total && (
            <div style={{ padding: 50 }}>
              <Button
                size="large"
                type="primary"
                loading={loading}
                onClick={() => setPage(page + 1)}
              >
                Load More
              </Button>
            </div>
          )}
        </Col>
      </Row>
    </>
  );
};

export async function getServerSideProps() {
  const { data } = await axios.get(`${process.env.API}/posts/1`);
  // console.log("DATA =====> ", data.length);
  return {
    props: {
      posts: data,
    },
  };
}

export default Posts;
```

Load more posts

```js
// pages/admin/posts
// state
const [keyword, setKeyword] = useState("");
// search input
<Input
placeholder="Search"
type="search"
value={keyword}
onChange={(e) => setKeyword(e.target.value.toLowerCase())}
/>
// render filtered results based on keyword
<PostsList
posts={posts.filter((post) =>
    post.title.toLowerCase().includes(keyword)
)}
handleDelete={handleDelete}
/>
```

Repeat the same process in `admin/users/index`

```js
 const filteredUsers =
    users && users.filter((user) => user.name.toLowerCase().includes(keyword));

<Input
    placeholder="Search"
    type="search"
    value={keyword}
    onChange={(e) => setKeyword(e.target.value.toLowerCase())}
/>

<List
    itemLayout="horizontal"
    dataSource={filteredUsers}
    renderItem={(item) => (
    {/* rest of code */}
```

Searching/filtering posts and users

```js
// route
router.post("/comment/:postId", requireSignin, createComment);
// controller
export const createComment = async (req, res) => {
  // console.log(req.body);
  try {
    const { postId } = req.params;
    const { comment } = req.body;
    let created = await new Comment({
      content: comment,
      postId,
      postedBy: req.user._id,
    }).save();
    created = await created.populate("postedBy", "_id name");
    res.json(created);
  } catch (err) {
    console.log(err);
  }
};
```

```js
// components/comments/CommentForm.js
import { useContext } from "react";
import { Input, Button } from "antd";
import { AuthContext } from "../../context/auth";
import Link from "next/link";

const { TextArea } = Input;

const CommentForm = ({ handleSubmit, comment, setComment, loading }) => {
  // context
  const [auth, setAuth] = useContext(AuthContext);

  console.log(auth);
  return (
    <>
      <TextArea
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        disabled={auth.user === null && auth.token === ""}
        rows={4}
        placeholder="Leave a comment"
        maxLength={200}
      />
      <Button
        onClick={handleSubmit}
        disabled={(auth.user === null && auth.token === "") || comment === ""}
        type="primary"
        loading={loading}
        style={{ marginTop: 4 }}
      >
        Post
      </Button>
    </>
  );
};

export default CommentForm;
```

Now import and use in `post/[slug].js`

```js
{auth.user === null && auth.token === "" ? (
<Link href="/signin">
    <a>Login to comment</a>
</Link>
) : (
<h3>{comments.length} Comments</h3>
)}

<CommentForm
    handleSubmit={handleSubmit}
    comment={comment}
    setComment={setComment}
    loading={loading}
/>

// state and functions
// state
  const [comment, setComment] = useState("");
  const [comments, setComments] = useState(postComments);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    try {
      setLoading(true);
      const { data } = await axios.post(`/comment/${post._id}`, { comment });
      console.log("comment posted", data);
      setComment("");
      setComments([data, ...comments]);
      toast.success("Comment posted successfully");
      setLoading(false);
    } catch (err) {
      console.log(err);
      toast.error("Comment post failed. Try again.");
      setLoading(false);
    }
  };

// render list of comments for posts
// modify `singlePost` controller function to send post comments too
export const singlePost = async (req, res) => {
  try {
    const { slug } = req.params;
    const post = await Post.findOne({ slug })
      .populate("postedBy", "_id name")
      .populate("categories", "_id name slug")
      .populate("featuredImage", "_id url");
    // comments
    const comments = await Comment.find({ postId: post._id })
      .populate("postedBy", "_id name")
      .sort({ createdAt: -1 });
    return res.json({ post, comments });
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};
```

Since our controller for single post is modified (returns posts and comments), update your code in post create and update components:
```js
const { title, content, featuredImage } = data.post;
```


Add comments to each post

### Server

```js
// routes
router.get("/comments/:page", requireSignin, isAdmin, comments);
router.get("/comment-count", commentCount);
router.delete(
  "/comment/:commentId",
  requireSignin,
  canUpdateDeleteComment,
  removeComment
);
// middleware
export const canUpdateDeleteComment = async (req, res, next) => {
  try {
    const { commentId } = req.params;
    const comment = await Comment.findById(commentId);

    // you get req.user._id from verified jwt token
    const user = await User.findById(req.user._id);
    console.log("canUpdateDeleteUser comment ===> ", comment, user);
    switch (user.role) {
      case "Admin":
        next();
        break;
      case "Author":
        if (comment.postedBy.toString() === req.user._id.toString()) {
          next();
        }
        break;
      case "Subscriber":
        if (comment.postedBy.toString() === req.user._id.toString()) {
          next();
        }
        break;
      default:
        return res.status(400).send("Unauthorized");
    }
  } catch (err) {
    console.log(err);
  }
};
// controllers
export const comments = async (req, res) => {
  try {
    console.log(req.params);
    const perPage = 3;
    const page = req.params.page ? req.params.page : 1;

    const comments = await Comment.find({})
      .skip((page - 1) * perPage)
      .populate("postedBy", "_id name")
      .populate("postId", "title slug")
      .sort({ createdAt: -1 })
      .limit(perPage)
      .exec();
    return res.json(comments);
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};

export const commentCount = async (req, res) => {
  try {
    const count = await Comment.countDocuments();
    return res.json(count);
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};

export const removeComment = async (req, res) => {
  try {
    const { commentId } = req.params;
    const comment = await Comment.findByIdAndDelete(commentId);
    return res.json({ ok: true });
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};
```

### Client

```js
import { useState, useEffect, useContext } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Button, List, Input } from "antd";
import axios from "axios";
import { AuthContext } from "../../../context/auth";
import toast from "react-hot-toast";
import Link from "next/link";
import dayjs from "dayjs";
var localizedFormat = require("dayjs/plugin/localizedFormat");

dayjs.extend(localizedFormat);

const Comments = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  // state
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(false);
  const [keyword, setKeyword] = useState("");
  console.log("comments.length, total", comments.length, total);

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

  useEffect(() => {
    if (page === 1) return;
    if (auth?.token) loadMore();
  }, [page, auth?.token]);

  const fetchComments = async () => {
    try {
      const { data } = await axios.get(`/comments/${page}`);
      setComments(data);
    } catch (err) {
      console.log(err);
    }
  };

  const getTotal = async () => {
    try {
      const { data } = await axios.get("/comment-count");
      setTotal(data);
    } catch (err) {
      console.log(err);
    }
  };

  const loadMore = async () => {
    try {
      const { data } = await axios.get(`/comments/${page}`);
      setComments([...comments, ...data]);
    } catch (err) {
      console.log(err);
    }
  };

  const handleDelete = async (comment) => {
    try {
      const answer = window.confirm("Are you sure you want to delete?");
      if (!answer) return;
      const { data } = await axios.delete(`/comment/${comment._id}`);
      console.log("DATATATA => ", data);
      if (data.ok) {
        setComments(comments.filter((c) => c._id !== comment._id));
        setTotal(total - 1);
        toast.success("Comment deleted successfully");
      }
    } catch (err) {
      console.log(err);
      toast.error("Delete failed. Try again.");
    }
  };

  const filteredComments =
    comments &&
    comments.filter((c) => c.content.toLowerCase().includes(keyword));

  return (
    <AdminLayout>
      <Row>
        <Col span={24}>
          <h1>{comments?.length} Comments</h1>

          <Input
            placeholder="Search"
            type="search"
            value={keyword}
            onChange={(e) => setKeyword(e.target.value.toLowerCase())}
          />

          <List
            style={{ marginTop: 20 }}
            itemLayout="horizontal"
            dataSource={filteredComments}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <Link href={`/post/${item.postId.slug}#${item._id}`}>
                    <a>view</a>
                  </Link>,
                  <a onClick={() => handleDelete(item)}>delete</a>,
                ]}
              >
                <List.Item.Meta
                  description={`On ${item.postId.title} | ${
                    item.postedBy.name
                  } | ${dayjs(item.createdAt).format("L LT")}`}
                  title={item.content}
                />
              </List.Item>
            )}
          />
        </Col>
      </Row>

      <Row>
        <Col span={24} style={{ textAlign: "center" }}>
          {/* {comments?.length < total && ( */}
          {page * 3 < total && (
            <div style={{ padding: 50 }}>
              <Button
                size="large"
                type="primary"
                loading={loading}
                onClick={() => setPage(page + 1)}
              >
                Load More
              </Button>
            </div>
          )}
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default Comments;
```

Comments management by admin

```js
<div
    className="editor-scroll"
    style={{ height: "500px", overflow: "scroll" }}
>
    <Editor
    style={{ width: "100%" }}
    dark={theme === "light" ? false : true}
    placeholder="Write something..."
    defaultValue={content}
    // defaultValue="Write something..."
    uploadImage={uploadImage}
    onChange={(v) => handleContent(v())}
    />
</div>
```

```css
/* hide scrollbar */
.editor-scroll::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.editor-scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
```

Scrollable rich markdown editor for bigger content

### Server

```js
// routes
router.get("/user-comments", requireSignin, userComments);
router.put(
  "/comment/:commentId",
  requireSignin,
  canUpdateDeleteComment,
  updateComment
);
// controller
export const userComments = async (req, res) => {
  try {
    const comments = await Comment.find({ postedBy: req.user._id })
      .populate("postedBy", "_id name")
      .populate("postId", "title slug")
      .sort({ createdAt: -1 })
      .exec();
    return res.json(comments);
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};

export const updateComment = async (req, res) => {
  // console.log("update comment", req.body);
  try {
    const { commentId } = req.params;
    const { content } = req.body;

    const updated = await Comment.findByIdAndUpdate(
      commentId,
      { content },
      { new: true }
    );
    console.log("comment updated", updated);
    return res.json(updated);
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};
```

### Client

```js
// components/comments/UserComments.js
import { useState, useEffect, useContext } from "react";
import { Row, Col, Button, List, Input, Modal } from "antd";
import axios from "axios";
import { AuthContext } from "../../context/auth";
import toast from "react-hot-toast";
import Link from "next/link";
import CommentForm from "./CommentForm";
import dayjs from "dayjs";
var localizedFormat = require("dayjs/plugin/localizedFormat");

dayjs.extend(localizedFormat);

const UserComments = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  const [page, setPage] = useState(1);
  // state
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(false);
  const [keyword, setKeyword] = useState("");
  // update
  const [selectedComment, setSelectedComment] = useState({});
  const [content, setContent] = useState("");
  const [visible, setVisible] = useState(false);

  // console.log("comments.length, total", comments.length, total);

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

  const fetchComments = async () => {
    try {
      const { data } = await axios.get(`/user-comments`);
      setComments(data);
    } catch (err) {
      console.log(err);
    }
  };

  const handleDelete = async (comment) => {
    try {
      const answer = window.confirm("Are you sure you want to delete?");
      if (!answer) return;
      const { data } = await axios.delete(`/comment/${comment._id}`);
      console.log("DATATATA => ", data);
      if (data.ok) {
        setComments(comments.filter((c) => c._id !== comment._id));
        toast.success("Comment deleted successfully");
      }
    } catch (err) {
      console.log(err);
      toast.error("Delete failed. Try again.");
    }
  };

  const handleSubmit = async () => {
    console.log("selectedComment", selectedComment);
    try {
      setLoading(true);
      const { data } = await axios.put(`/comment/${selectedComment._id}`, {
        content,
      });

      // console.log("comment updated", data);
      let arr = comments;
      const index = arr.findIndex((el) => el._id === data._id);
      arr[index].content = data.content;
      setComments(arr);

      toast.success("Comment updated");
      setLoading(false);
      setVisible(false);
      setSelectedComment({});
    } catch (err) {
      console.log(err);
      toast.error("Comment post failed. Try again.");
      setLoading(false);
    }
  };

  const filteredComments =
    comments &&
    comments.filter((c) => c.content.toLowerCase().includes(keyword));

  return (
    <>
      <Row>
        <Col span={24}>
          <h1>{comments?.length} Comments</h1>

          <Input
            placeholder="Search"
            type="search"
            value={keyword}
            onChange={(e) => setKeyword(e.target.value.toLowerCase())}
          />

          <List
            style={{ marginTop: 20 }}
            itemLayout="horizontal"
            dataSource={filteredComments}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <Link href={`/post/${item.postId.slug}#${item._id}`}>
                    <a>view</a>
                  </Link>,
                  <a
                    onClick={() => {
                      setVisible(true);
                      setSelectedComment(item);
                      setContent(item.content);
                    }}
                  >
                    edit
                  </a>,
                  <a onClick={() => handleDelete(item)}>delete</a>,
                ]}
              >
                <List.Item.Meta
                  description={`On ${item.postId.title} | ${
                    item.postedBy.name
                  } | ${dayjs(item.createdAt).format("L LT")}`}
                  title={item.content}
                />
              </List.Item>
            )}
          />
        </Col>
      </Row>

      <Row>
        <Col span="24">
          <Modal
            onOk={() => setVisible(false)}
            onCancel={() => setVisible(false)}
            visible={visible}
            title="Update comment"
            footer={null}
          >
            <CommentForm
              handleSubmit={handleSubmit}
              comment={content}
              setComment={setContent}
              loading={loading}
            />
          </Modal>
        </Col>
      </Row>
    </>
  );
};

export default UserComments;
```

Now import `UserComments` in author and subscriber dashboard to show each user's comments and allow them to view, update or delete those comments.

```js
// pages/author/comments.js
import AuthorLayout from "../../components/layout/AuthorLayout";
import UserComments from "../../components/comment/UserComments";

const Comments = () => {
  return (
    <AuthorLayout>
      <UserComments />
    </AuthorLayout>
  );
};

export default Comments;

// pages/subscriber/comments.js
import SubscriberLayout from "../../components/layout/SubscriberLayout";
import UserComments from "../../components/comment/UserComments";

const Comments = () => {
  return (
    <SubscriberLayout>
      <UserComments />
    </SubscriberLayout>
  );
};

export default Comments;
```

Show comments list in users dashboard

```js
// components/user/ProfileUpdate.js
import { useState, useEffect, useContext } from "react";
import { Row, Col, Button, Input, Image, Avatar } from "antd";
import { AuthContext } from "../../context/auth";
import axios from "axios";
import { Select, Typography } from "antd";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import Media from "../media/Media";
import { MediaContext } from "../../context/media";

const { Option } = Select;

const ProfileUpdate = ({ title }) => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  const [media, setMedia] = useContext(MediaContext);
  // hooks
  const router = useRouter();
  // console.log("ROUTER QUERY =>", router);
  // state
  const [id, setId] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [website, setWebsite] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState("");
  const [image, setImage] = useState("");
  const [loading, setLoading] = useState(false);
  // to show/hide roles
  const [showRoles, setShowRoles] = useState(false);

  useEffect(() => {
    const currentUser = async () => {
      try {
        const { data } = await axios.get(`/current-user`);
        // console.log("current user", data);
        setName(data.name);
        setEmail(data.email);
        setWebsite(data.website);
        setRole(data.role);
        setId(data._id);
        setImage(data.image);
      } catch (err) {
        console.log(err);
      }
    };
    if (auth?.token) currentUser();
  }, [auth]);

  useEffect(() => {
    if (router.query?.routename === "update-user-by-admin") {
      setShowRoles(true);
    }
  }, [router.query?.routename]);

  const handleSubmit = async () => {
    try {
      setLoading(true);
      const { data } = await axios.put(`/${router.query.routename}`, {
        id,
        name,
        email,
        website,
        password,
        role,
        // make sure to use .populate('image') in controller currentUser response
        image: media?.selected?._id
          ? media.selected._id
          : image?._id
          ? image._id
          : undefined,
      });
      // console.log("PROFILE UPDATED => ", data);
      if (data?.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        console.log("data on update profile => ", data);
        // update context and local storage
        setAuth({ ...auth, user: data });

        let fromLocalStorage = JSON.parse(localStorage.getItem("auth"));
        fromLocalStorage.user = data;
        localStorage.setItem("auth", JSON.stringify(fromLocalStorage));

        toast.success("Profile updated successfully");
        setLoading(false);
      }
    } catch (err) {
      console.log(err);
      toast.error("Profile update failed. Try again.");
      setLoading(false);
    }
  };

  return (
    <Row>
      <Col span={12} offset={6}>
        <h4>{title}</h4>

        <div style={{ marginBottom: 20, textAlign: "center" }}>
          {media.selected ? (
            <>
              <div style={{ marginBottom: 15 }}></div>

              <Avatar src={media.selected.url} size={100} />
            </>
          ) : image ? (
            <>
              <div style={{ marginBottom: 15 }}></div>

              <Avatar src={image.url} size={100} />
            </>
          ) : (
            ""
          )}
        </div>

        {auth.user?.role !== "Subscriber" && <Media />}
        <Input
          style={{ margin: "20px 0px 10px 0px" }}
          size="large"
          placeholder="Full name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <Input
          style={{ margin: "10px 0px 10px 0px" }}
          size="large"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Input
          style={{ margin: "10px 0px 10px 0px" }}
          size="large"
          placeholder="Website"
          value={website}
          onChange={(e) => setWebsite(e.target.value)}
        />

        <div style={{ display: "flex" }}>
          <Input.Password
            style={{ margin: "10px 0px 10px 0px" }}
            size="large"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        {showRoles && (
          <Select
            value={role}
            style={{ width: "100%", margin: "10px 0px 10px 0px" }}
            onChange={(v) => setRole(v)}
          >
            <Option value="Subscriber">Subscriber</Option>
            <Option value="Author">Author</Option>
            <Option value="Admin">Admin</Option>
          </Select>
        )}

        <Button
          onClick={handleSubmit}
          type="default"
          htmlType="submit"
          style={{ margin: "10px 0px 10px 0" }}
          loading={loading}
          block
        >
          Submit
        </Button>
      </Col>
    </Row>
  );
};

export default ProfileUpdate;
```

Profile update with image upload

### Server
```js
// routes/website.js
const express = require("express");

const router = express.Router();

// controllers
import { contact } from "../controllers/website";

router.post("/contact", contact);

module.exports = router;

// controllers/website.js
export const contact = async (req, res) => {
  try {
    // console.log(req.body);
    const { name, email, message } = req.body;
    // prepare email
    const emailData = {
      from: process.env.EMAIL_FROM,
      to: process.env.EMAIL_TO,
      subject: "Email received from contact form",
      html: `
      <h3>Contact form message</h3>
      <p><u>Name</u></p>
      <p>${name}</p>
      <p><u>Email</u></p>
      <p>Email: ${email}</p>
      <p><u>Message</u></p>
      <p>${message}</p>
      `,
    };
    // send email
    try {
      const data = await sgMail.send(emailData);
      console.log(data);
      res.json({ ok: true });
    } catch (err) {
      console.log(err);
      res.json({ ok: false });
    }
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};
```

### Client

```js
// components/forms/ContactForm.js
import { useState } from "react";
import { Form, Input, Button } from "antd";
import { UserOutlined, MailOutlined, MessageOutlined } from "@ant-design/icons";
import toast from "react-hot-toast";
import axios from "axios";
import { useRouter } from "next/router";

const Contact = () => {
  // state
  const [loading, setLoading] = useState(false);
  // hooks
  const router = useRouter();
  const [form] = Form.useForm();

  const onFinish = async (values) => {
    console.log("Success:", values);
    try {
      setLoading(true);
      const { data } = await axios.post(`/contact`, values);
      console.log(data);
      if (data.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success("Your message has been sent.");
        form.resetFields();
        setLoading(false);
        // empty the form fileds
        // router.push("/");
      }
    } catch (err) {
      toast.error("Form submit failed. Try again.");
      console.log(err);
      setLoading(false);
    }
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="name"
        rules={[
          {
            required: true,
            message: "Please enter your name!",
          },
        ]}
        hasFeedback
      >
        <Input prefix={<UserOutlined />} placeholder="Your name" />
      </Form.Item>

      <Form.Item
        name="email"
        rules={[
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
        hasFeedback
      >
        <Input prefix={<MailOutlined />} placeholder="Your email" />
      </Form.Item>

      <Form.Item
        name="message"
        rules={[
          {
            required: true,
            message: "Please write your message",
          },
        ]}
        hasFeedback
      >
        <Input.TextArea placeholder="Write your message here.." />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Contact;
```

```js
// pages/contact
import { Row, Col } from "antd";
import ContactForm from "../components/forms/ContactForm";

const Contact = () => {
  return (
    <Row>
      <Col span={12} offset={6} style={{ paddingTop: "10%" }}>
        <ContactForm />
      </Col>
    </Row>
  );
};

export default Contact;
```

Create contact form and send email using Sendgrid

![Screen Shot 2022-03-03 at 10.57.27 PM](https://tutorial-image-bucket.s3.amazonaws.com/vQJeLlSXgr9189eTGLVaT.jpeg)

```js
npm i react-share-social
```

```js
// now use it in single post page
// pages/post/[slug].js

import { ShareSocial } from "react-share-social";

 <div style={{ marginTop: "-20px", marginBottom: "15px" }}>
  <ShareSocial
    url={process.browser && window.location.href}
    socialTypes={["facebook", "twitter", "reddit", "linkedin"]}
    style={{
      height: "100px",
      overflow: "hidden",
      background: "none",
    }}
  />
</div>
```

Social share buttons on post page

 ![Screen Shot 2022-03-06 at 2.24.07 AM](https://tutorial-image-bucket.s3.amazonaws.com/ZbSWRiaZF1cF9IA2U1l4s.jpeg)

### Server

```js
// route
router.get("/numbers", requireSignin, isAdmin, getNumbers);
// controller
export const getNumbers = async (req, res) => {
  try {
    const posts = await Post.countDocuments();
    const users = await User.countDocuments();
    const comments = await Comment.countDocuments();
    return res.json({
      posts,
      users,
      comments,
    });
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};
```

## Client

```js
// pages/admin/index
import { useEffect, useState, useContext } from "react";
import { Row, Col, Progress } from "antd";
import AdminLayout from "../../components/layout/AdminLayout";
import { AuthContext } from "../../context/auth";
import CountTo from "react-count-to";
import Link from "next/link";
import axios from "axios";

const Admin = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // state
  const [numbers, setNumbers] = useState({});
  // console.log("numbers", numbers);

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

  const getNumbers = async () => {
    try {
      const { data } = await axios.get("/numbers");
      console.log(data);
      setNumbers(data);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <AdminLayout>
      <Row>
        <Col
          span={8}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.posts}
            name="Posts"
            link="/admin/posts"
          />
        </Col>
        <Col
          span={8}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.comments}
            name="Comments"
            link="/admin/comments"
          />
        </Col>
        <Col
          span={8}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.users}
            name="Users"
            link="/admin/users"
          />
        </Col>
      </Row>
    </AdminLayout>
  );
};

const RenderProgress = ({
  color1 = "#108ee9",
  color2 = "#87d068",
  number,
  name,
  link = "#",
}) => (
  <Link href={link}>
    <a>
      <Progress
        type="circle"
        strokeColor={{
          "0%": color1,
          "100%": color2,
        }}
        percent={100}
        format={() => <CountTo to={number} speed={number * 100} />}
      />
      <p style={{ marginTop: 10 }}> {name}</p>
    </a>
  </Link>
);

export default Admin;
```

Show number of posts, comments and users in dashboard

 ![Show categories and recent posts in sidebar](https://tutorial-image-bucket.s3.amazonaws.com/oebPLOdTdn5T10DTjYeeJ.jpeg)

First create 2 hooks to fetch categories and posts.

```js
// hooks/useCategory
import { useState, useEffect } from "react";
import axios from "axios";

const useCategory = () => {
  // state
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const getCategories = async () => {
      try {
        const { data } = await axios.get("/categories");
        setCategories(data);
      } catch (err) {
        console.log(err);
      }
    };
    // execute
    getCategories();
  }, []);

  return {
    categories,
  };
};

export default useCategory;

// hooks/usePost
import { useState, useEffect } from "react";
import axios from "axios";

const usePost = () => {
  // state
  const [latestPosts, setLatestPosts] = useState([]);

  useEffect(() => {
    const getPosts = async () => {
      try {
        const { data } = await axios.get("/posts/1");
        setPosts(data);
      } catch (err) {
        console.log(err);
      }
    };
    // execute
    getPosts();
  }, []);

  return {
    posts,
  };
};

export default usePost;
```

Now import them and use in single post view

```js
// pages/post/[slug].js
import useCategory from "../../hooks/useCategory";
import usePost from "../../hooks/usePost";

const { categories } = useCategory();
const { latestPosts } = usePost();

{/* sidebar */}
<Col sm={24} lg={6}>
{/* categories */}

<Divider>Categories</Divider>
{categories.map((c) => (
  <Link href={`/category/${c.slug}`}>
    <a>
      <Button style={{ margin: 2 }} key={c._id}>
        {c.name}
      </Button>
    </a>
  </Link>
))}

{/* posts */}

<Divider>Recent Posts</Divider>
{latestPosts.map((p) => (
  <Link href={`/post/${p.slug}`}>
    <a>
      <h4 key={p._id}>{p.title}</h4>
    </a>
  </Link>
))}
</Col>
```

Full width image with text in center

To fetch the count numbers of posts, categories, users and comments and display in dashboard, create a hook and a component to render the data.

```js
// hooks/useNumbers
import { useEffect, useState, useContext } from "react";
import { AuthContext } from "../context/auth";
import axios from "axios";

const useNumbers = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // state
  const [numbers, setNumbers] = useState({});
  // console.log("numbers", numbers);

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

  const getNumbers = async () => {
    try {
      const { data } = await axios.get("/numbers");
      console.log(data);
      setNumbers(data);
    } catch (err) {
      console.log(err);
    }
  };

  return { numbers };
};

export default useNumbers;
```

```js
// components/pages/RenderProgress
import { Progress } from "antd";
import CountTo from "react-count-to";
import Link from "next/link";

const RenderProgress = ({
  color1 = "#8c1aff",
  color2 = "#ff6600",
  number,
  name,
  link = "#",
}) => (
  <Link href={link}>
    <a>
      <Progress
        type="circle"
        strokeColor={{
          "0%": color1,
          "100%": color2,
        }}
        percent={100}
        format={() => <CountTo to={number} speed={number * 100} />}
      />
      <p style={{ marginTop: 10 }}> {name}</p>
    </a>
  </Link>
);

export default RenderProgress;
```

```js
// pages/admin/index
import { Row, Col, Divider } from "antd";
import AdminLayout from "../../components/layout/AdminLayout";
import RenderProgress from "../../components/pages/RenderProgress";
import useNumbers from "../../hooks/useNumbers";

const Admin = () => {
  const { numbers } = useNumbers();

  return (
    <AdminLayout>
      <Row>
        <Col span={24}>
          <Divider>
            <h1>Statistics</h1>
          </Divider>
        </Col>
      </Row>
      <Row>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.posts}
            name="Posts"
            link="/admin/posts"
          />
        </Col>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.categories}
            name="Categories"
            link="/admin/categories"
          />
        </Col>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.comments}
            name="Comments"
            link="/admin/comments"
          />
        </Col>
        <Col
          span={12}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress
            number={numbers.users}
            name="Users"
            link="/admin/users"
          />
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default Admin;
```

Tutorials

Fullstack Quote Generator

React Node CMS