Conditions | 5 |
Total Lines | 204 |
Code Lines | 174 |
Lines | 0 |
Ratio | 0 % |
Changes | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | import React from "react"; |
||
255 | |||
256 | public render(): React.ReactElement { |
||
257 | const { application, reviewStatusOptions, isSaving, intl } = this.props; |
||
258 | const l10nReviewStatusOptions = reviewStatusOptions.map(status => ({ |
||
259 | value: status.value, |
||
260 | label: intl.formatMessage(messages[status.label]), |
||
261 | })); |
||
262 | const { selectedStatusId } = this.state; |
||
263 | const reviewStatus = |
||
264 | application.application_review && |
||
265 | application.application_review.review_status |
||
266 | ? application.application_review.review_status.name |
||
267 | : null; |
||
268 | const statusIconClass = className("fas", { |
||
269 | "fa-ban": reviewStatus === "screened_out", |
||
270 | "fa-question-circle": reviewStatus === "still_thinking", |
||
271 | "fa-check-circle": reviewStatus === "still_in", |
||
272 | "fa-exclamation-circle": reviewStatus === null, |
||
273 | }); |
||
274 | |||
275 | const getSaveButtonText = (): string => { |
||
276 | if (isSaving) { |
||
277 | return intl.formatMessage(messages.saving); |
||
278 | } |
||
279 | if (this.isUnchanged()) { |
||
280 | return intl.formatMessage(messages.saved); |
||
281 | } |
||
282 | return intl.formatMessage(messages.save); |
||
283 | }; |
||
284 | const saveButtonText = getSaveButtonText(); |
||
285 | const noteButtonText = |
||
286 | application.application_review && application.application_review.notes |
||
287 | ? intl.formatMessage(messages.editNote) |
||
288 | : intl.formatMessage(messages.addNote); |
||
289 | return ( |
||
290 | <div> |
||
291 | <div> |
||
292 | <div className="manager-application-preview-actions flex-grid"> |
||
293 | <div className="box small-1of3"> |
||
294 | <button |
||
295 | className="button--blue light-bg" |
||
296 | type="button" |
||
297 | onClick={() => |
||
298 | this.handleLinkClicked( |
||
299 | routes.managerJobApplications( |
||
300 | intl.locale, |
||
301 | application.job_poster_id, |
||
302 | ), |
||
303 | ) |
||
304 | } |
||
305 | > |
||
306 | <FormattedMessage |
||
307 | id="apl.backToApplicantList" |
||
308 | defaultMessage="< Save and Go Back to Applicant List" |
||
309 | description="Back Button text" |
||
310 | /> |
||
311 | </button> |
||
312 | </div> |
||
313 | <div className="box small-2of3"> |
||
314 | <button |
||
315 | className="button--blue light-bg" |
||
316 | type="button" |
||
317 | onClick={() => |
||
318 | this.handleLinkClicked( |
||
319 | routes.managerJobShow( |
||
320 | intl.locale, |
||
321 | application.job_poster_id, |
||
322 | ), |
||
323 | ) |
||
324 | } |
||
325 | > |
||
326 | <FormattedMessage |
||
327 | id="button.viewJobPoster" |
||
328 | defaultMessage="View Job Poster" |
||
329 | description="View Job Poster Button text" |
||
330 | /> |
||
331 | </button> |
||
332 | <button |
||
333 | className="button--blue light-bg" |
||
334 | data-button-type="expand-all" |
||
335 | type="button" |
||
336 | id="expand-all" |
||
337 | > |
||
338 | <span className="expand"> |
||
339 | {" "} |
||
340 | <FormattedMessage |
||
341 | id="apl.expandAllSkills" |
||
342 | defaultMessage="Expand All Skills" |
||
343 | description="Expand All Skills Button text" |
||
344 | /> |
||
345 | </span> |
||
346 | <span className="collapse"> |
||
347 | {" "} |
||
348 | <FormattedMessage |
||
349 | id="apl.collapseAllSkills" |
||
350 | defaultMessage="Collapse All Skills" |
||
351 | description="Collapse All Skills Button text" |
||
352 | /> |
||
353 | </span> |
||
354 | </button> |
||
355 | </div> |
||
356 | </div> |
||
357 | </div> |
||
358 | |||
359 | <form className="applicant-summary"> |
||
360 | <div className="flex-grid middle gutter"> |
||
361 | <div className="box lg-1of11 applicant-status"> |
||
362 | <i className={statusIconClass} /> |
||
363 | </div> |
||
364 | |||
365 | <div className="box lg-2of11 applicant-information"> |
||
366 | <span className="name"> |
||
367 | {application.applicant.user.first_name}{" "} |
||
368 | {application.applicant.user.last_name} |
||
369 | </span> |
||
370 | <a |
||
371 | href={`mailto: ${application.applicant.user.email}`} |
||
372 | title={intl.formatMessage(messages.emailCandidate)} |
||
373 | > |
||
374 | {application.applicant.user.email} |
||
375 | </a> |
||
376 | {/* This span only shown for veterans */} |
||
377 | {(application.veteran_status.name === "current" || |
||
378 | application.veteran_status.name === "past") && ( |
||
379 | <span className="veteran-status"> |
||
380 | <img |
||
381 | alt={intl.formatMessage(messages.viewApplicationTitle)} |
||
382 | src="/images/icon_veteran.svg" |
||
383 | />{" "} |
||
384 | <FormattedMessage |
||
385 | id="veteranStatus.veteran" |
||
386 | defaultMessage="Veteran" |
||
387 | description="Veteran" |
||
388 | /> |
||
389 | </span> |
||
390 | )} |
||
391 | </div> |
||
392 | |||
393 | <div className="box lg-2of11 applicant-links"> |
||
394 | <a |
||
395 | title={intl.formatMessage(messages.viewApplicationTitle)} |
||
396 | href={routes.managerApplicationShow( |
||
397 | intl.locale, |
||
398 | application.id, |
||
399 | )} |
||
400 | > |
||
401 | <i className="fas fa-file-alt" /> |
||
402 | <FormattedMessage |
||
403 | id="apl.viewApplication" |
||
404 | defaultMessage="View Application" |
||
405 | description="Button text View Application" |
||
406 | /> |
||
407 | </a> |
||
408 | <a |
||
409 | title={intl.formatMessage(messages.viewProfileTitle)} |
||
410 | href={routes.managerApplicantShow( |
||
411 | intl.locale, |
||
412 | application.applicant_id, |
||
413 | )} |
||
414 | > |
||
415 | <i className="fas fa-user" /> |
||
416 | <FormattedMessage |
||
417 | id="apl.viewProfile" |
||
418 | defaultMessage="View Profile" |
||
419 | description="Button text View Profile" |
||
420 | /> |
||
421 | </a> |
||
422 | </div> |
||
423 | |||
424 | <div className="box lg-2of11 applicant-decision" data-clone> |
||
425 | <Select |
||
426 | id={`review_status_${application.id}`} |
||
427 | name="review_status" |
||
428 | label={intl.formatMessage(messages.decision)} |
||
429 | required={false} |
||
430 | selected={selectedStatusId || null} |
||
431 | nullSelection={intl.formatMessage(messages.notReviewed)} |
||
432 | options={l10nReviewStatusOptions} |
||
433 | onChange={this.handleStatusChange} |
||
434 | /> |
||
435 | </div> |
||
436 | |||
437 | <div className="box lg-2of11 applicant-notes"> |
||
438 | <button |
||
439 | className="button--outline" |
||
440 | type="button" |
||
441 | onClick={this.showNotes} |
||
442 | > |
||
443 | {noteButtonText} |
||
444 | </button> |
||
445 | </div> |
||
446 | |||
447 | <div className="box lg-2of11 applicant-save-button"> |
||
448 | <button |
||
449 | className="button--blue light-bg" |
||
450 | type="button" |
||
451 | onClick={() => this.handleSaveClicked()} |
||
452 | > |
||
453 | <span>{saveButtonText}</span> |
||
454 | </button> |
||
455 | </div> |
||
456 | </div> |
||
457 | </form> |
||
458 | </div> |
||
459 | ); |
||
464 |