From ddb2deacd4b2a7d01249f7159a4a4bb1dc082018 Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Mon, 8 Oct 2018 03:07:49 -0700
Subject: [PATCH] [bump npm] handle layout / order change on search if selected
 el is still part of the new search

---
 package.json             |  2 +-
 src/components/search.js | 15 +++++++++++++++
 src/state/index.js       |  2 ++
 src/templates/menu.html  |  4 +++-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ee28ffe..6191d67 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "aframe-event-set-component": "^4.0.1",
     "aframe-geometry-merger-component": "^2.0.0-beta1",
     "aframe-haptics-component": "^1.4.2",
-    "aframe-layout-component": "^5.2.0",
+    "aframe-layout-component": "^5.3.0",
     "aframe-orbit-controls": "^1.2.0",
     "aframe-proxy-event-component": "^2.1.0",
     "aframe-slice9-component": "^1.0.0",
diff --git a/src/components/search.js b/src/components/search.js
index 243d144..7a262a7 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -47,6 +47,21 @@ AFRAME.registerComponent('search', {
  * Click listener for search result.
  */
 AFRAME.registerComponent('search-result-list', {
+  init: function () {
+    const obv = new MutationObserver(mutations => {
+      for (let i = 0; i < mutations.length; i++) {
+        if (mutations[i].attributeName === 'data-index') {
+          this.refreshLayout();
+        }
+      }
+    });
+    obv.observe(this.el, {attributes: true, childList: false, subtree: true});
+  },
+
+  refreshLayout: function () {
+    this.el.emit('layoutrefresh', null, false);
+  },
+
   click: bindEvent(function (evt) {
     this.el.sceneEl.emit('menuchallengeselect',
                          evt.target.closest('.searchResult').dataset.id,
diff --git a/src/state/index.js b/src/state/index.js
index 913e3ee..7accd76 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -212,6 +212,7 @@ AFRAME.registerState({
         challengeDataStore[result.id] = result
       }
       computeSearchPagination(state);
+      computeMenuSelectedChallengeIndex(state);
     },
 
     'enter-vr': (state) => {
@@ -248,6 +249,7 @@ function computeSearchPagination (state) {
        i < state.search.page * SEARCH_PER_PAGE + SEARCH_PER_PAGE; i++) {
     if (!state.search.results[i]) { break; }
     state.searchResultsPage.push(state.search.results[i]);
+    state.search.results[i].index = i;
 
     state.search.songNameTexts +=
       truncate(state.search.results[i].songName, SONG_NAME_TRUNCATE).toUpperCase() + '\n';
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 22dc9a0..d9ce7e1 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -1,8 +1,9 @@
 <!-- Macro is a templating function. It is rendered into the HTML below with searchResults(). -->
 {% macro searchResults () %}
+  <!-- TODO: Sort the layout based on the IDs. -->
   <a-entity id="searchResultList"
             bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate; updateInPlace: true; pool: 6; delay: 25"
-            layout="type: box; columns: 1; marginRow: -0.2"
+            layout="type: box; columns: 1; marginRow: -0.2; orderAttribute: data-index"
             search-result-list
             position="0 0.644 0"></a-entity>
 
@@ -73,6 +74,7 @@
     <a-entity
       class="searchResult"
       bind-item__data-id="item.id"
+      bind-item__data-index="item.index"
       bind-item__song-preview="challengeId: item.id; previewStartTime: item.previewStartTime">
       <a-entity
         class="searchResultBackground"