Clear stored data when logout

Author: Gilyoung

src/components/AddressList/AddressItem/AddressItem.tsx

@@ -1,58 +1,105 @@
 import * as React from "react";
+import { connect } from "react-redux";
 import { RouteComponentProps, withRouter } from "react-router-dom";
-import { AddressType, WalletAddress } from "../../../model/address";
+import { Action } from "redux";
+import { ThunkDispatch } from "redux-thunk";
+import {
+    AddressType,
+    PlatformAccount,
+    WalletAddress
+} from "../../../model/address";
+import { ReducerConfigure } from "../../../redux";
+import walletActions from "../../../redux/wallet/walletActions";
 import { getNetworkNameById } from "../../../utils/network";
+import { changeQuarkToCCCString } from "../../../utils/unit";
 import "./AddressItem.css";
 
 interface OwnProps {
-    address: WalletAddress;
+    walletAddress: WalletAddress;
     className?: string | null;
+    account?: PlatformAccount | null;
+}
+interface DispatchProps {
+    fetchAccountIfNeed: (address: string) => void;
 }
 
-type Props = RouteComponentProps & OwnProps;
+type Props = RouteComponentProps & OwnProps & DispatchProps;
 
-const AddressItem = (props: Props) => {
-    const { address, className } = props;
-    const handleClick = () => {
-        if (address.type === AddressType.Platform) {
-            props.history.push(`/${address.address}/account`);
-        } else {
-            props.history.push(`/${address.address}/assets`);
-        }
-    };
-    return (
-        <div className={`Address-item mb-3 ${className}`} onClick={handleClick}>
+class AddressItem extends React.Component<Props> {
+    public componentDidMount() {
+        const { walletAddress, fetchAccountIfNeed } = this.props;
+        fetchAccountIfNeed(walletAddress.address);
+    }
+    public render() {
+        const { walletAddress, className, account } = this.props;
+        return (
             <div
-                className={`item-body ${
-                    address.type === AddressType.Platform
-                        ? "platform-type"
-                        : "asset-type"
-                }`}
+                className={`Address-item mb-3 ${className}`}
+                onClick={this.handleClick}
             >
-                <div className="d-flex network-text-container">
-                    <span className="network-text ml-auto">
-                        {getNetworkNameById(address.networkId)}
+                <div
+                    className={`item-body ${
+                        walletAddress.type === AddressType.Platform
+                            ? "platform-type"
+                            : "asset-type"
+                    }`}
+                >
+                    <div className="d-flex network-text-container">
+                        <span className="network-text ml-auto">
+                            {getNetworkNameById(walletAddress.networkId)}
+                        </span>
+                    </div>
+                    <div>
+                        <p className="address-name mb-0 mono">
+                            {walletAddress.name}
+                        </p>
+                    </div>
+                    <span className="address-text mono">
+                        {walletAddress.address.slice(0, 15)}
+                        ...
+                        {walletAddress.address.slice(
+                            walletAddress.address.length - 15,
+                            walletAddress.address.length
+                        )}
                     </span>
                 </div>
-                <div>
-                    <p className="address-name mb-0 mono">{address.name}</p>
-                </div>
-                <span className="address-text mono">
-                    {address.address.slice(0, 15)}
-                    ...
-                    {address.address.slice(
-                        address.address.length - 15,
-                        address.address.length
-                    )}
-                </span>
+                {walletAddress.type === AddressType.Platform && (
+                    <div className="platform-account">
+                        {account && (
+                            <span className="mono balance">
+                                {changeQuarkToCCCString(account.balance)} CCC
+                            </span>
+                        )}
+                    </div>
+                )}
             </div>
-            {address.type === AddressType.Platform && (
-                <div className="platform-account">
-                    <span className="mono balance">873.4311 CCC</span>
-                </div>
-            )}
-        </div>
-    );
-};
+        );
+    }
+    private handleClick = () => {
+        const { walletAddress, history } = this.props;
+        if (walletAddress.type === AddressType.Platform) {
+            history.push(`/${walletAddress.address}/account`);
+        } else {
+            history.push(`/${walletAddress.address}/assets`);
+        }
+    };
+}
 
