This content originally appeared on DEV Community and was authored by Muhammad Usman
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'sizes')
Source
src\app\admin-view\add-product\page.js (164:34) @ sizes
162 | Available sizes
163 | <TileComponent
164 | selected={formData.sizes}
| ^
165 | onClick={handleTileClick}
166 | data={AvailableSizes}
167 | />
"use client";
import InputComponent from "@/components/FormElements/InputComponent";
import SelectComponent from "@/components/FormElements/SelectComponent";
import TileComponent from "@/components/FormElements/TileComponent";
import ComponentLevelLoader from "@/components/Loader/componentlevel";
import Notification from "@/components/Notification";
import { GlobalContext } from "@/context";
import { addNewProduct, updateAProduct } from "@/app/services/product";
import {
AvailableSizes,
adminAddProductformControls,
firebaseConfig,
firebaseStorageURL,
} from "@/utils";
import { initializeApp } from "firebase/app";
import {
getDownloadURL,
getStorage,
ref,
uploadBytesResumable,
} from "firebase/storage";
import { useRouter } from "next/navigation";
import { useContext, useEffect, useState } from "react";
import { toast } from "react-toastify";
import { resolve } from "styled-jsx/css";
const app = initializeApp(firebaseConfig);
const storage = getStorage(app, firebaseStorageURL);
const createUniqueFileName = (getFile) => {
const timeStamp = Date.now();
const randomStringValue = Math.random().toString(36).substring(2, 12);
return ${getFile.name}-${timeStamp}-${randomStringValue};
};
async function helperForUPloadingImageToFirebase(file) {
const getFileName = createUniqueFileName(file);
const storageReference = ref(storage, ecommerce/${getFileName});
const uploadImage = uploadBytesResumable(storageReference, file);
return new Promise((resolve, reject) => {
uploadImage.on(
"state_changed",
(snapshot) => {},
(error) => {
console.log(error);
reject(error);
},
() => {
getDownloadURL(uploadImage.snapshot.ref)
.then((downloadUrl) => resolve(downloadUrl))
.catch((error) => reject(error));
}
);
});
}
const initialFormData = {
name: "",
price: 0,
description: "",
category: "men",
sizes: [],
deliveryInfo: "",
onSale: "no",
imageUrl: "",
priceDrop: 0,
};
export default function AdminAddNewProduct() {
const [formData, setFormData] = useState(initialFormData);
const {
componentLevelLoader,
setComponentLevelLoader,
currentUpdatedProduct,
setCurrentUpdatedProduct,
} = useContext(GlobalContext);
console.log(currentUpdatedProduct);
const router = useRouter();
useEffect(() => {
if (currentUpdatedProduct !== null) setFormData(currentUpdatedProduct);
}, [currentUpdatedProduct]);
async function handleImage(event) {
const extractImageUrl = await helperForUPloadingImageToFirebase(
event.target.files[0]
);
if (extractImageUrl !== "") {
setFormData({
...formData,
imageUrl: extractImageUrl,
});
}
}
function handleTileClick(getCurrentItem) {
let cpySizes = [...formData.sizes];
const index = cpySizes.findIndex((item) => item.id === getCurrentItem.id);
if (index === -1) {
cpySizes.push(getCurrentItem);
} else {
cpySizes = cpySizes.filter((item) => item.id !== getCurrentItem.id);
}
setFormData({
...formData,
sizes: cpySizes,
});
}
async function handleAddProduct() {
setComponentLevelLoader({ loading: true, id: "" });
const res =
currentUpdatedProduct !== null
? await updateAProduct(formData)
: await addNewProduct(formData);
console.log(res);
if (res.success) {
setComponentLevelLoader({ loading: false, id: "" });
toast.success(res.message, {
position: "top-right",
});
setFormData(initialFormData);
setCurrentUpdatedProduct(null);
setTimeout(() => {
router.push("/admin-view/all-products");
}, 1000);
} else {
toast.error(res.message, {
position: "top-right",
});
setComponentLevelLoader({ loading: false, id: "" });
setFormData(initialFormData);
}
}
console.log(formData);
return (
accept="image/*"
max="1000000"
type="file"
onChange={handleImage}
/>
<div className="flex gap-2 flex-col">
<label>Available sizes</label>
<TileComponent
selected={formData.sizes}
onClick={handleTileClick}
data={AvailableSizes}
/>
</div>
{adminAddProductformControls.map((controlItem) =>
controlItem.componentType === "input" ? (
<InputComponent
type={controlItem.type}
placeholder={controlItem.placeholder}
label={controlItem.label}
value={formData[controlItem.id]}
onChange={(event) => {
setFormData({
...formData,
[controlItem.id]: event.target.value,
});
}}
/>
) : controlItem.componentType === "select" ? (
<SelectComponent
label={controlItem.label}
options={controlItem.options}
value={formData[controlItem.id]}
onChange={(event) => {
setFormData({
...formData,
[controlItem.id]: event.target.value,
});
}}
/>
) : null
)}
<button
onClick={handleAddProduct}
className="inline-flex w-full items-center justify-center bg-black px-6 py-4 text-lg text-white font-medium uppercase tracking-wide"
>
{componentLevelLoader && componentLevelLoader.loading ? (
<ComponentLevelLoader
text={
currentUpdatedProduct !== null
? "Updating Product"
: "Adding Product"
}
color={"#ffffff"}
loading={componentLevelLoader && componentLevelLoader.loading}
/>
) : currentUpdatedProduct !== null ? (
"Update Product"
) : (
"Add Product"
)}
</button>
</div>
</div>
<Notification />
</div>
);
}
This content originally appeared on DEV Community and was authored by Muhammad Usman
Muhammad Usman | Sciencx (2024-06-18T04:39:36+00:00) Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading ‘sizes’). Retrieved from https://www.scien.cx/2024/06/18/unhandled-runtime-error-typeerror-cannot-read-properties-of-undefined-reading-sizes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.