How to use gw2 ui

Installation

1. Dependencies:

• node >= 10
• react >= 16.13
• redux > 4.1

2. Install the npm package

npm -i gw2-ui-bulk
or
yarn add gw2-ui-bulk

3. Fix up the required redux store

Either create the file createStore.js or add the gw2UIReducer to your reducers:

import { gw2UIReducer } from 'gw2-ui-bulk'
import { combineReducers, compose, createStore } from 'redux'

const reducers = combineReducers({
  gw2UiStore: gw2UIReducer,
})

const composeEnhancers =
  (typeof window !== 'undefined' &&
    // eslint-disable-next-line no-underscore-dangle
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose

export default () => {
  const store = createStore(reducers, composeEnhancers())
  return store
}

4. Wrap the root element with the redux provider

const store = createStore()

<Provider store={store}> {app} </Provider>

Providing data - different modi of gw2-ui

There are different "modi" on how to use gw2-ui. They differ mostly by what data is initially provided.

1. Only id

Example:
<Skill id={9093} />

What happens in gw2-ui:

• gw2 components display the loading indicator
• the id is being fetched from the api: the api request is debounced so that only batched requests will be launched: https://api.guildwars2.com/v2/skills?ids=9093&lang=en
• the content of the request is being added to the redux store. This store acts as a cache.
• gw2 components now query the cache with useSelector for a matching id.

2. Full API

Example:

<Skill data={open spoiler} />

<Skill data={{
    "name": "Bane Signet",
    "facts": [
      {
        "text": "Range",
        "type": "Range",
        "icon": "https://render.guildwars2.com/file/0AAB34BEB1C9F4A25EC612DDBEACF3E20B2810FA/156666.png",
        "value": 1200
      },
      {
        "text": "Recharge",
        "type": "Recharge",
        "icon": "https://render.guildwars2.com/file/D767B963D120F077C3B163A05DC05A7317D7DB70/156651.png",
        "value": 30
      },
      {
        "text": "Apply Buff/Condition",
        "type": "Buff",
        "icon": "https://render.guildwars2.com/file/9FF294A9CC489D4FE8CED934A0C4359964B67443/103638.png",
        "duration": 0,
        "status": "Bane Signet",
        "description": "Improved power.",
        "apply_count": 1
      },
      {
        "text": "Damage",
        "type": "Damage",
        "icon": "https://render.guildwars2.com/file/61AA4919C4A7990903241B680A69530121E994C7/156657.png",
        "hit_count": 1,
        "dmg_multiplier": 1
      },
      {
        "text": "Knockdown",
        "type": "Time",
        "icon": "https://render.guildwars2.com/file/7632087376D36B0D100F1B07BE53F154BC337D7C/2440716.png",
        "duration": 3
      }
    ],
    "description": "Signet Passive: Improved Power\nSignet Active: Knock down and damage your foe.",
    "icon": "https://render.guildwars2.com/file/9FF294A9CC489D4FE8CED934A0C4359964B67443/103638.png",
    "type": "Utility",
    "weapon_type": "None",
    "professions": [
      "Guardian"
    ],
    "slot": "Utility",
    "flags": [],
    "id": 9093,
    "chat_link": "[&BoUjAAA=]",
    "categories": [
      "Signet"
    ],
    "traited_facts": [
      {
        "text": "Apply Buff/Condition",
        "type": "Buff",
        "icon": "https://render.guildwars2.com/file/9FF294A9CC489D4FE8CED934A0C4359964B67443/103638.png",
        "duration": 0,
        "status": "Bane Signet",
        "description": "Improved power.",
        "apply_count": 1,
        "requires_trait": 579,
        "overrides": 2
      }
    ]
  }}/>

What happens in gw2-ui:

• Since all the data is available, no loading indicator is displayed.
• The data will be passed through and displayed without any networking.
• Redux is not required.

3. Minimum API with lazy loading on hover

Example:

<Skill data={open spoiler} />

<Skill data={{
    "name": "Bane Signet",
    "icon": "https://render.guildwars2.com/file/9FF294A9CC489D4FE8CED934A0C4359964B67443/103638.png",
    "professions": [
      "Guardian"
    ],
    "id": 9093,
  }}/>

What happens in gw2-ui:

• Since enough data is available to display the initial gw2 component, no loading indicator is displayed.
• The data will be passed through and displayed without any networking.
• If the user hovers over the gw2 component a request to the gw2 api is launched. A loading indicator is displayed in the tooltip.
• In case the user hovers over the same component twice the built in browser cache will not fire a request twice.