Day-18 專案演練 - 重構程式碼

14th鐵人賽 react junior front-end

aoigj100

2022-10-02 19:39:11

369 瀏覽

分享至

Day-18 專案演練 - 重構程式碼

雖然並沒有影響專案的功能、畫面，但隨著 TodoPage 的篇幅越來越長，我感覺在撰寫程式的過程有點不太舒服，所以我打算在今天做程式碼的整理，表單與表格的功能想要各自獨立出來，為它們各開一個新的檔案，同時能夠解決功能邏輯夾雜，樣式與功能耦合的不順感受。

初期重構的思路

覺得程式碼太多就會想要整理一下，利用模組化的方式，能很好的管理檔案。第一種想法是按造類型，頁面就是獨立一頁，第二種是看功能，功能一樣的就打包在一起。第三種是封裝 UI 庫到 components 中保存。

做到一半的時候想說，要不要連表格也抽出來，但是覺得要是把表格抽出來可不簡單，之後如果會用 redux 來把 list 做成全局狀態的話，應該到時候再把表格分出去也不遲

新增 todo 資料夾

在 page 底下新增一個 todo 資料夾，將 todoPage 放進去，存檔。接下來會有路徑報錯，深呼吸一口氣，我們有耐心地來一一處理。

首先來做 App.tsx :

import TodoPage from "./pages/todo/TodoPage"; // 把 todo 資料夾的路徑補充進去

再來是 TodoPage 本身引入都要更新 :

import ExportButton from "../../features/ExportButton"; // 多往外一層資料夾
import AddButton from "../../features/AddButton"; // 多往外一層資料夾
import Modal from "../../components/Modal"; // 多往外一層資料夾

清除報錯也是花了點時間，最後的結果要跟原本一樣，功能也沒有壞掉，才算過關。

新增 TodoModal

我習慣會把 Modal 當作是一個頁面來處理，所以我不太喜歡 Modal，因為明明不是頁面卻要有頁面的待遇(欸你)，所以我今天要第一個來抽它(??)

新增一個 TodoModal.tsx 在 todo 底下，把所有跟表單、彈跳視窗的內容都複製近來，反覆的除錯，我分成幾個流程跟大家來聊聊看。

把基本元件的的架構長出來 :

import React from "react";

const TodoModal: React.FC = ()=>{

return (<></>)

}
export default TodoModal;

從 TodoPage 中將整個 <Modal> 包裹的內容都先複製貼回來
依舊看著報錯，逐一擊破，因為 useFrom 跟 isOpen 都在頂層，所以需要一個一個傳下去

最後的 TodoModal 長成以下的樣子 :

TodoModal.tsx

import React from "react";
import Modal from "../../components/Modal";

type Props = {
  isOpen?;
  setIsOpen;
  onSubmit;
  register;
  handleSubmit;
  reset;
};

const TodoModal: React.FC<Props> = ({
  isOpen,
  setIsOpen,
  onSubmit,
  register,
  handleSubmit,
  reset,
}) => {
  return (
    <Modal isOpen={isOpen}>
      <div className="flex justify-end">
        <span
          className="
          font-medium
          cursor-pointer 
          inline-block 
          bg-gray-200 
          w-[24px] text-center rounded"
          onClick={() => setIsOpen(false)}
        >
          X
        </span>
      </div>

      <div className="py-12 flex flex-col justify-center items-center">
        <h2 className="text-2xl font-bold">新增待辦</h2>
        <div className="mt-8">
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="grid grid-cols-1 gap-[8px] w-[340px]">
              <label className="block ">
                <span className="text-gray-700">標題</span>
                <input
                  type="text"
                  className="
                    mt-1
                    block
                    w-full
                    rounded-md
                    bg-gray-100
                    border-transparent
                    focus:border-gray-500 focus:bg-white focus:ring-0
                  "
                  {...register("title", { required: true })}
                />
              </label>

              <label className="block">
                <span className="text-gray-700">時間</span>
                <input
                  type="date"
                  className="
                    mt-1
                    block
                    w-full
                    rounded-md
                    bg-gray-100
                    border-transparent
                    focus:border-gray-500 focus:bg-white focus:ring-0
                  "
                  {...register("time")}
                  value="2018-07-22"
                />
              </label>
              <label className="block">
                <span className="text-gray-700">詳情描述</span>
                <textarea
                  className="
                    mt-1
                    block
                    w-full
                    rounded-md
                    bg-gray-100
                    border-transparent
                    focus:border-gray-500 focus:bg-white focus:ring-0
                  "
                  rows={3}
                  {...register("info")}
                />
              </label>
              <label className="flex justify-center items-center">
                <input
                  type="submit"
                  className="
                    mt-1
                    block
                    w-full py-[4px]
                    cursor-pointer
                    rounded-md
                    bg-gray-300
                    border-transparent
                    focus:border-gray-500 focus:bg-white focus:ring-0
                  "
                />
              </label>
            </div>
          </form>
        </div>
      </div>
    </Modal>
  );
};

export default TodoModal;