Skip to content

Commit 7ecd179

Browse files
mshrivermshriver
committed
Convert AddTokenModal to functional
1 parent 608f49c commit 7ecd179

File tree

3 files changed

+126
-132
lines changed

3 files changed

+126
-132
lines changed

‎frontend/src/components/add-token-modal.js

Lines changed: 122 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
33

44
import {
@@ -14,135 +14,136 @@ import {
1414
TextInput,
1515
ValidatedOptions,
1616
} from '@patternfly/react-core';
17+
import { HttpClient } from '../services/http';
18+
import { Settings } from '../settings';
1719

18-
export class AddTokenModal extends React.Component {
19-
static propTypes = {
20-
onSave: PropTypes.func,
21-
onClose: PropTypes.func,
22-
isOpen: PropTypes.bool
23-
};
24-
25-
constructor(props) {
26-
super(props);
27-
this.state = {
28-
name: '',
29-
expiryDate: '',
30-
isNameValid: true,
31-
isExpiryValid: true
32-
};
33-
}
20+
function AddTokenModal(props) {
21+
const [name, setName] = useState('');
22+
const [expiryDate, setExpiryDate] = useState('');
23+
const [isNameValid, setIsNameValid] = useState(true);
24+
const [isExpiryValid, setIsExpiryValid] = useState(true);
3425

35-
onNameChange = (name) => {
36-
this.setState({name});
37-
}
26+
const {
27+
isOpen,
28+
onClose,
29+
} = props;
3830

39-
onExpiryDateChange = (_event, expiryStr) => {
40-
this.setState({expiryDate: expiryStr});
41-
}
31+
function onSave() {
32+
const expiry = new Date(expiryDate);
33+
const now = new Date();
4234

43-
onSave = () => {
44-
if (this.state.name === '' || this.state.expiryDate === '') {
45-
this.setState({
46-
isNameValid: this.state.name !== '',
47-
isExpiryValid: this.state.expiryDate !== ''
48-
});
35+
if (name === '' ){
36+
setIsNameValid(false);
4937
return;
5038
}
51-
const expiry = new Date(this.state.expiryDate);
52-
expiry.setHours(23, 59, 59, 999);
53-
const now = new Date();
54-
if (expiry.getTime() <= now.getTime()) {
55-
this.setState({isExpiryValid: false});
39+
else {setIsNameValid(true)}
40+
41+
if (expiryDate === ''){
42+
setIsExpiryValid(false);
5643
return;
5744
}
58-
this.props.onSave({name: this.state.name, expiry: expiry});
59-
this.setState({
60-
name: '',
61-
expiryDate: '',
62-
isNameValid: true,
63-
isExpiryValid: true
64-
});
65-
}
45+
else {
46+
expiry.setHours(23, 59, 59, 999);
47+
if (expiry.getTime() <= now.getTime()) {
48+
setIsExpiryValid(false);
49+
return;
50+
}
51+
}
52+
HttpClient.post([Settings.serverUrl, 'user', 'token'],
53+
{name: name, expires: expiry.toISOString()})
54+
.then(response => HttpClient.handleResponse(response))
55+
.catch((error) => {
56+
console.error('Error posting token:', error);
57+
});
58+
59+
onClose();
6660

67-
onClose = () => {
68-
this.setState({
69-
name: '',
70-
expiryDate: '',
71-
isNameValid: true,
72-
isExpiryValid: true
73-
});
74-
this.props.onClose();
75-
}
61+
};
7662

77-
render () {
78-
return (
79-
<Modal
80-
id="add-token-modal"
81-
variant={ModalVariant.small}
82-
title="Add Token"
83-
isOpen={this.props.isOpen}
84-
onClose={this.onClose}
85-
actions={[
86-
<Button key="save" variant="primary" onClick={this.onSave}>Save</Button>,
87-
<Button key="cancel" variant="link" onClick={this.onClose}>Cancel</Button>
88-
]}
89-
>
90-
<Form>
91-
<FormGroup
92-
label="Name"
93-
fieldId="token-name"
94-
isRequired
95-
>
96-
<TextInput
97-
type="text"
98-
id="token-name"
99-
name="token-name"
100-
value={this.state.name}
101-
onChange={(_event, name) => this.onNameChange(name)}
102-
validated={this.state.isNameValid ? ValidatedOptions.default : ValidatedOptions.error}
103-
isRequired
104-
/>
105-
{this.state.isNameValid !== true && (
106-
<FormHelperText>
107-
<HelperText>
108-
<HelperTextItem variant="error">
109-
A token name is required
110-
</HelperTextItem>
111-
</HelperText>
112-
</FormHelperText>
113-
)}
114-
</FormGroup>
115-
<FormGroup
116-
label="Expiry"
117-
fieldId="token-expiry-date"
118-
validated={this.state.isExpiryValid ? ValidatedOptions.default : ValidatedOptions.error}
63+
function localOnClose() {
64+
// call prop function
65+
onClose();
66+
67+
setName('');
68+
setExpiryDate('');
69+
setIsNameValid(true);
70+
setIsExpiryValid(true);
71+
};
72+
73+
return (
74+
<Modal
75+
id="add-token-modal"
76+
variant={ModalVariant.small}
77+
title="Add Token"
78+
isOpen={isOpen}
79+
onClose={localOnClose}
80+
actions={[
81+
<Button key="save" variant="primary" onClick={onSave}>Save</Button>,
82+
<Button key="cancel" variant="link" onClick={localOnClose}>Cancel</Button>
83+
]}
84+
>
85+
<Form>
86+
<FormGroup
87+
label="Name"
88+
fieldId="token-name"
89+
isRequired
90+
>
91+
<TextInput
92+
type="text"
93+
id="token-name"
94+
name="token-name"
95+
value={name}
96+
onChange={(_event, change) => setName(change)}
97+
validated={isNameValid ? ValidatedOptions.default : ValidatedOptions.error}
11998
isRequired
120-
>
121-
<DatePicker
122-
appendTo={() => document.getElementById('add-token-modal')}
123-
onChange={this.onExpiryDateChange}
124-
value={this.state.expiryDate}
125-
inputProps={{
126-
id: 'token-expiry-date',
127-
validated: this.state.isExpiryValid ? ValidatedOptions.default : ValidatedOptions.error
128-
}}
129-
popoverProps={{
130-
enableFlip: false,
131-
position: 'bottom'
132-
}}
133-
/>
134-
{this.state.isExpiryValid !== true && (
135-
<FormHelperText>
136-
<HelperText>
137-
<HelperTextItem variant="error">
138-
A valid epiry date is required
139-
</HelperTextItem>
140-
</HelperText>
141-
</FormHelperText>
99+
/>
100+
{isNameValid !== true && (
101+
<FormHelperText>
102+
<HelperText>
103+
<HelperTextItem variant="error">
104+
A token name is required
105+
</HelperTextItem>
106+
</HelperText>
107+
</FormHelperText>
142108
)}
143-
</FormGroup>
144-
</Form>
145-
</Modal>
146-
);
147-
}
148-
}
109+
</FormGroup>
110+
<FormGroup
111+
label="Expiry"
112+
fieldId="token-expiry-date"
113+
validated={isExpiryValid ? ValidatedOptions.default : ValidatedOptions.error}
114+
isRequired
115+
>
116+
<DatePicker
117+
appendTo={() => document.getElementById('add-token-modal')}
118+
onChange={(_event, change) => {setExpiryDate(change)}}
119+
value={expiryDate}
120+
inputProps={{
121+
id: 'token-expiry-date',
122+
validated: isExpiryValid ? ValidatedOptions.default : ValidatedOptions.error
123+
}}
124+
popoverProps={{
125+
enableFlip: false,
126+
position: 'bottom'
127+
}}
128+
/>
129+
{isExpiryValid !== true && (
130+
<FormHelperText>
131+
<HelperText>
132+
<HelperTextItem variant="error">
133+
A valid epiry date is required
134+
</HelperTextItem>
135+
</HelperText>
136+
</FormHelperText>
137+
)}
138+
</FormGroup>
139+
</Form>
140+
</Modal>
141+
);
142+
};
143+
144+
AddTokenModal.propTypes = {
145+
isOpen: PropTypes.bool,
146+
onClose: PropTypes.func,
147+
};
148+
149+
export default AddTokenModal;

‎frontend/src/components/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
export { AddTokenModal } from './add-token-modal';
21
export { ClassificationDropdown, MultiClassificationDropdown } from './classification-dropdown';
32
export { ClassifyFailuresTable } from './classify-failures';
43
export { DeleteModal } from './delete-modal';
54
export { DownloadButton } from './download-button';
65
export { EmptyObject } from './empty-object';
76
export { FilterTable, MetaFilter } from './filtertable';
7+
export {default as IbutsuHeader} from './ibutsu-header';
88
export { IbutsuPage } from './ibutsu-page';
99
export { MultiValueInput } from './multivalueinput';
1010
export { NewDashboardModal } from './new-dashboard-modal';

‎frontend/src/pages/profile/tokens.js

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import { PlusCircleIcon } from '@patternfly/react-icons';
1919
import { HttpClient } from '../../services/http';
2020
import { Settings } from '../../settings';
2121
import { getSpinnerRow } from '../../utilities';
22-
import { FilterTable, AddTokenModal, DeleteModal } from '../../components';
22+
import { FilterTable, DeleteModal } from '../../components';
23+
import AddTokenModal from '../../components/add-token-modal';
2324
import ToastWrapper from '../../components/toast-wrapper';
2425
import { ALERT_TIMEOUT } from '../../constants';
2526

@@ -110,6 +111,7 @@ export class UserTokens extends React.Component {
110111
});
111112
}
112113

114+
// TODO: useEffect on modal close
113115
getTokens() {
114116
// First, show a spinner
115117
this.setState({rows: [getSpinnerRow(4)], isEmpty: false, isError: false});
@@ -133,14 +135,6 @@ export class UserTokens extends React.Component {
133135
});
134136
}
135137

136-
onAddTokenSave = (token) => {
137-
HttpClient.post([Settings.serverUrl, 'user', 'token'],
138-
{name: token.name, expires: token.expiry.toISOString()})
139-
.then(response => HttpClient.handleResponse(response))
140-
.then(() => this.getTokens());
141-
this.setState({isAddTokenOpen: false});
142-
}
143-
144138
onAddTokenClick = () => {
145139
this.setState({isAddTokenOpen: true});
146140
}
@@ -217,7 +211,6 @@ export class UserTokens extends React.Component {
217211
</PageSection>
218212
<AddTokenModal
219213
isOpen={this.state.isAddTokenOpen}
220-
onSave={this.onAddTokenSave}
221214
onClose={this.onAddTokenClose}
222215
/>
223216
<DeleteModal

0 commit comments

Comments
 (0)