finished making FoodList completely generic

vue/src/components/GenericSplitLists.vue

@@ -64,7 +64,7 @@
           </div>
 
           <!-- only show scollbars in split mode -->
-          <!-- weird behavior when switching to split mode, infinite scoll doesn't trigger if 
+          <!-- TODO: weird behavior when switching to split mode, infinite scoll doesn't trigger if 
                 bottom of page is in viewport can trigger by scrolling page (not column) up  -->
           <div class="row" :class="{'overflow-hidden' : show_split}">
             <div class="col col-md" :class="{'mh-100 overflow-auto' : show_split}">
@@ -101,12 +101,15 @@ import _debounce from 'lodash/debounce'
 import InfiniteLoading from 'vue-infinite-loading';
 
 export default {
+  // TODO: this should be simplified into a Generic Infinitely Scrolling List and added as two components when split lists desired
   name: 'GenericSplitLists',
   components: {InfiniteLoading},
   props: {
     list_name: {type: String, default: 'Blank List'},  // TODO update translations to handle plural translations
-    left_list: {type:Array, default(){return []}},
+    left_list: {type: Array, default(){return []}},
+    left_counts: {type: Object},
     right_list: {type:Array, default(){return []}},
+    right_counts: {type: Object},
   },
   data() {
     return {
@@ -116,6 +119,8 @@ export default {
       search_left: '',
       right_page: 0,
       left_page: 0,
+      right_state: undefined,
+      left_state: undefined,
       right: +new Date(),
       left: +new Date(),
       text: {
@@ -142,6 +147,26 @@ export default {
       this.$emit('reset', {'column':'right'})
       this.right += 1
     }, 700),
+    right_counts: {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (newVal.current >= newVal.max) {
+          this.right_state.complete()
+        } else {
+          this.right_state.loaded()
+        }
+      }
+    },
+    left_counts: {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (newVal.current >= newVal.max) {
+          this.left_state.complete()
+        } else {
+          this.left_state.loaded()
+        }
+      }
+    }
   },
   methods: {
     resetSearch: function () {
@@ -154,16 +179,9 @@ export default {
             'page': (col==='left') ? this.left_page + 1 : this.right_page + 1,
             'column': col
         }
-        // TODO: change this to be an emit and watch a prop to determine if loaded or complete
-        new Promise((callback) => this.$emit('get-list', params, callback)).then((result) => {
-            this[col+'_page'] += 1
-            $state.loaded();
-            if (!result) { // callback needs to return true if handler should continue loading more data
-                $state.complete();
-            }
-        }).catch(() => {
-            $state.complete();
-        })
+        this[col+'_state'] = $state
+        this.$emit('get-list', params)
+        this[col+'_page'] += 1
     },
   }
 }

vue/src/components/RecipeCard.vue

@@ -94,6 +94,7 @@ export default {
     }
   },
   methods: {
+    // TODO: convert this to genericAPI
     clickUrl: function () {
       if (this.recipe !== null) {
         return resolveDjangoUrl('view_recipe', this.recipe.id)