Skip to content

Commit 140969b

Browse files
bobbyqiz448bobbyqiz448
committed
A bit of code refactoring
1 parent af9955f commit 140969b

File tree

2 files changed

+157
-174
lines changed
  • packages
    • fhir-location-management/src/components/AllLocationListFlat
    • location-management/src

2 files changed

+157
-174
lines changed

‎packages/fhir-location-management/src/components/AllLocationListFlat/index.tsx

+156-172
Original file line numberDiff line numberDiff line change
@@ -1,199 +1,183 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useEffect, useState } from 'react';
22
import { useSimpleTabularView } from '@opensrp/react-utils';
33
import { RouteComponentProps } from 'react-router';
44
import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation';
5-
import { locationResourceType, URL_LOCATION_UNIT_EDIT, URL_LOCATION_UNIT_ADD } from '../../constants';
65
import {
7-
BrokenPage,
8-
useSearchParams,
9-
TableLayout,
10-
viewDetailsQuery,
11-
PageHeader,
12-
SearchForm,
6+
locationResourceType,
7+
URL_LOCATION_UNIT_EDIT,
8+
URL_LOCATION_UNIT_ADD,
9+
} from '../../constants';
10+
import {
11+
BrokenPage,
12+
useSearchParams,
13+
TableLayout,
14+
viewDetailsQuery,
15+
PageHeader,
16+
SearchForm,
1317
} from '@opensrp/react-utils';
1418
import { Dictionary } from '@onaio/utils';
1519
import { Helmet } from 'react-helmet';
1620
import { useTranslation } from '../../mls';
17-
import { Row, Col, Button, Divider, Dropdown, Popconfirm } from 'antd';
21+
import { Row, Col, Button, Divider, Dropdown } from 'antd';
1822
import { useHistory, Link } from 'react-router-dom';
1923
import { RbacCheck, useUserRole } from '@opensrp/rbac';
2024
import type { MenuProps } from 'antd';
2125
import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
2226
import { LocationUnitDetail } from '../LocationUnitDetail';
2327

24-
25-
2628
interface RouteParams {
27-
locationId: string | undefined;
29+
locationId: string | undefined;
2830
}
2931

3032
interface Props {
31-
fhirBaseURL: string;
32-
LocationPageSize: number;
33+
fhirBaseURL: string;
34+
LocationPageSize: number;
3335
}
3436

3537
const getSearchParams = () => {
36-
return { "_include": "Location:partof" };
38+
return { _include: 'Location:partof' };
3739
};
3840

3941
export type LocationListPropTypes = Props & RouteComponentProps<RouteParams>;
4042

