ruilisi / fortune-sheet

A drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
https://ruilisi.github.io/fortune-sheet-docs/
MIT License
2.57k stars 228 forks source link

Sheet not found when using API #490

Open TiagoBlauth opened 1 year ago

TiagoBlauth commented 1 year ago

Describe the bug I am trying to recreate a sheet by removing current sheets, adding new sheets, and populating the cells. So far so good, the sheet remove and recreate works, value set works, but when I try to set cell formats it presents the error below.

ERROR sheet not found at ./node_modules/@fortune-sheet/core/dist/index.esm.js (http://localhost:3000/static/js/bundle.js:73709:23) at options.factory (http://localhost:3000/static/js/bundle.js:159957:31) at webpack_require__ (http://localhost:3000/static/js/bundle.js:159380:33) at fn (http://localhost:3000/static/js/bundle.js:159614:21) at ./node_modules/@fortune-sheet/react/dist/index.esm.js (http://localhost:3000/static/js/bundle.js:80513:77) at options.factory (http://localhost:3000/static/js/bundle.js:159957:31) at webpack_require__ (http://localhost:3000/static/js/bundle.js:159380:33) at fn (http://localhost:3000/static/js/bundle.js:159614:21) at ./src/Test.tsx (http://localhost:3000/static/js/bundle.js:148:78) at options.factory (http://localhost:3000/static/js/bundle.js:159957:31)

To Reproduce Steps to reproduce the behavior:

Sheet reloading process, this is the failing process.

async function getAllSheets() {
    //loading the sheet from local storage
    const sampleSheet = localStorage.getItem("samplesheet")
    const convertedSheet = JSON.parse(sampleSheet)
    //Removing all sheets from the list
    for (let i = 0; i < sheetList.length; i++) {
        workbookRef.current?.deleteSheet({ 'id': sheetList[i].id })
    }
    sheetList = []
    //Sheet creation
    for (let i = 0; i < convertedSheet.length; i++) {
        await workbookRef.current?.addSheet()
        workbookRef.current?.setSheetName(convertedSheet[i].name)
        //Adding data
        for (let j = 0; j < convertedSheet[i].data.length; j++) {
            for (let k = 0; k < convertedSheet[i].data[j].length; k++) {
                if (convertedSheet[i].data[j][k] !== null) {
                    workbookRef.current?.setCellValue(j, k, convertedSheet[i].data[j][k].v);
                }
            }
        }
        //set cell format - ### it fails here ###
        cellFormat()
    }
}

Cell format function

function cellFormat() {
    //set cell format
    for (let i = 0; i < 30; i++) {
        if (workbookRef.current?.getCellValue(i, 0) !== null) {
            workbookRef.current?.setCellFormat(i, 0, 'bl', 'data');
            workbookRef.current?.setCellFormat(i, 0, 'bg', '#eeeeee');
        }
    }
    for (let j = 0; j < 30; j++) {
        if (workbookRef.current?.getCellValue(0, j) !== null) {
            workbookRef.current?.setCellFormat(0, j, 'bl', 'data');
            workbookRef.current?.setCellFormat(0, j, 'bg', '#eeeeee');
        }
    }
}

Not relevant, but it is here, the saving process for local storage

function saveAllSheets() {
    const allSheets = workbookRef.current?.getAllSheets();
    localStorage.setItem("samplesheet", JSON.stringify(allSheets))
}

The workbook itself:

      <Workbook ref={workbookRef} data={workbookData} onOp={opChange} />

The error happens when getAllSheets() process runs and cellFormat() is called. If I take cellFormat() out of getAllSheets() and use separate buttons, both works.

Expected behavior I expect to be able to format the sheet in the same process I am creating the sheets.

Additional context I tried to use CommonOptions to determine the sheet I am referring to, but I am probably doing it wrong. Try to find an example in the documentation or in here with no luck. It would be nice if you can provide me an example.

kong33 commented 3 months ago

did you solve the problem? I got a similar issue. my error message is this

Error: sheet not found
    at eval (index.esm.js:70150:23)
    at (app-pages-browser)/node_modules/@fortune-sheet/core/dist/index.esm.js (http://localhost:3000/_next/static/chunks/app/%5Blng%5D/Dashboard/page.js:455:1)
    at options.factory (webpack.js:718:31)
    at __webpack_require__ (webpack.js:39:33)
    at fn (webpack.js:373:21)
    at eval (index.esm.js:5:77)
    at (app-pages-browser)/node_modules/@fortune-sheet/react/dist/index.esm.js (http://localhost:3000/_next/static/chunks/app/%5Blng%5D/Dashboard/page.js:708:1)
    at options.factory (webpack.js:718:31)
    at __webpack_require__ (webpack.js:39:33)
    at fn (webpack.js:373:21)
    at eval (page.tsx:27:79)
    at (app-pages-browser)/src/app/[lng]/Dashboard/page.tsx (http://localhost:3000/_next/static/chunks/app/%5Blng%5D/Dashboard/page.js:1602:1)
    at options.factory (webpack.js:718:31)
    at __webpack_require__ (webpack.js:39:33)
    at Function.fn (webpack.js:373:21)
sanchit3008 commented 3 months ago

I must have missed this issue since it's quite old, I will have a look this week

kong33 commented 3 months ago

For my case, I solved the problem in the following way.

My development enviroment

Next.js App router 13.5.4 typescript babel ~ 7.24.7

code explanation

  1. I'm rendering WorkBook component on the 'DashboardPage', which is a client component.
    <div css={workBook}>
    <Workbook data={ref.current?.getSheet() ? [ref.current.getSheet()] : [{ name: "Sheet1" }]} ref={ref}/>
    </div>
  2. when I click a Button on the page, the following event handler is triggered.
    import { useRouter } from "next/navigation";
    const router = useRouter();
    ...
    <FileButton text="수정하기" onClick={() => router.push("/Dashboard/edit")} />
    ...
  3. On the '/Dashboard/edit' page, there is a save button width a handler that looks like this
    const handleSave = () => {
    if (ref.current) {
      const celldataArray = ref.current.getSheet() as any;
      postSchedule(
        { constrId, formData: celldataArray },
        {
          onSuccess: () => router.push("/Dashboard"),
        },
      );
    }
    };

The error occur when I click the save button and router.push("/Dashboard") is called.

how I fixed it

I changed "router.push" to window.location.href.

  <FileButton text="수정하기" onClick={() => (window.location.href = "/Dashboard/edit")} />
...
 onSuccess: () => (window.location.href = "/Dashboard"),

I don't know why this works. If someone knows the reason, please comment.

sanchit3008 commented 3 months ago

I think the hard reload is getting rid of any indeterminate states which might be causing this issue. Need to have a deeper look.