Daily report and Meeting note

[tsungtingdu]

2020.09.08 Meeting

Questions:

• 快速 review 今天的程式碼，討論架構上有沒有什麼問題
• 討論 Redux Saga
• 如何客製化 Material UI 的 component
• 討論自動存檔的可行方案

Discussions:

1. Reducer 裡面應該不能使用 async/await，需要確認一下
2. Redux 好處是可以將資料集中管理，但會產生以下問題
   • 集中整個 app 的資料可能會太龐大，不太方便在 Redux Devtool Extenstion 裡面查看
   • 在使用者切換頁面的過程中，會先拿 Redux 當中存在的舊資料，之後才會再 fetch 資料，這會導致畫面跳動，使用者體驗可能不佳
   • 可以用原本 React 的 context 來將集中的資料拆分，但這樣最後是不是只要用 context 就好了？
3. Redux toolkit 可以產出 template，可以參考使用
4. Slice and immutable 可以參考使用
5. 客製化 Material UI 可以參考 這裡
6. HackMD 沒有存檔按鈕，用 DevTool 觀察過後，推測是使用 socket 完成。如果目前專案暫時不用 socket 實作的話，可能解法有
   • onChange 事件觸發後就發出 API request 存檔。request 頻率會太高
   • 透過 debounce 方法降低上述 API request 頻率
   • 透過 setInterval 定時發出 API request 存檔
   • 在偵測到使用者離開頁面前，打 API 存檔。這是應該是最低限度的作法
7. 討論到關於 Redux pattern 與 Context API 取捨，在 Vue 當中沒有類似的問題，因為 Vue 只有 Vuex 可以用，而沒有類似 context API 的替代作法

[tsungtingdu]

2020.09.09 Daily report

Progress

• 程式碼：Feature/signin #5
• 設定好 Saga，完成使用者註冊與登入時的非同步 (fetch APIs) 的動作
• 同步將 JWT token 存入 localStorage
• 客製化 (覆寫) Material UI 的 component，讓畫面跟 HackMD 更為類似

Questions/Ideas/Thoughts

• 目前 Signin/Singup 為兩個頁面，但實際上內容與畫面幾乎一樣，在思考未來可以把它整併在一個 component 裡面
• 目前 Signin/Signup 流程還沒有針對錯誤進行畫面的處理，未來有時間需要補上
• 這兩天透過熟悉的畫面來練習新工具 (Redux, Saga, Material UI) 的使用，之後開發速度需要慢慢提升
• 今天花了一點時間裝了 2-3 個 markdown editors 來玩玩，發現要客製化好像沒有想像中的簡單，需要再花多一點時間研究一下。

[tsungtingdu]

2020.09.10 Daily report

Progress

• 程式碼
  • 6055292: install markdown editor & customise style
  • 017a30d: 完成 create and save post actions
• 使用者點擊 "create a new post" (暫時性的 button) 時，會立即建立空白 post
• 使用者編輯的時候，會即時將內容存放到 localStorage
• 使用者點擊 save 按鈕，會存檔到資料庫

Questions/Ideas/Thoughts

• store 與 local state 要如何分配運用？
• 使用 React route 跳轉頁面的時候，可以讀取 store 資訊，但是如果使用者自行輸入 URL，會找不到 store

[pjchender]

2020.09.10 Daily Comments

1. 前天要跟你說雖然 action 裡面可以直接用 data 屬性來接資料，但一般習慣上會用 payload 這個字，主要是因為 Redux 是根據 Flux 的概念加以實作，而 Flux 對於 Action 有建議撰寫的規範，不需要完全一樣，不過可以再參考看看：

Flux Standard Action

{
  type: 'ADD_TODO',
  payload: {
    text: 'Do something.'  
  }
}

2. 從 reducer 中，你會慢慢發現，不管什麼 type 進來，你做的事都一樣，就是把新的資料覆蓋掉就有的資料：

const postReducer = (state = {}, action) => {
// ...
    case 'CREATE_POST_SUCCESS':
      return {
        ...state,
        ...action.data,
      }
    case 'SAVE_POST_SUCCESS':
      return {
        ...state,
        ...action.data,
      }
// ...
}

有些時候，會直接定義一個 type 為 UPDATE 的 action，然後是該資料要更新就直接 dispatch 它，像是這樣：

const postReducer = (state = {}, action) => {
// ...
    case 'UPDATE':
      return {
        ...state,
        ...action.data,
      }
// ...
}

至於這樣好不好 debug 則見仁見智。另外，還有一種做法是，不要直接使用 ...action.data，而是把需要用的資料先取出來，再給進去，這麼做的好處是可以知道每次到底更新的什麼：

const postReducer = (state = {}, action) => {
// ...
    case 'CREATE_POST_SUCCESS':
      const {foo, bar} = action.data
      return {
        ...state,
        foo,
        bar
      }
// ...
}

