fixed issue with the filter where it would not remove id from endpoin…

…t if box is unchecked and path includes it relates #8
FACG4 · May 28, 2018 · 903ba6f · 903ba6f
1 parent 37532bb
commit 903ba6f
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 53 deletions.
diff --git a/public/js/categories.js b/public/js/categories.js
@@ -16,5 +16,4 @@
   listener(location.middle);
   listener(location.khan);
   listener(location.rafah);
-
-}(elements.price, elements.size, elements.location, elements.listener));
+}(elements.price, elements.size, elements.location, listener))
diff --git a/public/js/filter_elements.js b/public/js/filter_elements.js
@@ -1,11 +1,4 @@
-const select = (element) => {
-  return document.querySelector(element);
-};
-
-let elementList = [];
-let priceElements = [];
-let sizeElements = [];
-let locationElements = [];
+const select = element => document.querySelector(element);
 
 const elements = {
   price: {
@@ -26,59 +19,84 @@ const elements = {
     khan: select('#l4'),
     rafah: select('#l5'),
   },
-  submit: select('#submit'),
-  listener(element) {
-    element.addEventListener('change', () => {
+};
+
+window.onload = () => {
+  const nodeList = document.querySelectorAll('.box')
+  nodeList.forEach((element) => {
+    if (location.pathname.includes(element.id)) {
+      element.checked = true;
+    } else element.checked = false;
+  });
+};
+
+const path = location.pathname.split('/')[3];
+let url;
+const pathArray = path.split('&');
+let elementList = [];
+let priceElements = [];
+let sizeElements = [];
+let locationElements = [];
+let priceString = '';
+let sizeString = '';
+let locationString = '';
 
-      if (element.checked && !priceElements.includes(element.id) && element.id.startsWith('p')) priceElements = priceElements.concat(element.id);
-      else if (!element.checked && priceElements.includes(element.id) && element.id.startsWith('p')) priceElements.splice(priceElements.indexOf(element.id), 1);
+if (path) {
+  pathArray.forEach((ids) => {
+    const pathEntries = ids.split(',');
 
-      else if (element.checked && !sizeElements.includes(element.id) && element.id.startsWith('s')) sizeElements = sizeElements.concat(element.id);
-      else if (!element.checked && sizeElements.includes(element.id) && element.id.startsWith('s')) sizeElements.splice(sizeElements.indexOf(element.id), 1);
+    pathEntries.forEach((pathIds) => {
+      if (pathIds.startsWith('p') && !priceElements.includes(pathIds)) priceElements = priceElements.concat(pathIds);
+      else if (pathIds.startsWith('s') && !sizeElements.includes(pathIds)) sizeElements = sizeElements.concat(pathIds);
+      else if (pathIds.startsWith('l') && !locationElements.includes(pathIds)) locationElements = locationElements.concat(pathIds);
+    }); // end of nested forEach;
+  }); // end of first forEach;
+}
 
-      else if (element.checked && !locationElements.includes(element.id) && element.id.startsWith('l')) locationElements = locationElements.concat(element.id);
-      else if (!element.checked && locationElements.includes(element.id) && element.id.startsWith('l')) locationElements.splice(locationElements.indexOf(element.id), 1);
+console.log('price', priceElements);
+console.log('size', sizeElements);
+console.log('loc', locationElements);
 
-      const priceString = priceElements.join(',');
-      const sizeString = sizeElements.join(',');
-      const locationString = locationElements.join(',');
+const listener = (element) => {
+  element.addEventListener('change', () => {
+    if (!path || path === undefined) {
+      url = element.id;
+    } else if (path) {
+      console.log(element.id);
+      if (element.id.startsWith('p') && priceElements.includes(element.id) && !element.checked) priceElements.splice(priceElements.indexOf(element.id), 1);
+      if (element.id.startsWith('p') && !priceElements.includes(element.id) && element.checked) priceElements = priceElements.concat(element.id).sort();
 
-      elementList = [];
-      elementList = elementList.concat(priceString).concat(sizeString).concat(locationString).filter(ele => ele !== '');
-      const url = elementList.join('&');
-      const pathName = location.pathname.split('/').filter((e) => {
-        return e !== '';
-      });
 
-      let endpoint
-      const filteredPath = pathName[2];
-      if (!filteredPath) endpoint = url;
-      else if (filteredPath.includes(url)) endpoint = filteredPath;
-      else endpoint = `${filteredPath}&${url}`;
+      if (element.id.startsWith('s') && sizeElements.includes(element.id) && !element.checked) sizeElements.splice(sizeElements.indexOf(element.id), 1);
+      if (element.id.startsWith('s') && !sizeElements.includes(element.id) && element.checked) sizeElements = sizeElements.concat(element.id).sort();
 
-      fetch(endpoint, {
-        method: 'GET',
-      })
-        .then((res) => {
-          window.location = res.url;
-          console.log(location.pathname.includes('p1'));
-          console.log(res.url);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    });
-  },
-};
 
+      if (element.id.startsWith('l') && locationElements.includes(element.id) && !element.checked) locationElements.splice(locationElements.indexOf(element.id), 1);
+      if (element.id.startsWith('l') && !locationElements.includes(element.id) && element.checked) locationElements = locationElements.concat(element.id).sort();
 
 
-window.onload = () => {
-  let nodeList = document.querySelectorAll('.box')
+      priceString = priceElements.join(',')
+      sizeString = sizeElements.join(',')
+      locationString = locationElements.join(',')
 
-  nodeList.forEach((element) => {
-    if(location.pathname.includes(element.id)) element.checked = true;
-  })
+      url = elementList.concat(priceString).concat(sizeString).concat(locationString).filter(e => e !== '')
+        .join('&');
+    } // end of else statement;
 
+    console.log('newprice', priceString);
+    console.log('newsize', sizeString);
+    console.log('newloc', locationString);
+    console.log(url);
 
-}
+
+    fetch(url, {
+      method: 'GET',
+    })
+      .then((res) => {
+        window.location = res.url;
+      })
+      .catch((err) => {
+        console.log(err); // add textContent to a div 'unautorized action' or something.
+      });
+  });
+};