POST request: Entering an object containing elements and an array - reactjs

Question

I have a project, and it is an ECommerce project, and the website contains several interfaces, and one of these interfaces is the "Create a Product" interface,
Create a product on the backend graph, written as follows:
enter image description here
And as it is clear from the previous request, there is an object called “En” and another object called “Ar”, and “En” contains “title, description, tags[]” as well as the “Ar”
The problem is that I didn't know how to enter these two objects through React
How can I do this?
In this file I tried to use the tag "Input" and entered the title, description and tag array, and I don't know if my entry method is correct.
import { React, useState } from "react";
import {
Input,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
Button,
} from "reactstrap";
import { gql, useMutation } from "#apollo/client";
import { useCategories } from "../../../../hooks/useCategories";
import { useCollections } from "../../../../hooks/useCollections";
import { useBrand } from "../../../../hooks/useBrand";
import Select from "react-select";
const CREATE_PRODUCT = gql`
mutation createProduct(
$category: String!
$collection: String!
$price: Float!
$sale: Boolean!
$discount: Float!
$stock: Int!
$new: Boolean!
$brand: String!
) {
createProduct(
createProductInput: {
category: $category
collection: $collection
price: $price
sale: $sale
discount: $discount
stock: $stock
new: $new
brand: $brand
}
) {
category,
collection,
price,
sale,
brand,
discount,
stock,
new,
}
}
`;
const GET_PRODUCTS = gql`
query getProducts($limit: Int) {
getProducts(limit: $limit) {
id
title
category{
id
name
}
price
stock
sale
}
}
`;
const AddProduct = () => {
let input;
const categories = useCategories();
const collections = useCollections();
const brands = useBrand();
const categoriesOptions = categories?.data?.categories;
const collectionsOptions = collections?.data?.collections;
const brandsOptions = brands?.data?.brands;
console.log("brands backend: ", brandsOptions, categoriesOptions);
// /////////////////////////////////////////////////
const [category, setCategory] = useState(0);
const [collection, setCollection] = useState(0);
const [brand, setBrand] = useState(0);
const [enTitle, setEnTitle] = useState("");
const [arTitle, setArTitle] = useState("");
const [price, setPrice] = useState(0.0);
const [sale, setSale] = useState(false);
const [newProduct, setNewProduct] = useState(false);
const [discount, setDiscount] = useState(0);
const [stock, setStock] = useState(0);
const [enTags, setEnTags] = useState("");
const [arTags, setArTags] = useState("");
const [enDesc, setEnDesc] = useState("");
const [arDesc, setArDesc] = useState("");
const [description, setDescription] = useState("");
const handleEnTitle = (e) => {
setEnTitle(e.target.value);
};
const handleArTitle = (e) => {
setArTitle(e.target.value);
};
const handleDescription = (e) => {
setDescription(e.target.value);
}
const handlePrice = (e) => {
setPrice(e.target.value);
};
const handleSale = (e) => {
setSale(e.target.value);
};
const handleDiscount = (e) => {
setDiscount(e.target.value);
};
const handleStock = (e) => {
setStock(e.target.value);
};
const handleNewProduct = (e) => {
setNewProduct(e.target.value);
};
const handleEnTags = (e) => {
setEnTags(e.target.value);
};
const handleArTags = (e) => {
setArTags(e.target.value);
};
const handleEnDesc = (e) => {
setEnDesc(e.target.value);
};
const handleArDesc = (e) => {
setArDesc(e.target.value);
};
// //////////////////////////////////////////////
const [modal, setModal] = useState(false);
const togglePopup = () => setModal(!modal);
const [open, setOpen] = useState(false);
const [collectionInput, setCollectionInput] = useState("");
const message = (e) => {
alert("Category was created successfully!");
// return <Alert color="primary">Hey! Pay attention.</Alert>;
};
const resetInput = () => {
setCollectionInput("");
};
const [createProduct] = useMutation(CREATE_PRODUCT, {
refetchQueries: [
{ query: GET_PRODUCTS }, // DocumentNode object parsed with gql
"getProducts", // Query name
],
});
const [inputValue, setValue] = useState("");
const [selectedValueCollection, setSelectedValueCollection] = useState(0);
// handle selection for category
const handleChangeCategory = (value) => {
setCategory(value);
};
// handle selection for collection
const handleChangeCollection = (value) => {
setCollection(value);
};
return (
<div>
{/* <Button> */}
{/* price - (price * discount / 100) */}
<a
onClick={togglePopup}
href="#"
className="btn btn-sm btn-solid"
aria-hidden="true"
>
add product
</a>
{/* </Button> */}
<Modal
isOpen={modal}
toggle={togglePopup}
centered
style={{ padding: "1rem" }}
>
<ModalHeader toggle={togglePopup} style={{ padding: "1rem" }}>
<p>Add Product</p>
</ModalHeader>
<ModalBody style={{ padding: "2rem" }}>
<Select
value={category}
onChange={(categoriesOptions) => {
console.log("value vvv categoriesOptions:", categoriesOptions);
console.log("value.id categoriesOptions: ", categoriesOptions.id);
setCategory(categoriesOptions.id);
}}
options={categoriesOptions}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e.id}
/>
<Select
value={collection}
// onChange={handleChangeCollection}
onChange={(collectionsOptions) => {
console.log("value vvv:", collectionsOptions);
console.log("value.id: ", collectionsOptions.id);
setCollection(collectionsOptions.id);
}}
options={collectionsOptions}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e.id}
/>
<Select
value={brand}
//onChange={handleChangeCollection}
onChange={(brandsOptions) => {
console.log("value vvv:", brandsOptions);
console.log("value.id: ", brandsOptions.id);
setBrand(brandsOptions.id);
}}
options={brandsOptions}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e.id}
/>
<input
id="title"
value="En.title"
onChange={handleEnTitle}
placeholder="Price"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="description"
value="En.description"
onChange={handleDescription}
placeholder="Price"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="tags"
value="En.tags.[0]"
onChange={handleEnTags}
placeholder="tags"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="price"
value={price}
onChange={handlePrice}
placeholder="Price"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="sale"
value={sale}
onChange={handleSale}
placeholder="Sale"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="discount"
value={discount}
onChange={handleDiscount}
placeholder="discount"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="stock"
value={stock}
onChange={handleStock}
placeholder="Stock"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="newProduct"
value={newProduct}
onChange={handleNewProduct}
placeholder="New"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
{/* <AsyncSelect
cacheOptions
defaultOptions
value={selectedValueCollection}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e._id}
propsLoadOptions={collectionsOptions}
onInputChange={handleInputChangeCollection}
onChange={handleChangeCollection}
/> */}
{/* <input
id="enTitle"
value={enTitle}
onChange={handleETitle}
placeholder="English Title"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/> */}
{/* <input
id="arTitle"
value={arTitle}
onChange={handleArTitle}
placeholder="Arabic Title"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/> */}
{/* <input
id="enTag"
value={enTags}
onChange={handleEnTags}
placeholder="English Tag"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="arTag"
value={arTags}
onChange={handleArTags}
placeholder="Arabic Tag"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/> */}
{/* <input
id="enDesc"
value={enDesc}
onChange={handleEnDesc}
placeholder="English Desc"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/>
<input
id="arDesc"
value={arDesc}
onChange={handleArDesc}
placeholder="Arabic Desc"
type="text"
style={{
padding: "0.7rem",
paddingRight: "13rem",
margin: "0.7rem",
}}
/> */}
</ModalBody>
<ModalFooter style={{ paddingRight: "2rem" }}>
<Button
color="primary"
onClick={(e) => {
e.preventDefault();
togglePopup();
createProduct({
variables: {
category,
collection,
price,
sale,
brand,
discount,
stock,
neew,
},
});
console.log(
"jjjjjjjjjjjjjjjjjjjjjjjj: ",
category,
collection,
price,
sale,
brand,
discount,
stock,
neew
);
}}
>
Save
</Button>{" "}
<Button onClick={togglePopup}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
};
export default AddProduct;