the code in product.jsx the proplem is i want to update data but it doesnt work with firebase and stopped updatting all so i want some help

 export default function Product() {
  const [user,setUser]=useState({});
  const [file, setFile] = useState(null);
  const location = useLocation();
  const productId = location.pathname.split("/")[2];
  const [pStats, setPStats] = useState([]);

  const product = useSelector((state) =>
    state.product.products.find((product) => product._id === productId)
  );
 const handleChange =(e)=>{
    const value=e.target.value;
    setUser({
        ...user,
       [e.target.name]:value
    });
      };
      
      console.log(user)

  const dispatch = useDispatch();
 
  const handleclick=(id)=>{
    
    const fileName = new Date().getTime()   file.name;
    const storage = getStorage(app);
    const storageRef = ref(storage, fileName);
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        // Observe state change events such as progress, pause, and resume
        // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
        const progress =
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log("Upload is "   progress   "% done");
        switch (snapshot.state) {
          case "paused":
            console.log("Upload is paused");
            break;
          case "running":
            console.log("Upload is running");
            break;
          default:
        }
      },
      (error) => {
        // Handle unsuccessful uploads
      },
      () => {
        // Handle successful uploads on complete
        // For instance, get the download URL: https://firebasestorage.googleapis.com/...
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          const userr = { ...user, img: downloadURL};
          updateProduct(id,dispatch,userr)
        });
      }
    );
   
  }

  useEffect(() => {
    updateProduct(dispatch);
  }, [dispatch]);
  
  

  const MONTHS = useMemo(
    () => [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Agu",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    []
  );

  useEffect(() => {
    const getStats = async () => {
      try {
        const res = await userRequest.get("order/income?pid="   productId);
        const list = res.data.sort((a,b)=>{
            return a._id - b._id
        })
        list.map((item) =>
          setPStats((prev) => [
            ...prev,
            { name: MONTHS[item._id - 1], Sales: item.total },
          ])
        );
      } catch (err) {
        console.log(err);
      }
    };
    getStats();
  }, [productId, MONTHS]);

  return (
    <div className="product">
      <div className="productTitleContainer">
        <h1 className="productTitle">Product</h1>
        <Link to="/newproduct">
          <button className="productAddButton">Create</button>
        </Link>
      </div>
      <div className="productTop">
        <div className="productTopLeft">
          <Chart data={pStats} dataKey="Sales" title="Sales Performance" />
        </div>
        <div className="productTopRight">
          <div className="productInfoTop">
            <img src={product.img} alt="" className="productInfoImg" />
            <span className="productName">{product.title}</span>
          </div>
          <div className="productInfoBottom">
            <div className="productInfoItem">
              <span className="productInfoKey">id:</span>
              <span className="productInfoValue">{product._id}</span>
            </div>
            <div className="productInfoItem">
              <span className="productInfoKey">sales:</span>
              <span className="productInfoValue">5123</span>
            </div>
            <div className="productInfoItem">
              <span className="productInfoKey">in stock:</span>
              <span className="productInfoValue">{product.inStock}</span>
            </div>
          </div>
        </div>
      </div>
      <div className="productBottom">
        <form className="productForm">
          <div className="productFormLeft">
            <label>Product Name</label>
            <input type="text" placeholder={product.title} name="title" onChange={handleChange}/>
            <label>Product Description</label>
            <input type="text" placeholder={product.desc} name="desc" onChange={handleChange} />
            <label>Price</label>
            <input type="text" placeholder={product.price} name="price" onChange={handleChange} />
            <label>In Stock</label>
            <select name="inStock" id="idStock" onChange={handleChange}>
              <option value="true">Yes</option>
              <option value="false">No</option>
            </select>
          </div>
          <div className="productFormRight">
            <div className="productUpload">
              <img src={product.img} alt="" className="productUploadImg" />
              <label for="file">
                <Publish />
              </label>
              <input type="file" id="file" style={{ display: "none" }} name="img" onChange={(e) => setFile(e.target.files[0])} />
            </div>
            <button className="productButton" onClick={(e)=>handleclick(product._id)}>Update</button>
          </div>
        </form>
      </div>
    </div>
  );
}

code in apicalls (redux)

import {
  
  updateProductFailure,
  updateProductStart,
  updateProductSuccess,
  

} from "./productRedux";



export const updateProduct = async (id, product, dispatch) => {
  dispatch(updateProductStart());
  try {
    const res=await userRequest.patch(`/products/find/${id}`,product)
    
    dispatch(updateProductSuccess({ id, product }));
  } catch (err) {
    dispatch(updateProductFailure());
  }
};
}

code in product redux

export const productSlice = createSlice({
  name: "product",
  initialState: {
    products: [],
    isFetching: false,
    error: false,
  },
  reducers: {
 updateProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    updateProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products[
        state.products.findIndex((item) => item._id === action.payload.id)
      ] = action.payload.product;
    },
    updateProductFailure: (state) => {
      state.isFetching = false;
      state.error = true;
    },
}

i want to update my products by sending data from client to the api i think the proplem in the updateProductsucess function

CodePudding user response：

In your Product function, you call updateProduct(id,dispatch,user) like this.

UpdateProduct looks like this export const updateProduct = async (id, product, dispatch) => {}

So you're passing dispatch in as the product param. Switch up the params to be in the same order then you'll be good.