Enable sync with Firebase

index.html

@@ -14,9 +14,8 @@ <h1>Nys</h1>
       <textarea type="text" id="notes"></textarea>
       <button type="submit" id="save">Save</button>
     </form>
-    <div id="teams">
-      <h2>Teams</h2>
-    </div>
+    <div id="teams"></div>
+    <script src="https://www.gstatic.com/firebasejs/3.5.3/firebase.js"></script>
     <script src="index.js"></script>
   </body>
 </html>

index.js

@@ -2,10 +2,21 @@
 // localStorage doesn't support arrays, so we have to convert the teams array to a string and back
 // these functions make it easier to manage teams without directly calling localStorage
 const getTeams = () => JSON.parse(localStorage.getItem("teams"));
-const addTeam = (team) => localStorage.setItem("teams", JSON.stringify(getTeams().concat(team)));
+const hasTeam = (name) => getTeams().map(team => team.name).indexOf(name) !== -1;
+const addTeam = (team) => {
+  if (!hasTeam(team.name)) {
+    localStorage.setItem("teams", JSON.stringify(getTeams().concat(team)));
+  }
+  if (firebase) {
+    firebase.database().ref(`team/${team.name}`).set(team);
+  }
+};
 const removeTeam = (name) => {
   const teamsWithoutTeam = getTeams().filter(t => t.name !== name);
   localStorage.setItem("teams", JSON.stringify(teamsWithoutTeam));
+  if (firebase) {
+    firebase.database().ref(`team/${name}`).set(null);
+  }
 };
 // initialize the teams value by making sure that it is set to an array
 localStorage.setItem("teams", localStorage.getItem("teams") || "[]");
@@ -15,6 +26,9 @@ const renderTeams = () => {
   document.getElementById("teams").innerHTML = ""; // clear the teams
 
   const teams = getTeams();
+  if (teams.length > 0) {
+    document.getElementById("teams").innerHTML = "<h2>Teams</h2>";
+  }
   for (let team of teams) {
     const teamNode = document.createElement("div");
     teamNode.innerHTML = `
@@ -43,3 +57,28 @@ document.getElementById("save").addEventListener("click", () => {
 });
 
 renderTeams();
+
+// handle automatic syncing
+if (firebase) {
+  firebase.initializeApp({
+    apiKey: "AIzaSyCinnVb0Y6eXw9ttyspV32NJnugRvQtbmM",
+    authDomain: "nys-vex.firebaseapp.com",
+    databaseURL: "https://nys-vex.firebaseio.com",
+    storageBucket: "nys-vex.appspot.com",
+    messagingSenderId: "40799368085"
+  });
+
+  // download any new teams and display them
+  const teams = firebase.database().ref("team").on("value", (teams) => {
+    for (let teamName in teams.val()) {
+      const team = teams.val()[teamName];
+      if (!hasTeam(team.name)) {
+        addTeam(team);
+      }
+    }
+    renderTeams();
+  });
+
+  // upload new teams
+  getTeams().forEach(team => firebase.database().ref(`team/${team.name}`).set(team));
+}