Notes

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import CreateDataset from 'icons/CreateDataset';
import DatasetSchedule from 'icons/DatasetSchedule';
import Notifier from 'icons/Notifier';
import Notify from 'icons/Notify';
import Summary from 'icons/Summary';
import DynamicStepperLayout from 'components/DynamicStepperLayout';
import {
closeSnackbar,
pushNewSnackbar,
} from 'components/UniversalSnackbar/actions';
import CreateDatasetTab from './components/CreateDatasetTab';
import InitialLoadTab from './components/InitialLoadTab';
import NotifyTab from './components/NotifyTab';
import SummaryTab from './components/SummaryTab';
import RecurringLoadTab from './components/RecurringLoad';
import saga from './saga';
import reducer from './reducer';
import {
getConnectionsDropdownApiStart,
resetReducer,
checkMilestonesApiStart,
} from './actions';
import useDatasetCreateStyles from './styles';
import FilterTab from './components/FilterTab';
import { selectMilestonesData, selectRecurringLoadData } from './selectors';

interface Props {
handleCancel: () => void;
handleSave: (...any) => void;
data?: any;
}

const initialDatasetData = {
datasetName: '',
description: '',
connectionName: '',
objectName: '',
objectId: '',
datasourceId: '',
connectionId: '',
};

const DatasetCreation = ({ handleCancel, handleSave, data }: Props) => {
useInjectReducer({ key: 'datasetCreation', reducer });
useInjectSaga({ key: 'datasetCreation', saga });

const classes = useDatasetCreateStyles();

const [initialLoad, setInitialLoad] = React.useState<Array<any>>([]);
const [datasetTags, setDatasetTags] = React.useState<any>([]);
const [datasetData, setDatasetData] = React.useState<any>(initialDatasetData);
const [schedulerData, setSchedulerData] = React.useState<any>({
days: [],
addDataChoice: [],
time: new Date(),
scheduler: '',
});
const [userList, setUserList] = React.useState<any>([]);
const [filters, setFilters] = React.useState<any>([]);

const {
data: { filter, initialLoad: initialLoadExist },
loading,
} = useSelector(selectMilestonesData);
const { data: recurringLoadData } = useSelector(selectRecurringLoadData);

const dispatch = useDispatch();

React.useEffect(() => {
if (!data) dispatch(getConnectionsDropdownApiStart('All'));
return () => {
dispatch(resetReducer());
};
}, []);

React.useEffect(() => {
setInitialLoad([]);
setFilters([]);
}, [datasetData.objectId]);

React.useEffect(() => {
if (datasetData.datasourceId && datasetData.objectId) {
const reqObj = {
dataSourceId: datasetData.datasourceId,
objectId: datasetData.objectId,
};
dispatch(checkMilestonesApiStart(reqObj));
}
}, [datasetData.datasourceId, datasetData.objectId]);

React.useEffect(() => {
if (loading)
dispatch(
pushNewSnackbar({
options: { variant: 'inProgress', key: 'MILESTONE' },
message: 'Loading Milestones',
}),
);
else {
dispatch(closeSnackbar('MILESTONE'));
}
}, [loading]);

React.useEffect(() => {
if (!data) return;
const obj = {};
Object.keys(initialDatasetData).forEach((k) => {
if (k in data) obj[k] = data[k] || initialDatasetData[k];
});
setDatasetData((prev) => ({ ...prev, ...obj }));
setUserList(data.users);
setDatasetTags(data.tags.map((tg) => tg.name));
}, [data]);

const cronMaker = (time, days) => {
const t = new Date(time);
let expression = `${t.getSeconds()}:${t.getMinutes()}:${t.getHours()}:`;
expression = expression.concat(days.join(','));
return expression;
};

const onSave = () => {
const filterArray = [...filters].map((f) => ({
fieldId: f.fieldId,
operatorCode: f.operatorCode,
sequence: f.sequence,
dcFieldType: f.dcFieldType,
argument: f.argument,
}));

const initialLoadValue = [...initialLoad].map((i) => ({
pkId: i.pkId,
configValue:
i.parameterType === 'TIME'
? new Date(i.configValue).toLocaleTimeString()
: new Date(i.configValue).toLocaleDateString(),
parameterType: i.parameterType,
}));

const recurringLoadValue = schedulerData.addDataChoice.map((v) => ({
pkId: recurringLoadData[1].pkDcDatasourceLoadConfigMetadataId,
configValue: v,
parameterType: recurringLoadData[1].parameterType,
}));

const loadConfigValue = initialLoadValue.concat(recurringLoadValue);

const cron = cronMaker(schedulerData.time, schedulerData.days);
const cronObj = {
pkId: recurringLoadData[0].pkDcDatasourceLoadConfigMetadataId,
configValue: cron,
parameterType: recurringLoadData[0].parameterType,
};
loadConfigValue.push(cronObj);
const users = userList.reduce((c, i) => [...c, i.pkUserId], []);
const tags = datasetTags.reduce((t, v) => [...t, v.pkDcTagId], []);

const creationObject = {
metaData: {
name: datasetData.datasetName,
description: datasetData.description,
dcObjectId: datasetData.objectId,
dcConnectionId: datasetData.connectionId,
dcCategoryId: datasetData.datasourceId,
},
filter: {
filterListDTO: filterArray,
},
loadConfig: {
configValueDTOs: loadConfigValue,
},
notify: {
userIds: users,
},
tag: {
ids: tags,
},
};
handleSave(creationObject);
};

const handleChangeDataset = (name, value) => {
setDatasetData((prev) => ({
...prev,
[name]: value,
}));
};

const handleChangeScheduler = (name, value, isMultivalued = 1) => {
setSchedulerData((prev) => ({
...prev,
[name]: value,
}));
if (name !== 'addDataChoice') {
return;
}
if (isMultivalued) {
const options = [...schedulerData.addDataChoice];
const index = options.findIndex((opn) => opn === value);
if (index === -1) {
options.push(value);
setSchedulerData((prev) => ({
...prev,
[name]: options,
}));
} else {
options.splice(index, 1);
setSchedulerData((prev) => ({
...prev,
[name]: options,
}));
}
} else {
const options = [...schedulerData.addDataChoice];
if (options.length) {
options.length = 0;
options.push(value);
} else {
options.push(value);
}
setSchedulerData((prev) => ({
...prev,
[name]: options,
}));
}
};

const config = [
{
header: 'Create New Dataset',
label: 'Create',
icon: <CreateDataset />,
content: [
<CreateDatasetTab
datasetData={datasetData}
handleChangeDataset={handleChangeDataset}
datasetTags={datasetTags}
setDatasetTags={setDatasetTags}
isEditable={!data}
/>,
],
isDisabled:
!datasetData.objectName ||
!datasetData.connectionName ||
!datasetData.datasetName ||
loading,
},
{
header: 'Apply Filter',
label: 'Filter',
icon: <DatasetSchedule />,
content: [<FilterTab filters={filters} handleChange={setFilters} />],
hidden: !filter,
},
{
header: 'Configure Initial Load',
label: 'Configure Initial Load',
icon: <DatasetSchedule />,
content: !initialLoad?.some((x) => typeof x.configValue === 'object')
? [
<InitialLoadTab
setInitialLoad={setInitialLoad}
initialLoad={initialLoad}
/>,
]
: [
<InitialLoadTab
setInitialLoad={setInitialLoad}
initialLoad={initialLoad}
/>,
<RecurringLoadTab
handleChange={handleChangeScheduler}
schedulerData={schedulerData}
/>,
],
isDisabled: false,
hidden:
!initialLoadExist &&
!initialLoad?.some((x) => typeof x.configValue === 'object'),
},
// {
// header: 'Configure Recurring Load',
// label: 'Configure Recurring Load',
// icon: <Notifier />,
// content: (
// <RecurringLoadTab
// handleChange={handleChangeScheduler}
// schedulerData={schedulerData}
// />
// ),
// isDisabled: false,
// hidden: !initialLoad?.some((x) => typeof x.configValue === 'object'),
// },
{
header: 'Notify',
label: 'Notify',
icon: <Summary />,
content: [<NotifyTab userList={userList} setUserList={setUserList} />],
isDisabled: false,
},
{
header: 'Summary',
label: 'Summary',
icon: <Notify />,
content: [
<SummaryTab
datasetData={datasetData}
datasetTags={datasetTags}
initialLoad={initialLoad}
schedulerData={schedulerData}
userList={userList}
filters={filters}
/>,
],
isDisabled: false,
},
];

// const handleSchedule = () => {
// const index = config.findIndex(
// (item) => item.header === 'Configure Initial Load',
// );

// };

return (
<DynamicStepperLayout
isCreate={false}
config={config}
classes={{ content: classes.contentWidth, stepper: classes.stepperWidth }}
onCancel={handleCancel}
onSave={onSave}
// specificHeader={"Configure"}
/>
);
};

export default DatasetCreation;