unload buckets on page exit and link to redeemable page

client/src/actions/buckets.ts

@@ -8,6 +8,7 @@ import IERC20Detailed from '../contracts/IERC20Detailed.json';
 import { AbiItem } from "web3-utils";
 import { config } from "../config";
 import { TokenDetails, ERC20Details } from "../reducers/buckets";
+import { debug } from "./debug";
 
 export const BUCKETS_LOADING = "BUCKETS_LOADING";
 export interface BucketsLoadingAction {
@@ -15,6 +16,12 @@ export interface BucketsLoadingAction {
   recipientAddress: string
 }
 
+export const BUCKETS_UNLOADED = "BUCKETS_UNLOADED";
+export interface BucketsUnloadedAction {
+  type: typeof BUCKETS_UNLOADED
+  recipientAddress: string
+}
+
 export const BUCKETS_LOADING_BUCKET = "BUCKETS_LOADING_BUCKET";
 export interface BucketsLoadingBucketAction {
   type: typeof BUCKETS_LOADING_BUCKET
@@ -48,6 +55,7 @@ export interface BucketsRedeemableTokenDetailsLoadedAction {
 
 export type BucketsActions =
   BucketsLoadingAction |
+  BucketsUnloadedAction |
   BucketsLoadingBucketAction |
   BucketsRedeemableTokenAddressLoadedAction |
   BucketsRedeemableTokenTypeLoadedAction |
@@ -58,6 +66,11 @@ export const loadingBuckets = (recipientAddress: string): BucketsLoadingAction =
   recipientAddress,
 });
 
+export const unloadBuckets = (recipientAddress: string): BucketsUnloadedAction => ({
+  type: BUCKETS_UNLOADED,
+  recipientAddress,
+});
+
 export const loadingBucket = (recipientAddress: string, bucketAddress: string): BucketsLoadingBucketAction => ({
   type: BUCKETS_LOADING_BUCKET,
   recipientAddress,
@@ -108,9 +121,13 @@ const loadBucket = (recipientAddress: string, bucketAddress: string) => {
     const tokenAddress = await bucket.methods.tokenAddress().call();
     dispatch(tokenAddressLoaded(recipientAddress, bucketAddress, tokenAddress));
 
-    //FIXME: catch possible error
+    try {
-    const tokenDetails = await loadERC20Token(tokenAddress);
+      const tokenDetails = await loadERC20Token(tokenAddress);
-    dispatch(tokenDetailsLoaded(recipientAddress, bucketAddress, tokenDetails));
+      dispatch(tokenDetailsLoaded(recipientAddress, bucketAddress, tokenDetails));
+    } catch (e) {
+      dispatch(debug(`error loading token details (${tokenAddress}) ${e}`));
+      //FIXME: dispatch error
+    }
   }
 }
 

client/src/components/RecipientBuckets.tsx

@@ -6,12 +6,14 @@ import {
   useSelector,
   useDispatch,
 } from 'react-redux';
-import { recipientBucketsPath } from '../config';
+import { recipientBucketsPath, buildRedeemablePath } from '../config';
-import { loadBuckets } from "../actions/buckets";
+import { loadBuckets, unloadBuckets } from "../actions/buckets";
 import { ERC20Details } from "../reducers/buckets";
+import { Link } from "react-router-dom";
 
 interface BuckestListItemProps {
   bucketAddress: string
+  recipientAddress: string
 }
 
 const BuckestListItem = (ownProps: BuckestListItemProps) => {
@@ -23,6 +25,7 @@ const BuckestListItem = (ownProps: BuckestListItemProps) => {
 
     return {
       bucketAddress: ownProps.bucketAddress,
+      recipientAddress: ownProps.recipientAddress,
       loading: redeemable.loading,
       tokenAddress: redeemable.tokenAddress,
       tokenType: redeemable.tokenType,
@@ -46,7 +49,9 @@ const BuckestListItem = (ownProps: BuckestListItemProps) => {
       Symbol: {props.tokenDetails.symbol}
       <br />
       Name: {props.tokenDetails.name}
+      <br />
     </>}
+    <Link to={buildRedeemablePath(props.bucketAddress, props.recipientAddress)}>DETAILS</Link>
     <hr />
   </div>;
 }
@@ -79,13 +84,17 @@ export default function(ownProps: any) {
   useEffect(() => {
     console.log("loading buckets")
     dispatch(loadBuckets(recipientAddress));
+
+    return () => {
+      dispatch(unloadBuckets(recipientAddress));
+    }
   }, [dispatch, recipientAddress]); // FIXME: unload buckets
 
   return <div>
     <div>buckets for {recipientAddress}</div>
     <ul>
       {props.buckets.map(bucketAddress => <li key={bucketAddress}>
-        <BuckestListItem bucketAddress={bucketAddress} />
+        <BuckestListItem bucketAddress={bucketAddress} recipientAddress={recipientAddress} />
       </li>)}
     </ul>
   </div>;

client/src/config.ts

@@ -11,6 +11,10 @@ export const config: Config = {
 export const recipientBucketsPath = "/recipients/:recipientAddress/buckets";
 export const redeemablePath = "/buckets/:bucketAddress/redeemables/:recipientAddress";
 
+export const buildRedeemablePath = (bucketAddress: string, recipientAddress: string) => {
+  return `/buckets/${bucketAddress}/redeemables/${recipientAddress}`;
+}
+
 export const bucketsAddresses = (): Array<string> => {
   const s = process.env.REACT_APP_BUCKETS;
   if (s === undefined) {

client/src/reducers/buckets.ts

@@ -1,6 +1,7 @@
 import {
   BucketsActions,
   BUCKETS_LOADING,
+  BUCKETS_UNLOADED,
   BUCKETS_LOADING_BUCKET,
   BUCKETS_REDEEMABLE_TOKEN_ADDRESS_LOADED,
   BUCKETS_REDEEMABLE_TOKEN_TYPE_LOADED,
@@ -61,6 +62,14 @@ export const bucketsReducer = (state: BucketsState = initialState, action: Bucke
       };
     }
 
+    case BUCKETS_UNLOADED: {
+      if (action.recipientAddress !== state.recipientAddress) {
+        return state;
+      }
+
+      return initialState;
+    }
+
     case BUCKETS_LOADING_BUCKET: {
       if (action.recipientAddress !== state.recipientAddress) {
         return state;

client/src/reducers/debug.ts

@@ -14,6 +14,7 @@ const initialState: DebugState = {
 export const debugReducer = (state: DebugState = initialState, action: DebugActions): DebugState => {
   switch (action.type) {
     case DEBUG_WRITTEN: {
+      console.error(action.text);
       return {
         ...state,
         lines: [