-export default withRouter(AddressItem);
+const mapStateToProps = (state: ReducerConfigure, props: OwnProps) => {
+    const { walletAddress } = props;
+    const account = state.walletReducer.accounts[walletAddress.address];
+    return {
+        account: account && account.data
+    };
+};
+const mapDispatchToProps = (
+    dispatch: ThunkDispatch<ReducerConfigure, void, Action>
+) => ({
+    fetchAccountIfNeed: (address: string) => {
+        dispatch(walletActions.fetchAccountIfNeed(address));
+    }
+});
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(withRouter(AddressItem));

src/components/AddressList/AddressList.tsx

@@ -41,7 +41,7 @@ class AddressList extends React.Component<Props, any> {
                                 ) => (
                                     <AddressItem
                                         key={index}
-                                        address={dummyAddress}
+                                        walletAddress={dummyAddress}
                                     />
                                 )
                             )}
@@ -60,7 +60,7 @@ class AddressList extends React.Component<Props, any> {
                                 ) => (
                                     <AddressItem
                                         key={index}
-                                        address={dummyAddress}
+                                        walletAddress={dummyAddress}
                                     />
                                 )
                             )}

src/components/SideMenu/SideMenu.tsx

@@ -11,8 +11,8 @@ import "./SideMenu.css";
 interface StateProps {
     isAuthenticated: boolean;
     walletName?: string | null;
-    assetAddresses: WalletAddress[];
-    platformAddresses: WalletAddress[];
+    assetAddresses?: WalletAddress[] | null;
+    platformAddresses?: WalletAddress[] | null;
 }
 interface DispatchProps {
     logout: () => void;
@@ -41,10 +41,11 @@ class SideMenu extends React.Component<Props, any> {
                     <h3 className="mono mb-4">{walletName}</h3>
                     <hr />
                     <p className="mb-0 mono grey">
-                        {platformAddresses.length} Platform address
+                        {platformAddresses && platformAddresses.length} Platform
+                        address
                     </p>
                     <p className="mono grey">
-                        {assetAddresses.length} Asset address
+                        {assetAddresses && assetAddresses.length} Asset address
                     </p>
                     <div className="mt-5">
                         <button className="btn btn-primary w-100 text-center">

src/redux/asset/assetReducer.ts

@@ -41,14 +41,14 @@ export interface AssetState {
     };
 }
 
-const initialState: AssetState = {
+export const assetInitState: AssetState = {
     assetScheme: {},
     aggsUTXOList: {},
     UTXOList: {},
     availableAssets: {}
 };
 
-export const assetReducer = (state = initialState, action: Action) => {
+export const assetReducer = (state = assetInitState, action: Action) => {
     switch (action.type) {
         case ActionType.CacheAssetScheme: {
             const assetType = action.data.assetType;

src/redux/global/globalActions.ts

@@ -2,26 +2,26 @@ import { ThunkDispatch } from "redux-thunk";
 import { ReducerConfigure } from "..";
 import { clearWallet } from "../../model/wallet";
 
-export type Action = Login | Logout | ToggleMenu;
+export type Action = Login | ToggleMenu | ClearData;
 
 export enum ActionType {
     Login = "login",
-    Logout = "logout",
+    ClearData = "clear_data",
     ToggleMenu = "toggle_menu"
 }
 
 export interface Login {
     type: ActionType.Login;
 }
 
-export interface Logout {
-    type: ActionType.Logout;
-}
-
 export interface ToggleMenu {
     type: ActionType.ToggleMenu;
 }
 
+export interface ClearData {
+    type: ActionType.ClearData;
+}
+
 const login = (): Login => ({
     type: ActionType.Login
 });
@@ -32,9 +32,11 @@ const logout = () => {
         getState: () => ReducerConfigure
     ) => {
         await clearWallet();
-        dispatch({
-            type: ActionType.Logout
-        });
+        setTimeout(() => {
+            dispatch({
+                type: ActionType.ClearData
+            });
+        }, 100);
     };
 };
 

src/redux/global/globalReducer.ts

@@ -5,24 +5,18 @@ export interface GlobalState {
     isSideMenuOpen: boolean;
 }
 
-const initialState: GlobalState = {
+export const globalInitState: GlobalState = {
     isAuthenticated: false,
     isSideMenuOpen: false
 };
 
-export const globalReducer = (state = initialState, action: Action) => {
+export const globalReducer = (state = globalInitState, action: Action) => {
     switch (action.type) {
         case ActionType.Login:
             return {
                 ...state,
                 isAuthenticated: true
             };
-        case ActionType.Logout:
-            return {
-                ...state,
-                isAuthenticated: false,
-                isSideMenuOpen: false
-            };
         case ActionType.ToggleMenu:
             return {
                 ...state,

src/redux/index.ts

@@ -1,11 +1,21 @@
 import { combineReducers } from "redux";
-import { assetReducer, AssetState } from "./asset/assetReducer";
-import { globalReducer, GlobalState } from "./global/globalReducer";
+import { assetInitState, assetReducer, AssetState } from "./asset/assetReducer";
+import { ActionType } from "./global/globalActions";
+import {
+    globalInitState,
+    globalReducer,
+    GlobalState
+} from "./global/globalReducer";
 import {
     transactionReducer,
-    TransactionState
+    TransactionState,
+    txInitState
 } from "./transaction/transactionReducer";
-import { walletReducer, WalletState } from "./wallet/walletReducer";
+import {
+    walletInitState,
+    walletReducer,
+    WalletState
+} from "./wallet/walletReducer";
 
 export interface ReducerConfigure {
     globalReducer: GlobalState;
@@ -14,10 +24,23 @@ export interface ReducerConfigure {
     transactionReducer: TransactionState;
 }
 
-const rootReducer = combineReducers({
+const appReducer = combineReducers({
     globalReducer,
     walletReducer,
     assetReducer,
     transactionReducer
 });
+
+const rootReducer = (state: any, action: any) => {
+    if (action.type === ActionType.ClearData) {
+        state = {
+            globalReducer: globalInitState,
+            walletReducer: walletInitState,
+            transactionReducer: txInitState,
+            assetReducer: assetInitState
+        };
+    }
+    return appReducer(state, action);
+};
+
 export default rootReducer;

src/redux/transaction/transactionReducer.ts

@@ -25,13 +25,13 @@ export interface TransactionState {
     };
 }
 
-const initialState: TransactionState = {
+export const txInitState: TransactionState = {
     pendingTxList: {},
     unconfirmedTxList: {},
     sendingTx: {}
 };
 
-export const transactionReducer = (state = initialState, action: Action) => {
+export const transactionReducer = (state = txInitState, action: Action) => {
     switch (action.type) {
         case ActionType.CachePendingTxList: {
             const address = action.data.address;

src/redux/wallet/walletActions.ts

@@ -21,7 +21,8 @@ export enum ActionType {
     UpdateWalletAssetAddresses = "updateWalletAssetAddresses",
     UpdateWalletName = "updateWalletName",
     UpdateAccount = "updateAccount",
-    SetFetchingAccount = "setFetchingAccount"
+    SetFetchingAccount = "setFetchingAccount",
+    ClearWallet = "clearWallet"
 }
 
 export interface UpdateWalletName {

src/redux/wallet/walletReducer.ts

@@ -14,14 +14,14 @@ export interface WalletState {
     };
 }
 
-const initialState: WalletState = {
+export const walletInitState: WalletState = {
     platformAddresses: undefined,
     assetAddresses: undefined,
     walletName: undefined,
     accounts: {}
 };
 
-export const walletReducer = (state = initialState, action: Action) => {
+export const walletReducer = (state = walletInitState, action: Action) => {
     switch (action.type) {
         case ActionType.UpdateWalletAssetAddresses:
             return {