Skip to content

Commit 2679b6d

Browse files
LarryKlugerDSLarryKlugerDS
committed
Refactoring
1 parent 04220a2 commit 2679b6d

1 file changed

Lines changed: 99 additions & 84 deletions

File tree

‎src/App.js‎

Lines changed: 99 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ class App extends React.Component {
3939
};
4040
this.oAuthImplicit = new OAuthImplicit(this);
4141
this.docusign = new DocuSign(this);
42+
43+
// bind <this> for methods called by React via buttons, etc
4244
this.logout = this.logout.bind(this);
4345
this.startAuthentication = this.startAuthentication.bind(this);
4446
this.formNameChange = this.formNameChange.bind(this);
@@ -47,41 +49,42 @@ class App extends React.Component {
4749
this.getEnvelope = this.getEnvelope.bind(this);
4850
}
4951

52+
/**
53+
* Starting up--if our URL includes a hash, check it to see if
54+
* it's the OAuth response
55+
*/
5056
async componentDidMount() {
5157
const hash = window.location.hash;
5258
if (!hash) {return}
5359
// possible OAuth response
54-
this.setState({working: true, workingMessage: 'Authenticating'});
60+
this.setState({working: true, workingMessage: 'Loggin in'});
5561
await this.oAuthImplicit.completeLogin();
5662
this.setState({working: false});
5763
}
58-
59-
componentWillUnmount() {
60-
}
61-
64+
6265
startAuthentication() {
63-
this.oAuthImplicit.startLogin();
66+
this.oAuthImplicit.startLogin();
6467
}
6568

6669
/**
6770
* Is the accessToken ok to use?
6871
* @returns boolean accessTokenIsGood
6972
*/
7073
checkToken() {
71-
if (
72-
!this.state.accessToken ||
73-
this.state.expires === undefined ||
74-
new Date() > this.state.expires
75-
) {
76-
// Need new login. Only clear auth, don't clear the state (leave form contents);
77-
this.clearAuth();
78-
this.setState({ page: 'welcome', working: false });
79-
toast.error('Your login session has ended.\nPlease login again', {
80-
autoClose: 8000,
81-
});
82-
return false;
83-
}
84-
return true;
74+
if (
75+
!this.state.accessToken ||
76+
this.state.expires === undefined ||
77+
new Date() > this.state.expires
78+
) {
79+
// Need new login. Only clear auth, don't clear the state (leave form contents);
80+
this.clearAuth();
81+
this.setState({ page: 'welcome', working: false });
82+
toast.error('Your login session has ended.\nPlease login again', {
83+
autoClose: 8000,
84+
});
85+
return false;
86+
}
87+
return true;
8588
}
8689

8790
/**
@@ -91,45 +94,45 @@ class App extends React.Component {
9194
* the login session.
9295
*/
9396
logout() {
94-
this.clearAuth();
95-
this.clearState();
96-
this.setState({ page: 'welcome' });
97-
toast.success('You have logged out.', { autoClose: 5000 });
98-
this.oAuthImplicit.logout();
97+
this.clearAuth();
98+
this.clearState();
99+
this.setState({ page: 'welcome' });
100+
toast.success('You have logged out.', { autoClose: 5000 });
101+
this.oAuthImplicit.logout();
99102
}
100103

101104
/**
102105
* Clear authentication-related state
103106
*/
104107
clearAuth() {
105-
this.setState({
106-
accessToken: undefined,
107-
expires: undefined,
108-
accountId: undefined,
109-
externalAccountId: undefined,
110-
accountName: undefined,
111-
baseUri: undefined,
112-
name: undefined,
113-
email: undefined,
114-
})
108+
this.setState({
109+
accessToken: undefined,
110+
expires: undefined,
111+
accountId: undefined,
112+
externalAccountId: undefined,
113+
accountName: undefined,
114+
baseUri: undefined,
115+
name: undefined,
116+
email: undefined,
117+
})
115118
}
116119

117120
/**
118121
* Clear the app's form and related state
119122
*/
120123
clearState() {
121-
this.setState({
122-
formName: '',
123-
formEmail: '',
124-
working: false,
125-
responseErrorMsg: undefined,
126-
responseEnvelopeId: undefined,
127-
responseAvailableApiRequests: undefined,
128-
responseApiRequestsReset: undefined,
129-
responseSuccess: undefined,
130-
responseTraceId: undefined,
131-
resultsEnvelopeJson: undefined,
132-
});
124+
this.setState({
125+
formName: '',
126+
formEmail: '',
127+
working: false,
128+
responseErrorMsg: undefined,
129+
responseEnvelopeId: undefined,
130+
responseAvailableApiRequests: undefined,
131+
responseApiRequestsReset: undefined,
132+
responseSuccess: undefined,
133+
responseTraceId: undefined,
134+
resultsEnvelopeJson: undefined,
135+
});
133136
}
134137