3. 錯誤處理的地方未來可以再考慮使用套件產生 alert 來跳出提示
4. 確認一下編輯器有無裝任何 linter 的工具，幫助程式碼的 coding style 統一（例如，單、雙引號），這邊是打算使用 standardJS 的 coding style 嗎？
5. components 資料夾名稱拼錯了喔 conponents
6. 「使用 React route 跳轉頁面的時候，可以讀取 store 資訊，但是如果使用者自行輸入 URL，會找不到 store」指的是使用者重新整理後，store 會被清空的意思嗎？

[tsungtingdu]

2020.09.11 Daily report

Progress

• 程式碼
  • Main page menu bar cbdf5c6
• Fixed componet folder name
• Updated variables in reducers
• Updated part of code style with eslint
• Created protected routes and logout action

Questions/Ideas/Thoughts

• 尚未解決登入後畫面自動跳轉的問題

[tsungtingdu]

2020.09.12 Daily report

Progress

• main code
  • redirect when user signed in successfully: a29330f
  • create widget for switching layout: 64b3bde

Questions/Ideas/Thoughts

• 一開始為了處理跳轉，花了很多時間查詢各種不同的套件，發現有很多各種不同實作的方式與套件，但卻又無法成功執行。覺得 React 技術進步很快，很多 2018 年的做法其實都不太能用了。後來用最簡單的方式實作出來。再次覺得工具或是技巧都只是表面，重點是要瞭解實際上運作的原理。

[tsungtingdu]

2020.09.13 Daily report

Progress:

• main code: dc59cc7

Questions/Ideas/Thoughts

• 今日僅簡單完成切版，下週三以前預計完成第一階段功能，包含
  • 使用者可以建立、查看、修改 post
  • 使用者可以 publish a post，讓非使用者可以直接看到
  • 使用者可以調整 post panel 的 layout 與排序方式
  • 自動存擋，離線編輯功能

[tsungtingdu]

2020.09.13 Daily report

Progress:

• main code
  • dcdbf8a 完成 Row (list) view
  • e662345 bd151da 76c6bf7 ef18d80 完成主頁面上的 layout, sorting, dataset (my posts or collaborative posts) 的切換功能
  • 406c855 點擊畫面上的 card 即可在編輯器當中瀏覽 post

Questions/Ideas/Thoughts

• 畫面跳轉和 fetch api 並不同步，導致畫面先變化、晚點資料進來之後又再變化一次。這也才瞭解為什麼要處理資料 loading 的狀態
• 目前還沒有完成
  • 自動生成 post title
  • 主畫面上 post 卡片當中的 "changed" 時間
  • post 刪除功能
  • post 的 view only mode
  • 重新載入主頁面， layout 設定會消失
  • 錯誤訊息通知
  • publish post 功能
  • 離線編輯/連線狀態偵測

---

[tsungtingdu]

2020.09.15 Meeting

Questions

• 關於 Redux Persist 的使用
• Components 的拆分
• Store 與 states 的管理

Discussions:

• Redux Persist
  • 首先，刷新頁面後被登出，跟有沒有使用 Redux Persist 沒有關係。可以透過 auth 的來管理登入狀態：進入任何路由之前，都需要通過 auth
  • Redux Persist 是將 store 的資料存在 localStorage 當中，好處是提取資料快，但缺點是
    • 需要處理同步 localStorage and 資料庫中的資料
    • 增加 debug 的難度
• Store and state
  • 將所有資料放到 store、讓所有 components 直接從 store 提取資料也不見得是好事。有些 component 從父層取資料比較直接
• Styled component
  • 目前有使用 SCSS 來處理 global 與第三方套件的樣式，但其實都可以用 styled component 來做
  • 在使用的時候，可以把 components 當中的內容切得更小，形成更小的 components，方便未來帶入 props 使用
• Components
  • 通常大家共用的組件會叫做 components，有獨立功能的組件叫做 module。一個 module 底下可能會有專用的 component
• 變數命名
  • 需要整理一下 Store, Saga, Reducer, Action 當中的變數名稱

[tsungtingdu]

2020.09.15 Daily report

Progress

• 39acbcc 加入 loading spinning
• ef42909 自動根據內容產生標題
• bec3488 完成刪除功能
• abc783d 完成 signin/signup 的重新導向，在 sign out 的時候清除 store 資料
• 165e278 顯示最近的修改時間
• ac03b09 根據 updatedAt 時間排序

Questions/Ideas/Thoughts

• 先專注功能的完整性，再回頭處理程式碼的細節。需要調整的地方，如上方 meeting note 所提及

[tsungtingdu]

2020.09.16 Daily report

Progress

• c30e0ce 每次頁面跳轉時，重新驗證使用者並抓取資料存在 store 當中
• bf4bcad deploy to github page
• c81579a auto save
• ef0b06c key word search

Questions/Ideas/Thoughts

• 目前僅用 token 來驗證使用者，因為 fetch api 會遇到非同步的問題

[tsungtingdu]

2020.09.21 Daily report

Progress

• 361a785, a57fa8f 重新設定 Eslint 並開啟 autofix on save 的功能
• 開了 feature/socket 分支，同步開發前後端 socket 的功能。尚未推上 GitHub

Questions/Ideas/Thoughts

