| Conditions | 6 |
| Total Lines | 181 |
| Code Lines | 148 |
| 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"; |
||
| 243 | |||
| 244 | public render(): React.ReactElement { |
||
| 245 | const { |
||
| 246 | application, |
||
| 247 | reviewStatusOptions, |
||
| 248 | isSaving, |
||
| 249 | intl, |
||
| 250 | portal, |
||
| 251 | } = this.props; |
||
| 252 | const l10nReviewStatusOptions = reviewStatusOptions.map((status) => ({ |
||
| 253 | value: status.value, |
||
| 254 | label: intl.formatMessage(messages[status.label]), |
||
| 255 | })); |
||
| 256 | const { selectedStatusId } = this.state; |
||
| 257 | const reviewStatus = |
||
| 258 | application.application_review && |
||
| 259 | application.application_review.review_status |
||
| 260 | ? application.application_review.review_status.name |
||
| 261 | : null; |
||
| 262 | const statusIconClass = className("fas", { |
||
| 263 | "fa-ban": reviewStatus === "screened_out", |
||
| 264 | "fa-question-circle": reviewStatus === "still_thinking", |
||
| 265 | "fa-check-circle": reviewStatus === "still_in", |
||
| 266 | "fa-exclamation-circle": reviewStatus === null, |
||
| 267 | }); |
||
| 268 | const applicantUrlMap: { [key in typeof portal]: string } = { |
||
| 269 | hr: routes.hrApplicantShow( |
||
| 270 | intl.locale, |
||
| 271 | application.applicant_id, |
||
| 272 | application.job_poster_id, |
||
| 273 | ), |
||
| 274 | manager: routes.managerApplicantShow( |
||
| 275 | intl.locale, |
||
| 276 | application.applicant_id, |
||
| 277 | application.job_poster_id, |
||
| 278 | ), |
||
| 279 | }; |
||
| 280 | const applicationUrlMap: { [key in typeof portal]: string } = { |
||
| 281 | hr: routes.hrApplicationShow( |
||
| 282 | intl.locale, |
||
| 283 | application.id, |
||
| 284 | application.job_poster_id, |
||
| 285 | ), |
||
| 286 | manager: routes.managerApplicationShow( |
||
| 287 | intl.locale, |
||
| 288 | application.id, |
||
| 289 | application.job_poster_id, |
||
| 290 | ), |
||
| 291 | }; |
||
| 292 | const applicantUrl = applicantUrlMap[portal]; |
||
| 293 | const applicationUrl = applicationUrlMap[portal]; |
||
| 294 | |||
| 295 | /** |
||
| 296 | * Returns true only if selectedStatusId matches the review |
||
| 297 | * status of props.application |
||
| 298 | */ |
||
| 299 | const isUnchanged = (): boolean => { |
||
| 300 | if ( |
||
| 301 | application.application_review && |
||
| 302 | application.application_review.review_status_id |
||
| 303 | ) { |
||
| 304 | return ( |
||
| 305 | application.application_review.review_status_id === selectedStatusId |
||
| 306 | ); |
||
| 307 | } |
||
| 308 | return selectedStatusId === undefined; |
||
| 309 | }; |
||
| 310 | |||
| 311 | const getSaveButtonText = (): string => { |
||
| 312 | if (isSaving) { |
||
| 313 | return intl.formatMessage(messages.saving); |
||
| 314 | } |
||
| 315 | if (isUnchanged()) { |
||
| 316 | return intl.formatMessage(messages.saved); |
||
| 317 | } |
||
| 318 | return intl.formatMessage(messages.save); |
||
| 319 | }; |
||
| 320 | const saveButtonText = getSaveButtonText(); |
||
| 321 | const noteButtonText = |
||
| 322 | application.application_review && application.application_review.notes |
||
| 323 | ? intl.formatMessage(messages.editNote) |
||
| 324 | : intl.formatMessage(messages.addNote); |
||
| 325 | |||
| 326 | return ( |
||
| 327 | <form className="applicant-summary"> |
||
| 328 | <div className="flex-grid middle gutter"> |
||
| 329 | <div className="box lg-1of11 applicant-status"> |
||
| 330 | <i className={statusIconClass} /> |
||
| 331 | </div> |
||
| 332 | |||
| 333 | <div className="box lg-2of11 applicant-information"> |
||
| 334 | <span |
||
| 335 | className="name" |
||
| 336 | data-name={`${application.applicant.user.first_name} ${application.applicant.user.last_name}`} |
||
| 337 | > |
||
| 338 | {application.applicant.user.first_name}{" "} |
||
| 339 | {application.applicant.user.last_name} |
||
| 340 | </span> |
||
| 341 | <a |
||
| 342 | href={`mailto: ${application.applicant.user.email}`} |
||
| 343 | title={intl.formatMessage(messages.emailCandidate)} |
||
| 344 | data-email={`${application.applicant.user.email}`} |
||
| 345 | className="email" |
||
| 346 | > |
||
| 347 | {application.applicant.user.email} |
||
| 348 | </a> |
||
| 349 | {/* This span only shown for priority applicants */} |
||
| 350 | {application.applicant.user.is_priority && ( |
||
| 351 | <span className="priority-status"> |
||
| 352 | <i |
||
| 353 | aria-hidden="true" |
||
| 354 | className="fab fa-product-hunt" |
||
| 355 | title={intl.formatMessage(messages.priorityLogo)} |
||
| 356 | /> |
||
| 357 | {intl.formatMessage(messages.priorityStatus)} |
||
| 358 | </span> |
||
| 359 | )} |
||
| 360 | {/* This span only shown for veterans */} |
||
| 361 | {(application.veteran_status.name === "current" || |
||
| 362 | application.veteran_status.name === "past") && ( |
||
| 363 | <span className="veteran-status"> |
||
| 364 | <img |
||
| 365 | alt={intl.formatMessage(messages.veteranLogo)} |
||
| 366 | src={routes.imageUrl("icon_veteran.svg")} |
||
| 367 | />{" "} |
||
| 368 | {intl.formatMessage(messages.veteranStatus)} |
||
| 369 | </span> |
||
| 370 | )} |
||
| 371 | </div> |
||
| 372 | |||
| 373 | <div className="box lg-2of11 applicant-links"> |
||
| 374 | <a |
||
| 375 | title={intl.formatMessage(messages.viewApplicationTitle)} |
||
| 376 | href={applicationUrl} |
||
| 377 | > |
||
| 378 | <i className="fas fa-file-alt" /> |
||
| 379 | {intl.formatMessage(messages.viewApplicationText)} |
||
| 380 | </a> |
||
| 381 | <a |
||
| 382 | title={intl.formatMessage(messages.viewProfileTitle)} |
||
| 383 | href={applicantUrl} |
||
| 384 | > |
||
| 385 | <i className="fas fa-user" /> |
||
| 386 | {intl.formatMessage(messages.viewProfile)} |
||
| 387 | </a> |
||
| 388 | </div> |
||
| 389 | |||
| 390 | <div className="box lg-2of11 applicant-decision" data-clone> |
||
| 391 | <Select |
||
| 392 | id={`review_status_${application.id}`} |
||
| 393 | name="review_status" |
||
| 394 | label={intl.formatMessage(messages.decision)} |
||
| 395 | required={false} |
||
| 396 | selected={selectedStatusId || null} |
||
| 397 | nullSelection={intl.formatMessage(messages.notReviewed)} |
||
| 398 | options={l10nReviewStatusOptions} |
||
| 399 | onChange={this.handleStatusChange} |
||
| 400 | /> |
||
| 401 | </div> |
||
| 402 | |||
| 403 | <div className="box lg-2of11 applicant-notes"> |
||
| 404 | <button |
||
| 405 | className="button--outline" |
||
| 406 | type="button" |
||
| 407 | onClick={this.showNotes} |
||
| 408 | > |
||
| 409 | {noteButtonText} |
||
| 410 | </button> |
||
| 411 | </div> |
||
| 412 | |||
| 413 | <div className="box lg-2of11 applicant-save-button"> |
||
| 414 | <button |
||
| 415 | className="button--blue light-bg" |
||
| 416 | type="button" |
||
| 417 | onClick={() => this.handleSaveClicked()} |
||
| 418 | > |
||
| 419 | <span>{saveButtonText}</span> |
||
| 420 | </button> |
||
| 421 | </div> |
||
| 422 | </div> |
||
| 423 | </form> |
||
| 424 | ); |
||
| 429 |