How to solve this code duplication in an elegant way? [reactjs]-CodePudding

How would you simplify this small react component. I'm not happy with repeating the html elements but I got no clean way to do it. The reason it's not so obvious for me is because there is a small logic in the latter case that needs to be dealth with.

const RemainingSessionTime = (props: RemainingSessionTimeProps) => {
  const { model, showTitle } = props;

  if (model.remainingTime == -1) {
    return (
      <div className="gadget longContent remainingTime">
        {showTitle && <div className="title">{title}</div>}
        <div className="value">
          <span>-</span>
        </div>
      </div>
    );
  }
    
  const isCalculated = model.valueType === ValueTypes.CALCULATED;
    
  return (
    <div className="gadget longContent remainingTime">
      {props.showTitle && <div className="title">{title}</div>}
      <div className="value">
        {isCalculated && <span>~</span>}
        <span>{t}</span>
        <span>{model.remainingTime < 3600 ? "m" : "h"}</span>
      </div>
    </div>
  );
}

CodePudding user response：

const RemainingSessionTime = (props: RemainingSessionTimeProps) => {
  const { model, showTitle } = props;
  const isCalculated = model.valueType === ValueTypes.CALCULATED;

  return (
    <div className="gadget longContent remainingTime">
      {showTitle && <div className="title">{title}</div>}
      <div className="value">
        {remainingTime === -1 ? (
          <span>-</span>
        ) : (
          <>
            {isCalculated && <span>~</span>}
            <span>{t}</span>
            <span>{remainingTime < 3600 ? "m" : "h"}</span>
          </>
        )}
      </div>
    </div>
  );
}

CodePudding user response：

const RemainingSessionTime = (props: RemainingSessionTimeProps) => {
  const { model, showTitle } = props;

 if (model.remainingTime == -1) {
  return (
   <div className="gadget longContent remainingTime">
      {showTitle && <div className="title">{title}</div>}
    <div className="value">
      <span>-</span>
    </div>
   </div>
   );
 }

  const isCalculated = model.valueType === ValueTypes.CALCULATED;

 return (
<div className="gadget longContent remainingTime">
  {props.showTitle && <div className="title">{title}</div>}
  <div className="value">
    {isCalculated && <span>~</span>}
    <span>{t}</span>
    <span>{model.remainingTime < 3600 ? "m" : "h"}</span>
  </div>
 </div>
  );
}

CodePudding user response：

This should be enough:

return (
  <div className="gadget longContent remainingTime">
    {showTitle && <div className="title">{title}</div>}
    <div className="value">
      {(model.remainingTime == -1 && isCalculated) ?
        <span>~</span>
        :
        (
          <>
            <span>{t}</span>
            <span>{model.remainingTime < 3600 ? "m" : "h"}</span>
          </>
        )
      }
    </div>
  </div>
);

Or you can encapsulate this into another component like:

function ShowTime({ remainingTime, isCalculated, t }) {
  if (remainingTime == -1 && isCalculated)
    return <span>~</span>
  return (
    <>
      <span>{t}</span>
      <span>{remainingTime < 3600 ? "m" : "h"}</span>
    </>
  )
}

And then use it into the main one:

<div className="value">
  <ShowTime remainingTime={model.remainingTime} isCalculated={false} t='t' />
</div>