ms314006

import SuccessTransaction from './SuccessTransaction';
import FailTransaction from './FailTransaction';
import PendingTransaction from './PendingTransaction';

class Transaction {
  constructor(transaction) {
    this.id = transaction.id;
    this.transactionStatusDelegate = this.getTransactionStatusDelegate(transaction);
  }
  

ms314006

const CommentButton = () => {
  const { data: user } = useUser();
  return (
    <button onClick={user.submitComment}>
      送出留言
    </button>
  );
};

ms314006

import { useQuery } from 'react-query';
import apis from '../apis';

const useUser = () => useQuery(
  ['user'],
  async () => {
    const createGuestUser = () => ({
      name: '遊客',
      submitComment: () => { /* 導到登入頁面 */ },
    });

ms314006

import { useQuery } from 'react-query';
import apis from '../apis';

const useUser = () => useQuery(
  ['user'],
  async () => {
    const { data: user } = await apis.getUser();
    return user;
  }
);

ms314006

const CommentButton = () => {
  const { data: user } = useUser();
  return (
    <button onClick={user?.id ? user.submitComment : () => { /* 導到登入頁面 */ }}>
      送出留言
    </button>
  );
};

ms314006

import SuccessTransaction from './Transaction/SuccessTransaction';
import FailTransaction from './Transaction/FailTransaction';
import PendingTransaction from './Transaction/PendingTransaction';

const getTransactionInfo = (transaction) => {
  switch (transaction.status) {
    case 'SUCCESS':
      return new SuccessTransaction(transaction);
    case 'FAIL':
      return new FailTransaction(transaction);

ms314006

import Transaction from './Transaction';

class FailTransaction extends Transaction {
  constructor(transaction) {
    super(transaction);
    this.statusString = '失敗';
    this.isNonRefundable = true;
  }
}

ms314006

const getTransactionInfo = () => {
  switch (transaction.status) {
    case 'SUCCESS':
      return {
        statusString: '成功',
        isNonRefundable: false,
      };
    case 'FAIL':
      return {
        statusString: '失敗',

ms314006

const TransactionInfo = (transaction) => {
  const getTransactionInfo = () => {
    if (transaction.status === 'SUCCESS') {
      return {
        statusString: '成功',
        isNonRefundable: false,
      };
    }
    return {
      statusString: '失敗',

ms314006

const TransactionInfo = (transaction) => (
  <div>
    <label>交易狀態：</label>
    <span>{ transaction.status === 'SUCCESS' ? '成功' : '失敗' }</span>
    <button disabled={transaction.status !== 'SUCCESS'}>
      退款
    </button>
  </div>
);