Our pure JavaScript Scheduler component


Post by burnit »

Hi all,

we are facing some problems with connecting redux and axios.

we get our data from backend over an axios query.

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
import FuseUtils from '@fuse/utils/FuseUtils';

export const getScheduler = createAsyncThunk('production/planning/getScheduler', async (params) => {
  const response = await axios.post(
    process.env.REACT_APP_API_ENDPOINT + '/api/production/planning/get-scheduler',
    params
  );
  const data = await response.data;
  return data;
});

const schedulerSlice = createSlice({
  name: 'production/planning/scheduler',
  initialState: { data: {} },
  extraReducers: {
    [getScheduler.fulfilled]: (state, action) => {
      state.data = action.payload;
    },
  },
});

export const selectScheduler = ({ schedulerApp }) => schedulerApp.scheduler;

export default schedulerSlice.reducer;

In the app we uuse useSelector to get the state from the redux store.
Then we initialize the ressources, calendars, resourceTimeRanges and events with useState([])

  const rawData = useSelector(selectScheduler);
  const [resources, setResources] = useState([]);
  const [calendars, setCalendars] = useState([]);
  const [resourceTimeRanges, setResourceTimeRanges] = useState([]);
  const [events, setEvents] = useState([]);

With a useEffect we refresh the state of these variables

  useEffect(() => {
    if (rawData.data.resources) {
      setResources(rawData.data.resources.rows);
      setCalendars(rawData.data.calendars.rows);
      setResourceTimeRanges(rawData.data.resourceTimeRanges.rows);
      setEvents(rawData.data.events.rows);
    }
  }, [rawData]);

and the return value is

      <BryntumSchedulerPro
        ref={schedulerPro}
        {...schedulerConfig}
        events={events}
        resources={resources}
        calendars={calendars}
        resourceTimeRanges={resourceTimeRanges}
        // dependencies = {dependencies}
        onDataChange={onDataChange}
      />

So, every time i add a new element to the array, the UI tells me all events were removed, why?
And is there something wrong in our way to bind data?

Many thanks


Post by burnit »

I also get this error.

Error: react-dom.development.js:26923 Uncaught TypeError: Cannot assign to read only property 'startDate' of object '#<Object>'

calendars={calendars}

If i pass in the calendars data directly like this, i don't get this error

calendars={rawData.data.calendars.rows}

Post by marcio »

Hey burnit,

I saw that in the useEffect you only verify rawData.data.resources, could you please confirm that when you set the events you have all the data that is used there??

Also, do you have a special code for adding events??

Regarding the calendars, what does the calendars variable looks like when you have that error?

If possible, could you assemble a sample project that looks like your environment with that issue happening? That would help us a lot to investigate what's causing that behavior that you're describing.

Best regards,
Márcio


Post by burnit »

marcio wrote: Fri Jan 27, 2023 3:56 am

I saw that in the useEffect you only verify rawData.data.resources, could you please confirm that when you set the events you have all the data that is used there??

Yes, i can confirm, i have all data that is used there.

marcio wrote: Fri Jan 27, 2023 3:56 am

Also, do you have a special code for adding events??

We work with createEntityAdapter of Redux, and we add events with addOne or addMany to the store.

marcio wrote: Fri Jan 27, 2023 3:56 am

Regarding the calendars, what does the calendars variable looks like when you have that error?

