Reactアプリ100本ノックやってみた 「04 Timer」

はじめに

フロントエンドに苦手意識のある私が、@Sicut_studyさんの【Reactアプリ100本ノック】をやってみました。
変なところがあれば教えていただきたいです。

今回の課題

やってみる

App.tsx

/* eslint-disable @typescript-eslint/no-unused-expressions */
import { useEffect, useState } from "react";

const App = () => {
  const [input_min, setInputMin] = useState(0); // 入力分
  const [input_sec, setInputSec] = useState(0); // 入力秒
  const [button_cha, setInputCha] = useState("開始"); // ボタン文字
  const [countTime, setCountTime] = useState<number>(0); // カウント時間
  const [countFlg, setCountFlg] = useState(false); // カウントダウンしている

  // 通常ボタン
  const buttonClick = (status: string): void => {
    if (status === "開始") {
      if (input_min > 59 || input_sec > 59) {
        alert("不正な数値です");
      } else {
        setCountFlg(true);
        setInputCha("一時停止");
        setCountTime(input_min * 60 + input_sec - 1);
      }
    } else if (status === "一時停止") {
      setInputCha("再開");
    } else if (status === "再開") {
      setInputCha("一時停止");
      setCountTime(countTime - 1);
    }
  };

  // リセットボタン
  const buttonClickRe = () => {
    setCountTime(input_min * 60 + input_sec);
    setInputCha("開始");
    setCountFlg(false);
  };

  useEffect(() => {
    const countDownInterval = setInterval(() => {
      if (countTime === 0) {
        // 画面初期表示の際に起動しないようにするため
        if (!(input_min === 0 && input_sec === 0)) {
          clearInterval(countDownInterval);
          alert("終了しました");
          setCountFlg(false);
          setInputCha("開始");
        }
      }
      if (
        countTime &&
        countTime > 0 &&
        button_cha !== "開始" &&
        button_cha !== "再開"
      ) {
        setCountTime(countTime - 1);
      }
    }, 1000);
    return () => {
      clearInterval(countDownInterval);
    };
  }, [countTime]);

  return (
    <div>
      <input
        type="number"
        min="0"
        max="59"
        value={input_min}
        disabled={countFlg}
        onChange={(e) => setInputMin(Number(e.target.value))}
      />
      分
      <input
        type="number"
        min="0"
        max="59"
        value={input_sec}
        disabled={countFlg}
        onChange={(e) => setInputSec(Number(e.target.value))}
      />
      秒
      <button
        onClick={() => {
          buttonClick(button_cha);
        }}
      >
        {button_cha}
      </button>
      {countFlg && (
        <button
          onClick={() => {
            buttonClickRe();
          }}
        >
          リセット
        </button>
      )}
      <p>{countTime}</p>
    </div>
  );
};

export default App;

完成

おわりに

10分を入力すると600秒で表示されるなど、いまいちなところはありますが完了とします。早く問題側に追いつきたいです。