WIP - Add tag tab categories display

src/modules/runelite.js

@@ -89,17 +89,22 @@ export const {
 
       const result = await Promise.all(
         items.map(item =>
-          runeliteApi(`runelite-${version}/examine/item/${item}`, {
+          runeliteApi(`runelite-${version}/cache/item/${item}`, {
             method: 'GET'
-          }).then(examine => {
-            dispatch(
-              setItemInfo({
-                id: item,
-                name: names[item],
-                examine
-              })
+          }).then(info =>
+            runeliteApi(`runelite-${version}/examine/item/${item}`, {
+              method: 'GET'
+            }).then(examine =>
+              dispatch(
+                setItemInfo({
+                  ...info,
+                  id: item,
+                  name: names[item],
+                  examine
+                })
+              )
             )
-          })
+          )
         )
       )
 

src/routes/tag-show.js

@@ -1,4 +1,5 @@
 import { Component, h } from 'preact'
+import { groupBy } from 'ramda'
 import Layout from '../components/layout'
 import hero from '../_data/hero'
 import Meta from '../components/meta'
@@ -12,6 +13,60 @@ import './tag.css'
 const formatIcon = icon =>
   `https://static.runelite.net/cache/item/icon/${icon}.png`
 
+const getCategory = item => {
+  const menu = item.interfaceOptions
+
+  if (!menu) {
+    return ''
+  }
+
+  if (
+    item.name.indexOf(' arrow') !== -1 ||
+    item.name.indexOf(' bolt') !== -1 ||
+    item.name.indexOf(' rune') !== -1 ||
+    item.name.indexOf(' dart') !== -1
+  ) {
+    return 'Ammo'
+  }
+
+  if (menu.indexOf('Drink') !== -1) {
+    return 'Food'
+  }
+
+  if (menu.indexOf('Eat') !== -1) {
+    return 'Food'
+  }
+
+  if (menu.indexOf('Wear') !== -1) {
+    return 'Gear'
+  }
+
+  if (menu.indexOf('Wield') !== -1) {
+    return 'Gear'
+  }
+
+  return ''
+}
+
+const sanitizeItem = (items, id) => {
+  const item = items.find(i => i.id === id) || {}
+  const name = item.name || ''
+  const examine = item.examine || ''
+
+  return {
+    ...item,
+    id,
+    name,
+    examine
+  }
+}
+
+const flattenMap = map =>
+  Object.keys(map).map(key => ({
+    name: key,
+    values: map[key]
+  }))
+
 class TagShow extends Component {
   componentDidMount() {
     this.props
@@ -28,34 +83,41 @@ class TagShow extends Component {
             <img alt="" src={formatIcon(icon)} /> {name}
           </h1>
           <hr />
-          <div class="row">
-            <pre>{csv}</pre>
-            {itemIds.map(id => {
-              const item = items.find(i => i.id === id) || {}
-              const name = item.name || ''
-              const examine = item.examine || ''
-              const nameSan = name.replace(' ', '_')
-
-              return (
-                <div class="card">
-                  <div class="tooltip-tag">
-                    <a href={`https://oldschool.runescape.wiki/w/${nameSan}`}>
-                      <img
-                        class="card-img-top"
-                        alt={name}
-                        src={formatIcon(id)}
-                      />
-                    </a>
-                    <div class="tooltip-tag-text">
-                      <b>{item.name || 'Loading...'}</b>
-                      <br />
-                      <small>{examine}</small>
+          <pre>{csv}</pre>
+          {flattenMap(
+            groupBy(item => getCategory(item))(
+              itemIds.map(id => sanitizeItem(items, id))
+            )
+          ).map(group => (
+            <div>
+              <p>{group.name}</p>
+              <div class="row">
+                {group.values.map(item => (
+                  <div class="card">
+                    <div class="tooltip-tag">
+                      <a
+                        href={`https://oldschool.runescape.wiki/w/${item.name.replace(
+                          ' ',
+                          '_'
+                        )}`}
+                      >
+                        <img
+                          class="card-img-top"
+                          alt={item.id}
+                          src={formatIcon(item.id)}
+                        />
+                      </a>
+                      <div class="tooltip-tag-text">
+                        <b>{item.name || 'Loading...'}</b>
+                        <br />
+                        <small>{item.examine}</small>
+                      </div>
                     </div>
                   </div>
-                </div>
-              )
-            })}
-          </div>
+                ))}
+              </div>
+            </div>
+          ))}
         </Layout>
       </div>
     )