NSFL · yasserhennawi · Apr 20, 2017 · Apr 27, 2017
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>GoCrush</title>
-    <meta name="viewport" content="width=width-device , initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
     <link rel="stylesheet" href="src/build/main.css"/>
     <script src="src/build/bundle.js"></script>
   </head>

diff --git a/src/SVGs/logout.html b/src/SVGs/logout.html
@@ -0,0 +1,4 @@
+<svg x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000">
+  <path d="M988.4,449.9c1-2.4,1.6-5.1,1.6-7.8c0-2.7-0.5-5.3-1.6-7.8c-1-2.5-2.5-4.7-4.4-6.5L844.4,288.1c-7.9-7.9-20.7-7.9-28.6,0c-7.9,7.9-7.9,20.7,0,28.6l105.2,105.2H470.4c-11.2,0-20.2,9.1-20.2,20.2c0,11.2,9,20.2,20.2,20.2h450.5L815.8,567.5c-7.9,7.9-7.9,20.7,0,28.6c3.9,3.9,9.1,5.9,14.3,5.9c5.2,0,10.4-2,14.3-5.9l139.7-139.7C985.9,454.5,987.4,452.3,988.4,449.9z"/>
+  <path d="M671.1,535.4c-11.2,0-20.2,9.1-20.2,20.2v222.8H359.3V201.3c0-7.3-3.9-14-10.3-17.6L109,47.6h541.9v280.9c0,11.2,9,20.2,20.2,20.2c11.2,0,20.2-9.1,20.2-20.2V27.4c0-11.2-9-20.2-20.2-20.2H30.2C19,7.1,10,16.2,10,27.4v771.3c0,9.4,6.5,16.9,15.2,19.2l303.9,172.4c3.1,1.8,6.5,2.6,10,2.6c3.5,0,7-0.9,10.2-2.8c6.2-3.6,10.1-10.3,10.1-17.5V818.9h311.8c11.2,0,20.2-9.1,20.2-20.2v-243C691.3,544.5,682.3,535.4,671.1,535.4z M318.8,937.9l-266.3-151V62.1l266.3,151V937.9L318.8,937.9z"/>
+</svg>
diff --git a/src/components/main-page.html b/src/components/main-page.html
@@ -8,7 +8,8 @@ <h3 class="header3">Welcome,
     <div class="user-crushes">
       <h2 class="header2">I have crush on :</h2>
       <ul class="crush-list"></ul> 
-      <input type="text" name="new crush" placeholder="Add new crush"/>
+      <input class="textfield" type="text" name="new crush" placeholder="Add new crush"/>
+      <button class="submit-crush">Submit</button>
     </div>
     <div class="notification-of-crushesNum">
       <h2 class="header2"> Currently, you have</h2>

diff --git a/src/css/style.scss b/src/css/style.scss
@@ -9,7 +9,7 @@ $white :#fff;
 $fblink :#3a5795;
 
 //fonts
