Fetch All Countries in a React.js App in any Language

Web applications have been extremely functional because of the idea that they are available globally. However, this pro has some cons since some information may get lost in translation in different parts of the world.
Web applications have been extremely functional because of the idea that they are available globally. However, this pro has some cons since some information may get lost in translation in different parts of the world.

What we will be building

This post will discuss using a Locale service API to customize our application based on our preferred language.

GitHub URL
https://github.com/Iheanacho-ai/appwrite-countries

Prerequisites

To get the most out of this project, we require the following:

• A basic understanding of CSS, JavaScript, and React.js.
• Docker Desktop is installed on your computer, run the docker -v command to verify if we have docker desktop installed, if not, install it from the Get Docker documentation
• An Appwrite instance running on your computer, check out this article to understand how to create a local Appwrite instance, we will use the Appwrite Locale API to handle translating countries into different language.

Setting up our React.js app

We navigate to our preferred directory to create a React.js application using this command:

npx create-react-app <name of our app>

After creating our app, we change the directory to our project and start a local development server with:

cd <name of our project>
npm run start

To see the app, we go to https://localhost:3000

Installing Appwrite

Appwrite is an open-source, end-to-end, back-end server solution that allows developers to build applications faster.

To use Appwrite in our Next.js application, we install the Appwrite client-side SDK for web applications.

npm install appwrite

Creating a new Appwrite project

During the creation of the Appwrite instance, we specified what hostname and port we see our console. The default value is localhost:80.

We go to localhost:80 and create a new account to see our console.

On our console, there is a Create Project button. Click on it to start a new project.

Our project dashboard appears once we have created a project. At the top of the project page, there is a Settings bar. Click it to access the Project ID and API Endpoint.

We copy the Project ID and API Endpoint, which we need to initialize the Appwrite Web SDK.

In our App.js file, we initialize a new Appwrite instance with the following.

    import {Appwrite} from "appwrite";
    import {useEffect, useState } from "react";

    const App = () => {

        // Init our Web SDK
        const sdk = new Appwrite();
        sdk
        .setEndpoint('http://localhost/v1') // our API Endpoint
        .setProject(projectID) // our project ID
        ;

        return(
          <div>Hello World!</div>
        )
    }

    export default App;

Creating the select list application.

Our App.js file will consist of buttons that will allow users to select a language of their choice and a select list to display the countries in the language chosen by the user.

    import {Appwrite} from "appwrite";
    import {useEffect, useState } from "react";

    const App = () => {

        // Init our Web SDK
        const sdk = new Appwrite();
        sdk
        .setEndpoint('http://localhost/v1') // our API Endpoint
        .setProject(projectID) // our project ID
        ;

         return (
          <div className="App">
            <div className="app-container">
              <h2>Choose your Language</h2>
              <div className="button-container">
                  <button id "button">English</button>
              </div>
              <select name="countries" id="countries-list">
                <option value="country">Country</option>
              </select>
            </div>

          </div>
        );
    }

    export default App;

Selectively rendering our list

The Appwrite Locale API allows us to collect country information in any desired language by switching locales. View the list of available locales to know what languages are supported by the Appwrite Locale API.

In our App.js file, we create two state variables. One state variable will hold the information about the buttons that select a user's preferred language, and the other will contain the list of countries.

    const [countries, setCountries] = useState(["country"])
    const [buttons, setButtons] = useState([
      {
        name: "English",
        id: "en"
      },
      {
        name: "Arabic",
        id: "ar"
      },
      {
        name: "Chinese - China",
        id: "zh-cn"
      },
      {
        name: "Slovenian",
        id: "sl"
      },
      {
        name: "Turkish",
        id: "tr"
      },
    ])

The buttons object has two fields. The name field holds the language we will fetch our countries in, and the id field is the Appwrite locale to get the language.

Next, in our App.js file, we create a getCountries function that runs anytime we click one of the buttons.

    const getCountries = async (e) => {
      try {
        setCountries([])
        let buttonId = e.target.id
        sdk.setLocale(buttonId)
        let promise = await sdk.locale.getCountries()
        promise.countries.map((country)=> setCountries(prevArray => [...prevArray, country.name])) 
      } catch (error) {
        console.log(error)

      }
    }

The getCountries function in the code block above does the following:

• Clears out the information in the countries array variable
• Collects the ID on the clicked button
• Uses the ID to switch locale, using Appwrite’s setLocale method
• Updates the countries array with our response
• Logs any error we encounter to the console

Next, in our App.js file, we loop through the buttons and countries array variables to create multiple buttons and select options.

    return (
      <div className="App">
        <div className="app-container">
          <h2>Choose your Language</h2>
          <div className="button-container">
            {
              buttons.map(({name, id}) => (
                <button id={id} onClick={getCountries}>{name}</button>
              ))
            }
          </div>
          <select name="countries" id="countries-list">
            {
              countries.map((country) => (
                <option value="country">{country}</option>
              ))
            }
          </select>
        </div>

      </div>
    );

The code block above does the following:

• Loop through the buttons array variable, destructuring each object pass in the id and the name fields to each button we create
• Pass the getCountries function to the onClick event listener on the buttons
• Loop through the countries variables to create multiple select options

Here is our App.js file.

https://gist.github.com/Iheanacho-ai/b4a1a5a5a88172f538e745b95176def0

Here is how our application looks. Click on a different button to have the countries listed in a different language.

Conclusion

This article discussed using the Appwrite Locale API to selectively render a list of countries depending on what language we selected. We can use the select list logic for large-scale apps to help developers build in different languages in other parts of the world to communicate better.

Resources

Here are some resources that might be helpful:

• Locale API
• Automating File Upload and sharing
• What is Appwrite and How to use it Efficiently