Merge pull request #112 from mishmanners/translations

Translation using GitHub Copilot

README.md

@@ -7,6 +7,8 @@ Do you have dietary requirements or allergies? Do you travel a lot? :train: 🚌
 
 Mish Friendly Food will translate your dietary requirements/allergies into any language 🤯. Enter your details and choose your desired language. Once you have your translation, you can get it printed on a cute card, or text the results to your phone (coming soon). Next time you travel to foreign country, you can pull out your physical or digital card, and rest assured that your waiter, host, or chef, will know how to cater for you.
 
+Note, the digital card is still coming.
+
 **[The website](https://mishfriendlyfood.com/) is now live** thanks to the contributions of this awesome community. You can find the website at [mishfriendlyfood.com](https://mishfriendlyfood.com/). Currently, the website only contains an About Page, and list of Translations. If you'd like to help with phase two of the project (search the database and retrieve; see [Phase Two](https://mishfriendlyfood.com/) below), then please take a look at the contribution guidelines below and join the project. We'd love the help :heart:.
 
 ## About

src/components/client/Search.jsx

@@ -54,19 +54,25 @@ export const Search = () => {
         const fromLanguage = formData.get('fromLanguage');
         const toLanguage = formData.get('toLanguage');
 
-        // Get the search query from the form input
-        const word = formData.get('wordSearch').trim().toLowerCase();
+        // Split the search query on comma
+        const words = formData.get('wordSearch').split(',').map((word) => word.trim().toLowerCase());
 
         if (fromLanguage && toLanguage) {
             // Initialize an object to store the translation results
             let translations = [];
 
-            // Retrieve translations for the selected languages
-            try {
-                translations.push([word, getTranslationsForLanguages(fromLanguage, toLanguage, word)]);
-            } catch(e) {
-                translations.push([word, toError(e)]);
-            }
+            // Iterate over each unique word and perform translation
+            new Set(words).forEach((word) => {
+                // Retrieve translations for the selected languages
+                try {
+                    translations.push([
+                        word,
+                        getTranslationsForLanguages(fromLanguage, toLanguage, word)
+                    ]);
+                } catch(e) {
+                    translations.push([word, toError(e)]);
+                }
+            });
 
             // Display translations to the user as needed
             setTranslationResults(translations);
@@ -104,8 +110,15 @@ export const Search = () => {
             {/* Display translation results */}
             <h3>Translation Results</h3>
             <ul data-testid="translation-results">
-                {translationResults.flatMap(([_query, value]) => value.matches).map((value) => (
-                    <li key={value}>{value}</li>
+                {translationResults.map(([fromWord, result]) => (
+                    <li key={fromWord}>
+                        <strong>{fromWord}</strong>
+                        <ul>
+                            {result.matches.map((word) => (
+                                <li key={word}>{word}</li>
+                            ))}
+                        </ul>
+                    </li>
                 ))}
             </ul>
 

src/pages/about.astro

@@ -14,7 +14,7 @@ const meta = {
 	<p>
 		Mish Friendly Food will translate your dietary requirements/allergies
 		into any language. Once you have your translation, you can get it
-		printed on a cute card. Next time you travel to foreign country, you can
+		printed on a cute card. Note this features is still coming. Next time you travel to foreign country, you can
 		pull out your physical or digital card and rest assured that your
 		waiter, host, or chef, will know how to cater for you.
 	</p>

src/pages/about.md

@@ -9,7 +9,7 @@ Mish Friendly Food will translate your dietary requirements/allergies
 into any language. Once you have your translation, you can get it
 printed on a cute card. Next time you travel to foreign country, you can
 pull out your physical or digital card and rest assured that your
-waiter, host, or chef, will know how to cater for you.
+waiter, host, or chef, will know how to cater for you. Note this card features is still coming.
 
 ## Why Mish Friendly Food?
 

tests/translations.spec.js

@@ -21,7 +21,7 @@ test("can translate a word", async ({ page }) => {
   await page.getByRole("button", { name: "Translate" }).click();
 
   await expect(
-    page.getByTestId("translation-results").locator("> li")
+    page.getByTestId("translation-results").locator("li li")
   ).toHaveText([/Milch/, /Milchprodukt/]);
 });
 
@@ -38,3 +38,43 @@ test("shows an error when there is no translation", async ({ page }) => {
     /Translations not found for selected language combination/
   );
 });
+
+test("translates food dietaries", async ({ page }) => {
+  await page.goto("/translations");
+
+  await page.getByLabel("From").selectOption("English");
+  await page.getByLabel("To").selectOption("French");
+  await page.getByLabel("Word").fill("gluten-free, vegan, dairy-free");
+
+  await page.getByRole("button", { name: "Translate" }).click();
+
+  await expect(
+    page.getByTestId("translation-results").locator("li li")
+  ).toHaveText([
+    /sans gluten/i,
+    /végétalienne/i,
+    /végétalien/i,
+    /végan/i,
+    /sans lactose/i,
+    /sans produits laitiers/i,
+  ]);
+});
+
+test("deduplicates words in search field", async ({ page }) => {
+  await page.goto("/translations");
+
+  await page.getByLabel("From").selectOption("English");
+  await page.getByLabel("To").selectOption("German");
+  await page.getByLabel("Word").fill("egg,egg");
+
+  await page.getByRole("button", { name: "Translate" }).click();
+
+  await expect(
+    page.getByTestId("translation-results").locator("li li")
+  ).toHaveText([
+    /Ei/,
+    /Eier/,
+    /Eiweiß/,
+    /Eigelb/,
+  ]);
+});