Skip to content

Commit e51d615

Browse files
callmejim1226callmejim1226
committed
#1203: used all variables as a components
1 parent 7289965 commit e51d615

2 files changed

Lines changed: 95 additions & 106 deletions

File tree

‎src/frontend/src/pages/ChangeRequestDetailPage/ChangeRequestActionMenu.tsx‎

Lines changed: 95 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { useCurrentUser } from '../../hooks/users.hooks';
1515
import { projectWbsPipe } from '../../utils/pipes';
1616
import { routes } from '../../utils/routes';
1717
import { userToAutocompleteOption } from '../../utils/task.utils';
18-
import { ReactElement } from 'react';
18+
import { useState } from 'react';
1919

2020
interface ChangeRequestActionMenuProps {
2121
isUserAllowedToReview: boolean;
@@ -24,26 +24,23 @@ interface ChangeRequestActionMenuProps {
2424
changeRequest: ChangeRequest;
2525
handleReviewOpen: () => void;
2626
handleDeleteOpen: () => void;
27-
handleReviewerIdsSelect: (Ids: number[]) => void;
28-
reviewerIds: number[];
2927
users: User[];
3028
}
3129

32-
const ChangeRequestActionMenu: React.FC<ChangeRequestActionMenuProps> = ({
30+
const ChangeRequestActionMenu = ({
3331
isUserAllowedToReview,
3432
isUserAllowedToImplement,
3533
isUserAllowedToDelete,
3634
changeRequest,
3735
handleReviewOpen,
3836
handleDeleteOpen,
39-
handleReviewerIdsSelect,
40-
reviewerIds,
4137
users
4238
}: ChangeRequestActionMenuProps) => {
4339
const { mutateAsync: requestCRReview } = useRequestCRReview(changeRequest.crId.toString());
4440
const toast = useToast();
4541
const currentUser = useCurrentUser();
4642
const history = useHistory();
43+
const [reviewerIds, setReviewerIds] = useState<number[]>([]);
4744

4845
const handleRequestReviewerClick = async () => {
4946
if (reviewerIds.length === 0) {
@@ -61,112 +58,108 @@ const ChangeRequestActionMenu: React.FC<ChangeRequestActionMenuProps> = ({
6158

6259
const isRequestAllowed = changeRequest.submitter.userId === currentUser.userId;
6360

64-
const unreviewedActionsDropdown = (): ReactElement => {
65-
return (
66-
<div style={{ marginTop: '10px' }}>
67-
<ActionsMenu
68-
divider={true}
69-
buttons={[
70-
{
71-
title: 'Review',
72-
onClick: handleReviewOpen,
73-
disabled: !isUserAllowedToReview,
74-
icon: <EditIcon fontSize="small" />
75-
},
76-
{
77-
title: 'Delete',
78-
onClick: handleDeleteOpen,
79-
disabled: !isUserAllowedToDelete,
80-
icon: <DeleteIcon fontSize="small" />
81-
}
82-
]}
83-
/>
84-
</div>
85-
);
86-
};
87-
88-
const requestReviewerDropdown = (): ReactElement => {
89-
return (
90-
<>
91-
<Autocomplete
92-
isOptionEqualToValue={(option, value) => option.id === value.id}
93-
limitTags={1}
94-
disableCloseOnSelect
95-
multiple
96-
options={users.filter((user) => isLeadership(user.role)).map(userToAutocompleteOption)}
97-
getOptionLabel={(option) => option.label}
98-
onChange={(_, values) => handleReviewerIdsSelect(values.map((value) => value.id))}
99-
renderTags={() => null}
100-
renderOption={(props, option, { selected }) => (
101-
<li {...props}>
102-
<Checkbox
103-
icon={<CheckBoxOutlineBlankIcon />}
104-
checkedIcon={<CheckBoxIcon />}
105-
style={{ marginRight: 8 }}
106-
checked={selected}
107-
/>
108-
{option.label}
109-
</li>
110-
)}
111-
renderInput={(params) => (
112-
<TextField {...params} variant="standard" placeholder={`${reviewerIds.length} Reviewers Selected`} />
113-
)}
114-
/>
115-
116-
<Box display="flex" flexDirection="row" gap="10px" justifyContent="right">
117-
<NERButton
118-
sx={{ mt: '10px', float: 'right' }}
119-
variant="contained"
120-
disabled={!isRequestAllowed}
121-
onClick={handleRequestReviewerClick}
122-
>
123-
Request Review
124-
</NERButton>
125-
{unreviewedActionsDropdown()}
126-
</Box>
127-
</>
128-
);
129-
};
130-
131-
const renderUnreviewedActionsDropdown =
132-
isRequestAllowed && changeRequest.status === ChangeRequestStatus.Open
133-
? requestReviewerDropdown()
134-
: unreviewedActionsDropdown();
135-
136-
const implementCrDropdown = (): ReactElement => {
137-
return (
61+
const UnreviewedActionsDropdown = () => (
62+
<div style={{ marginTop: '10px' }}>
13863
<ActionsMenu
64+
divider={true}
13965
buttons={[
14066
{
141-
title: 'Create New Project',
142-
onClick: () =>
143-
history.push(`${routes.PROJECTS_NEW}?crId=${changeRequest.crId}&wbs=${projectWbsPipe(changeRequest.wbsNum)}`),
144-
disabled: !isUserAllowedToImplement,
145-
icon: <CreateNewFolderIcon fontSize="small" />
146-
},
147-
{
148-
title: 'Create New Work Package',
149-
onClick: () =>
150-
history.push(
151-
`${routes.WORK_PACKAGE_NEW}?crId=${changeRequest.crId}&wbs=${projectWbsPipe(changeRequest.wbsNum)}`
152-
),
153-
disabled: !isUserAllowedToImplement,
154-
icon: <PostAddIcon fontSize="small" />
67+
title: 'Review',
68+
onClick: handleReviewOpen,
69+
disabled: !isUserAllowedToReview,
70+
icon: <EditIcon fontSize="small" />
15571
},
15672
{
157-
title: `Edit ${changeRequest.wbsNum.workPackageNumber === 0 ? 'Project' : 'Work Package'}`,
158-
onClick: () =>
159-
history.push(`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}?crId=${changeRequest.crId}&edit=${true}`),
160-
disabled: !isUserAllowedToImplement,
161-
icon: <EditIcon fontSize="small" />
73+
title: 'Delete',
74+
onClick: handleDeleteOpen,
75+
disabled: !isUserAllowedToDelete,
76+
icon: <DeleteIcon fontSize="small" />
16277
}
16378
]}
164-
title="Implement Change Request"
16579
/>
80+
</div>
81+
);
82+
83+
const RequestReviewerDropdown = () => (
84+
<>
85+
<Autocomplete
86+
isOptionEqualToValue={(option, value) => option.id === value.id}
87+
limitTags={1}
88+
disableCloseOnSelect
89+
multiple
90+
options={users.filter((user) => isLeadership(user.role)).map(userToAutocompleteOption)}
91+
getOptionLabel={(option) => option.label}
92+
onChange={(_, values) => setReviewerIds(values.map((value) => value.id))}
93+
renderTags={() => null}
94+
renderOption={(props, option, { selected }) => (
95+
<li {...props}>
96+
<Checkbox
97+
icon={<CheckBoxOutlineBlankIcon />}
98+
checkedIcon={<CheckBoxIcon />}
99+
style={{ marginRight: 8 }}
100+
checked={selected}
101+
/>
102+
{option.label}
103+
</li>
104+
)}
105+
renderInput={(params) => (
106+
<TextField {...params} variant="standard" placeholder={`${reviewerIds.length} Reviewers Selected`} />
107+
)}
108+
/>
109+
110+
<Box display="flex" flexDirection="row" gap="10px" justifyContent="right">
111+
<NERButton
112+
sx={{ mt: '10px', float: 'right' }}
113+
variant="contained"
114+
disabled={!isRequestAllowed}
115+
onClick={handleRequestReviewerClick}
116+
>
117+
Request Review
118+
</NERButton>
119+
<UnreviewedActionsDropdown />
120+
</Box>
121+
</>
122+
);
123+
124+
const RenderUnreviewedActionsDropdown = () =>
125+
isRequestAllowed && changeRequest.status === ChangeRequestStatus.Open ? (
126+
<RequestReviewerDropdown />
127+
) : (
128+
<UnreviewedActionsDropdown />
166129
);
167-
};
168130

169-
return changeRequest.accepted ? <>{implementCrDropdown()}</> : <>{renderUnreviewedActionsDropdown}</>;
131+
const ImplementCrDropdown = () => (
132+
<ActionsMenu
133+
buttons={[
134+
{
135+
title: 'Create New Project',
136+
onClick: () =>
137+
history.push(`${routes.PROJECTS_NEW}?crId=${changeRequest.crId}&wbs=${projectWbsPipe(changeRequest.wbsNum)}`),
138+
disabled: !isUserAllowedToImplement,
139+
icon: <CreateNewFolderIcon fontSize="small" />
140+
},
141+
{
142+
title: 'Create New Work Package',
143+
onClick: () =>
144+
history.push(
145+
`${routes.WORK_PACKAGE_NEW}?crId=${changeRequest.crId}&wbs=${projectWbsPipe(changeRequest.wbsNum)}`
146+
),
147+
disabled: !isUserAllowedToImplement,
148+
icon: <PostAddIcon fontSize="small" />
149+
},
150+
{
151+
title: `Edit ${changeRequest.wbsNum.workPackageNumber === 0 ? 'Project' : 'Work Package'}`,
152+
onClick: () =>
153+
history.push(`${routes.PROJECTS}/${wbsPipe(changeRequest.wbsNum)}?crId=${changeRequest.crId}&edit=${true}`),
154+
disabled: !isUserAllowedToImplement,
155+
icon: <EditIcon fontSize="small" />
156+
}
157+
]}
158+
title="Implement Change Request"
159+
/>
160+
);
161+
162+
return changeRequest.accepted ? <ImplementCrDropdown /> : <RenderUnreviewedActionsDropdown />;
170163
};
171164

172165
export default ChangeRequestActionMenu;

‎src/frontend/src/pages/ChangeRequestDetailPage/ChangeRequestDetailsView.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,6 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
8888
projectNumber: changeRequest.wbsNum.projectNumber,
8989
workPackageNumber: 0
9090
});
91-
const [reviewerIds, setReviewerIds] = useState<number[]>([]);
92-
const handleReviewerIdsSelect = (Ids: number[]) => setReviewerIds(Ids);
9391
const { data: users, isLoading: isLoadingAllUsers, isError: isErrorAllUsers, error: errorAllUsers } = useAllUsers();
9492
if (isError) return <ErrorPage message={error?.message} />;
9593
if (isErrorAllUsers) return <ErrorPage message={errorAllUsers?.message} />;
@@ -109,8 +107,6 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
109107
changeRequest={changeRequest}
110108
handleReviewOpen={handleReviewOpen}
111109
handleDeleteOpen={handleDeleteOpen}
112-
handleReviewerIdsSelect={handleReviewerIdsSelect}
113-
reviewerIds={reviewerIds}
114110
users={users}
115111
/>
116112
}

0 commit comments

Comments
 (0)