From fe9dd34e0a3e9b22313fd600e7b42e76efac4179 Mon Sep 17 00:00:00 2001 From: Oscar Vaquera Date: Wed, 15 Nov 2023 15:19:19 -0800 Subject: [PATCH] code refactor for home.component.ts file --- src/app/home/home.component.ts | 77 +++++++++++++++------------------- 1 file changed, 33 insertions(+), 44 deletions(-) diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 6b967f51..88a5a5f2 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -238,7 +238,10 @@ export class HomeComponent implements AfterViewInit, OnDestroy { }); const editor: HTMLElement = document.getElementById(this.EDITOR_KEY)!; - if (this.isIndexHighlightSelected(editor)) return; + if (this.highlightedMarkingIndex >= 0) { + this.processTextMarkingSelected(editor); + return; + } this.slideFadeAnimationCard(textMarkingIndex); @@ -277,22 +280,16 @@ export class HomeComponent implements AfterViewInit, OnDestroy { } /** - * Checks if a highlighting has been selected while a chosen suggestion has been hit. + * Selected marking is processed and replaced by the selected suggestion option. * * @param {any} editor - The editor element to be updated. * */ - isIndexHighlightSelected(editor: any): boolean { - let isSelected = false; - - if (this.highlightedMarkingIndex >= 0) { - this.cardSuggestionsToRemove.forEach((removeItem) => { - this.replaceSuggestedNode(editor, removeItem); - }); - this.postSuggestedText(editor); - isSelected = true; - } + processTextMarkingSelected(editor: any): void { + this.cardSuggestionsToRemove.forEach((removeItem) => { + this.replaceSuggestedNode(editor, removeItem); + }); - return isSelected; + this.postSuggestedText(editor); } /** @@ -353,9 +350,10 @@ export class HomeComponent implements AfterViewInit, OnDestroy { '.sticky .card' ) as NodeListOf; - if (this.checkMoveUpAnimationState(cards)) { - this.postSuggestedText(editor); - } else if (this.suggestedMarkingCardCounter === cards.length) { + if ( + this.checkMoveUpAnimationState(cards) || + this.suggestedMarkingCardCounter === cards.length + ) { this.postSuggestedText(editor); } } @@ -368,20 +366,11 @@ export class HomeComponent implements AfterViewInit, OnDestroy { * @returns {boolean} - Returns `true` if any card in the provided list still contains the animation classes; otherwise, returns `false`. */ checkMoveUpAnimationState(cards: NodeListOf): boolean { - let hasAnimationClass = false; - - cards.forEach((cardClassList) => { - if ( - !cardClassList.classList.value.includes('move-up-animation') && - !cardClassList.classList.value.includes( - 'move-up-multiple-animation' - ) - ) { - hasAnimationClass = true; - } - }); - - return hasAnimationClass; + return Array.from(cards).some( + (card) => + card.classList.contains('move-up-animation') || + card.classList.contains('move-up-multiple-animation') + ); } /** @@ -421,9 +410,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy { editor.childNodes.forEach( (childNode: ChildNode, index: number) => { const isLastChildNode = - index === editor.childNodes.length - 1 - ? true - : false; + index === editor.childNodes.length - 1; const p = document.createElement('p'); p.innerHTML = childNode.textContent!; if (childNode.textContent === this.EMPTY_STRING) { @@ -460,7 +447,9 @@ export class HomeComponent implements AfterViewInit, OnDestroy { }); } - private seperateParagraphIndex(tempProcessedText: ProcessedText | undefined): void { + private seperateParagraphIndex( + tempProcessedText: ProcessedText | undefined + ): void { let tempIndexValue = 0; tempProcessedText?.textMarkings.forEach((textMarking, index) => { if (tempIndexValue > textMarking.to) { @@ -516,7 +505,6 @@ export class HomeComponent implements AfterViewInit, OnDestroy { node.textContent.includes(currentNode) && isWithinRange === 0 // if the index is within range ) { - const lengthDiff = Math.abs( suggestedNode.length - currentNode.length ); @@ -546,11 +534,12 @@ export class HomeComponent implements AfterViewInit, OnDestroy { * @param {number} textMarkingIndex selected marking index */ updateTempMarkings(textMarkingIndex: number): void { - if(this.characterCountPrePost === 0) return; // if no changes are needed + if (this.characterCountPrePost === 0) return; // if no changes are needed const pIndexSelected = this.findRange(textMarkingIndex); this.tempProcessedText!.textMarkings.forEach((textMarking, index) => { - if (index > textMarkingIndex && + if ( + index > textMarkingIndex && pIndexSelected[0] <= index && pIndexSelected[1] > index ) { @@ -560,7 +549,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy { }); } - private findRange(index: number): [number, number]{ + private findRange(index: number): [number, number] { let rangeStart: number | null = null; let rangeEnd: number | null = null; @@ -585,11 +574,13 @@ export class HomeComponent implements AfterViewInit, OnDestroy { } // Handle edge case for the first index and last index - rangeEnd = rangeEnd === null ? this.tempProcessedText!.textMarkings.length : rangeEnd; + rangeEnd = + rangeEnd === null + ? this.tempProcessedText!.textMarkings.length + : rangeEnd; rangeStart = rangeStart === null ? 0 : rangeStart; - return [rangeStart, rangeEnd] - + return [rangeStart, rangeEnd]; } // TODO there might be a bug here that creates double spaces in the text, test more @@ -931,9 +922,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy { editor.childNodes.forEach( (childNode: ChildNode, index: number) => { const isLastChildNode = - index === editor.childNodes.length - 1 - ? true - : false; + index === editor.childNodes.length - 1; const p: HTMLParagraphElement = document.createElement('p'); p.innerHTML = childNode.textContent!;