41-
42-
4343
export const AllLocationListFlat: React.FC<LocationListPropTypes> = (props) => {
44-
const { fhirBaseURL } = props;
45-
const { t } = useTranslation();
46-
const history = useHistory();
47-
const [detailId, setDetailId] = useState<string>('');
48-
const { addParam, sParams } = useSearchParams();
49-
const userRole = useUserRole();
50-
const resourceId = sParams.get(viewDetailsQuery) ?? undefined;
51-
52-
const {
53-
queryValues: { data, isFetching, isLoading, error, refetch },
54-
tablePaginationProps,
55-
searchFormProps,
56-
} = useSimpleTabularView<ILocation>(fhirBaseURL, locationResourceType, getSearchParams());
57-
58-
if (error && !data) {
59-
return <BrokenPage errorMessage={(error as Error).message} />;
60-
}
61-
62-
// this is for debugging
63-
useEffect(() => {
64-
console.log("Component mounted");
65-
console.log("Data:", data);
66-
console.log("Is Fetching:", isFetching);
67-
console.log("Is Loading:", isLoading);
68-
console.log("Error:", error);
69-
70-
return () => {
71-
console.log("Component unmounted");
72-
};
73-
}, [data, isFetching, isLoading, error]);
74-
// TODO delete this (useEffect)
75-
76-
77-
const tableData: any[] = (data?.records ?? []).map((datum: Dictionary) => ({
78-
key: datum.id,
79-
id: datum.id,
80-
name: datum.name,
81-
}));
82-
83-
type TableData = typeof tableData[0];
84-
85-
86-
const getItems = (record: TableData): MenuProps['items'] => {
87-
return [
88-
89-
{
90-
key: '1',
91-
permissions: [],
92-
label: (
93-
<Button type="link" onClick={() => addParam(viewDetailsQuery, record.id)}>
94-
View Details
95-
</Button>
96-
),
97-
},
98-
]
99-
.filter((item) => userRole.hasPermissions(item.permissions))
100-
.map((item) => {
101-
const { permissions, ...rest } = item;
102-
return rest;
103-
});
104-
};
105-
106-
const columns = [
107-
// {
108-
// title: t('Name'),
109-
// dataIndex: 'name' as const,
110-
// editable: true,
111-
// },
112-
{
113-
title: t('Type'),
114-
dataIndex: 'resourceType' as const,
115-
editable: true,
116-
},
117-
{
118-
title: t('Status'),
119-
dataIndex: 'status' as const,
120-
editable: true,
121-
},
122-
{
123-
title: t('Parent'),
124-
dataIndex: 'parent' as const,
125-
editable: true,
126-
},
127-
{
128-
title: t('Actions'),
129-
width: '10%',
130-
131-
// eslint-disable-next-line react/display-name
132-
render: (_: unknown, record: TableData) => (
133-
<span className="d-flex align-items-center">
134-
<RbacCheck permissions={['Location.update']}>
135-
<>
136-
<Link to={`${URL_LOCATION_UNIT_EDIT}/${record.id.toString()}`} className="m-0 p-1">
137-
{t('Edit')}
138-
</Link>
139-
<Divider type="vertical" />
140-
</>
141-
</RbacCheck>
142-
<Dropdown
143-
menu={{ items: getItems(record) }}
144-
placement="bottomRight"
145-
arrow
146-
trigger={['click']}
147-
>
148-
<MoreOutlined className="more-options" data-testid="action-dropdown" />
149-
</Dropdown>
150-
</span>
151-
),
152-
},
153-
];
154-
155-
156-
157-
const tableProps = {
158-
datasource: tableData,
159-
columns,
160-
loading: isFetching || isLoading,
161-
pagination: tablePaginationProps,
162-
};
163-
164-
return (
165-
<div className="content-section">
166-
<Helmet>
167-
<title>{t('All Locations List')}</title>
168-
</Helmet>
169-
<PageHeader title={t('All Locations Flat')} />
170-
<Row className="list-view">
171-
<Col className="main-content">
172-
<div className="main-content__header">
173-
<SearchForm {...searchFormProps} />
174-
<RbacCheck permissions={['Location.create']}>
175-
<Link to={URL_LOCATION_UNIT_ADD}>
176-
<Button type="primary" onClick={() => history.push(URL_LOCATION_UNIT_ADD)}>
177-
<PlusOutlined />
178-
{t('Add Location')}
179-
</Button>
180-
</Link>
181-
</RbacCheck>
182-
</div>
183-
<TableLayout {...tableProps} />
184-
</Col>
185-
{detailId ? (
186-
<LocationUnitDetail
187-
fhirBaseUrl={fhirBaseURL}
188-
onClose={() => setDetailId('')}
189-
detailId={detailId}
190-
/>
191-
) : null}
192-
</Row>
193-
</div>
194-
);
44+
const { fhirBaseURL } = props;
45+
const { t } = useTranslation();
46+
const history = useHistory();
47+
const [detailId, setDetailId] = useState<string>('');
48+
const { addParam, sParams } = useSearchParams();
49+
const userRole = useUserRole();
50+
const resourceId = sParams.get(viewDetailsQuery) ?? undefined;
51+
52+
const {
53+
queryValues: { data, isFetching, isLoading, error, refetch },
54+
tablePaginationProps,
55+
searchFormProps,
56+
} = useSimpleTabularView<ILocation>(fhirBaseURL, locationResourceType, getSearchParams());
57+
58+
if (error && !data) {
59+
return <BrokenPage errorMessage={(error as Error).message} />;
60+
}
61+
62+
63+
useEffect(() => {
64+
}, [data, isFetching, isLoading, error]);
65+
66+
const tableData: any[] = (data?.records ?? []).map((datum: Dictionary) => ({
67+
key: datum.id,
68+
id: datum.id,
69+
name: datum.name,
70+
type: datum.physicalType.coding[0].display,
71+
status: datum.status,
72+
parent: datum.partOf,
73+
}));
74+
75+
type TableData = typeof tableData[0];
76+
77+
const getItems = (record: TableData): MenuProps['items'] => {
78+
return [
79+
{
80+
key: '1',
81+
permissions: [],
82+
label: (
83+
<Button type="link" onClick={() => addParam(viewDetailsQuery, record.id)}>
84+
View Details
85+
</Button>
86+
),
87+
},
88+
]
89+
.filter((item) => userRole.hasPermissions(item.permissions))
90+
.map((item) => {
91+
const { permissions, ...rest } = item;
92+
return rest;
93+
});
94+
};
95+
96+
const columns = [
97+
{
98+
title: t('Name'),
99+
dataIndex: 'name' as const,
100+
editable: true,
101+
},
102+
{
103+
title: t('Type'),
104+
dataIndex: 'type' as const,
105+
editable: true,
106+
},
107+
{
108+
title: t('Status'),
109+
dataIndex: 'status' as const,
110+
editable: true,
111+
},
112+
{
113+
title: t('Parent'),
114+
dataIndex: 'parent' as const,
115+
editable: true,
116+
},
117+
{
118+
title: t('Actions'),
119+
width: '10%',
120+
121+
// eslint-disable-next-line react/display-name
122+
render: (_: unknown, record: TableData) => (
123+
<span className="d-flex align-items-center">
124+
<RbacCheck permissions={['Location.update']}>
125+
<>
126+
<Link to={`${URL_LOCATION_UNIT_EDIT}/${record.id.toString()}`} className="m-0 p-1">
127+
{t('Edit')}
128+
</Link>
129+
<Divider type="vertical" />
130+
</>
131+
</RbacCheck>
132+
<Dropdown
133+
menu={{ items: getItems(record) }}
134+
placement="bottomRight"
135+
arrow
136+
trigger={['click']}
137+
>
138+
<MoreOutlined className="more-options" data-testid="action-dropdown" />
139+
</Dropdown>
140+
</span>
141+
),
142+
},
143+
];
144+
145+
const tableProps = {
146+
datasource: tableData,
147+
columns,
148+
loading: isFetching || isLoading,
149+
pagination: tablePaginationProps,
150+
};
151+
152+
return (
153+
<div className="content-section">
154+
<Helmet>
155+
<title>{t('All Locations List')}</title>
156+
</Helmet>
157+
<PageHeader title={t('All Locations Flat')} />
158+
<Row className="list-view">
159+
<Col className="main-content">
160+
<div className="main-content__header">
161+
<SearchForm {...searchFormProps} />
162+
<RbacCheck permissions={['Location.create']}>
163+
<Link to={URL_LOCATION_UNIT_ADD}>
164+
<Button type="primary" onClick={() => history.push(URL_LOCATION_UNIT_ADD)}>
165+
<PlusOutlined />
166+
{t('Add Location')}
167+
</Button>
168+
</Link>
169+
</RbacCheck>
170+
</div>
171+
<TableLayout {...tableProps} />
172+
</Col>
173+
{detailId ? (
174+
<LocationUnitDetail
175+
fhirBaseUrl={fhirBaseURL}
176+
onClose={() => setDetailId('')}
177+
detailId={detailId}
178+
/>
179+
) : null}
180+
</Row>
181+
</div>
182+
);
195183
};
196-
197-
198-
199-

‎packages/location-management/src/index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import LocationUnitGroupAddEdit from './components/LocationUnitGroupAddEdit';
44
import Tree from './components/LocationTree';
55
import { FormInstances } from './components/LocationForm/utils';
66

7-
87
export * as locationHierachyDucks from './ducks/location-hierarchy';
98
export * as updatedLocationHierachyDucks from './ducks/locationHierarchy';
109
export * from './ducks/types';
@@ -18,4 +17,4 @@ export * from './ducks/locationHierarchy/utils';
1817
export * from './helpers/dataLoaders';
1918
export * from './ducks/locationHierarchy/types';
2019
export * from './ducks/location-units';
21-
export * from '../../fhir-location-management/src/components/AllLocationListFlat'
20+
export * from '../../fhir-location-management/src/components/AllLocationListFlat';

0 commit comments

Comments
 (0)