Don't allow reordering items on main page; fix adding an item

front-end/assets/css/global.css

@@ -101,7 +101,7 @@ body {
   pointer-events: none;
 }
 
-mwmbl-results, footer {
+.main, footer {
   display: block;
   max-width: 800px;
   width: 100%;

front-end/src/components/organisms/results.js

@@ -87,9 +87,9 @@ class ResultsHandler {
       this.results.insertAdjacentHTML('afterbegin', resultData);
 
       const newResults = this.__getResults();
+      const url = newResults[0].url;
 
-      const curationSaveEvent = new CustomEvent('save-curation', {
-      detail: {
+      let detail = {
         type: 'add',
         data: {
           timestamp: Date.now(),
@@ -97,13 +97,15 @@ class ResultsHandler {
           results: newResults,
           curation: {
             insert_index: 0,
-            url: e.detail.url
+            url: url
           }
         }
-      }
-    });
-    globalBus.dispatch(curationSaveEvent);
-
+      };
+      console.log("Detail", detail);
+      const curationSaveEvent = new CustomEvent('save-curation', {
+        detail: detail
+      });
+      globalBus.dispatch(curationSaveEvent);
     });
   }
 

mwmbl/templates/home.html

@@ -1,39 +1,31 @@
-{% load result_filters %}
 {%  load humanize %}
 {%  include "title.html" %}
-{% if query %}
-  {% if results %}
-    {% for result in results %}
-      <li class="result" is="mwmbl-result">
-        <div class="result-container">
-          <div class="curation-buttons">
-            <button class="curation-button curate-delete" is="mwmbl-delete-button">✕</button>
-            <button class="curation-button curate-approve" is="mwmbl-validate-button">✓</button>
-            <button class="curation-button curate-add" is="mwmbl-add-button">＋</button>
-          </div>
-          <div class="result-link">
-            <a href="{{result.url}}">
-              <p class='link'>{{result.url}}</p>
-              <p class='title'>{{result.title|strengthen}}</p>
-              <p class='extract'>{{result.extract|strengthen}}</p>
-            </a>
-          </div>
-        </div>
-      </li>
-    {% endfor %}
+<div class="main">
+  {% if query %}
+    {% if results %}
+      <ul class='results'>
+        {% for result in results %}
+          {% include "result.html" %}
+        {% endfor %}
+      </ul>
+    {% else %}
+      <ul>
+        <li class="home">
+          <h1>
+            No results found for "{{query}}".
+          </h1>
+        </li>
+      </ul>
+    {% endif %}
   {% else %}
-    <li class="home">
-      <h1>
-        No results found for "{{query}}".
-      </h1>
-    </li>
+    {%  for item in activity %}
+      <ul>
+        <li class="activity">
+          <h1>
+            {{ item.user }} made {{ item.num_curations | apnumber }} changes to <a href="{{ item.url }}">{{ item.query }}</a> {{ item.timestamp | naturaltime }}.
+          </h1>
+        </li>
+      </ul>
+    {% endfor %}
   {% endif %}
-{% else %}
-  {%  for item in activity %}
-    <li class="activity">
-      <h1>
-        {{ item.user }} made {{ item.num_curations | apnumber }} changes to <a href="{{ item.url }}">{{ item.query }}</a> {{ item.timestamp | naturaltime }}.
-      </h1>
-    </li>
-  {% endfor %}
-{% endif %}
+</div>

mwmbl/templates/index.html

@@ -60,10 +60,10 @@
           placeholder='Search on Mwmbl...'
           title='Use "CTRL+K" or "/" to focus.'
           autocomplete='off'
-          value="{{ query }}"
+          value='{{ query|default_if_none:"" }}'
           hx-get="/app/home/"
           hx-trigger="keyup changed delay:100ms"
-          hx-target=".results"
+          hx-target=".main"
         >
       </form>
       <div is="mwmbl-save"></div>
@@ -76,11 +76,7 @@
       {% endif %}
     </header>
     <main>
-      <mwmbl-results>
-        <ul class='results'>
-          {%  include "home.html" %}
-        </ul>
-      </mwmbl-results>
+      {%  include "home.html" %}
     </main>
     <div is="mwmbl-add-result"></div>
   <div class="footer">

mwmbl/templates/result.html

@@ -0,0 +1,17 @@
+{% load result_filters %}
+<li class="result" is="mwmbl-result">
+  <div class="result-container">
+    <div class="curation-buttons">
+      <button class="curation-button curate-delete" is="mwmbl-delete-button">✕</button>
+      <button class="curation-button curate-approve" is="mwmbl-validate-button">✓</button>
+      <button class="curation-button curate-add" is="mwmbl-add-button">＋</button>
+    </div>
+    <div class="result-link">
+      <a href="{{result.url}}">
+        <p class='link'>{{result.url}}</p>
+        <p class='title'>{{result.title|strengthen}}</p>
+        <p class='extract'>{{result.extract|strengthen}}</p>
+      </a>
+    </div>
+  </div>
+</li>

mwmbl/views.py

@@ -124,7 +124,6 @@ def fetch_url(request):
         extract = extract[:NUM_EXTRACT_CHARS - 1] + '…'
 
     result = Document(title=title, url=url, extract=extract, score=0.0)
-    return render(request, "home.html", {
-        "results": [format_result(result, query)],
-        "query": query,
+    return render(request, "result.html", {
+        "result": format_result(result, query),
     })