Multiple checks for pinnedItems (#11031)

* remove null/undefined entries from pinnedItems when an item is toggled - more inner checks + test

* drawer: fix when there isn't a page available

* rollback cleaning up pinnedEntries on item-toggle

* remove "re-setting" pinnedItems

* remove the filter

test/common/libs/inAppRewards.js

@@ -62,6 +62,18 @@ describe('inAppRewards', () => {
     expect(result[9].path).to.eql('potion');
   });
 
+  it('ignores null/undefined entries', () => {
+    user.pinnedItems = testPinnedItems;
+    user.pinnedItems.push(null);
+    user.pinnedItems.push(undefined);
+    user.pinnedItemsOrder = testPinnedItemsOrder;
+
+    let result = inAppRewards(user);
+
+    expect(result[2].path).to.eql('armoire');
+    expect(result[9].path).to.eql('potion');
+  });
+
   it('does not return seasonal items which have been unpinned', () => {
     if (officialPinnedItems.length === 0) {
       return; // if no seasonal items, this test is not applicable

test/common/ops/pinnedGearUtils.js

@@ -0,0 +1,18 @@
+import {
+  generateUser,
+} from '../../helpers/common.helper';
+import {addPinnedGear} from '../../../website/common/script/ops/pinnedGearUtils';
+
+describe('shared.ops.pinnedGearUtils.addPinnedGear', () => {
+  let user;
+
+  beforeEach(() => {
+    user = generateUser();
+  });
+
+  it('not adds an item with empty properties to pinnedItems', () => {
+    addPinnedGear(user, undefined, undefined);
+
+    expect(user.pinnedItems.length).to.be.eql(0);
+  });
+});

website/client/components/ui/drawer.vue

@@ -174,7 +174,9 @@ export default {
       let minPaddingBottom = 20;
       let drawerHeight = this.$el.offsetHeight;
       let standardPage = document.getElementsByClassName('standard-page')[0];
-      standardPage.style.paddingBottom = `${drawerHeight + minPaddingBottom}px`;
+      if (standardPage) {
+        standardPage.style.paddingBottom = `${drawerHeight + minPaddingBottom}px`;
+      }
     },
     toggle () {
       this.open = !this.isOpen;

website/client/store/actions/shops.js

@@ -20,9 +20,6 @@ function buyItem (store, params) {
 
   let opResult = buyOp(user, {params, quantity});
 
-  user.pinnedItems = opResult[0].pinnedItems;
-
-
   return {
     result: opResult,
     httpCall: axios.post(`/api/v4/user/buy/${params.key}`),

website/common/script/libs/inAppRewards.js

@@ -4,6 +4,7 @@ import getOfficialPinnedItems from './getOfficialPinnedItems';
 import compactArray from 'lodash/compact';
 
 import getItemByPathAndType from './getItemByPathAndType';
+import {checkPinnedAreasForNullEntries} from '../ops/pinnedGearUtils';
 
 /**
  * Orders the pinned items so we always get our inAppRewards in the order
@@ -32,6 +33,8 @@ function sortInAppRewards (user, items) {
 }
 
 module.exports = function getPinnedItems (user) {
+  checkPinnedAreasForNullEntries(user);
+
   let officialPinnedItems = getOfficialPinnedItems(user);
 
   const officialPinnedItemsNotUnpinned = officialPinnedItems.filter(officialPin => {
@@ -41,11 +44,12 @@ module.exports = function getPinnedItems (user) {
 
   const pinnedItems = officialPinnedItemsNotUnpinned.concat(user.pinnedItems);
 
-  let items = pinnedItems.map(({type, path}) => {
+  let items = pinnedItems
-    let item = getItemByPathAndType(type, path);
+    .map(({type, path}) => {
+      let item = getItemByPathAndType(type, path);
 
-    return getItemInfo(user, type, item, officialPinnedItems);
+      return getItemInfo(user, type, item, officialPinnedItems);
-  });
+    });
 
   shops.checkMarketGearLocked(user, items);
 

website/common/script/libs/shops.js

@@ -107,7 +107,8 @@ function getClassName (classType, language) {
 // TODO Refactor the `.locked` logic
 shops.checkMarketGearLocked = function checkMarketGearLocked (user, items) {
   let result = filter(items, ['pinType', 'marketGear']);
-  let availableGear = map(updateStore(user), (item) => getItemInfo(user, 'marketGear', item).path);
+  const officialPinnedItems = getOfficialPinnedItems(user);
+  let availableGear = map(updateStore(user), (item) => getItemInfo(user, 'marketGear', item, officialPinnedItems).path);
   for (let gear of result) {
     if (gear.klass !== user.stats.class) {
       gear.locked = true;

website/common/script/ops/pinnedGearUtils.js

@@ -27,6 +27,15 @@ function pathExistsInArray (array, path) {
   });
 }
 
+function checkForNullEntries (array) {
+  return array.filter(e => Boolean(e));
+}
+
+function checkPinnedAreasForNullEntries (user) {
+  user.pinnedItems = checkForNullEntries(user.pinnedItems);
+  user.unpinnedItems = checkForNullEntries(user.unpinnedItems);
+}
+
 function selectGearToPin (user) {
   let changes = [];
 
@@ -41,11 +50,10 @@ function selectGearToPin (user) {
   return sortBy(changes, (change) => sortOrder[change.type]);
 }
 
-
 function addPinnedGear (user, type, path) {
   const foundIndex = pathExistsInArray(user.pinnedItems, path);
 
-  if (foundIndex === -1) {
+  if (foundIndex === -1 && type && path) {
     user.pinnedItems.push({
       type,
       path,
@@ -176,5 +184,6 @@ module.exports = {
   togglePinnedItem,
   removeItemByPath,
   selectGearToPin,
+  checkPinnedAreasForNullEntries,
   isPinned,
 };