Hello, I no matter what I do I keep getting undefined for the value of the Recurrence Editor Component. I am building a NextJs application and I keep running into issues retrieving the values of certain components.
import { useState, useEffect, useRef } from 'react';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, DragAndDrop, Resize, ResourcesDirective, ResourceDirective, RecurrenceEditorComponent } from '@syncfusion/ej2-react-schedule';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { Placeholder } from '@aws-amplify/ui-react';
import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { urlConfig } from '../context/urls';
import ClientModal from '../components/modals/clientModal';
import { L10n } from '@syncfusion/ej2-base';
import { DateTimePickerComponent } from "@syncfusion/ej2-react-calendars";
const Schedule = () => {
const frequencyRef = useRef('');
const [ frequency, setFrequency ] = useState();
const [ clients, setClients ] = useState([]);
const [ clientOpen, setClientOpen ] = useState(false);
const [ selectedClient, setSelectedClient ] = useState();
L10n.load({
'en-US': {
'schedule': {
'saveButton': 'Add',
'newEvent': 'Add Shift'
},
}
});
const { isLoading, isSuccess, error, data: clientData, isFetching, isPreviousData } =
useQuery(
[ "getClients" ], async () => await axios.get(`${urlConfig}/api/clients/getClients/`, {
params: {
}
}
)
.then((res) => res.data)
.catch(err => console.log({ err })), {
keepPreviousData: true,
refetchOnWindowFocus: false,
retry: false,
retryOnMount: false,
refetchOnMount: false
}
);
useEffect(() => {
clientData && setClients(clientData);
// data && setCount(data.count);
// leads && data && setBrokerListings([...brokerListings, ...data.data])
return () => {
clientData;
};
}, [ clientData ]);
const autoCompleteTemplate = (props) => {
return (
{ ...props },
<div className='e-ddl e-popup e-lib e-control e-popup-open auto-complete-footer '>
<div className='e-content e-dropdownbase'>
<ul className='e-list-parent e-ul '>
<li onClick={() => setClientOpen(true)} className='e-list-item'>
+Add New Client
</li>
</ul>
</div>
</div>
);
};
const editorTemplate = (templateArgs) => {
console.log({ templateArgs });
let recObject
return (
templateArgs !== undefined ?
<div className='z-[999] flex flex-col space-y-2'>
{!clientOpen &&
<AutoCompleteComponent className='e-field' fields={{ value: 'name', id: 'id' }} id='client' data-name='Client' footerTemplate={autoCompleteTemplate} dataSource={clients} placeholder='Client' ></AutoCompleteComponent>
}
{clientOpen &&
<div className='py-3'>
<div className='p-2 border rounded-lg border-blue-600'>
<h2 className='text-lg font-semibold'>Enter New Client Info</h2>
<TextBoxComponent name='name' placeholder="Name" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />
<TextBoxComponent name="phone" placeholder="Phone" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />
<TextBoxComponent name="email" placeholder="Email" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />
<TextBoxComponent name="address" placeholder="Address" className='hover:border-0 ' cssClass="e-field" floatLabelType="Auto" />
<button onClick={() => setClientOpen(false)} className='mt-2 bg-blue-600 text-white rounded-lg px-2 py-1'>Cancel</button>
</div>
</div>
}
<DateTimePickerComponent id="StartTime" format="MM/dd/yy hh:mm a" data-name="StartTime" value={new Date(templateArgs.startTime || templateArgs.StartTime)} className="e-field" />
<DateTimePickerComponent id="EndTime" format="MM/dd/yy hh:mm a" data-name="EndTime" value={new Date(templateArgs.endTime || templateArgs.EndTime)} className="e-field" />
<RecurrenceEditorComponent change={() => console.log({ recObject })} ref={t => (recObject = t)} className="e-field" id="RecurrenceEditor" data-name="RecurrenceRule" />
</div> : <div></div>
);
};
const removePopup = (openPopUpArgs) => {
console.log({ openPopUpArgs });
openPopUpArgs.type === "QuickInfo" ? openPopUpArgs.cancel = true : '';
return (
<>
<AutoCompleteComponent className='e-field' fields={{ value: 'name', id: 'id' }} id='client' data-name='client' footerTemplate={autoCompleteTemplate} dataSource={clients} placeholder='Client' ></AutoCompleteComponent>
<DateTimePickerComponent id="StartTime" format="MM/dd/yy hh:mm a" data-name="StartTime" value={new Date(openPopUpArgs.startTime || openPopUpArgs.StartTime)} className="e-field" />
<DateTimePickerComponent id="EndTime" format="MM/dd/yy hh:mm a" data-name="EndTime" value={new Date(openPopUpArgs.endTime || openPopUpArgs.EndTime)} className="e-field" />
<RecurrenceEditorComponent change={() => console.log({ openPopUpArgs })} ref={frequencyRef} className="e-field" id="RecurrenceEditor" data-name="RecurrenceRule" />
</>
);
};
const onPopupClose = (e) => {
console.log('Pop Up Close: ', { e });
console.log({ frequencyRef });
setClientOpen(false);
setFrequency();
};
let data = [];
return (
<div>
<ScheduleComponent
title='New Shift'
dataBound={bound => console.log({ bound })}
actionComplete={actComplete => console.log({ actComplete })}
dataBinding={binding => console.log({ binding })}
editorTemplate={e => editorTemplate(e)}
popupClose={(e) => onPopupClose(e)}
popupOpen={(e) => removePopup(e)}
height='550px'
selectedDate={new Date()}
eventSettings={{
fields: {
// id: {name: 'id'},
// isAllDay: { name: 'isAllDay', },
// startTime: { name: 'startTime' },
// endTime: { name: 'endTime' },
// frequency: {name: "frequency"},
// client: {name: 'client'},
// phone: {value: 'value'},
// count: {name: 'count'},
// name: {name: 'name'}
},
dataSource: {
data:{
RecurrenceRule: "FREQ=WEEKLY;BYDAY=MO,TU,WE;INTERVAL=1;", value: "FREQ=WEEKLY;BYDAY=MO,TU,WE;INTERVAL=1;"
}
},
}}>
<Inject services={[ Day, Week, WorkWeek, Month, Agenda, DragAndDrop, Resize ]} />
</ScheduleComponent>
</div>
);
};
export default Schedule;
export async function getServerSideProps (context) {
const { query } = context;
const page = query.page || 1;
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnMount: false
}
}
});
await queryClient.prefetchQuery([ 'getClients' ], axios.get(`${urlConfig}/api/clients/getClients`, {
params: {
}
}).then(res => res.data).catch(err => err));
return {
props: {
dehydratedState: dehydrate(queryClient, {
})
}
};
}
