Failed attempt

src/components/Filters.svelte

@@ -9,56 +9,74 @@
     const customColors = {
         'groceries': {
             selectedColor: '#0288d1',
-            color: '#99cfec'
+            color: '#99cfec',
+            i18nIdentifier: 'filters.categories.groceries',
         },
         'health': {
             selectedColor: '#7cb342',
-            color: '#cae0b3'
+            color: '#cae0b3',
+            i18nIdentifier: 'filters.categories.health',
         },
 
         'laundromat': {
             selectedColor: '#681a16',
-            color: '#A47573'
+            color: '#A47573',
+            i18nIdentifier: 'filters.categories.laundromat',
         },
         'restaurants': {
             selectedColor: '#eb6565',
-            color: '#f7c1c1'
+            color: '#f7c1c1',
+            i18nIdentifier: 'filters.categories.restaurants',
         },
         'dessert': {
             selectedColor: '#9c27b0',
-            color: '#d7a8df'
+            color: '#d7a8df',
+            i18nIdentifier: 'filters.categories.dessert',
         },
         'retail': {
             selectedColor: '#fff35f',
-            color: '#fffabf'
+            color: '#fffabf',
+            i18nIdentifier: 'filters.categories.retail',
         },
         'shops & services': {
             selectedColor: '#f2983f',
-            color: '#f9d5b2'
+            color: '#f9d5b2',
+            i18nIdentifier: 'filters.categories.shops_and_services',
         },
         'free food': {
             selectedColor: '#12ba96',
-            color: '#8be3cc'
+            color: '#8be3cc',
+            i18nIdentifier: 'filters.categories.free_food',
         }
     }
 
+    const subcategoryNameToI18nIdentifier = {
+        'Takeout': 'filters.options.takeout',
+        'Delivery': 'filters.options.delivery',
+        'Shipping': 'filters.options.shipping',
+    }
+
     let overallCategoryItems = []
     let subCategoryItems = []
     let textSearch = '' //todo - add textSearch filter
 
     $: {
         //init filters
         if ($data && $data.features.length > 0) {
-            const categories = new Set($data.features.map(feature => feature.properties.overallcategory))
-            //sort by customColors's order
-            const order = Object.keys(customColors)
-            const unique = Array.from(categories).map(item => [order.indexOf(item.toLowerCase().trim()), item])
-                    .sort().map(arr => capitalizeFirstLetter(arr[1]))
-            overallCategoryItems = unique.filter(item => item.length > 0).map(item => ({
-                name: item,
-                selected: false
-            }))
-
+            // Extract category names from DB
+            const categoriesInDB = new Set($data.features.map(feature => feature.properties.overallcategory.trim().toLowerCase()))
+            // Only display categories that are in the DB
+            overallCategoryItems = [];
+            // debugger;
+            for (let customColor of Object.keys(customColors)) {
+                if (categoriesInDB.has(customColor)) {
+                    overallCategoryItems.push({
+                        name: customColor,
+                        selected: false,
+                        i18nIdentifier: customColors[customColor].i18nIdentifier,
+                    })
+                }
+            }
         }
     }
 
@@ -73,9 +91,11 @@
                         .map(feature => capitalizeFirstLetter(feature.properties.subcategory))
                 //filter for unique items
                 const unique = Array.from(new Set(subCategories)).sort()
