Add country selection to preferences and use it to query the API acco…

…rdingly

package.json

@@ -37,7 +37,7 @@
 		"leaflet": "^1.9.4",
 		"openapi-fetch": "^0.10.4",
 		"openapi-typescript": "^7.1.2",
-		"openfoodfacts-nodejs": "github:openfoodfacts/openfoodfacts-nodejs",
+		"openfoodfacts-nodejs": "github:openfoodfacts/openfoodfacts-nodejs#pull/513/head",
 		"postcss": "^8.4.40",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",

src/lib/api/product.ts

@@ -19,7 +19,8 @@ export class ProductsApi {
 			'?' +
 			new URLSearchParams({
 				fields: fields.join(','),
-				lc: get(preferences).lang
+				lc: get(preferences).lang,
+				cc: get(preferences).country
 			});
 		const res = await this.fetch(url);
 		return await res.json();

src/lib/settings.ts

@@ -2,6 +2,7 @@ import { persisted } from 'svelte-local-storage-store';
 
 export const preferences = persisted('preferences', {
 	lang: 'en',
+	country: 'world',
 	nutriscoreInfluence: 50,
 	ecoscoreInfluence: 50,
 	novaGroupInfluence: 50,

src/lib/translations/en/common.json

@@ -3,5 +3,6 @@
 	"ecoscore": "Eco-Score",
 	"nova": "Nova - Ultra-processing levels",
 	"settings": "Settings",
-	"folksonomy": "Folksonomy"
+	"folksonomy": "Folksonomy",
+	"world": "World"
 }

src/routes/settings/+page.svelte

@@ -8,8 +8,6 @@
 
 	export let data: PageData;
 
-	$: languages = Object.entries(data.languages);
-
 	async function loginToFolksonomy() {
 		const username = $preferences.username;
 		const password = $preferences.password;
@@ -22,14 +20,31 @@
 <div class="mx-auto my-8 grid grid-cols-[1fr,max-content] items-center gap-x-8 gap-y-2">
 	<Heading>General</Heading>
 	<label for="lang-select" class="justify-self-end">Language:</label>
-	<select class="select" name="lang-select" bind:value={$preferences.lang}>
+	<select class="select select-bordered" name="lang-select" bind:value={$preferences.lang}>
 		<!--eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-		{#each languages as [_, lang]}
+		{#each Object.keys(data.languages).toSorted() as langKey}
+			{@const lang = data.languages[langKey]}
 			<option
 				value={lang.language_code_2.en}
 				selected={$preferences.lang === lang.language_code_2.en}
 			>
-				{lang.name[lang.language_code_2.en]} ({lang.name['en']})
+				{lang.name['en']} ({lang.name[lang.language_code_2.en]})
+			</option>
+		{/each}
+	</select>
+
+	<label for="country-select" class="justify-self-end">Country:</label>
+	<select name="country-select" class="select select-bordered" bind:value={$preferences.country}>
+		<option value="world" selected={$preferences.country === 'world'}>
+			{$t('common.world')}
+		</option>
+
+		<!--eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+		{#each Object.keys(data.countries).toSorted() as countryKey}
+			{@const country = data.countries[countryKey]}
+			{@const code2 = country.country_code_2.en}
+			<option value={code2} selected={$preferences.country === code2}>
+				{country.name['en']} ({country.name[$preferences.lang]})
 			</option>
 		{/each}
 	</select>

src/routes/settings/+page.ts

@@ -1,10 +1,19 @@
-import { getTaxo, type Language } from '$lib/api';
+import { getTaxo } from '$lib/api';
+import type { Country, Language } from 'openfoodfacts-nodejs';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ fetch }) => {
 	const languages = await getTaxo<Language>('languages', fetch);
+	let countries = await getTaxo<Country>('countries', fetch);
+
+	// FIX: not every country has a language_code_2, so we need to filter them out
+	// as they are used to store the language preference and to query the API
+	countries = Object.fromEntries(
+		Object.entries(countries).filter(([, country]) => country.country_code_2 != null)
+	);
 
 	return {
-		languages
+		languages,
+		countries
 	};
 }) satisfies PageLoad;