Skip to content

Commit

Permalink
reactive menu fields (#287)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickolasram
nickolasram authored Apr 18, 2024
1 parent 2a09ea7 commit 4008dac
Showing 1 changed file with 144 additions and 104 deletions.
248 changes: 144 additions & 104 deletions app/add-product-page/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,14 @@ import {
ProductSizePantsInseamList,
} from "./product-prop-list";
const AddProduct = () => {
const defaultType: string = ProductTypeList.Shoes;
const [productType, setProductType] = useState(defaultType);
const defaultGender: string = ProductGenderList.MALE
const [productGender, setProductGender] = useState(defaultGender);
const [productSizeShoe, setProductSizeShoe] = useState(ProductSizeShoeList[0]);
const defaultSize: string = ProductSizesList.L;
const [productSizes, setProductSizes] = useState(defaultSize);
const [productSizePantsWaist, setProductSizePantsWaist] = useState(ProductSizePantsWaistList[0]);
const [productSizePantsInseam, setProductSizePantsInseam] = useState(ProductSizePantsInseamList[0]);
const [productDescription, setProductDescription] = useState("");
const [productImage, setProductImage] = useState("");
const [productType, setProductType] = useState<string>('');
const [productGender, setProductGender] = useState<string>('');
const [productSizeShoe, setProductSizeShoe] = useState<number | string>('');
const [productSizes, setProductSizes] = useState<string>('');
const [productSizePantsWaist, setProductSizePantsWaist] = useState<number | string>('');
const [productSizePantsInseam, setProductSizePantsInseam] = useState<number | string>('');
const [productDescription, setProductDescription] = useState<string>('');
const [productImage, setProductImage] = useState<string>('');

const handleProductTypeSelect = (e: {
target: { value: React.SetStateAction<string> };
Expand All @@ -35,9 +32,10 @@ const AddProduct = () => {
setProductGender(e.target.value);
};

const handleProductSizeShoeSelect = (event: any) => {
const newValue = parseInt(event.target.value.toString(), 10);
setProductSizeShoe(newValue);
const handleProductSizeShoeSelect = (e: {
target: { value: React.SetStateAction<number | string> };
}) => {
setProductSizeShoe(e.target.value);
};

const handleProductSizeSelect = (e: {
Expand All @@ -46,14 +44,16 @@ const AddProduct = () => {
setProductSizes(e.target.value);
};

const handleProductSizePantsWaistSelect = (event: any) => {
const newValue = parseInt(event.target.value.toString(), 10);
setProductSizePantsWaist(newValue);
const handleProductSizePantsWaistSelect = (e: {
target: { value: React.SetStateAction<number | string> };
}) => {
setProductSizePantsWaist(e.target.value);
};

const handleProductSizePantsInseamSelect = (event: any) => {
const newValue = parseInt(event.target.value.toString(), 10);
setProductSizePantsInseam(newValue);
const handleProductSizePantsInseamSelect = (e: {
target: { value: React.SetStateAction<number | string> };
}) => {
setProductSizePantsInseam(e.target.value);
};

const handleDescriptionChange = (e: {
Expand Down Expand Up @@ -101,12 +101,14 @@ const AddProduct = () => {
}
};

const notSizeApplicable = ['', 'Pants', 'Shoes']

return (
<form onSubmit={handleSubmit}>
<FormControl>
<Typography component='h1' variant='h3' sx={{color: 'white', marginBottom: "15px"}}>
Add a Product
</Typography>
</Typography>

{/* Product Type Field */}
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
Expand All @@ -124,103 +126,141 @@ const AddProduct = () => {
</FormControl>

{/* Product Gender Field */}
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="gender-selectlabel">Product Gender</InputLabel>
<Select labelId="gender-selectlabel"
id="gender-select"
value={productGender}
aria-describedby="product-gender-field"
onChange={handleProductGenderSelect}
>
{Object.values(ProductGenderList).map((gender) => (
<MenuItem value={gender} key={gender}>{gender}</MenuItem>
))}
</Select>
</FormControl>
{
productType == '' ? null : (
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="gender-selectlabel">Product Gender</InputLabel>
<Select labelId="gender-selectlabel"
id="gender-select"
value={productGender}
aria-describedby="product-gender-field"
onChange={handleProductGenderSelect}
>
<MenuItem value={''}>{"-"}</MenuItem>
{Object.values(ProductGenderList).map((gender) => (
<MenuItem value={gender} key={gender}>{gender}</MenuItem>
))}
</Select>
</FormControl>
)
}

{/* Product Size Shoe Field */}
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="shoesize-selectlabel">Shoe Size</InputLabel>
<Select labelId="shoesize-selectlabel"
id="shoesize-select"
value={productSizeShoe}
aria-describedby="product-shoesize-field"
onChange={handleProductSizeShoeSelect}
>
{Object.values(ProductSizeShoeList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
{
productType != 'Shoes' ? null : (
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="shoesize-selectlabel">Shoe Size</InputLabel>
<Select labelId="shoesize-selectlabel"
id="shoesize-select"
value={productSizeShoe}
aria-describedby="product-shoesize-field"
onChange={handleProductSizeShoeSelect}
>
<MenuItem value={''}>{"-"}</MenuItem>
{Object.values(ProductSizeShoeList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
)
}

{/* Product Size Field */}
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="size-selectlabel">Product Size</InputLabel>
<Select labelId="size-selectlabel"
id="size-select"
value={productSizes}
aria-describedby="product-size-field"
onChange={handleProductSizeSelect}
>
{Object.values(ProductSizesList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
{
notSizeApplicable.includes(productType) ? null : (
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="size-selectlabel">Product Size</InputLabel>
<Select labelId="size-selectlabel"
id="size-select"
value={productSizes}
aria-describedby="product-size-field"
onChange={handleProductSizeSelect}
>
<MenuItem value={''}>{"-"}</MenuItem>
{Object.values(ProductSizesList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
)
}

{/* Product Size Pants Waist Field */}
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="waistsize-selectlabel">Waist Size</InputLabel>
<Select labelId="waistsize-selectlabel"
id="waistsize-select"
value={productSizePantsWaist}
aria-describedby="product-waist-size-field"
onChange={handleProductSizePantsWaistSelect}
>
{Object.values(ProductSizePantsWaistList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
{
productType != 'Pants' ? null : (
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="waistsize-selectlabel">Waist Size</InputLabel>
<Select labelId="waistsize-selectlabel"
id="waistsize-select"
value={productSizePantsWaist}
aria-describedby="product-waist-size-field"
onChange={handleProductSizePantsWaistSelect}
>
<MenuItem value={''}>{"-"}</MenuItem>
{Object.values(ProductSizePantsWaistList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
)
}

{/* Product Size Pants Inseam Field */}
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="inseamsize-selectlabel">Inseam Length</InputLabel>
<Select labelId="inseamsize-selectlabel"
id="inseamsize-select"
value={productSizePantsInseam}
aria-describedby="product-inseam-size-field"
onChange={handleProductSizePantsInseamSelect}
>
{Object.values(ProductSizePantsInseamList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
{
productType != 'Pants' ? null : (
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="inseamsize-selectlabel">Inseam Length</InputLabel>
<Select labelId="inseamsize-selectlabel"
id="inseamsize-select"
value={productSizePantsInseam}
aria-describedby="product-inseam-size-field"
onChange={handleProductSizePantsInseamSelect}
>
<MenuItem value={''}>{"-"}</MenuItem>
{Object.values(ProductSizePantsInseamList).map((size) => (
<MenuItem value={size} key={size}>{size}</MenuItem>
))}
</Select>
</FormControl>
)
}

{/* Product Description Field */}
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<TextField label="Product Description"
aria-describedby="product-description-field"
id="product-description"
onChange={handleDescriptionChange}
multiline
minRows={2}
variant="filled"/>
</FormControl>
{
productType == '' ? null : (
<FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
<TextField label="Product Description"
aria-describedby="product-description-field"
id="product-description"
onChange={handleDescriptionChange}
multiline
minRows={2}
variant="filled"/>
</FormControl>
)
}

{/* Product Upload Image Field */}
<Stack direction="row" alignItems="center" justifyContent="center" spacing={2} sx={{ m: 1 }}>
<Button variant="contained" component="label" sx={{ width: 1 }}>
Upload Image
<input hidden multiple type="file" onChange={handleImageUpload} value={productImage}/>
</Button>
</Stack>
{
productType == '' ? null : (
<Stack direction="row" alignItems="center" justifyContent="center" spacing={2} sx={{ m: 1 }}>
<Button variant="contained" component="label" sx={{ width: 1 }}>
Upload Image
<input hidden multiple type="file" onChange={handleImageUpload} value={productImage}/>
</Button>
</Stack>
)
}

{/* Submit Button */}
<Button variant="contained" color="primary" onClick={handleSubmit} type="submit" sx={{ mt: 1 }}>
Submit
</Button>
{
productType == '' ? null : (
<Button variant="contained" color="primary" onClick={handleSubmit} type="submit" sx={{ mt: 1 }}>
Submit
</Button>
)
}

</FormControl>
</form>
);
Expand Down

0 comments on commit 4008dac

Please sign in to comment.