MyLand refresh/navigation fix

decentraland/constants/MyAssetStatus.js

@@ -0,0 +1,7 @@
+export const BUYING = "BUYING";
+export const BOUGHT = "BOUGHT";
+
+export default {
+  BUYING,
+  BOUGHT,
+};

decentraland/helpers/index.js

@@ -160,8 +160,14 @@ export const formatNumber = number => {
   return formattedNumber;
 };
 
-export const removeFromList = (list, toRemove) =>
-  list.filter(e => e !== toRemove);
+export const toListIfNot = itemOrList =>
+  Array.isArray(itemOrList) ? itemOrList : [itemOrList];
+
+export const removeFromList = (list, toRemove) => {
+  const elementsToRemove = toListIfNot(toRemove);
+  const idsToRemove = elementsToRemove.map(e => e.id);
+  return list.filter(e => !idsToRemove.includes(e.id));
+};
 
 export const listsAreEqual = (first, second) => {
   if (first.length !== second.length) return false;
@@ -171,6 +177,13 @@ export const listsAreEqual = (first, second) => {
   );
 };
 
+// Update item from any list of objects having id as key field
+export const updateListItem = (list, toUpdateId, entriesToUpdate) => {
+  return list.map(item => {
+    return item.id === toUpdateId ? { ...item, ...entriesToUpdate } : item;
+  });
+};
+
 const loadConfig = () => {
   const tasitSdkConfig = require("../config/current.js");
   ConfigLoader.setConfig(tasitSdkConfig);
@@ -255,4 +268,6 @@ export default {
   getNetworkName,
   buildBlockchainUrlFromActionId,
   restoreCreationStateOfAccountFromBlockchain,
+  updateListItem,
+  toListIfNot,
 };

decentraland/redux/actions.js

@@ -9,10 +9,12 @@ export const APPEND_LAND_FOR_SALE_TO_LIST = "APPEND_LAND_FOR_SALE_TO_LIST";
 export const PREPEND_LAND_FOR_SALE_TO_LIST = "PREPEND_LAND_FOR_SALE_TO_LIST";
 export const SET_LOADING_ASSETS_FOR_SALE_IN_PROGRESS =
   "SET_LOADING_ASSETS_FOR_SALE_IN_PROGRESS";
-export const ADD_TO_MY_ASSETS_LIST = "ADD_TO_MY_ASSETS_LIST";
-export const REMOVE_MY_ASSET_FROM_LIST = "REMOVE_MY_ASSET_FROM_LIST";
+export const PREPEND_TO_MY_ASSETS_LIST = "PREPEND_TO_MY_ASSETS_LIST";
+export const APPEND_TO_MY_ASSETS_LIST = "APPEND_TO_MY_ASSETS_LIST";
+export const REMOVE_FROM_MY_ASSETS_LIST = "REMOVE_FROM_MY_ASSETS_LIST";
 export const SET_MY_ASSETS_LIST = "SET_MY_ASSETS_LIST";
 export const SET_ACTION_ID_FOR_MY_ASSET = "SET_ACTION_ID_FOR_MY_ASSET";
+export const UPDATE_MY_ASSET_STATUS = "UPDATE_MY_ASSET_STATUS";
 
 export function setAccount(account) {
   return { type: SET_ACCOUNT, account };
@@ -53,12 +55,16 @@ export function removeLandForSale(landForSale) {
   return { type: REMOVE_LAND_FOR_SALE, landForSale };
 }
 
-export function addToMyAssetsList(myAsset) {
-  return { type: ADD_TO_MY_ASSETS_LIST, myAsset };
+export function prependToMyAssetsList(myAsset) {
+  return { type: PREPEND_TO_MY_ASSETS_LIST, myAsset };
 }
 
-export function removeMyAssetFromList(myAsset) {
-  return { type: REMOVE_MY_ASSET_FROM_LIST, myAsset };
+export function appendToMyAssetsList(itemOrList) {
+  return { type: APPEND_TO_MY_ASSETS_LIST, itemOrList };
+}
+
+export function removeFromMyAssetsList(itemOrList) {
+  return { type: REMOVE_FROM_MY_ASSETS_LIST, itemOrList };
 }
 
 export function setMyAssetsList(myAssets) {
@@ -71,3 +77,10 @@ export function setActionIdForMyAsset(myAssetId, actionId) {
     myAssetAndActionIds: { myAssetId, actionId },
   };
 }
+
+export function updateMyAssetStatus(myAssetId, status) {
+  return {
+    type: UPDATE_MY_ASSET_STATUS,
+    myAssetAndStatus: { myAssetId, status },
+  };
+}

decentraland/redux/middlewares.js

@@ -4,10 +4,12 @@ import {
   SET_ACCOUNT_CREATION_STATUS,
   UPDATE_ACTION_FOR_ACCOUNT_CREATION_STATUS,
   SET_ACCOUNT_CREATION_ACTIONS,
-  ADD_TO_MY_ASSETS_LIST,
-  REMOVE_MY_ASSET_FROM_LIST,
+  PREPEND_TO_MY_ASSETS_LIST,
+  APPEND_TO_MY_ASSETS_LIST,
+  REMOVE_FROM_MY_ASSETS_LIST,
   SET_MY_ASSETS_LIST,
   SET_ACTION_ID_FOR_MY_ASSET,
+  UPDATE_MY_ASSET_STATUS,
 } from "./actions";
 import {
   storeAccount,
@@ -41,11 +43,15 @@ const storer = store => next => async action => {
       await storeAccountCreationActions(creationActions);
       break;
     }
-    case ADD_TO_MY_ASSETS_LIST: {
+    case PREPEND_TO_MY_ASSETS_LIST: {
       await storeMyAssets(myAssetsList);
       break;
     }
-    case REMOVE_MY_ASSET_FROM_LIST: {
+    case APPEND_TO_MY_ASSETS_LIST: {
+      await storeMyAssets(myAssetsList);
+      break;
+    }
+    case REMOVE_FROM_MY_ASSETS_LIST: {
       await storeMyAssets(myAssetsList);
       break;
     }
@@ -57,6 +63,10 @@ const storer = store => next => async action => {
       await storeMyAssets(myAssetsList);
       break;
     }
+    case UPDATE_MY_ASSET_STATUS: {
+      await storeMyAssets(myAssetsList);
+      break;
+    }
   }
 
   return result;

decentraland/redux/reducers.js

@@ -9,107 +9,175 @@ import {
   UPDATE_ACTION_ID_FOR_ACCOUNT_CREATION_STATUS,
   SET_ACCOUNT_CREATION_ACTIONS,
   SET_LOADING_ASSETS_FOR_SALE_IN_PROGRESS,
-  ADD_TO_MY_ASSETS_LIST,
-  REMOVE_MY_ASSET_FROM_LIST,
+  PREPEND_TO_MY_ASSETS_LIST,
+  APPEND_TO_MY_ASSETS_LIST,
+  REMOVE_FROM_MY_ASSETS_LIST,
   SET_MY_ASSETS_LIST,
   SET_ACTION_ID_FOR_MY_ASSET,
+  UPDATE_MY_ASSET_STATUS,
 } from "./actions";
-import { removeFromList } from "@helpers";
+import { removeFromList, updateListItem, toListIfNot } from "@helpers";
 
 import AccountCreationStatus from "@constants/AccountCreationStatus";
 const { NOT_STARTED } = AccountCreationStatus;
 
-function accountInfo(
-  state = {
+// Reducing boilerplate from reducers
+// Refs: https://redux.js.org/recipes/structuring-reducers/refactoring-reducer-example#reducing-boilerplate
+function createReducer(initialState, handlers) {
+  return function reducer(state = initialState, action) {
+    if (handlers.hasOwnProperty(action.type)) {
+      return handlers[action.type](state, action);
+    } else {
+      return state;
+    }
+  };
+}
+
+//
+// accountInfo reducer
+//
+const setAccount = (state, action) => {
+  const { account } = action;
+  return { ...state, account };
+};
+const setAccountCreationStatus = (state, action) => {
+  const { creationStatus } = action;
+  return { ...state, creationStatus };
+};
+const updateActionIdForAccountCreationStatus = (state, action) => {
+  const { creationStatusAction } = action;
+  const { status, actionId } = creationStatusAction;
+  let { creationActions } = state;
+  creationActions = { ...creationActions, [status]: actionId };
+  return { ...state, creationActions };
+};
+const setAccountCreationActions = (state, action) => {
+  const { creationActions } = action;
+  return { ...state, creationActions };
+};
+
+const accountInfo = createReducer(
+  {
     account: null,
     creationStatus: NOT_STARTED,
     creationActions: {},
   },
-  action
-) {
-  const {
-    type,
-    account,
-    creationStatus,
-    creationStatusAction,
-    creationActions,
-  } = action;
-  switch (type) {
-    case SET_ACCOUNT:
-      return { ...state, account };
-    case SET_ACCOUNT_CREATION_STATUS:
-      return { ...state, creationStatus };
-    case UPDATE_ACTION_ID_FOR_ACCOUNT_CREATION_STATUS: {
-      const { status, actionId } = creationStatusAction;
-      let { creationActions } = state;
-      creationActions = { ...creationActions, [status]: actionId };
-      return { ...state, creationActions };
-    }
-    case SET_ACCOUNT_CREATION_ACTIONS: {
-      return { ...state, creationActions };
-    }
-    default:
-      return state;
+  {
+    [SET_ACCOUNT]: setAccount,
+    [SET_ACCOUNT_CREATION_STATUS]: setAccountCreationStatus,
+    [UPDATE_ACTION_ID_FOR_ACCOUNT_CREATION_STATUS]: updateActionIdForAccountCreationStatus,
+    [SET_ACCOUNT_CREATION_ACTIONS]: setAccountCreationActions,
   }
-}
+);
 
-function selectedLandToBuy(state = null, action) {
-  const { type, landForSale } = action;
-  switch (type) {
-    case SELECT_LAND_TO_BUY:
-      return landForSale;
-    default:
-      return state;
-  }
-}
+//
+// selectedLandToBuy reducer
+//
+const selectLandToBuy = (state, action) => {
+  const { landForSale } = action;
+  return landForSale;
+};
 
-function assetsForSale(state = { list: [], loadingInProgress: true }, action) {
-  const { type, landForSale, loadingInProgress } = action;
-  switch (type) {
-    case PREPEND_LAND_FOR_SALE_TO_LIST:
-      return { ...state, list: [landForSale, ...state.list] };
-    case APPEND_LAND_FOR_SALE_TO_LIST:
-      return { ...state, list: [...state.list, landForSale] };
-    case REMOVE_LAND_FOR_SALE: {
-      let { list: assetsForSale } = state;
-      const list = removeFromList(assetsForSale, landForSale);
-      return { ...state, list };
-    }
-    case SET_LOADING_ASSETS_FOR_SALE_IN_PROGRESS:
-      return { ...state, loadingInProgress };
-    default:
-      return state;
+const selectedLandToBuy = createReducer(null, {
+  [SELECT_LAND_TO_BUY]: selectLandToBuy,
+});
+
+//
+// assetsForSale reducer
+//
+const prependLandForSaleToList = (state, action) => {
+  const { landForSale } = action;
+  return { ...state, list: [landForSale, ...state.list] };
+};
+
+const appendLandForSaleToList = (state, action) => {
+  const { landForSale } = action;
+  return { ...state, list: [...state.list, landForSale] };
+};
+
+const removeLandForSale = (state, action) => {
+  const { landForSale } = action;
+  let { list: assetsForSale } = state;
+  const list = removeFromList(assetsForSale, landForSale);
+  return { ...state, list };
+};
+
+const setLoadingAssetsForSaleInProgress = (state, action) => {
+  const { loadingInProgress } = action;
+  return { ...state, loadingInProgress };
+};
+
+const assetsForSale = createReducer(
+  { list: [], loadingInProgress: true },
+  {
+    [PREPEND_LAND_FOR_SALE_TO_LIST]: prependLandForSaleToList,
+    [APPEND_LAND_FOR_SALE_TO_LIST]: appendLandForSaleToList,
+    [REMOVE_LAND_FOR_SALE]: removeLandForSale,
+    [SET_LOADING_ASSETS_FOR_SALE_IN_PROGRESS]: setLoadingAssetsForSaleInProgress,
   }
-}
+);
 
-function myAssets(state = { list: [] }, action) {
-  const { type, myAsset, myAssets, myAssetAndActionIds } = action;
-  switch (type) {
-    case ADD_TO_MY_ASSETS_LIST:
-      return { ...state, list: [myAsset, ...state.list] };
-    case REMOVE_MY_ASSET_FROM_LIST: {
-      const { list: myAssets } = state;
-      const list = removeFromList(myAssets, myAsset);
-      return { ...state, list };
-    }
-    case SET_MY_ASSETS_LIST: {
-      const list = myAssets === null ? [] : myAssets;
-      return { ...state, list };
-    }
-    case SET_ACTION_ID_FOR_MY_ASSET: {
-      const { myAssetId: toUpdateId, actionId } = myAssetAndActionIds;
-      const { list: myAssets } = state;
-      const list = myAssets.map(asset => {
-        if (asset.id === toUpdateId) return { ...asset, actionId };
-        else return asset;
-      });
-      return { ...state, list };
-    }
-    default:
-      return state;
+//
+// myAssets reducer
+//
+const prependToMyAssetsList = (state, action) => {
+  const { myAsset } = action;
+  return { ...state, list: [myAsset, ...state.list] };
+};
+
+const appendToMyAssetsList = (state, action) => {
+  const { itemOrList } = action;
+  const toAppend = toListIfNot(itemOrList);
+  return { ...state, list: [...state.list, ...toAppend] };
+};
+
+const removeFromMyAssetsList = (state, action) => {
+  const { itemOrList } = action;
+  const { list: myAssets } = state;
+  const toRemove = itemOrList;
+  const list = removeFromList(myAssets, toRemove);
+  return { ...state, list };
+};
+
+const setMyAssetsList = (state, action) => {
+  const { myAssets } = action;
+  const list = myAssets === null ? [] : myAssets;
+  return { ...state, list };
+};
+
+const setActionIdForMyAsset = (state, action) => {
+  const { myAssetAndActionIds } = action;
+  const { myAssetId: toUpdateId, actionId } = myAssetAndActionIds;
+  const { list: myAssets } = state;
+  const entriesToUpdate = { actionId };
+  const list = updateListItem(myAssets, toUpdateId, entriesToUpdate);
+  return { ...state, list };
+};
+
+const updateMyAssetStatus = (state, action) => {
+  const { myAssetAndStatus } = action;
+  const { myAssetId: toUpdateId, status } = myAssetAndStatus;
+  const { list: myAssets } = state;
+  const entriesToUpdate = { status };
+  const list = updateListItem(myAssets, toUpdateId, entriesToUpdate);
+  return { ...state, list };
+};
+
+const myAssets = createReducer(
+  { list: [] },
+  {
+    [PREPEND_TO_MY_ASSETS_LIST]: prependToMyAssetsList,
+    [APPEND_TO_MY_ASSETS_LIST]: appendToMyAssetsList,
+    [REMOVE_FROM_MY_ASSETS_LIST]: removeFromMyAssetsList,
+    [SET_MY_ASSETS_LIST]: setMyAssetsList,
+    [SET_ACTION_ID_FOR_MY_ASSET]: setActionIdForMyAsset,
+    [UPDATE_MY_ASSET_STATUS]: updateMyAssetStatus,
   }
-}
+);
 
+//
+// All reducers
+//
 const decentralandApp = combineReducers({
   accountInfo,
   selectedLandToBuy,