JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<div>
  <textarea id="all"></textarea>
  <textarea id="visited"></textarea>
</div>

<button>Click!</button>

<div>
  <textarea id="future-visitors"></textarea>
</div>

CSS

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

div {
  display: flex;
}

div textarea {
  margin: 1rem;
  height: 50vh;
  width: calc(50% - 2rem);
}

JavaScript

function getAllText() {
	return document.querySelector('#all').value;

}

function getVisitedText() {
	return document.querySelector('#visited').value;
}

function setFutureVisitorsText(text) {
	document.querySelector('#future-visitors').value = text;
}

function getButton() {
	return document.querySelector('button');
}

function findNotVisited() {
	const allText = getAllText();
  const visitedText = getVisitedText();
  
  const lines = parseLines(allText);
  const allVisitors = lines.map(getVisitor);
  
  const visitedLines = parseLines(visitedText);
  const visitedPhones = visitedLines
  	.map(getVisitor)
    .map(item => {
      return item.contacts[1];
    });
    
  const futureVisitors = allVisitors
  	.filter(visitor => {
      const contacts = visitor.contacts;
      let isFutureVisitor = true;

    	for (let i = 0; i < contacts.length; i++) {
      	const contact = contacts[i];
        
        if (isFutureVisitor && visitedPhones.indexOf(contact) !== -1) {
        	isFutureVisitor = false;
        }
      }
      
      return isFutureVisitor;
    });
    
  const futureVisitorsText = futureVisitors.reduce((text, visitor) => {
  	return text + visitor.contacts.join(',') + '\n';
  }, '');
  
  setFutureVisitorsText(futureVisitorsText);
  
  
  console.log('AAA', futureVisitors.length, futureVisitors);
  console.log('AAA', allVisitors.length, allVisitors);
}

function parseLines(text) {
	return text
  	.split(/\r?\n/)
    .filter(line => line.trim() !== '');
}

function getVisitorContacts(line) {
	const contactParts = line
  	.split(/[", ]+/)
    .filter(part => part.trim() !== '');
  return contactParts;
}

function getVisitor(line) {
  const contacts = getVisitorContacts(line);
  const correctedContacts = correctVisitorPhoneNumbers(contacts);
	const visitor = {
  	contacts: correctedContacts
  };
  
  return correctedContacts.reduce((result, item) => {
  	result[item] = item;
    return result;
  }, visitor);
}

function...