วิธีใช้งาน

import { Computer } from "@mui/icons-material"
import { Grid } from "@mui/material"
import { ExcelReader } from "excel-reader-toolkit"
import _ from "lodash"
import React, { useState, useEffect } from "react"
import "./App.css"
import RUIDropDown from "./Shared/RUIDropDown"
import RUIForm from "./Shared/RUIForm"
import RUIMultiGroupOfTextFields from "./Shared/RUIMultiGroupOfTextFields"
import RUIMultiTextFields from "./Shared/RUIMultiTextFields"
import RUITextField from "./Shared/RUITextField"
import RUITitle from "./Shared/RUITitle"
import RUIErrorDialog from "./Shared/RUIErrorDialog"

export default function App() {
  const [isError, setIsError] = useState(true)
  const initialData = {
    deviceName: { label: "Device name", value: "", placeholder: "Device name" },
    os: { label: "OS", value: "Android 9", options: ["Android 9", "Android 10", "Android 11"] },
    iccids: { label: "ICCID", value: [] },
    imsis: { label: "IMSI", value: [] },
    sims: {
      label: "SIM",
      members: [
        { name: "ISP", label: "ISP", size: 1 },
        { name: "ICCID", label: "ICCID", size: 2 },
        { name: "IMSI", label: "IMSI", size: 2 },
      ],
      value: [],
    },
  }

  const loadFormData = () => {
    const saved = localStorage.getItem("formData")
    if (saved) {
      try {
        const parsed = JSON.parse(saved)
        return _.chain(initialData)
          .mapValues((field, key) => ({
            ...field,
            value: _.get(parsed, [key, "value"], field.value),
          }))
          .value()
      } catch {
        return initialData
      }
    }
    return initialData
  }

  const [formData, setFormData] = useState(loadFormData)
  const [excelData, setExcelData] = useState([])

  useEffect(() => {
    if (!excelData || excelData.length === 0) return

    const managedData = _.chain(excelData)
      .map((item) => ({ name: item.__EMPTY_1, value: item.__EMPTY_2 }))
      .groupBy("name")
      .value()
    const deviceNamesFromExcel = _.chain(managedData).get("Device Name", []).map("value").first().value()
    const osFromExcel = _.chain(managedData).get("OS", []).map("value").first().value()
    const iccidsFromExcel = _.chain(managedData).get("ICCID", []).map("value").filter(Boolean).uniq().value()
    const imsiFromExcel = _.chain(managedData).get("IMSI", []).map("value").filter(Boolean).uniq().value()

    setFormData((prev) => {
      const existingDeviceName = prev.deviceName.value || ""
      const updated = _.set({ ...prev }, ["deviceName", "value"], deviceNamesFromExcel || existingDeviceName)
      localStorage.setItem("formData", JSON.stringify(updated))
      return updated
    })

    setFormData((prev) => {
      const existingOs = prev.os.value || ""
      const updated = _.set({ ...prev }, ["os", "value"], osFromExcel || existingOs)
      localStorage.setItem("formData", JSON.stringify(updated))
      return updated
    })

    setFormData((prev) => {
      const existingIccid = prev.iccids.value || []
      const merged = _.uniq([...existingIccid, ...iccidsFromExcel])

      const updated = _.set({ ...prev }, ["iccids", "value"], merged)
      localStorage.setItem("formData", JSON.stringify(updated))
      return updated
    })

    setFormData((prev) => {
      const existingImsi = prev.imsis.value || []

      const mergedImsi = _.uniq([...existingImsi, ...imsiFromExcel])
      const updated = _.set({ ...prev }, ["imsis", "value"], mergedImsi)
      localStorage.setItem("formData", JSON.stringify(updated))
      return updated
    })
  }, [excelData])

  const handleChange = (target) => (e) => {
    setFormData((prev) => {
      const updated = _.set({ ...prev }, [target, "value"], e.target.value)
      localStorage.setItem("formData", JSON.stringify(updated))
      return updated
    })
  }

  const handleReset = () => {
    setFormData(initialData)
    localStorage.removeItem("formData")
  }

  const handleSubmit = () => {
    console.log(formData)
  }

  return (
    <RUIForm title="User Information" icon={<Computer sx={{ color: "#fff", fontSize: "2rem" }} />} handleReset={handleReset} handleSubmit={handleSubmit}>
      <RUITitle title="Sample Form" />
      <Grid item xs={12}>
        <ExcelReader text="กรุณาเลือกไฟล์ Excel" setData={setExcelData} />
      </Grid>
      <RUITextField sm={6} {...formData.deviceName} handleChange={handleChange("deviceName")} />
      <RUIDropDown sm={6} {...formData.os} handleChange={handleChange("os")} />
      <RUIMultiTextFields sm={12} {...formData.iccids} handleChange={handleChange("iccids")} />
      <RUIMultiTextFields sm={12} {...formData.imsis} handleChange={handleChange("imsis")} />
      <RUIMultiGroupOfTextFields sm={12} {...formData.sims} handleChange={handleChange("sims")} />
      <RUIErrorDialog open={isError} title="Error" message="An error has occurred." setOpen={setIsError} />
    </RUIForm>
  )
}