old-slucajna-televizija/web/src/App.js

import React, { Component } from 'react';
import './App.css';
import PersonsListComponent from './PersonsListComponent.js';



class App extends Component {
  constructor(props){
    super(props);
    this.state = {renderPersonsList: false, persons: [], currentPairsText: ""};
    this.getNamesEventHandler = this.getNamesEventHandler.bind(this);
    this.createTableEventHandler = this.createTableEventHandler.bind(this);
    this.addAndSaveEventHandler = this.addAndSaveEventHandler.bind(this);
    this.pairsTextChangedEventHandler = this.pairsTextChangedEventHandler.bind(this);
    this.personsSelectionChangedEventHandler = this.personsSelectionChangedEventHandler.bind(this);
  }

  componentDidMount(){
    this.currentPairs = JSON.parse(localStorage.getItem("currentPairs") || "[]");
    this.currentPersons = JSON.parse(localStorage.getItem("currentPersons") || "[]");
    // Load textarea text from local storage
    this.setState({currentPairsText: JSON.parse(localStorage.getItem("currentPairsText")) || ""});
  }

  pairsTextChangedEventHandler(event) {
    this.setState({currentPairsText: event.target.value});
  }

  getNamesEventHandler(event) {
    if(this.state.currentPairsText.trim() === "")
      return;
    let allNames = this.state.currentPairsText.trim().replace(/\n\s*\n/g, '\n').replace(/(\r\n|\n|\r)/gm, "|").split("|");
    allNames = allNames.map(name => name.trim());
    console.log(allNames);
    let names = [...new Set(allNames)];
    if(this.currentPersons.length === 0)
      this.currentPersons = names;
    else{
      // Check if there are some new names
      let newNames = names.filter(name => !this.currentPersons.includes(name));
      for(const newName of newNames)
        this.currentPersons.push(newName);
    }
    let matrix = new Array(this.currentPersons.length);
    for (let i = 0; i < matrix.length; ++i) {
      matrix[i] = [];
    }
    for(let i = 0; i < allNames.length; i = i + 2){
      const idx1 = this.currentPersons.indexOf(allNames[i]);
      const idx2 = this.currentPersons.indexOf(allNames[i + 1]);
      matrix[idx1].push(idx2);
      matrix[idx2].push(idx1);
    }
    this.currentPairs = matrix;
    this.setState({persons: names.map(name => ({personName: name, isSelected: true})), renderPersonsList: true});
  }

  createTableEventHandler(event) {
    const selectedPersonNames = this.state.persons.filter(person => person.isSelected).map(person => person.personName);
    let selectedPersonIndices = selectedPersonNames.map(name => this.currentPersons.indexOf(name));

    let newPairs = "";

    while(selectedPersonIndices.length > 1){
      const firstIdx = selectedPersonIndices[0];
      const pairIndices = this.currentPairs[firstIdx];
      const missingPairIndices = Array.from(Array(this.currentPersons.length).keys()).filter(
        (idx) => (idx !== firstIdx && !pairIndices.includes(idx) && selectedPersonIndices.includes(idx)));
      // Person has had meetup with everyone
      if(missingPairIndices.length === 0)
        selectedPersonIndices.splice(0, 1);
      else{
        let pairsMatrix = this.currentPairs;
        pairsMatrix[firstIdx].push(missingPairIndices[0]);
        pairsMatrix[missingPairIndices[0]].push(firstIdx);
        this.currentPairs = pairsMatrix;
        newPairs += this.currentPersons[firstIdx] + " | " + this.currentPersons[missingPairIndices[0]] + "\n";
        selectedPersonIndices.splice(0, 1);
        selectedPersonIndices.splice(selectedPersonIndices.indexOf(missingPairIndices[0]), 1);
      }
    }
    console.log(newPairs);
    if(newPairs === "")
      alert("Everyone (from the list of selected persons) had meetup with everyone else!");
    else{
      this.setState((prevState, props) => ({
        currentPairsText: prevState.currentPairsText.trim() + "\n\n" + newPairs.trim()
      }));
    }
  }

  addAndSaveEventHandler(event) {
    // Save textarea text to local storage
    localStorage.setItem("currentPairsText", JSON.stringify(this.state.currentPairsText));
    // Save current persons to local storage
    localStorage.setItem("currentPersons", JSON.stringify(this.currentPersons));
    // Save pairs matrix to local storage
    localStorage.setItem("currentPairs", JSON.stringify(this.currentPairs));
  }

  personsSelectionChangedEventHandler(index){
    let personsList = this.state.persons;
    personsList[index].isSelected = !personsList[index].isSelected;
    this.setState({
        persons: personsList
    });
  }

  render() {
    return (
      <div className = "App">
        <div>
          <h2>Meetup app</h2>
        </div>
        <textarea rows = "20" cols = "50" value = {this.state.currentPairsText} onChange = {this.pairsTextChangedEventHandler}></textarea>
        <div className = "horizontalDiv">
          <button onClick = {this.getNamesEventHandler}>GET NAMES</button>
          <button onClick = {this.createTableEventHandler}>CREATE TABLE</button>
          <button onClick = {this.addAndSaveEventHandler}>ADD AND SAVE</button>
        </div>
        {
          this.state.renderPersonsList &&
            <PersonsListComponent persons = {this.state.persons} personsSelectionChanged = {this.personsSelectionChangedEventHandler}/>
        }
      </div>
    );
  }
}

export default App;