What I want? I want to add post that only login user post. This post only showing My Item component page. here is my all code. When I login and try to add post and then check my item component page. this page showing all of the post. app.get and Server url '/product' it's collect ```email object''' Thank you.

async function run() {
  try {
    await client.connect();
    const productCollection = client.db("data").collection("product");

    app.get("/product", async (req, res) => {
      const query = {};
      const cursor = productCollection.find(query);
      const products = await cursor.toArray();
      res.send(products);
    });

    app.get("/product", async (req, res) => {
      const email = req.query.email;
      const query = {email: email};
      const cursor = productCollection.find(query);
      const products = await cursor.toArray();
      res.send(products);
    });

    app.get("/product/:id", async (req, res) => {
      const id = req.params.id;
      const query = { _id: ObjectId(id) };
      const product = await productCollection.findOne(query);
      res.send(product);
    });

    app.post("/product", async (req, res) => {
      const newProduct = req.body;
      const result = await productCollection.insertOne(newProduct);
      res.send(result);
    });

    // DELETE
    app.delete("/product/:id", async (req, res) => {
      const id = req.params.id;
      const query = { _id: ObjectId(id) };
      const result = await productCollection.deleteOne(query);
      res.send(result);
    });

    app.put('/update-quantity/:id', async (req, res) => {
      const id = req.params.id;
      const updatedInventoryInfo = req.body;
      const filter = { _id: ObjectId(id) };
      const options = { upsert: true };
      const updatedDoc = {
          $set: {
              quantity: updatedInventoryInfo.quantity,
              sold: updatedInventoryInfo.sold
          }
      }
      const result = await productCollection.updateOne(filter, updatedDoc, options);
      res.send(result);
  })
  } finally {
  }
}

Client Side Code React Js

import axios from "axios";
import React, { useEffect } from "react";
import { Button, Col, Container, Row } from "react-bootstrap";
import { useAuthState } from "react-firebase-hooks/auth";
import { useNavigate } from "react-router-dom";
import auth from "../../firebase.init";
import useProduct from "../../Hooks/useProduct";

const MyItem = () => {
  const [user] = useAuthState(auth);
  const [products, setProducts] = useProduct();
  const navigate = useNavigate();

  useEffect(() => {
    const getItems = async () => {
      const email = user.email;
      console.log(email);
      const url = `http://localhost:5000/product?email=${email}`;
      const { data } = await axios.get(url);
      setProducts(data);
    };
    getItems();
  }, [user]);

  const handelDelete = (id) => {
    const process = window.confirm(
      "Are you sure you want to delete this item?"
    );
    if (process) {
      const url = `http://localhost:5000/product/${id}`;
      fetch(url, {
        method: "DELETE",
      })
        .then((res) => res.json())
        .then((result) => {
          console.log(result);
          setProducts(products.filter((product) => product._id !== id));
        });
    }
  };

  const navigateToProductDetails = (id) => {
    navigate(`/product/${id}`);
  };

  return (
    <>
      <Container>
        <Row>
          {products.map((product, index) => {
            return (
                <Col key={index} md={4}>
                  <div className="product-aria">
                    <img src={product.img} alt="" />
                    <div>
                      <h1>{product.name}</h1>
                      <p>Details:{product.content}</p>
                      <div className="d-flex gap-3 flex-wrap justify-content-center">
                        <Button
                          onClick={() => navigateToProductDetails(product._id)}
                          variant="primary"
                        >
                          Manage
                        </Button>
                        <Button
                          onClick={() => handelDelete(product._id)}
                          variant="danger"
                        >
                          Delete
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
            );
          })}
        </Row>
      </Container>
    </>
  );
};

export default MyItem;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

Node Js

Your Are using same api url /products. So I Change this url and its work fine now.

app.get("/products", async (req, res) => {
      const query = {};
      const cursor = productCollection.find(query);
      const products = await cursor.toArray();
      res.send(products);
    });

    app.get("/product", async (req, res) => {
      const email = req.query.email;
      const query = {email: email};
      const cursor = await productCollection.find(query).toArray();
      res.send(cursor);
    });

    app.get("/product/:id", async (req, res) => {
      const id = req.params.id;
      const query = { _id: ObjectId(id) };
      const product = await productCollection.findOne(query);
      res.send(product);
    });

    app.post("/products", async (req, res) => {
      const newProduct = req.body;
      const result = await productCollection.insertOne(newProduct);
      res.send(result);
    });

I think you are using a custom hook. useProduct() I just comment it and use useState() hook and change the dependancy useEffect hook user to email. Here is my code.

const [user] = useAuthState(auth);
  const { email } = user;
  console.log(email);
  // const [products, setProducts] = useProduct();
  const [products, setProducts] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    const getItems = async () => {
      // console.log(email);
      const url = `http://localhost:5000/product?email=${email}`;
      const { data } = await axios.get(url);
      setProducts(data);
    };
    getItems();
  }, [email]);