Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'sizes')

Muhammad Usman — Tue, 18 Jun 2024 04:39:36 +0000

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>

);
}

DEV Community: Muhammad Usman

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'sizes')