LC Review

[RuslanLikhobaba]

Hi Nikola, Thank you for taking the time to complete the test task.

The task assumed that it would look like an editable block, but it is more important for us to see your approach to work. The current your implementation does not implement some of the requirements of the task.

Pattern intersections should be ignored

This is the checking your imlementation: These patterns are incorrect: {{test}} [[test]] {te[s]t} [te{s}t] {te[s}t].

You can fix it and we will review the code again.

I also have feedback on some of the points that won't be rated but make me curious:

1. You are using unused class style and ids in markup. Why did you add them?
2. As I get you, you wanted to make the inputTextHandler as abstract. But in this case, another handler is never expected, so the property looks redundant. I think, it can be like this one

   listenInputChanges() {
   this.inputControl
   .valueChanges
   .subscribe(text => this.handleHighlights(text));
   }

3. handleHighlights will be called for every keypress event. Perhaps you should consider using the debounce operator.
4. greenRegex and blueRegex will create new RegExp objects for every keypress event, but they have constant params. Perhaps you should consider making them private properties of the component.
5. I like that your code is formatted, you type the properties, the code looks clean.
6. In general, you use the correct logic, find all patterns, and then make the result. I'm assuming the mistake is related to regular expressions or their use.

The test task is taken as a general option from the typical tasks of our project, so we can show it on a real example

Best regards

[nikola87kg]

Hi, Ruslan

Thanks for the review. I will fix the points from the review. I have probably misunderstood some of the requirements, but it is easier now when I have an image to see how it should look at the end.

I will notify you when I finish the fixes.

[nikola87kg]

@RuslanLikhobaba
I have just pushed my new code. You can check it. Please contact me if you have any questions.

Best regards

[nikola87kg]

Changes:

1. I am using now a content-editable DIV as an input block.
2. I changed the regex logic to adjust the output result to the image you sent.
3. I have moved a CSS code from styles.scss to the component scss file.
4. I did a fine-tuning of the code, regarding inputTextHandler and constant regex variables.

Issues:

1. Changing input to content-editable div created a bug about a cursor that moves to the beginning of the input area every time change detection occurs. I see that this is a general problem that exists in the community, and it is something that requires a longer investigation to fix.

[RuslanLikhobaba]

Hi Nikola, Good job, your logic works as expected.

Changing input to content-editable div created a bug about a cursor that moves to the beginning of the input area

Don't worry about it. We know about this one and don't expect perfect code here.

I would like to draw your attention to a potential memory leak in your code. For testing, you can make these changes to the code:

app.component.ts

export class AppComponent {
  ...
  isVisible = false;
}

app.component.html

<button (click)="isVisible = !isVisible">{{isVisible ? 'Hide Block' : 'Show Block'}}</button>
<app-text-input *ngIf="isVisible"/>

text-input.component.ts

  ngOnInit() {
    interval(2000)
    //this.debounceTrigger
      .pipe(debounceTime(1000))
      .subscribe((i) => {
        console.log('message', i);
        this.handleHighlights();
      });
  }

Play around with the display of the block and at the same time watch for messages in the browser console.

[nikola87kg]

Hi @RuslanLikhobaba,

I have added a subscription and unsubscribed from it in the onDestroy hook. Also, I have managed to create a logic for the CURSOR issue from yesterday, so now everything seems perfect :)

Best regards

[RuslanLikhobaba]

Good evening @nikola87kg,

I see you are not afraid to spend time on an interesting task. I have already left my positive opinion this morning about your work.

Just for fun, I suggest you to think about the complexity of the algorithm you implemented. Also how the algorithm will change if you need to find not only the correct patterns, but also the wrong ones, that is, those patterns that intersect.

Motivation: in my opinion, this algorithm has a weak point, these are regular expressions. It doesn't matter for single searches of the same type. But when pattern searching is done in real time while typing, this can become a bottleneck. When looking for the wrong patterns, how many more regular expressions will you have to add?

Best regards

[nikola87kg]

Hi @RuslanLikhobaba,

I have improved the algorithm and removed regex completely. Now, all the checking is done in one for loop, and I made it scalable. I have tested it with the third colour (red) and it works fine. I left a sample in the test.

Best regards, Nikola

[RuslanLikhobaba]

Hi @nikola87kg,

Yes! It' possible to find all patterns in one loop without using regular expressions. It doesn't depend on me much, but I'd like to work together.

Best regards