This is the root component which just route the user to either ManageCard or PrepaidCardForm. This has a route name /index/prepaid-card

PrepaidCard.js

import React, { useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { sha256 } from "js-sha256";
import { getPrepaidCard } from "../../redux/actions/prepaidCardActions";
import val from "../../getThemeDetails";
import Layout from "../../components/Wrappers/Layout";
import PrepaidCardForm from "./ApplyPrepaidCard/PrepaidCardForm";
import ShowPrepaidCards from "./DisplayPrepaidCards/ShowPrepaidCards";

function PrepaidCard() {
  const dispatch = useDispatch();
  const login = useSelector(state => state.login);
  const getPrepaidCardState = useSelector(state => state.getPrepaidCard);

  const memoFetchPrepaidCard = useCallback(() => {
    const verificationHash = sha256(
      login.data.secKey + login.data.cust_id + val.walletOwnerId
    );

    const req = {
      custId: login.data.cust_id,
      verificationHash,
      walletOwnerId: val.walletOwnerId
    };

    dispatch(getPrepaidCard(req));
  }, [login.data]);

  useEffect(() => {
    memoFetchPrepaidCard();
  }, []);

  if (getPrepaidCardState.isLoading) return <Layout>Loading...</Layout>;

  if (getPrepaidCardState.notFound) return <PrepaidCardForm {... { getPrepaidCardState,memoFetchPrepaidCard }}/>;

  if (getPrepaidCardState.success) {
    return (
      <ShowPrepaidCards
        {...{ getPrepaidCardState, login, dispatch, val, sha256 }}
      />
    );
  }

  return <Layout>Something went wrong</Layout>;
}

export default PrepaidCard;