• eslint errors #10 這裡記錄下 Eslint 提出的問題，需要找機會研究一下
• 正在研究 socket 如何得到其他使用者的游標位置

[tsungtingdu]

2020.09.22 Daily report

Progress

• 後端：tsungtingdu/hackmd_clone_api_server@c3c3a70
• 前端：
  • 4c82c2b create temp route, api, page for socket
  • 9a29e66 show online users in editor
  • a4f533e rewrite auth

Questions/Ideas/Thoughts

• 在 react 當中跳轉到編輯器頁面，只會渲染畫面，並不會真正建立 socket 連線，手動放入 URL 才會建立連線。因此需要再思考一下運作原理

[tsungtingdu]

2020.09.23 Daily report

Progress

完成 socket 架構

• 後端：tsungtingdu/hackmd_clone_api_server@de24fc8
• 前端：1881356

Questions/Ideas/Thoughts

• 昨天遇到問題，我想是當組件重新渲染的時候，socket 就會斷線。所以我把建立 socket 連線的功能搬回到編輯器當中。每當編輯器組件被渲染，就會重新跟 socket 連線並進入特定的 room
• 上線後發現使用者體驗有點卡，目前有兩個 setInput 的來源：onChange 和 socket message，在時間與更新資料上會有衝突，需要想辦法解決。

---

21:30 Update

• 前端：e8b274f 透過 debounce 降低來自 socket 資料的更新，減少卡頓發生的機會

多人編輯測試資料：
user1@gmail.com / 12345678 -> My Notes -> Hello socket!
user2@gmail.com / 12345678 -> Collaborative Notes -> Hello socket!

[tsungtingdu]

2020.09.24 Daily report

Progress

• 69b3f37 完成 publish/unpublish 功能

Questions/Ideas/Thoughts

• 花了不少時間研究如何定位 caret，但後來發現水有點深，所以先暫停。決定先把其他 features 做完

[tsungtingdu]

2020.09.25 Daily report

Progress

• 69b3f37 設定 post 的狀態 (public or private)
• e602ee1 邀請/移除共筆者（目前只有 owner 可以操作）

Questions/Ideas/Thoughts

• 取太多資料讓 component 會 render 太多次，造成 react 發生錯誤

[tsungtingdu]

2020.09.27 Meeting

Questions:

• 如何讓子組件撐開父組件高度
• app 疑似 render 太多次導致 crash

Discussions:

• 子組件不設定高度，就可以撐開父組件
• app 之所以 crash 可能跟資料的相依性有關，需要調查一下
• useRef 當中通常會放常數，常數不會變動；useCallback 裡面會放 function，但有可能隨著 dependency 的設定而變動
• 如果要將 app 繼續放在 Git page 上，需要使用 Hash router
• 關於 form event: e602ee1#r42754541
• 關於三元運算子的替代寫法：e602ee1#r42728393
• 關於狀態的切換，可以利用 prevState 來做：e602ee1#r42728317
• 待研究的內容：
  • e602ee1#r42728279
  • 69b3f37#r42728141
  • a4f533e#r42728864

[tsungtingdu]

2020.09.28 Daily report

Progress

• c214a50 use hash router
• 1395533 非 owner 無法刪除文章、無法邀請他人加入
• 3654437 create a public page for public (published) post for non-login user

Questions/Ideas/Thoughts

• 目前的公開頁面，如果有使用者正在編輯，不會被同步更新

---

[Left] owner view / [Right] collaborator view

[Left] editing page for signed in user / [Right] public page for non-login user

[tsungtingdu]

2020.09.29 Daily report

Progress

• d5dcd36 解決表單卡住的問題 (reference)
• e2070da 客製化 toastify
• fa1395f, 4d81d11, 10ef874 create notifications
• 8d1b100 update README

[tsungtingdu]

2020.09.30 Daily report

Progress

• 03cfb17 解決按一次 enter 在 preview 不會換行的問題。但目前變成在 editor 一次換兩行
• 200d995 解決 caret 跟隨 socket input 亂跑的問題。目前 caret 會停在上一次使用者 input 的地方

Questions/Ideas/Thoughts

• 接下來的時間（到 2020.10.04前）會放在優化程式碼與修復 bug 上

[tsungtingdu]

2020.10.01 Meeting

• 進度回報
• 計畫用最後的時間優化程式碼

--

14:10 Update

• 發現其實 editor 沒有辦法做到兩人同時共筆。決定用最後的時間 (到 10/05 前) 解決這個問題

[tsungtingdu]

2020.10.03 Daily report

Progress

Backend

• tsungtingdu/hackmd_clone_api_server@0e2843f 嘗試使用 diff-match-patch
• tsungtingdu/hackmd_clone_api_server@d8e0cd8 完成 diff-match-patch 修正

Frontend

• 5790820 嘗試使用 diff-match-patch
• 48f0b0c 完成 diff-match-patch 修正
• ec403a1 鎖住 local caret 位置

Questions/Ideas/Thoughts

• 在 10/05 前用最後的時間完成挑戰，專案也算是完成了一個里程碑了