135138
/**
@@ -138,25 +141,25 @@ class App extends React.Component {
138141
* @param results
139142
*/
140143
oAuthResults(results) {
141-
this.setState({
142-
accessToken: results.accessToken, expires: results.expires,
143-
name: results.name, externalAccountId: results.externalAccountId,
144-
email: results.email, accountId: results.accountId,
145-
accountName: results.accountName, baseUri: results.baseUri,
146-
page: 'loggedIn',
147-
formName: results.name, // default: set to logged in user
148-
formEmail: results.email,
149-
});
150-
151-
toast.success(`Welcome ${results.name}, you are now logged in`);
144+
this.setState({
145+
accessToken: results.accessToken, expires: results.expires,
146+
name: results.name, externalAccountId: results.externalAccountId,
147+
email: results.email, accountId: results.accountId,
148+
accountName: results.accountName, baseUri: results.baseUri,
149+
page: 'loggedIn',
150+
formName: results.name, // default: set to logged in user
151+
formEmail: results.email,
152+
});
153+
154+
toast.success(`Welcome ${results.name}, you are now logged in`);
152155
}
153156

154157
formNameChange(event) {
155-
this.setState({ formName: event.target.value });
158+
this.setState({ formName: event.target.value });
156159
}
157160

158161
formEmailChange(event) {
159-
this.setState({ formEmail: event.target.value });
162+
this.setState({ formEmail: event.target.value });
160163
}
161164

162165
async sendEnvelope() {
@@ -184,8 +187,8 @@ class App extends React.Component {
184187
this.setState({ working: true, workingMessage: "Sending envelope" });
185188
const results = await this.docusign.sendEnvelope();
186189
const { apiRequestsReset } = results;
187-
const responseApiRequestsReset = apiRequestsReset
188-
? new Date(apiRequestsReset) : undefined;
190+
const responseApiRequestsReset = apiRequestsReset ?
191+
new Date(apiRequestsReset) : undefined;
189192
this.setState({
190193
working: false,
191194
responseSuccess: results.success,
@@ -199,19 +202,19 @@ class App extends React.Component {
199202

200203
async getEnvelope() {
201204
this.setState({
202-
responseErrorMsg: undefined,
203-
responseEnvelopeId: undefined,
204-
responseAvailableApiRequests: undefined,
205-
responseApiRequestsReset: undefined,
206-
responseSuccess: undefined,
207-
responseTraceId: undefined,
205+
responseErrorMsg: undefined,
206+
responseEnvelopeId: undefined,
207+
responseAvailableApiRequests: undefined,
208+
responseApiRequestsReset: undefined,
209+
responseSuccess: undefined,
210+
responseTraceId: undefined,
208211
});
209212
if (!this.checkToken()) {
210-
return; // Problem! The user needs to login
213+
return; // Problem! The user needs to login
211214
}
212215
if (!this.state.responseEnvelopeId) {
213-
toast.error("Problem: First send an envelope");
214-
return;
216+
toast.error("Problem: First send an envelope");
217+
return;
215218
}
216219

217220
this.setState({ working: true, workingMessage: "Fetching the envelope's status" });
@@ -228,9 +231,14 @@ class App extends React.Component {
228231
resultsEnvelopeJson: results.resultsEnvelopeJson,
229232
responseApiRequestsReset,
230233
});
231-
}
234+
}
232235

233-
render() {
236+
/**
237+
* Render this component
238+
*/
239+
render() {
240+
// Just two pages with a common header.
241+
// Choose the body of the page:
234242
let pagebody;
235243
switch (this.state.page) {
236244
case 'welcome': // not logged in
@@ -242,6 +250,8 @@ class App extends React.Component {
242250
default:
243251
pagebody = this.Welcome();
244252
};
253+
254+
// Compute the name block for the top nav section
245255
let nameBlock;
246256
if (this.state.accessToken) {
247257
nameBlock = (
@@ -257,24 +267,29 @@ class App extends React.Component {
257267
nameBlock = null;
258268
}
259269

260-
return (
261-
<>
262-
<Navbar fixed="top" bg="primary" variant="dark" >
263-
<Navbar.Brand>DocuSign Code Example</Navbar.Brand>
264-
<Navbar.Toggle />
265-
<Navbar.Collapse className="justify-content-end">
266-
{nameBlock}
267-
</Navbar.Collapse>
268-
</Navbar>
269-
<ToastContainer />
270-
<Container fluid className='bodyMargin' style={{ display: this.state.working ? 'block' : 'none' }}>
270+
// The spinner
271+
const spinner = (
272+
<Container fluid className='bodyMargin'
273+
style={{ display: this.state.working ? 'block' : 'none' }}>
271274
<Row className='justify-content-center'>
272275
<div className="spinner" />
273276
</Row>
274277
<Row className='justify-content-center'>
275278
<h3>{this.state.workingMessage}…</h3>
276279
</Row>
277280
</Container>
281+
)
282+
283+
// The complete page:
284+
return (
285+
<>
286+
<Navbar fixed="top" bg="primary" variant="dark" >
287+
<Navbar.Brand>DocuSign Code Example</Navbar.Brand>
288+
<Navbar.Toggle />
289+
<Navbar.Collapse className="justify-content-end">{nameBlock}</Navbar.Collapse>
290+
</Navbar>
291+
<ToastContainer />
292+
{spinner}
278293
{pagebody}
279294
</>
280295
)

0 commit comments

Comments
 (0)