Intership @ Sympl Week 6

Mon 13 - Thu 16 March:

Implementing a Country Prefix Dropdown

The following task assigned to me was to add a feature that would enable new users to select their country prefix for phone numbers from a dropdown menu when registering a new account. This was meant to enhance the user experience and make it more convenient for them to input their phone numbers. In this post, I will walk you through the the beginning of the process of how I achieved this, showcasing a visually appealing dropdown with flags representing each country.

Step 1: Gathering Data on Country Prefixes and Flags

Before diving into the code, I spent a considerable amount of time researching phone prefixes for every country and the format they are typically written in. For instance, a Belgian phone number appears in the following format: +32 479 47 26 63. I also collected flag images for each country to make the dropdown visually appealing.

Step 2: Creating a Data Structure for Country Prefixes and Flags

To store the gathered data, I created a TypeScript interface and an array of objects containing the country name, prefix, and flag.

interface Country {
  name: string;
  prefix: string;
  flag: string;
  mask: string;
}

const countries: Country[] = [
  {
    name: 'Belgium',
    prefix: '+32',
    flagUrl: '🇧🇪',
    mask: 'xxx xx xx xx',
  },
  // ... other countries
];

Step 3: Implementing the Dropdown Component and Phone Number Input Mask

Next, I created a dropdown component. I also had to make sure that when a client changed the country prefix in the dropdown, the prefix and the mask would be reflected in the input field. To achieve this, I used a useState hook to store the selected country prefix and passed it to the input field as a prop.

Step 4: Integrating the Dropdown Component with the Phone Number Input

Finally, I integrated the CountryDropdown component with the phone number input field in the form, updating the phone number's input mask based on the selected country.

Fri 17 March:

Step 4: DDeducting Phone Prefixes from Timezone

When the dropdown was finally implemented, we thought it would be even more user friendly to have the country prefix automatically selected based on the user's location. I was given the freedom to implent it however I wanted. I started doing some research on how to deduce the users prefix from their location.

First things first, let me explain the existing code. We have a function getCountryForTimezone from a library called ct (Country and Timezone) which returns the country information based on the time zone. Here's the code snippet:

const locationInfo = ct.getCountryForTimezone(
  Intl.DateTimeFormat().resolvedOptions().timeZone
);

Now, with the user's timezone, I needed to find the corresponding country and deduce its phone prefix. I used the useEffect hook from React to handle this task:

import { useState, useEffect } from 'react';
import { COUNTRIES } from './country-data'; // Import the COUNTRIES array from the respective file

// ...

const [country, setCountry] = useState(null);

useEffect(() => {
  if (locationInfo !== null) {
    COUNTRIES.find((country) => {
      if (country.key === locationInfo.id) {
        setCountry(country);
        console.log(country);
        console.log(locationInfo);
      }
    });
  }
}, []);

Here, I imported the COUNTRIES array, which should contain the information about the countries and their respective phone prefixes. Then, I used the find method to iterate through the COUNTRIES array and find the country that matches the locationInfo.id. Once found, I updated the country state using the setCountry method, and logged the information to the console for debugging purposes.