Add default ingredient list (#23)

* Add a basic card component

* Basic card for drinks

* Prevent empty submits

* Add list of default ingredients

* Properly load ingredients to ensure identity

Co-authored-by: Jonas Wilms <unknown@example.org>

Author: Jonasdoubleyou

frontend/src/searchform/IngredientList.tsx

@@ -5,7 +5,8 @@ import { IIngredient } from "../../../types";
 
 import * as API from "../api";
 
-const loadAllIngredients = API.getIngredients();
+export const loadAllIngredients = API.getIngredients();
+
 
 const normalize = (str: string) =>
   str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();

frontend/src/searchform/searchform.tsx

@@ -1,10 +1,23 @@
 import * as React from 'react';
 import './searchform.css';
 
-import { IngredientList } from './IngredientList';
+import { IngredientList, loadAllIngredients } from './IngredientList';
 import { IIngredient } from "../../../types";
 import { useTipsySelector } from '../tipsyselector/tipsyselector';
 
+const DEFAULT_INGREDIENTS = [
+    "carbonated water",
+    "coffee",
+    "cola",
+    "crushed ice",
+    "cow's milk",
+    "drinking water",
+    "ice",
+    "sugar",
+    "milk",
+    "water",
+];
+
 function SearchForm({
     submit
 }: {
@@ -14,6 +27,13 @@ function SearchForm({
     const [ingredients, setIngredients] = React.useState<IIngredient[]>([]);
     const [tipsySelectorEl, promille] = useTipsySelector({ rangeOptions: { min: .3, max: 2 } });
 
+    // If the ingredients were loaded before the user started adding some, 
+    // prefill the ingredient list with something basically everyone has
+    React.useEffect(() => {
+        loadAllIngredients
+            .then(result => setIngredients(prev => prev.length ? prev : result.ingredients.filter(it => DEFAULT_INGREDIENTS.includes(it.name)))); 
+    }, []);
+    
     return (
         <>
             <div className="segment">