-$comicfont: Comic Sans MS;
+$comicfont: 'roboto';
 
 @mixin paragraph-text {
 	font-family:$comicfont;

diff --git a/src/js/crushApi.js b/src/js/crushApi.js
@@ -2,50 +2,116 @@ var Promise = require('promise');
 import Cookies from 'js-cookie';
 import $ from 'jquery';
 
+var cachedCrushes;
 
-// START: Handling Users's crushes 
-export function showMyCrushes(data) {
-  $.each(data, function(key,value){
-    $('.crush-list').append(`<li class='crush'>${key+1}-${value.crushDisplayName}</li>`);
-  });
+// START: Handling Users's crushes API
+export function getMyCrushesPromise() {
+  if (cachedCrushes == null) {
+    return new Promise( function(resolve, reject) {
+      $.ajax({
+        type: 'GET',
+        url: `http://localhost:4567/api/users/${Cookies.get('appUserID')}/crushes`,
+        beforeSend: function (xhr) {
+          xhr.setRequestHeader ('Authorization', Cookies.get('Authorization'));
+        },
+        success: (data) => {
+          resolve(data);
+        },
+        error: (error) => {reject(error)} 
+      })
+    })
+    .then((data)=> {
+      cachedCrushes = data;
+      return data;
+    });
+  }
+  return Promise.resolve(cachedCrushes)
+    .then((crushes) => {
+      return crushes;
+    });
 }
+// END: Handling Users's crushes 
 
-export function getMyCrushesPromise() {
+
+// START: Handling getting crushes on user
+export function getCrushesOnMePromise(){
   return new Promise( function(resolve, reject) {
     $.ajax({
       type: 'GET',
-      url: `http://localhost:4567/api/users/${Cookies.get('appUserID')}/crushes`,
+      url: `http://localhost:4567/api/users/${Cookies.get('appUserID')}/crushes-on-me-count`,
       beforeSend: function (xhr) {
         xhr.setRequestHeader ('Authorization', Cookies.get('Authorization'));
       },
       success: (data) => {
         resolve(data);
       },
       error: (error) => {reject(error)} 
-    })
-  }
-)};
-// END: Handling Users's crushes 
+    });
+  })
+}
+// END: Handling crushes on user
 
 
-// START: Handling crushes on user
-export function showCrushesOnMe(data) {
-  $('.number').text(data);
+// START: Handling adding crush
+export function crushOnPromise(crushURL){
+  return new Promise( function(resolve, reject) {
+    $.ajax({
+      type: 'POST',
+      url: `http://localhost:4567/api/users/${Cookies.get('appUserID')}/crushes`,
+      beforeSend: function (xhr) {
+        xhr.setRequestHeader ('Authorization', Cookies.get('Authorization'));
+      },
+      data: crushURL,
+      success: (data) => {
+        addCrushToCache(data);
+        resolve(data);
+      },
+      error: (error) => {reject(error)} 
+    });
+  })
 }
+// END: Handling adding crush
 
-export function getCrushesOnMePromise(){
+
+// START: Handling deleting crush
+
+export function deleteCrushPromise(crushURL) {
   return new Promise( function(resolve, reject) {
     $.ajax({
-      type: 'GET',
-      url: `http://localhost:4567/api/users/${Cookies.get('appUserID')}/crushes-on-me-count`,
+      type: 'DELETE',
+      url: `http://localhost:4567/api/users/${Cookies.get('appUserID')}/crushes/${crushURL}`,
       beforeSend: function (xhr) {
         xhr.setRequestHeader ('Authorization', Cookies.get('Authorization'));
       },
       success: (data) => {
+        deleteCrushfromCache(data);
         resolve(data);
       },
       error: (error) => {reject(error)} 
     });
   })
 }
-// END: Handling crushes on user
+// END: Handling deleting crush
+
+
+// Helping functions
+function addCrushToCache(crush) {
+  if (cachedCrushes == null) cachedCrushes = [];
+  cachedCrushes.push(crush);
+}
+
+function deleteCrushfromCache(crush) {
+  var index = getCrushIndex(crush);
+  console.log(index);
+  if (index > -1) {
+    cachedCrushes.splice(index, 1);
+  }
+}
+function getCrushIndex(crush) {
+  for (var i = 0 ; i < cachedCrushes.length; i++) {
+    if (cachedCrushes[i].fbCrushID == crush.fbCrushID ) {
+      console.log(i);
+      return i;
+    }
+  }
+}
diff --git a/src/js/index.js b/src/js/index.js
@@ -1,16 +1,21 @@
 var Promise = require('promise');
+import $ from 'jquery';
 import Cookies from 'js-cookie';
-import {getToken} from './utils/token.js';
-import {showMainPage, showLoginForm} from './view/pages.js'
 import {onLoginClick} from './userApi.js';
+import {getToken} from './utils/token.js';
+import {authUser, getUserData} from './userApi.js'
 import {showHeader, showFooter} from './view/template.js';
+import {
+  crushURLEventHandler,
+  viewMyCrushes,
+  viewCrushesOnMe,
+  showLoginForm,
+  showMainPage,
+  showLoginForm } from './view/pages.js'
 import {
   getMyCrushesPromise,
-  showMyCrushes,
-  getCrushesOnMePromise,
-  showCrushesOnMe } from './crushApi.js';
-import {authUser, getUserData} from './userApi.js'
-import $ from 'jquery';
+  getCrushesOnMePromise} from './crushApi.js';
+
 
 $(()=> {
   getToken();
@@ -24,20 +29,22 @@ $(()=> {
       * the next functions was originaly like : 
       *   
       * getCrushesOnMePromise().then((data) => {
-      *   showCrushesOnMe(data);
+      *   viewCrushesOnMe(data);
       * });
       * getMyCrushesPromise().then((data)=> {
-      *   showMyCrushes(data);
+      *   viewMyCrushes(data);
       * });
       * but a database error occurs so that's just a temporarily workaround ;
       */ 
       getCrushesOnMePromise()
       .then((data) => {
-        showCrushesOnMe(data);
-        getMyCrushesPromise().then((data)=> {
-          showMyCrushes(data);
+        viewCrushesOnMe(data);
+        getMyCrushesPromise()
+        .then((data)=> {
+          viewMyCrushes(data);
         })
-      })
+      });
+      crushURLEventHandler();
     },
     (error) => {
       showLoginForm();

diff --git a/src/js/view/pages.js b/src/js/view/pages.js
@@ -1,11 +1,59 @@
 import $ from 'jquery';
+import {
+  getMyCrushesPromise,
+  deleteCrushPromise,
+  crushOnPromise} from '../crushApi.js';
+var Promise = require('promise');
 
 export function showLoginForm()  {
   $('.pageBody').append(require("../../components/login-form.html").toString());
-  console.log("login form Showed");
 }
 
 export function showMainPage()  {
   $('.pageBody').append(require("../../components/main-page.html").toString());
-  console.log("Main page Showed");
+}
+
+export function viewCrushesOnMe(data) {
+  $('.number').text(data);
+}
+
+export function crushURLEventHandler() {
+  $('.submit-crush').click( ()=> {
+    crushOnPromise($('.textfield').val())
+    .then(() => {
+      return getMyCrushesPromise();
+    })
+    .then((data)=> {
+      $('.textfield').val('');
+      viewMyCrushes(data);
+      return data;
+    })
+  });
+} 
+
+export function viewMyCrushes(data) {
+  var crushesList = $('.crush-list');
+  $('.crush-list').children().remove();
+  $.each(data, function(key,value){
+    $('.crush-list').append(`
+      <li class='crush'>
+        ${key+1}-${value.crushDisplayName}
+      </li>
+      <button
+        data-fbCrushID="${value.fbCrushID}"
+        class="delete-crush-button">
+        Delete
+      </button>
+    `)
+    .children(`.delete-crush-button`).click( function() {
+      deleteCrushPromise(this.getAttribute('data-fbcrushid'))
+      .then(()=>{
+        return getMyCrushesPromise();
+      })
+      .then((data)=>{
+        viewMyCrushes(data);
+        return data;
+      })
+    })
+  });
 }
diff --git a/src/js/view/template.js b/src/js/view/template.js
@@ -2,10 +2,8 @@ import $ from 'jquery';
 
 export function showHeader()  {
   $('header').append(require("../../components/header.html").toString());
-  console.log("Header Showed");
 }
 
 export function showFooter()  {
   $('footer').append(require("../../components/footer.html").toString());
-  console.log("Footer Showed");
 }