+                console.log('what.')
                 subCategoryItems = unique.filter(item => item.length > 0).map(item => ({
                     name: item,
-                    selected: false
+                    selected: false,
+                    i18nIdentifier: subcategoryNameToI18nIdentifier[item]
                 }))
             } else {
                 subCategoryItems = []
@@ -85,17 +105,17 @@
 
     let optionItems = [
         {
-            name: $_('filters.options.takeout'),
+            i18nIdentifier: 'filters.options.takeout',
             selected: false,
             filter: feature => feature.properties.takeoutyorn.toUpperCase() === 'Y'
         },
         {
-            name: $_('filters.options.delivery'),
+            i18nIdentifier: 'filters.options.delivery',
             selected: false,
             filter: feature => feature.properties.deliveryyorn.toUpperCase() === 'Y'
         },
         {
-            name: $_('filters.options.shipping'),
+            i18nIdentifier: 'filters.options.shipping',
             selected: false,
             filter: feature => feature.properties.shippingyorn.toUpperCase() === 'Y'
         },
@@ -138,7 +158,7 @@
 
 <GeneralSearch {textSearch}/>
 
-<CategoryFilter name={$_('filters.categories')} categories={overallCategoryItems}
+<CategoryFilter name={$_('filters.categories.title')} categories={overallCategoryItems} unfilteredCategoryI18nIdentifier={'filters.categories.all'}
                 on:update={e => overallCategoryItems = e.detail} {customColors}/>
 
 <br>

src/components/filters/CategoryFilter.svelte

@@ -1,9 +1,11 @@
 <script>
+    import {_} from 'svelte-i18n'
     import {createEventDispatcher} from 'svelte';
 
     const dispatch = createEventDispatcher();
 
     export let name = ''
+    export let unfilteredCategoryI18nIdentifier = ''
     export let categories = [];
     export let showAfter = 0;
     export let customColors = null;
@@ -51,18 +53,18 @@
 
 {#if categories.length > showAfter}
     <div class="filter-header"><h6 class="is-6">{name}:</h6>
-        <button class="button is-small {allCategories ? 'is-info' : ''}" on:click={resetCategoryItems}>All</button>
+        <button class="button is-small {allCategories ? 'is-info' : ''}" on:click={resetCategoryItems}>{$_(unfilteredCategoryI18nIdentifier)}</button>
     </div>
 
     <div class="filter-container">
         {#each categories as item, name}
             {#if customColors}
                 <button class="button is-small"
                         style={getBorderColor(item)}
-                        on:click={toggleCategoryItem(item)}>{item.name}</button>
+                        on:click={toggleCategoryItem(item)}>{$_(item.i18nIdentifier)}</button>
             {:else}
                 <button class="button is-small {item.selected ? 'is-info' : ''}"
-                        on:click={toggleCategoryItem(item)}>{item.name}</button>
+                        on:click={toggleCategoryItem(item)}>{$_(item.i18nIdentifier)}</button>
             {/if}
         {/each}
     </div>

src/components/filters/OptionFilter.svelte

@@ -31,7 +31,7 @@
 <div class="filter-container">
     {#each options as item, name}
         <button class="button is-small {item.selected ? 'is-info' : ''}"
-                on:click={toggleOptionItem(item)}>{item.name}</button>
+                on:click={toggleOptionItem(item)}>{$_(item.i18nIdentifier)}</button>
     {/each}
 </div>
 

src/i18n-dictionaries/en.json

@@ -4,7 +4,18 @@
     "subtitle": "A directory of essential businesses that are open in the East Village area during COVID-19."
   },
   "filters": {
-    "categories": "Categories",
+    "categories": {
+      "title": "Categories",
+      "all": "All",
+      "groceries": "Grocery",
+      "health": "Health",
+      "laundromat": "Laundry",
+      "restaurants": "Restaurants",
+      "dessert": "Dessert",
+      "retail": "Retail",
+      "shops_and_services": "Shops & Services",
+      "free_food": "Free Food"
+    },
     "options": {
       "title": "Options",
       "any": "Any",

src/i18n-dictionaries/es.json

@@ -6,7 +6,7 @@
   "filters": {
     "categories": {
       "title": "Categorias",
-      "grocery": "Comestibles",
+      "groceries": "Comestibles",
       "health": "Salud",
       "laundromat": "Lavandería",
       "restaurants": "Restaurantes",

src/i18n-dictionaries/zh-Hans.json

@@ -6,7 +6,7 @@
   "filters": {
     "categories": {
       "title": "业务类",
-      "grocery": "超级市场",
+      "groceries": "超级市场",
       "health": "卫生保健",
       "laundromat": "洗衣店",
       "restaurants": "餐厅",

src/i18n-dictionaries/zh-Hant.json

@@ -6,7 +6,7 @@
   "filters": {
     "categories": {
       "title": "業務類",
-      "grocery": "超級市場",
+      "groceries": "超級市場",
       "health": "衛生保健",
       "laundromat": "洗衣店",
       "restaurants": "餐廳",