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

• 程式碼：https://github.com/tsungtingdu/hackmd_clone_react/pull/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

• 程式碼
  • https://github.com/tsungtingdu/hackmd_clone_react/commit/60552925480635107d1e4e9cc85867f03c8f9de9: install markdown editor & customise style
  • https://github.com/tsungtingdu/hackmd_clone_react/commit/017a30d2a5cbc66a0d0d2244f9eacd7fe869ff85: 完成 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 https://github.com/tsungtingdu/hackmd_clone_react/commit/cbdf5c64d7421544da950b54b16cf97fb7abdf26
• 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: https://github.com/tsungtingdu/hackmd_clone_react/commit/a29330f8a40bd0170fb1a63203bf1be811aa4596
  • create widget for switching layout: https://github.com/tsungtingdu/hackmd_clone_react/commit/64b3bde30bab6a7775fe14a9775920a0f154e937

Questions/Ideas/Thoughts

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

[tsungtingdu]

2020.09.13 Daily report

Progress:

• main code: https://github.com/tsungtingdu/hackmd_clone_react/commit/dc59cc76e9105b184244efd60c754c484d99cc04

Questions/Ideas/Thoughts

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

[tsungtingdu]

2020.09.13 Daily report

Progress:

• main code
  • https://github.com/tsungtingdu/hackmd_clone_react/commit/dcdbf8a54174405b03a8ac5182e6e32b4f59aaa1 完成 Row (list) view
  • https://github.com/tsungtingdu/hackmd_clone_react/commit/e662345596f02be69074ec6940d64b53109c4b69 https://github.com/tsungtingdu/hackmd_clone_react/commit/bd151daddcf0874d54396e6fdaa1422a83f28c51 https://github.com/tsungtingdu/hackmd_clone_react/commit/76c6bf7364bab3075959fe8c41ac73a01cf414e7 https://github.com/tsungtingdu/hackmd_clone_react/commit/ef18d804ad68cf1ea624f163cf568c650cbc20f9 完成主頁面上的 layout, sorting, dataset (my posts or collaborative posts) 的切換功能
  • https://github.com/tsungtingdu/hackmd_clone_react/commit/406c85533610fe9799c6a49f01e58131266505d7 點擊畫面上的 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

• https://github.com/tsungtingdu/hackmd_clone_react/commit/39acbcc52bdfe8496f9bba38194115199ee69643 加入 loading spinning
• https://github.com/tsungtingdu/hackmd_clone_react/commit/ef429098d777467086d56739c12da091a5fe935f 自動根據內容產生標題
• https://github.com/tsungtingdu/hackmd_clone_react/commit/bec3488638e1acac338dd169a779a5bf3c8eb683 完成刪除功能
• https://github.com/tsungtingdu/hackmd_clone_react/commit/abc783d9f019d53546f5c2ce28d0017857a50af2 完成 signin/signup 的重新導向，在 sign out 的時候清除 store 資料
• https://github.com/tsungtingdu/hackmd_clone_react/commit/165e27813116ad01dc65b8d3a31d3b61e69018c6 顯示最近的修改時間
• https://github.com/tsungtingdu/hackmd_clone_react/commit/ac03b098ef1ea654b6aaf03597f20ef93d35f5fd 根據 updatedAt 時間排序

Questions/Ideas/Thoughts

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

[tsungtingdu]

2020.09.16 Daily report

Progress

• https://github.com/tsungtingdu/heymd/commit/c30e0cef93a348e9250521770f2cd6c77b7043ca 每次頁面跳轉時，重新驗證使用者並抓取資料存在 store 當中
• https://github.com/tsungtingdu/heymd/commit/bf4bcadaa9638e40af362b432b406d75c9c31e78 deploy to github page
• https://github.com/tsungtingdu/heymd/commit/c81579a8e629f56a1c19915ab5e84ed0b1780edf auto save
• https://github.com/tsungtingdu/heymd/commit/ef0b06c38ab3199630de9e86ed9e8bb6f6046b3b key word search

Questions/Ideas/Thoughts

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

[tsungtingdu]

2020.09.21 Daily report

Progress

• https://github.com/tsungtingdu/heymd/commit/361a78584a49b3de02ef73c2e5fd5dc6e106ef8e, https://github.com/tsungtingdu/heymd/commit/a57fa8f157bbdd12009e45a3b351e131f992440d 重新設定 Eslint 並開啟 autofix on save 的功能
• 開了 feature/socket 分支，同步開發前後端 socket 的功能。尚未推上 GitHub

Questions/Ideas/Thoughts

• https://github.com/tsungtingdu/heymd/issues/10 這裡記錄下 Eslint 提出的問題，需要找機會研究一下
• 正在研究 socket 如何得到其他使用者的游標位置

[tsungtingdu]

2020.09.22 Daily report

Progress

• 後端：https://github.com/tsungtingdu/hackmd_clone_api_server/commit/c3c3a709db6c9ceb0983f71e138e8739cdd935bf
• 前端：
  • https://github.com/tsungtingdu/heymd/commit/4c82c2bddd7ed07431cc52c1eb98a4062bc5ed9e create temp route, api, page for socket
  • https://github.com/tsungtingdu/heymd/commit/9a29e660601d5cf7b9a0d6f139e63da973e7b49d show online users in editor
  • https://github.com/tsungtingdu/heymd/commit/a4f533e0d8cba77f7bdb62f6f1485f5d8da33ac2 rewrite auth

