Skip to content

Commit 1fa5d70

Browse files
anuj452005anuj452005
committed
Refactor components to use styled components from MUI instead of withStyles and withTheme. Update package.json to require React 18 and MUI 7.. Clean up imports and improve component structure for better readability.
1 parent 43c518f commit 1fa5d70

27 files changed

Lines changed: 900 additions & 13733 deletions

‎package-lock.json‎

Lines changed: 0 additions & 12776 deletions
This file was deleted.

‎package.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
"prepare": "npm run build"
1818
},
1919
"peerDependencies": {
20-
"react": ">=17.0.0",
21-
"react-dom": ">=17.0.0",
22-
"react-intl": "^5.8.1"
20+
"react": ">=18.2.0",
21+
"react-dom": ">=18.2.0",
22+
"react-intl": "^7.1.11"
2323
},
2424
"devDependencies": {
2525
"@babel/cli": "^7.8.4",
@@ -46,9 +46,8 @@
4646
"@emotion/cache": "^11.12.0",
4747
"@emotion/react": "^11.12.0",
4848
"@emotion/styled": "^11.12.0",
49-
"@mui/icons-material": "^5.15.0",
50-
"@mui/material": "^5.15.0",
51-
"@mui/styles": "^5.15.0",
49+
"@mui/icons-material": "^7.2.0",
50+
"@mui/material": "^7.2.0",
5251
"flat": "^6.0.1",
5352
"lodash": "^4.17.21",
5453
"redux": "^5.0.1"

‎src/components/BenefitPackageGroupPanel.jsx‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,28 @@ import {
1212
} from '@openimis/fe-core';
1313
import { People as PeopleIcon } from '@mui/icons-material';
1414
import { injectIntl } from 'react-intl';
15-
import { withTheme, withStyles } from '@mui/styles';
15+
import { styled } from '@mui/material/styles';
1616
import { EMPTY_STRING, RIGHT_GROUP_UPDATE, SOCIAL_PROTECTION_MODULE } from '../constants';
1717

18-
const styles = (theme) => ({
19-
tableTitle: theme.table.title,
20-
item: theme.paper.item,
21-
paper: theme.paper.paper,
22-
fullHeight: {
23-
height: '100%',
24-
},
18+
const StyledGrid = styled(Grid)(({ theme }) => ({
19+
...theme.table.title,
20+
}));
21+
22+
const StyledGridItem = styled(Grid)(({ theme }) => ({
23+
...theme.paper.item,
24+
}));
25+
26+
const StyledFullHeight = styled(Grid)({
27+
height: '100%',
2528
});
2629

27-
function renderHeadPanelSubtitle(rights, intl, history, modulesManager, classes, groupUuid) {
30+
function renderHeadPanelSubtitle(rights, intl, history, modulesManager, groupUuid) {
2831
const openGroup = () => history.push(`/${modulesManager.getRef('individual.route.group')}`
2932
+ `/${groupUuid}`);
3033

3134
return (
3235
<Grid item>
33-
<Grid container align="center" justify="center" direction="column" className={classes.fullHeight}>
36+
<StyledFullHeight container align="center" justify="center" direction="column">
3437
<Grid item>
3538
<Typography>
3639
<FormattedMessage
@@ -46,47 +49,42 @@ function renderHeadPanelSubtitle(rights, intl, history, modulesManager, classes,
4649
)}
4750
</Typography>
4851
</Grid>
49-
</Grid>
52+
</StyledFullHeight>
5053
</Grid>
5154
);
5255
}
5356

54-
class BenefitPackageGroupPanel extends FormPanel {
55-
render() {
56-
const {
57-
classes, readOnly, intl, history, modulesManager, rights, groupBeneficiaries,
58-
} = this.props;
57+
function BenefitPackageGroupPanel({
58+
readOnly, intl, history, modulesManager, rights, groupBeneficiaries,
59+
}) {
60+
if (!groupBeneficiaries) return null;
5961

60-
if (!groupBeneficiaries) return null;
62+
const { group: { uuid }, status, jsonExt } = groupBeneficiaries;
6163

62-
const { group: { uuid }, status, jsonExt } = groupBeneficiaries;
63-
64-
const jsonExtFields = createFieldsBasedOnJSON(jsonExt);
65-
66-
return (
67-
<>
68-
<Grid container className={classes.tableTitle}>
69-
{renderHeadPanelSubtitle(rights, intl, history, modulesManager, classes, uuid)}
70-
</Grid>
71-
<Grid container className={classes.item}>
72-
<Grid item xs={3} className={classes.item}>
73-
<TextInput
74-
module={SOCIAL_PROTECTION_MODULE}
75-
label="beneficiary.status"
76-
value={status ?? EMPTY_STRING}
77-
readOnly={readOnly}
78-
/>
79-
</Grid>
80-
{jsonExtFields?.map((jsonExtField) => (
81-
<Grid item xs={3} className={classes.item}>
82-
{renderInputComponent(SOCIAL_PROTECTION_MODULE, jsonExtField)}
83-
</Grid>
84-
))}
85-
</Grid>
64+
const jsonExtFields = createFieldsBasedOnJSON(jsonExt);
8665

87-
</>
88-
);
89-
}
66+
return (
67+
<>
68+
<StyledGrid container>
69+
{renderHeadPanelSubtitle(rights, intl, history, modulesManager, uuid)}
70+
</StyledGrid>
71+
<Grid container>
72+
<StyledGridItem item xs={3}>
73+
<TextInput
74+
module={SOCIAL_PROTECTION_MODULE}
75+
label="beneficiary.status"
76+
value={status ?? EMPTY_STRING}
77+
readOnly={readOnly}
78+
/>
79+
</StyledGridItem>
80+
{jsonExtFields?.map((jsonExtField) => (
81+
<StyledGridItem item xs={3}>
82+
{renderInputComponent(SOCIAL_PROTECTION_MODULE, jsonExtField)}
83+
</StyledGridItem>
84+
))}
85+
</Grid>
86+
</>
87+
);
9088
}
9189

92-
export default injectIntl(withTheme(withStyles(styles)(BenefitPackageGroupPanel)));
90+
export default injectIntl(BenefitPackageGroupPanel);

‎src/components/BenefitPackageIndividualPanel.jsx‎

Lines changed: 78 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,28 @@ import {
1313
} from '@openimis/fe-core';
1414
import { Person } from '@mui/icons-material';
1515
import { injectIntl } from 'react-intl';
16-
import { withTheme, withStyles } from '@mui/styles';
16+
import { styled } from '@mui/material/styles';
1717
import { EMPTY_STRING, RIGHT_INDIVIDUAL_UPDATE, SOCIAL_PROTECTION_MODULE } from '../constants';
1818

19-
const styles = (theme) => ({
20-
tableTitle: theme.table.title,
21-
item: theme.paper.item,
22-
paper: theme.paper.paper,
23-
fullHeight: {
24-
height: '100%',
25-
},
19+
const StyledGrid = styled(Grid)(({ theme }) => ({
20+
...theme.table.title,
21+
}));
22+
23+
const StyledGridItem = styled(Grid)(({ theme }) => ({
24+
...theme.paper.item,
25+
}));
26+
27+
const StyledFullHeight = styled(Grid)({
28+
height: '100%',
2629
});
2730

28-
function renderHeadPanelSubtitle(rights, intl, history, modulesManager, classes, individualUuid) {
31+
function renderHeadPanelSubtitle(rights, intl, history, modulesManager, individualUuid) {
2932
const openIndividual = () => history.push(`/${modulesManager.getRef('individual.route.individual')}`
3033
+ `/${individualUuid}`);
3134

3235
return (
3336
<Grid item>
34-
<Grid container align="center" justify="center" direction="column" className={classes.fullHeight}>
37+
<StyledFullHeight container align="center" justify="center" direction="column">
3538
<Grid item>
3639
<Typography>
3740
<FormattedMessage
@@ -52,82 +55,78 @@ function renderHeadPanelSubtitle(rights, intl, history, modulesManager, classes,
5255
)}
5356
</Typography>
5457
</Grid>
55-
</Grid>
58+
</StyledFullHeight>
5659
</Grid>
5760
);
5861
}
5962

60-
class BenefitPackageIndividualPanel extends FormPanel {
61-
render() {
62-
const {
63-
classes, readOnly, intl, history, modulesManager, rights, beneficiary,
64-
} = this.props;
63+
function BenefitPackageIndividualPanel({
64+
readOnly, intl, history, modulesManager, rights, beneficiary,
65+
}) {
66+
if (!beneficiary) return null;
6567

66-
if (!beneficiary) return null;
68+
const {
69+
individual, status, jsonExt,
70+
} = beneficiary;
6771

68-
const {
69-
individual, status, jsonExt,
70-
} = beneficiary;
72+
const jsonExtFields = createFieldsBasedOnJSON(jsonExt);
7173

72-
const jsonExtFields = createFieldsBasedOnJSON(jsonExt);
73-
74-
return (
75-
<>
76-
<Grid container className={classes.tableTitle}>
77-
{renderHeadPanelSubtitle(rights, intl, history, modulesManager, classes, individual?.uuid)}
78-
</Grid>
79-
<Grid container className={classes.item}>
80-
<Grid item xs={3} className={classes.item}>
81-
<TextInput
82-
module={SOCIAL_PROTECTION_MODULE}
83-
label="beneficiary.firstName"
84-
value={individual.firstName}
85-
readOnly={readOnly}
86-
/>
87-
</Grid>
88-
<Grid item xs={3} className={classes.item}>
89-
<TextInput
90-
module={SOCIAL_PROTECTION_MODULE}
91-
label="beneficiary.lastName"
92-
value={individual.lastName}
93-
readOnly={readOnly}
94-
/>
95-
</Grid>
96-
<Grid item xs={3} className={classes.item}>
97-
<PublishedComponent
98-
pubRef="core.DatePicker"
99-
module={SOCIAL_PROTECTION_MODULE}
100-
label="beneficiary.dob"
101-
value={individual.dob}
102-
readOnly={readOnly}
103-
/>
104-
</Grid>
105-
<Grid item xs={3} className={classes.item}>
106-
<TextInput
107-
module={SOCIAL_PROTECTION_MODULE}
108-
label="beneficiary.status"
109-
value={status ?? EMPTY_STRING}
110-
readOnly={readOnly}
111-
/>
112-
</Grid>
113-
<Grid item xs={12}>
114-
<PublishedComponent
115-
pubRef="location.DetailedLocation"
116-
withNull
117-
readOnly // TODO: readonly if belong to group
118-
required={false}
119-
value={!individual ? null : individual.location}
120-
/>
121-
</Grid>
122-
{jsonExtFields?.map((jsonExtField) => (
123-
<Grid item xs={3} className={classes.item}>
124-
{renderInputComponent(SOCIAL_PROTECTION_MODULE, jsonExtField)}
125-
</Grid>
126-
))}
74+
return (
75+
<>
76+
<StyledGrid container>
77+
{renderHeadPanelSubtitle(rights, intl, history, modulesManager, individual?.uuid)}
78+
</StyledGrid>
79+
<Grid container>
80+
<StyledGridItem item xs={3}>
81+
<TextInput
82+
module={SOCIAL_PROTECTION_MODULE}
83+
label="beneficiary.firstName"
84+
value={individual.firstName}
85+
readOnly={readOnly}
86+
/>
87+
</StyledGridItem>
88+
<StyledGridItem item xs={3}>
89+
<TextInput
90+
module={SOCIAL_PROTECTION_MODULE}
91+
label="beneficiary.lastName"
92+
value={individual.lastName}
93+
readOnly={readOnly}
94+
/>
95+
</StyledGridItem>
96+
<StyledGridItem item xs={3}>
97+
<PublishedComponent
98+
pubRef="core.DatePicker"
99+
module={SOCIAL_PROTECTION_MODULE}
100+
label="beneficiary.dob"
101+
value={individual.dob}
102+
readOnly={readOnly}
103+
/>
104+
</StyledGridItem>
105+
<StyledGridItem item xs={3}>
106+
<TextInput
107+
module={SOCIAL_PROTECTION_MODULE}
108+
label="beneficiary.status"
109+
value={status ?? EMPTY_STRING}
110+
readOnly={readOnly}
111+
/>
112+
</StyledGridItem>
113+
<Grid item xs={12}>
114+
<PublishedComponent
115+
pubRef="location.DetailedLocation"
116+
withNull
117+
readOnly // TODO: readonly if belong to group
118+
required={false}
119+
value={!individual ? null : individual.location}
120+
/>
127121
</Grid>
128-
</>
129-
);
130-
}
122+
{jsonExtFields?.map((jsonExtField) => (
123+
<StyledGridItem item xs={3}>
124+
{renderInputComponent(SOCIAL_PROTECTION_MODULE, jsonExtField)}
125+
</StyledGridItem>
126+
))}
127+
</Grid>
128+
</>
129+
);
131130
}
132131

133-
export default injectIntl(withTheme(withStyles(styles)(BenefitPackageIndividualPanel)));
132+
export default injectIntl(BenefitPackageIndividualPanel);

‎src/components/BenefitPackageMembersFilters.jsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@ import React from 'react';
22
import _debounce from 'lodash/debounce';
33
import { injectIntl } from 'react-intl';
44
import { Grid } from '@mui/material';
5-
import { withTheme, withStyles } from '@mui/styles';
5+
import { styled } from '@mui/material/styles';
66
import { TextInput, PublishedComponent } from '@openimis/fe-core';
77
import { CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING } from '../constants';
88
import { defaultFilterStyles } from '../util/styles';
99

10+
const StyledGrid = styled(Grid)(({ theme }) => ({
11+
...defaultFilterStyles(theme).form,
12+
}));
13+
14+
const StyledGridItem = styled(Grid)(({ theme }) => ({
15+
...defaultFilterStyles(theme).item,
16+
}));
17+
1018
function BenefitPackageMembersFilters({
11-
classes, filters, onChangeFilters,
19+
filters, onChangeFilters,
1220
}) {
1321
const debouncedOnChangeFilters = _debounce(onChangeFilters, DEFAULT_DEBOUNCE_TIME);
1422

@@ -37,24 +45,24 @@ function BenefitPackageMembersFilters({
3745
};
3846

3947
return (
40-
<Grid container className={classes.form}>
41-
<Grid item xs={2} className={classes.item}>
48+
<StyledGrid container>
49+
<StyledGridItem item xs={2}>
4250
<TextInput
4351
module="socialProtection"
4452
label="beneficiary.firstName"
4553
value={filterTextFieldValue('firstName')}
4654
onChange={onChangeStringFilter('firstName', CONTAINS_LOOKUP)}
4755
/>
48-
</Grid>
49-
<Grid item xs={2} className={classes.item}>
56+
</StyledGridItem>
57+
<StyledGridItem item xs={2}>
5058
<TextInput
5159
module="socialProtection"
5260
label="beneficiary.lastName"
5361
value={filterTextFieldValue('lastName')}
5462
onChange={onChangeStringFilter('lastName', CONTAINS_LOOKUP)}
5563
/>
56-
</Grid>
57-
<Grid item xs={2} className={classes.item}>
64+
</StyledGridItem>
65+
<StyledGridItem item xs={2}>
5866
<PublishedComponent
5967
pubRef="core.DatePicker"
6068
module="socialProtection"
@@ -68,11 +76,9 @@ function BenefitPackageMembersFilters({
6876
},
6977
])}
7078
/>
71-
</Grid>
72-
</Grid>
79+
</StyledGridItem>
80+
</StyledGrid>
7381
);
7482
}
7583

76-
export default injectIntl(withTheme(withStyles(defaultFilterStyles)(
77-
BenefitPackageMembersFilters,
78-
)));
84+
export default injectIntl(BenefitPackageMembersFilters);

0 commit comments

Comments
 (0)