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 any list 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,12 +9,14 @@ 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;
@@ -83,13 +85,26 @@ function assetsForSale(state = { list: [], loadingInProgress: true }, action) {
 }
 
 function myAssets(state = { list: [] }, action) {
-  const { type, myAsset, myAssets, myAssetAndActionIds } = action;
+  const {
+    type,
+    myAsset,
+    myAssets,
+    myAssetAndActionIds,
+    myAssetAndStatus,
+    itemOrList,
+  } = action;
+
   switch (type) {
-    case ADD_TO_MY_ASSETS_LIST:
+    case PREPEND_TO_MY_ASSETS_LIST:
       return { ...state, list: [myAsset, ...state.list] };
-    case REMOVE_MY_ASSET_FROM_LIST: {
+    case APPEND_TO_MY_ASSETS_LIST: {
+      const toAppend = toListIfNot(itemOrList);
+      return { ...state, list: [...state.list, ...toAppend] };
+    }
+    case REMOVE_FROM_MY_ASSETS_LIST: {
       const { list: myAssets } = state;
-      const list = removeFromList(myAssets, myAsset);
+      const toRemove = itemOrList;
+      const list = removeFromList(myAssets, toRemove);
       return { ...state, list };
     }
     case SET_MY_ASSETS_LIST: {
@@ -99,10 +114,15 @@ function myAssets(state = { list: [] }, action) {
     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;
-      });
+      const entriesToUpdate = { actionId };
+      const list = updateListItem(myAssets, toUpdateId, entriesToUpdate);
+      return { ...state, list };
+    }
+    case UPDATE_MY_ASSET_STATUS: {
+      const { myAssetId: toUpdateId, status } = myAssetAndStatus;
+      const { list: myAssets } = state;
+      const entriesToUpdate = { status };
+      const list = updateListItem(myAssets, toUpdateId, entriesToUpdate);
       return { ...state, list };
     }
     default:

decentraland/screens/BuyLandScreen.js

@@ -1,17 +1,21 @@
 import React from "react";
 import { connect } from "react-redux";
+import { StackActions } from "react-navigation";
 import {
   removeLandForSale,
   prependLandForSaleToList,
-  removeMyAssetFromList,
-  addToMyAssetsList,
+  removeFromMyAssetsList,
+  prependToMyAssetsList,
   setActionIdForMyAsset,
+  updateMyAssetStatus,
 } from "../redux/actions";
 import BuyLand from "@presentational/BuyLand";
 import PropTypes from "prop-types";
 import { showError, showInfo, getContracts } from "@helpers";
 import AssetTypes from "@constants/AssetTypes";
 const { ESTATE, PARCEL } = AssetTypes;
+import MyAssetStatus from "@constants/MyAssetStatus";
+const { BUYING, BOUGHT } = MyAssetStatus;
 
 // TODO: Go deep on gas handling.
 // Without that, VM returns a revert error instead of out of gas error.
@@ -47,9 +51,10 @@ export class BuyLandScreen extends React.Component {
       accountInfo,
       removeLandForSale,
       prependLandForSaleToList,
-      removeMyAssetFromList,
-      addToMyAssetsList,
+      removeFromMyAssetsList,
+      prependToMyAssetsList,
       setActionIdForMyAsset,
+      updateMyAssetStatus,
     } = props;
     const { account } = accountInfo;
     const { asset } = landForSale;
@@ -64,13 +69,15 @@ export class BuyLandScreen extends React.Component {
       // that catches the safeExecuteOrder successful event.
       await action.waitForNonceToUpdate();
 
+      updateMyAssetStatus(assetId, BOUGHT);
+
       showInfo(`${typeDescription} bought successfully.`);
     };
 
     const onError = (assetForSale, message) => {
       const { asset } = assetForSale;
       showError(message);
-      removeMyAssetFromList(asset);
+      removeFromMyAssetsList(asset);
       prependLandForSaleToList(assetForSale);
     };
 
@@ -80,9 +87,11 @@ export class BuyLandScreen extends React.Component {
 
     // Optimistic UI update
     removeLandForSale(landForSale);
-    addToMyAssetsList(asset);
+    prependToMyAssetsList({ ...asset, status: BUYING });
 
-    navigation.navigate("ListLandForSaleScreen");
+    // Back to top of current Stack before navigate
+    navigation.dispatch(StackActions.popToTop());
+    navigation.navigate("MyAssetsScreen");
 
     const actionId = await action.getId();
     setActionIdForMyAsset(assetId, actionId);
@@ -101,6 +110,7 @@ export class BuyLandScreen extends React.Component {
         type === ESTATE
           ? estateContract.getAddress()
           : landContract.getAddress();
+
       // LANDRegistry contract doesn't implement getFingerprint function
       const fingerprint =
         type === ESTATE ? await estateContract.getFingerprint(assetId) : "0x";
@@ -145,9 +155,10 @@ BuyLandScreen.propTypes = {
   myAssets: PropTypes.array.isRequired,
   removeLandForSale: PropTypes.func.isRequired,
   prependLandForSaleToList: PropTypes.func.isRequired,
-  removeMyAssetFromList: PropTypes.func.isRequired,
-  addToMyAssetsList: PropTypes.func.isRequired,
+  removeFromMyAssetsList: PropTypes.func.isRequired,
+  prependToMyAssetsList: PropTypes.func.isRequired,
   setActionIdForMyAsset: PropTypes.func.isRequired,
+  updateMyAssetStatus: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = state => {
@@ -159,9 +170,10 @@ const mapStateToProps = state => {
 const mapDispatchToProps = {
   removeLandForSale,
   prependLandForSaleToList,
-  addToMyAssetsList,
-  removeMyAssetFromList,
+  prependToMyAssetsList,
+  removeFromMyAssetsList,
   setActionIdForMyAsset,
+  updateMyAssetStatus,
 };
 
 export default connect(

decentraland/screens/BuyLandScreen.test.js

@@ -14,10 +14,11 @@ describe("BuyLandScreen", () => {
       };
       const navigation = () => {};
       const removeLandForSale = () => {};
-      const addToMyAssetsList = () => {};
-      const removeMyAssetFromList = () => {};
+      const prependToMyAssetsList = () => {};
+      const removeFromMyAssetsList = () => {};
       const prependLandForSaleToList = () => {};
       const setActionIdForMyAsset = () => {};
+      const updateMyAssetStatus = () => {};
       const myAssets = [];
 
       expect(
@@ -28,10 +29,11 @@ describe("BuyLandScreen", () => {
             myAssets={myAssets}
             selectedLandToBuy={estateForSale}
             removeLandForSale={removeLandForSale}
-            addToMyAssetsList={addToMyAssetsList}
-            removeMyAssetFromList={removeMyAssetFromList}
+            prependToMyAssetsList={prependToMyAssetsList}
+            removeFromMyAssetsList={removeFromMyAssetsList}
             prependLandForSaleToList={prependLandForSaleToList}
             setActionIdForMyAsset={setActionIdForMyAsset}
+            updateMyAssetStatus={updateMyAssetStatus}
           />
         )
       ).toMatchSnapshot();