useFlags Hook Logic - abhiram-shaji/Langroove GitHub Wiki

Developer Documentation: useFlags Hook

This documentation provides details on the useFlags hook, which retrieves flag URLs corresponding to languages using a predefined mapping.

Overview

The useFlags hook:

  1. Maps language names to their respective country codes.
  2. Maps country codes to URLs for flag images.
  3. Provides a utility function to fetch the appropriate flag URL based on a given language.

Features and Functionality

1. Language to Country Code Mapping

Purpose

  • Maps language names to their respective country codes for retrieving flag images.

Implementation

  • A static object, languageToCountryCode, defines the mapping.

Code Snippet

const languageToCountryCode: { [key: string]: string } = {
  'English': 'US',
  'Spanish': 'ES',
  'French': 'FR',
  'Mandarin Chinese': 'CN',
  'German': 'DE',
  'Italian': 'IT',
  'Japanese': 'JP',
  'Korean': 'KR',
  'Portuguese': 'PT',
  'Russian': 'RU',
};

2. Country Code to Flag URL Mapping

Purpose

  • Maps country codes to flag image URLs, enabling efficient access to flag resources.

Implementation

  • A static object, flagMap, defines the mapping.

Code Snippet

const flagMap: { [key: string]: string } = {
  US: 'https://flagcdn.com/w320/us.png',
  ES: 'https://flagcdn.com/w320/es.png',
  FR: 'https://flagcdn.com/w320/fr.png',
  CN: 'https://flagcdn.com/w320/cn.png',
  DE: 'https://flagcdn.com/w320/de.png',
  IT: 'https://flagcdn.com/w320/it.png',
  JP: 'https://flagcdn.com/w320/jp.png',
  KR: 'https://flagcdn.com/w320/kr.png',
  PT: 'https://flagcdn.com/w320/pt.png',
  RU: 'https://flagcdn.com/w320/ru.png',
};

3. Default Flag Fallback

Purpose

  • Ensures a fallback flag is displayed when the language or country code is unavailable or invalid.

Implementation

  • A constant, DEFAULT_FLAG_URL, defines the fallback URL.

Code Snippet

const DEFAULT_FLAG_URL = 'https://flagcdn.com/w320/us.png';

4. Fetching Flag URL

Purpose

  • Provides a utility function, getFlagUrl, to fetch the flag URL based on a given language name.

Implementation

  1. Functionality:

    • Maps the language to its country code using languageToCountryCode.
    • Fetches the corresponding flag URL from flagMap.
    • Logs the fetch attempt and returns the flag URL or the default URL.

  2. Code Snippet:

    const getFlagUrl = useCallback((language: string | null | undefined): string => {
  const countryCode = language ? languageToCountryCode[language] : null;
  const flagUrl = countryCode ? flagMap[countryCode] : null;

  console.log(`Attempted to fetch flag for language (${language}):`, flagUrl);
  return flagUrl || DEFAULT_FLAG_URL;
}, []);

  3. Process:

    • Takes a language as input.
    • If valid, maps the language to its country code and retrieves the flag URL.
    • If invalid or missing, returns the DEFAULT_FLAG_URL.

Key Properties and Methods

Property/Method Description
languageToCountryCode Maps languages to country codes.
flagMap Maps country codes to flag image URLs.
DEFAULT_FLAG_URL The fallback flag URL when no valid mapping is found.
getFlagUrl(language) Fetches the flag URL for a given language, falling back to the default flag.

Error Handling

  • Invalid Language:
    • If the language is invalid or missing, logs the attempt and returns the default flag URL.
  • Undefined Country Code:
    • If the country code is undefined for a valid language, falls back to the default flag.

Notes

  • Performance:

    • The useCallback hook ensures the getFlagUrl function is memoized, avoiding unnecessary re-computation.

  • Customization:

    • The languageToCountryCode and flagMap mappings can be expanded to support additional languages and countries as needed.

For further reference on flag resources, visit Flagpedia or FlagCDN.