Add options for autocomplete (#20)

src/app/src/assets/tags/cuisines.json

@@ -0,0 +1,111 @@
+[
+  "Afghan",
+  "Albanian",
+  "Algerian",
+  "American",
+  "Argentine",
+  "Armenian",
+  "Australian",
+  "Austrian",
+  "Azerbaijani",
+  "Bangladeshi",
+  "Belarusian",
+  "Belgian",
+  "Bolivian",
+  "Bosnian",
+  "Brazilian",
+  "British",
+  "Bulgarian",
+  "Cambodian",
+  "Cameroonian",
+  "Canadian",
+  "Caribbean",
+  "Chilean",
+  "Chinese",
+  "Chinese (Cantonese)",
+  "Chinese (Sichuan)",
+  "Chinese (Hunan)",
+  "Colombian",
+  "Costa Rican",
+  "Croatian",
+  "Cuban",
+  "Cypriot",
+  "Czech",
+  "Danish",
+  "Dominican",
+  "Dutch",
+  "Ecuadorian",
+  "Egyptian",
+  "Ethiopian",
+  "Filipino",
+  "Finnish",
+  "French",
+  "Georgian",
+  "German",
+  "Greek",
+  "Haitian",
+  "Hawaiian",
+  "Hungarian",
+  "Icelandic",
+  "Indian",
+  "Indian (Bengali)",
+  "Indian (Punjabi)",
+  "Indian (Gujarati)",
+  "Indian (South Indian)",
+  "Indonesian",
+  "Iranian/Persian",
+  "Iraqi",
+  "Irish",
+  "Israeli",
+  "Italian ",
+  "Italian (Tuscan)",
+  "Italian (Sicilian)",
+  "Jamaican",
+  "Japanese",
+  "Jordanian",
+  "Kenyan",
+  "Korean",
+  "Laotian",
+  "Lebanese",
+  "Lithuanian",
+  "Macedonian",
+  "Malaysian",
+  "Mexican",
+  "Moroccan",
+  "Nepalese",
+  "New Zealand",
+  "Nigerian",
+  "Norwegian",
+  "Pakistani",
+  "Palestinian",
+  "Panamanian",
+  "Peruvian",
+  "Polish",
+  "Portuguese",
+  "Puerto Rican",
+  "Romanian",
+  "Russian",
+  "Salvadoran",
+  "Saudi Arabian",
+  "Scottish",
+  "Serbian",
+  "Singaporean",
+  "Slovak",
+  "Slovenian",
+  "Somali",
+  "South African",
+  "Spanish",
+  "Sri Lankan",
+  "Swedish",
+  "Swiss",
+  "Syrian",
+  "Taiwanese",
+  "Thai",
+  "Tibetan",
+  "Trinidadian",
+  "Turkish",
+  "Ukrainian",
+  "Venezuelan",
+  "Vietnamese",
+  "Yemeni"
+]

src/app/src/assets/tags/diets.json

@@ -0,0 +1,21 @@
+[
+  "Keto",
+  "Atkins",
+  "Paleo",
+  "Mediterranean",
+  "DASH",
+  "Flexitarian",
+  "Whole30",
+  "Vegan",
+  "Vegetarian",
+  "Low FODMAP",
+  "South Beach",
+  "Raw Food",
+  "Weight Watchers",
+  "Zone",
+  "Nutrisystem",
+  "Gluten-Free",
+  "Carnivore",
+  "Pescatarian",
+  "MIND"
+]

src/app/src/assets/tags/dishTypes.json

@@ -0,0 +1,14 @@
+[
+  "Appetizers",
+  "Main",
+  "Side",
+  "Salad",
+  "Soup",
+  "Stew",
+  "Bread",
+  "Pastry",
+  "Dessert",
+  "Snack",
+  "Drink",
+  "Cocktail"
+]

src/app/src/assets/tags/equipments.json

@@ -0,0 +1,26 @@
+[
+  "Slow Cooker",
+  "Crockpot",
+  "Instant Pot",
+  "Pressure Cooker",
+  "Air Fryer",
+  "Sous Vide Machine",
+  "Grill",
+  "Barbecue",
+  "Smoker",
+  "Bread Machine",
+  "Rice Cooker",
+  "Cast Iron Skillet",
+  "Dutch Oven",
+  "Waffle Maker",
+  "Blender",
+  "Food Processor",
+  "Stand Mixer",
+  "Coffee Machine",
+  "Pizza Stone",
+  "Ice Cream Maker",
+  "Juicer",
+  "Panini Press",
+  "Sandwich Maker",
+  "Fondue Pot"
+]

src/app/src/assets/tags/ingredients.json

@@ -0,0 +1,52 @@
+[
+  "Salt",
+  "Black pepper",
+  "Garlic",
+  "Onion",
+  "Olive oil",
+  "Butter",
+  "Sugar",
+  "Eggs",
+  "Wheat flour",
+  "Tomatoes",
+  "Potatoes",
+  "Carrots",
+  "Chicken",
+  "Beef",
+  "Rice",
+  "Milk",
+  "Cheese",
+  "Apples",
+  "Oranges",
+  "Lemons",
+  "Vinegar",
+  "Soy sauce",
+  "Ginger",
+  "Cinnamon",
+  "Honey",
+  "Pasta",
+  "Corn",
+  "Cabbage",
+  "Mushrooms",
+  "Bell peppers",
+  "Cucumbers",
+  "Lettuce",
+  "Spinach",
+  "Zucchini",
+  "Parsley",
+  "Basil",
+  "Thyme",
+  "Oregano",
+  "Cumin",
+  "Chili powder",
+  "Yeast",
+  "Baking powder",
+  "Baking soda",
+  "White rice",
+  "Bread",
+  "Pork",
+  "Bananas",
+  "Beans",
+  "Green tea",
+  "Coffee"
+]

src/app/src/assets/tags/intolerances.json

@@ -0,0 +1,28 @@
+[
+  "Gluten",
+  "Dairy",
+  "Eggs",
+  "Peanuts",
+  "Tree Nuts",
+  "Soy",
+  "Fish",
+  "Shellfish",
+  "Sesame",
+  "Wheat",
+  "Corn",
+  "Nightshades",
+  "FODMAPs",
+  "Sulfites",
+  "MSG",
+  "Caffeine",
+  "Alcohol",
+  "Red Meat",
+  "Mustard",
+  "Celery",
+  "Lupin",
+  "Mollusks",
+  "Yeast",
+  "Fructose",
+  "Salicylates",
+  "Histamines"
+]

src/app/src/assets/tags/mealTypes.json

@@ -0,0 +1,10 @@
+[
+  "Breakfast",
+  "Brunch",
+  "Lunch",
+  "Dinner",
+  "Snack",
+  "Dessert",
+  "Beverage",
+  "Holiday"
+]

src/app/src/components/OptionInput.tsx

@@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
 interface Props { 
   optionType: string;
   tags: string[];
+  autocompleteOptions?: string[];
   onAddTag: (tag: string) => void;
   onRemoveTag: (index: number) => void;
 } 
@@ -26,15 +27,29 @@ interface TextInputProps {
 export const TextInput: FC<TextInputProps> = ({ value, onKeyDown, onChange, onBlur, optionType }) => { 
   const intl = useIntl();
 
+  const optionsData = optionType === 'includeIngredients'
+                      || optionType === 'excludeIngredients' 
+                      ? 'ingredients' 
+                      : optionType;
+
+  const options:string[] = require(`../assets/tags/${optionsData}.json`);
+
   return ( 
-    <input type="text" 
+    <div>
+        <input type="text" 
            className="tagInput" 
            placeholder={intl.formatMessage({ id: `recipeRequestOptions.${optionType}` })} 
            value={value} 
            onKeyDown={onKeyDown} 
            onChange={onChange} 
            onBlur={onBlur} 
            list={optionType} />
+        <datalist id={optionType}> 
+          {options.sort().map((option, index) => ( 
+            <option key={index} value={option} /> 
+          ))} 
+        </datalist> 
+      </div>
    );
 };
 
@@ -97,11 +112,6 @@ export default class OptionInput extends Component<Props, State> {
           onChange={this.handleChange} 
           onKeyDown={this.handleKeyDown} 
           onBlur={this.handleBlur} /> 
-        <datalist id={this.props.optionType}> 
-          {this.state.options.map((option, index) => ( 
-            <option key={index} value={option} /> 
-          ))} 
-        </datalist> 
         <div className="tags"> 
           {this.props.tags.map((tag, index) => ( 
             <span className="tag" key={index}>