fab-manager/app/frontend/src/javascript/components/machines/machine-card.tsx

import React, { ReactNode, useState } from 'react';
import { Machine } from '../../models/machine';
import { useTranslation } from 'react-i18next';
import { Loader } from '../base/loader';
import { ReserveButton } from './reserve-button';
import { User } from '../../models/user';

interface MachineCardProps {
  user?: User,
  machine: Machine,
  onShowMachine: (machine: Machine) => void,
  onReserveMachine: (machine: Machine) => void,
  onLoginRequested: () => Promise<User>,
  onError: (message: string) => void,
}

/**
 * This component is a box showing the picture of the given machine and two buttons: one to start the reservation process
 * and another to redirect the user to the machine description page.
 */
const MachineCardComponent: React.FC<MachineCardProps> = ({ user, machine, onShowMachine, onReserveMachine, onError, onLoginRequested }) => {
  const { t } = useTranslation('public');

  // shall we display a loader to prevent double-clicking, while the machine details are loading?
  const [loading, setLoading] = useState<boolean>(false);

  /**
   * Callback triggered when the user clicks on the 'reserve' button and has passed all the verifications
   */
  const handleReserveMachine = (): void => {
    onReserveMachine(machine);
  }
  /**
   * Callback triggered when the user clicks on the 'view' button
   */
  const handleShowMachine = (): void => {
    onShowMachine(machine);
  }

  const machinePicture = (): ReactNode => {
    if (!machine.machine_image) {
      return (
        <div className="machine-picture">
          <img src="data:image/png;base64,"
               data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon"
               className="img-responsive"
               alt={machine.name} />
        </div>
      );
    }

    return (
      <div className="machine-picture" style={{ backgroundImage: `url(${machine.machine_image})` }} onClick={handleShowMachine} />
    )
  }

  return (
    <div className={`machine-card ${loading ? 'loading' : ''}`}>
      {machinePicture()}
      <div className="machine-name">
        {machine.name}
      </div>
      <div className="machine-actions">
        {!machine.disabled && <ReserveButton currentUser={user}
                                             machineId={machine.id}
                                             onLoadingStart={() => setLoading(true)}
                                             onLoadingEnd={() => setLoading(false)}
                                             onError={onError}
                                             onReserveMachine={handleReserveMachine}
                                             onLoginRequested={onLoginRequested}
                                             className="reserve-button">
          <i className="fas fa-bookmark" />
          {t('app.public.machine_card.book')}
        </ReserveButton>}
        <button onClick={handleShowMachine} className={`show-button ${machine.disabled ? 'single-button': ''}`}>
          <i className="fas fa-eye" />
          {t('app.public.machine_card.consult')}
        </button>
      </div>
    </div>
  );
}


export const MachineCard: React.FC<MachineCardProps> = ({ user, machine, onShowMachine, onReserveMachine, onError, onLoginRequested }) => {
  return (
    <Loader>
      <MachineCardComponent user={user} machine={machine} onShowMachine={onShowMachine} onReserveMachine={onReserveMachine} onError={onError} onLoginRequested={onLoginRequested} />
    </Loader>
  );
}