iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
SideProject30

30天製作與眾不同的TodoList吧! 系列

透過擴展TodoList, 來了解學習更多技能。

參賽天數 14 天 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 14

添加修改功能 - 建立彈窗

接下來我們可以為 Todo 添加修改功能。照慣例,我們需要先確認需求。我希望當 user 進行編輯的時候,會彈出一個視窗,其中包含兩個欄位,標題 & 內...

2023-10-09 ‧ 由 LH 分享
DAY 14

添加修改功能 - 修改todo

上一篇進行到透過 useModal 建立彈窗 & 按鍵點擊的時候顯示彈窗。接下來我們需要在彈窗顯示的時候,帶入所點擊的 todo 資料 const ha...

2023-10-09 ‧ 由 LH 分享
DAY 14

登入頁面

到目前為止,我們的功能基本上都已經完成了。現在user可以針對Todo進行各種操作。 新增Todo 查看Todo 更新Todo 刪除Todo已經具備了CRUD...

2023-10-12 ‧ 由 LH 分享
DAY 14

註冊頁面 & 表單驗證 - react form hook

既然有登入畫面那就也會有註冊的畫面,基本上就是把登入的 UI 搬過來改掉參數就可以了。 <form className=&q...

2023-10-12 ‧ 由 LH 分享
DAY 14

表單驗證 - 2

接下來我們透過register,來管理我們的表單 <TextInput label="e-mail" {......

2023-10-12 ‧ 由 LH 分享
DAY 14

表單驗證 - 3 & supabase

最後我們需要處理的是,當表單送出後需要進行那些處理。 <form onSubmit={handleSubmit(onSubmit...

2023-10-12 ‧ 由 LH 分享
DAY 14

使用supabase實現會員功能

首先我們需要安裝 supabase npm install @supabase/supabase-js 接下來建立一個.env-local檔案,env 檔案通...

2023-10-12 ‧ 由 LH 分享

獲取登入後的資料

前面我們已經成功實現會員的登入 & 註冊,接下來就是需要在會員登入後將該會員的資料存進 store 。首先我們會需要建立一個新的 slice ,用於將...

2023-10-16 ‧ 由 LH 分享

讓user可以獲得各自的資料

我們昨天透過建立一個 userSlice 來管理登入的 user 資料,現在我們可以透過剛剛取得的 userId,在獲取資料的時候進行篩選,確保我們在登入之後獲...

2023-10-16 ‧ 由 LH 分享

結語

首先,非常感謝看到最後的各位。 這邊來整理一下整份 todoList 專案我們做了哪些事情。 透過階段性重構,移除多餘的 code , 整合元件邏輯,保證 c...

2023-10-16 ‧ 由 LH 分享