add crud service, crud atoms, crud table, graphs page

This commit is contained in:
2021-06-26 00:28:39 +03:00
parent 40ac760857
commit 1d228b0669
18 changed files with 267 additions and 59 deletions

View File

@ -0,0 +1,64 @@
import {Atom} from '@reatom/core';
import {useAtom} from '@reatom/react';
import {head} from 'lodash';
import Table, {ColumnsType} from 'antd/lib/table';
import React, {FC, memo, useCallback, useEffect, useMemo} from 'react';
import {CrudService} from '../../services/CrudService';
import {EntityMode} from '../../types/EntityModes';
import {EntityWithId} from '../../api/CrudAPI';
type Props<T> = {
entityListAtom: Atom<T[]>;
service: CrudService<T>;
};
export const createEntityTable = function <T extends EntityWithId<unknown>> ({
entityListAtom,
service,
}: Props<T>): FC {
return memo(() => {
const entityList = useAtom(entityListAtom);
useEffect(() => {
service.loadEntityList();
}, []);
const onRow = useCallback((entity: EntityWithId<T>) => ({
onClick: () => {
service.navigate(EntityMode.Show, entity.id);
},
}), []);
const columns: ColumnsType<EntityWithId<T>> = useMemo(() => {
const entity = head(entityList);
if (entity) {
return Object.keys(entity).map(field => {
return {
title: field,
dataIndex: field,
key: field,
};
});
}
return [];
}, [entityList]);
const dataSource = useMemo(() => {
return entityList.map(entity => {
return {
...entity,
key: entity.id,
};
});
}, [entityList]);
return (
<Table
columns={columns}
dataSource={dataSource}
onRow={onRow}
/>
);
});
};

View File

@ -0,0 +1 @@
export * from './EntityTable';