..

web/src/App.js

@@ -1,109 +1,25 @@
 import React, { Component } from 'react';
 import './App.css';
-import PersonsListComponent from './PersonsListComponent.js';
+import PairsListComponent from './PairsListComponent.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);
+
+    this.state = {renderPairsList: false, pairs: []};
+
+    this.getPairsEventHandler = this.getPairsEventHandler.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")) || ""});
+  getPairsEventHandler(event){
+    console.log("Get Pairs");
+    this.setState({pairs: ['Bilal Rahima','A1 A2','B1 B2'],renderPairsList:true});
   }
 
-  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
-    });
+  savePairsEventHandler(event){
+    
   }
 
   render() {
@@ -112,15 +28,20 @@ class App extends Component {
         <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>
+          <button onClick = {this.getPairsEventHandler}>Get pairs</button>
+        </div>
+        <div>
+          <h2> List of pairs : </h2>
         </div>
         {
-          this.state.renderPersonsList &&
-            <PersonsListComponent persons = {this.state.persons} personsSelectionChanged = {this.personsSelectionChangedEventHandler}/>
+          this.state.renderPairsList &&
+            <PairsListComponent pairs = {this.state.pairs}/>
+        }
+        {
+          this.state.renderPairsList &&
+            <button onClick = {this.savePairsEventHandler}> Save pairs </button>
         }
       </div>
     );