Izmjenjena struktura, dodan backand

web/src/App.js

@@ -0,0 +1,130 @@
+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;