rework recipes and random generation pt. 2

frontend/src/components/RecipeModel.vue

@@ -35,9 +35,7 @@
         <!-- input field -->
 
         <div>
-          <v-app>
 
-          </v-app>
           <v-container
               fluid
               dark
@@ -137,28 +135,60 @@ const Recipes = {
   },
 
   mounted() {
-    api.getRecipesForFridge()
+    this.populateRecipes()
-        .then(response => {
-          this.$log.debug("Data loaded: ", response.data)
-          this.recipes = response.data
-        })
-        .catch(error => {
-          this.$log.debug(error)
-          this.error = "Failed to load recipes"
-        })
-        .finally(() => this.loading = false)
   },
 
+  methods: {
+    populateFromFridge() {
+      api.getRecipesForFridge()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.recipes = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load recipes"
+          })
+          .finally(() => this.loading = false)
+    },
+
+    populateRandom() {
+      api.getRandom()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.recipes = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load recipes"
+          })
+          .finally(() => this.loading = false)
+    },
+
+    populateRecipes() {
+      api.getAll()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.items = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load items"
+          })
+          .finally(() => {
+            if (this.items.length > 3) {
+              this.populateFromFridge()
+            } else {
+              this.populateRandom()
+            }
+          })
+    }
+  }
 
 }
 export default Recipes
 </script>
 
-
-
-
-
-
 <style lang="scss">
 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');