Questions/Ideas/Thoughts

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

[tsungtingdu]

2020.09.23 Daily report

Progress

完成 socket 架構

• 後端：https://github.com/tsungtingdu/hackmd_clone_api_server/commit/de24fc81566168819844c4b46dc43dffeb5ff284
• 前端：https://github.com/tsungtingdu/heymd/commit/1881356284b7fe8d677253543e88ad1e09526baa

Questions/Ideas/Thoughts

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

---

21:30 Update

• 前端：https://github.com/tsungtingdu/heymd/commit/e8b274f473a9cd9e21975bbb4f075ff1b41177ed 透過 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

• https://github.com/tsungtingdu/heymd/commit/69b3f37a7424f1422b59c1dc0fe888ae95ddb77c 完成 publish/unpublish 功能

  Questions/Ideas/Thoughts

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

[tsungtingdu]

2020.09.25 Daily report

Progress

• https://github.com/tsungtingdu/heymd/commit/69b3f37a7424f1422b59c1dc0fe888ae95ddb77c 設定 post 的狀態 (public or private)
• https://github.com/tsungtingdu/heymd/commit/e602ee1360d54284d3556e9ef5888d5872ad4af0 邀請/移除共筆者（目前只有 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: https://github.com/tsungtingdu/heymd/commit/e602ee1360d54284d3556e9ef5888d5872ad4af0#r42754541
• 關於三元運算子的替代寫法：https://github.com/tsungtingdu/heymd/commit/e602ee1360d54284d3556e9ef5888d5872ad4af0#r42728393
• 關於狀態的切換，可以利用 prevState 來做：https://github.com/tsungtingdu/heymd/commit/e602ee1360d54284d3556e9ef5888d5872ad4af0#r42728317
• 待研究的內容：
  • https://github.com/tsungtingdu/heymd/commit/e602ee1360d54284d3556e9ef5888d5872ad4af0#r42728279
  • https://github.com/tsungtingdu/heymd/commit/69b3f37a7424f1422b59c1dc0fe888ae95ddb77c#r42728141
  • https://github.com/tsungtingdu/heymd/commit/a4f533e0d8cba77f7bdb62f6f1485f5d8da33ac2#r42728864

[tsungtingdu]

2020.09.28 Daily report

Progress

• https://github.com/tsungtingdu/heymd/commit/c214a50c3a745bf444840e370fc39799ba2bd531 use hash router
• https://github.com/tsungtingdu/heymd/commit/1395533d9abe7073c3b33c1d7dd5c5f49bef76a0 非 owner 無法刪除文章、無法邀請他人加入
• https://github.com/tsungtingdu/heymd/commit/3654437cfa6736498e197a93dc70dc7a0808039d 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

• https://github.com/tsungtingdu/heymd/commit/d5dcd3657065e889937e40ac736cd235bfc84667 解決表單卡住的問題 (reference)
• https://github.com/tsungtingdu/heymd/commit/e2070da06300665972a02f847434c51dee9d6926 客製化 toastify
• https://github.com/tsungtingdu/heymd/commit/fa1395f77e2a85edbae4a856ceb2b7367d4b29fc, https://github.com/tsungtingdu/heymd/commit/4d81d117d52be095b25c8bbef3840697b5078642, https://github.com/tsungtingdu/heymd/commit/10ef874a0fabf89b1d644248fe804ccd1b2bb980 create notifications
• https://github.com/tsungtingdu/heymd/commit/8d1b10030f0aa0e31bfc10e46114607be67dfee2 update README

[tsungtingdu]

2020.09.30 Daily report

Progress

• https://github.com/tsungtingdu/heymd/commit/03cfb17f0aa66cb947a8295b922b1e6b3bbe727c 解決按一次 enter 在 preview 不會換行的問題。但目前變成在 editor 一次換兩行
• https://github.com/tsungtingdu/heymd/commit/200d9950ad3044fafba0a688eb1639a893db2ea4 解決 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

• https://github.com/tsungtingdu/hackmd_clone_api_server/commit/0e2843fdb5ea1ee8eed2d2a6dd621d56f95a232c 嘗試使用 diff-match-patch
• https://github.com/tsungtingdu/hackmd_clone_api_server/commit/d8e0cd8797b429c625daf26aac20ace8ce1d76da 完成 diff-match-patch 修正

Frontend

• https://github.com/tsungtingdu/heymd/commit/57908209ab94fcb4a89531216ee013e930598ebf 嘗試使用 diff-match-patch
• https://github.com/tsungtingdu/heymd/commit/48f0b0c77f39aa64d266eeecc4288eeba7ce3efe 完成 diff-match-patch 修正
• https://github.com/tsungtingdu/heymd/commit/ec403a160d9ecd8cf49e94ce5b32e2c6704a0ad5 鎖住 local caret 位置

Questions/Ideas/Thoughts

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