[
      {
        id: 'default',
        name: '2-Schichtig (F+S)',
        unspecifiedTimeIsWorking: false,
        intervals: [
          {
            recurrentStartDate: 'at 06:00 except on Saturday and Sunday',
            recurrentEndDate: 'at 22:45 except on Saturday and Sunday',
            isWorking: true,
          },
          {
            recurrentStartDate: 'at 10:30',
            recurrentEndDate: 'at 11:00',
            isWorking: false,
          },
          {
            recurrentStartDate: 'at 19:00',
            recurrentEndDate: 'at 19:30',
            isWorking: false,
          },
          {
            recurrentStartDate: 'at 03:00',
            recurrentEndDate: 'at 03:30',
            isWorking: false,
          },
          {
            startDate: '2023-01-02T06:00',
            endDate: '2023-01-02T10:00',
            isWorking: false,
            cls: 'factoryShutdown',
            name: 'Inventur',
          },
        ],
        children: [
          {
            id: 'weekend1',
            name: 'Samstag Frühschicht',
            unspecifiedTimeIsWorking: false,
            // assigned resource will add some extra non working days to the event
            intervals: [
              {
                recurrentStartDate: 'at 06:00 on Saturday',
                recurrentEndDate: 'at 14:30 on Saturday',
                isWorking: true,
              },
              {
                recurrentStartDate: 'at 10:30',
                recurrentEndDate: 'at 11:00',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 19:00',
                recurrentEndDate: 'at 19:30',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 03:00',
                recurrentEndDate: 'at 03:30',
                isWorking: false,
              },
            ],
          },
          {
            id: 'weekend2',
            name: 'Samstag Früh- + Spätschicht',
            unspecifiedTimeIsWorking: false,
            // assigned resource will add some extra non working days to the event
            intervals: [
              {
                recurrentStartDate: 'at 06:00 on Saturday',
                recurrentEndDate: 'at 22:30 on Saturday',
                isWorking: true,
              },
              {
                recurrentStartDate: 'at 10:30',
                recurrentEndDate: 'at 11:00',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 19:00',
                recurrentEndDate: 'at 19:30',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 03:00',
                recurrentEndDate: 'at 03:30',
                isWorking: false,
              },
            ],
          },
        ],
      },
      {
        id: '3Schichtig',
        name: '3-Schichtig (F+S+N)',
        unspecifiedTimeIsWorking: false,
        intervals: [
          {
            recurrentStartDate: 'at 06:00 on Monday',
            recurrentEndDate: 'at 06:00 on Saturday',
            isWorking: true,
          },
          {
            recurrentStartDate: 'at 10:30',
            recurrentEndDate: 'at 11:00',
            isWorking: false,
          },
          {
            recurrentStartDate: 'at 19:00',
            recurrentEndDate: 'at 19:30',
            isWorking: false,
          },
          {
            recurrentStartDate: 'at 03:00',
            recurrentEndDate: 'at 03:30',
            isWorking: false,
          },
        ],
        children: [
          {
            id: '3SWeekend1',
            name: '3-Schichtig + Samstag Frühschicht',
            unspecifiedTimeIsWorking: false,
            // assigned resource will add some extra non working days to the event
            intervals: [
              {
                recurrentStartDate: 'at 06:00 on Saturday',
                recurrentEndDate: 'at 14:30 on Saturday',
                isWorking: true,
              },
              {
                recurrentStartDate: 'at 10:30',
                recurrentEndDate: 'at 11:00',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 19:00',
                recurrentEndDate: 'at 19:30',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 03:00',
                recurrentEndDate: 'at 03:30',
                isWorking: false,
              },
            ],
          },
          {
            id: '3SWeekend2',
            name: '3-Schichtig + Samstag Früh- + Spätschicht',
            unspecifiedTimeIsWorking: false,
            // assigned resource will add some extra non working days to the event
            intervals: [
              {
                recurrentStartDate: 'at 06:00 on Saturday',
                recurrentEndDate: 'at 22:30 on Saturday',
                isWorking: true,
              },
              {
                recurrentStartDate: 'at 10:30',
                recurrentEndDate: 'at 11:00',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 19:00',
                recurrentEndDate: 'at 19:30',
                isWorking: false,
              },
              {
                recurrentStartDate: 'at 03:00',
                recurrentEndDate: 'at 03:30',
                isWorking: false,
              },
            ],
          },
        ],
      },
    ];
marcio wrote: Fri Jan 27, 2023 3:56 am

If possible, could you assemble a sample project that looks like your environment with that issue happening? That would help us a lot to investigate what's causing that behavior that you're describing.

I will try.


Post by burnit »

If we pass in the state directly we receive this error:

Uncaught TypeError: Cannot assign to read only property 'id' of object '#<Object>'

Post by burnit »

So we found out, the reason is the redux component.

const rawData = useSelector(selectSchedulerData);
If we get the array over useSelector, i get this error

Uncaught TypeError: Cannot assign to read only property 'id' of object '#<Object>'

if i create a normal array --> const rawData = [........] everything is fine.

Any ideas?


Post by marcio »

Hey burnit,

No idea, for now, I created a ticket to investigate this, but without a sample project would take some time to investigate that.

If you could assemble one (you could get one of our demos and add your code to that), that would speed up a lot the investigation.

Best regards,
Márcio


Post by burnit »

Hey Márcio,

thanks for your reply. I found a solution for this.
The reason is, that redux uses the immer library to make state immutable.
So you are not able to add further props to the object you get.

The solution in combination with redux is to use RTK Query as you did in your demos.
With RTK Query everything works fine.

The topic can be closed.

Many thanks!


Post Reply