[PR #65] [MERGED] convert class component to functional component + other improvements #72

New issue

Closed

opened 2026-03-03 01:21:30 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 01:21:30 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cs01/termpair/pull/65
Author: @cs01
Created: 7/19/2021
Status: ✅ Merged
Merged: 7/19/2021
Merged by: @cs01

Base: master ← Head: cs01/functional-component

📝 Commits (4)

e2a212a add more types
8910ffe convert react class component to functional component
23d58f5 update changelog
4beace9 fix mypy

📊 Changes

7 files changed (+344 additions, -201 deletions)

View changed files

📝 CHANGELOG.md (+6 -1)
📝 termpair/frontend_src/package.json (+6 -1)
📝 termpair/frontend_src/src/App.tsx (+288 -182)
📝 termpair/frontend_src/src/index.css (+4 -0)
📝 termpair/frontend_src/yarn.lock (+22 -0)
📝 termpair/main.py (+1 -1)
📝 termpair/server.py (+17 -16)

📄 Description

I have added an entry to CHANGELOG.md

Summary of changes

The main app is a class component which uses componentDIdMount. This PR switches to using a functional component with hooks. This design change made the codebase more clear, and I ended up improving the way websocket events and status updates are changed.
Also added a toast system to display events to user. Various connection events are displayed in toasts.
Filled out more typescript types, caught some bugs, and further improved the codebase

Test plan

Tested by running

yarn build
nox -s serve
# in other terminal
nox -s broadcast

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cs01/termpair/pull/65 **Author:** [@cs01](https://github.com/cs01) **Created:** 7/19/2021 **Status:** ✅ Merged **Merged:** 7/19/2021 **Merged by:** [@cs01](https://github.com/cs01) **Base:** `master` ← **Head:** `cs01/functional-component` --- ### 📝 Commits (4) - [`e2a212a`](https://github.com/cs01/termpair/commit/e2a212a9f04577cf5342d710773bea1140bd6677) add more types - [`8910ffe`](https://github.com/cs01/termpair/commit/8910ffee6ef3b473b3da6eb10edb4e6fd30ae965) convert react class component to functional component - [`23d58f5`](https://github.com/cs01/termpair/commit/23d58f5cd4de66134fe126994ba54d7c5ca2f6c1) update changelog - [`4beace9`](https://github.com/cs01/termpair/commit/4beace97a8f20b0ac606ea3e321ef3fc2759041d) fix mypy ### 📊 Changes **7 files changed** (+344 additions, -201 deletions) <details> <summary>View changed files</summary> 📝 `CHANGELOG.md` (+6 -1) 📝 `termpair/frontend_src/package.json` (+6 -1) 📝 `termpair/frontend_src/src/App.tsx` (+288 -182) 📝 `termpair/frontend_src/src/index.css` (+4 -0) 📝 `termpair/frontend_src/yarn.lock` (+22 -0) 📝 `termpair/main.py` (+1 -1) 📝 `termpair/server.py` (+17 -16) </details> ### 📄 Description  * [x] I have added an entry to `CHANGELOG.md` ## Summary of changes * The main app is a class component which uses `componentDIdMount`. This PR switches to using a functional component with hooks. This design change made the codebase more clear, and I ended up improving the way websocket events and status updates are changed. * Also added a toast system to display events to user. Various connection events are displayed in toasts. * Filled out more typescript types, caught some bugs, and further improved the codebase ## Test plan  Tested by running ``` yarn build nox -s serve # in other terminal nox -s broadcast ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>