# Wk-notes-03-16-i18n-solution

### i18n Solution <a href="#i18n-solution" id="i18n-solution"></a>

#### Solution <a href="#solution" id="solution"></a>

`Provider` provides `intl` dictionary, `Consumer` takes the `intl` and `translate()` it with hardcoded (nested)id, and fallback,

**Pluralise and templating:**

In dictionary, each fields supports plural

```javascript
// Dictionary:
"passengers": { 
  "none":"No passengers", 
  "one":"One passenger", 
  "many":"{{count}} passengers"
}

// Component:
<Text id="passengers" plural={0} /> // "No passengers"
<Text id="passengers" plural={1} /> // "One passenger"
<Text id="passengers" plural={2} fields={{ count: 2 }} /> // "2 passengers"

// HOC 
withIntl((t) => {
    return t('passengers', "fallback", { plural:2 })
})
```

#### Basic function <a href="#basic-function" id="basic-function"></a>

**Context**

`createContext({ dictionary: null, highlight: false });`

**Provider:**

`<IntlContext.Provider value={{ highlight, dictionary }}>{children}</IntlContext.Provider>`

**Consumer:**

`<IntlContext.Consumer>(intl) => {children}</IntlContext.Consumer>`

or

`useContext(IntlContext)`

Detail in consumer:

* Dealing with hightlight
* Expose just enough api
* call `translate()`

```javascript
const intl = useContext(IntlContext);
const t = useCallback(
  (id, fallback, opts = {}) => {
    const highlight = opts.highlight != null ? opts.highlight : intl.highlight;
    const value = translate(id, intl && intl.dictionary, opts.fields, opts.plural, fallback);
    return highlight ? <Highlight id={id} value={value} fallback={fallback} /> : value;
  },
  [intl]
);
```

**translate() from intl**

```javascript
translate(
  id: string, 
  dictionary: object, 
  fields: object, 
  plural: number, 
  fallback: string
) => {
  let value = dictionary && delve(dictionary, id);

  if ((plural || plural === 0) && value && typeof value === 'object') {
    if (Array.isArray(value)) {
      value = value[plural] || value[0];
    } else if (plural === 0 && value.none != null) {
      value = value.none;
    } else if (plural === 1 && (value.one != null || value.singular != null)) {
      value = value.one || value.singular;
    } else {
      value = value.some || value.many || value.plural || value.other || value;
    }
  }

  return (value && template(value, fields, dictionary)) || fallback || null;
}
```

return translated string.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://notes.lirenxn.com/2020/wk-notes-03-16-i18n-solution.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.