-
Notifications
You must be signed in to change notification settings - Fork 36
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Frontend - Separate Business Logic from UI #529
Comments
:Working on Pack |
Let's take this in phases like the following:
|
initial work on search input is done. still need to fix state logic after phase 1, still going through store |
Added list of components to issue FYI, let's track what has been done and what is still pending |
I'll have to rebase the SearchInput performance PR on this. Ps: i'm almost done with the feed's VirtualList performance fix with tamagui and tanstack |
yes that would be great to rebase that, thanks. most of your logic should move over to the hook smoothly, i think we just need to update the on change handler and useRef in component side now |
Moved about screen and appearance screen logic into custom hooks. https://github.com/andrew-bierman/PackRat/pull/537/files |
:Working on Dashboard |
Moved dashboard screen logic into custom hooks. #540 |
:Working on User screen |
Moved User screen logic into custom hooks. #541 |
Still working on this: #542. Moving items screen into custom hooks. |
:Working on Settings screen |
Moved Settings screen logic into custom hooks #545 |
:Working on Login screen |
Moved Login screen logic into custom hooks #546 |
:Working on Register screen |
in progress |
:Working on Navigation / Drawer screen |
One thing I noticed as well, we have a couple primitive ui elements still in our /components folder, ie dropdown, modal, etc. that should probably be handled via @packrat/ui (packages/ui). The goal is all our base ui components live in the package, and the components in /client are the more complete pieces to go along with the new logic hooks. Component = Primitive ui elements + logic from hooks, essentially. |
Additionally, every file in /hooks or /components should be in their own folders ie /components/packs and hooks/packs. Just to make it more scalable going forward as we add more features. |
Moved Navigation and Drawer screen logic into custom hooks #550 |
:Working on Trip screen |
:wroking on feeds |
working on "progress" component |
|
|
in progress : |
I went through the code and noticed that weather and map are necessary for creating trips so I think I can switch to another tasks, while you are working on them |
in progress components: |
working on password-reset |
in Progress : |
need to review pull request for progress component #560 |
In progress:
|
Working on several components:
|
Refactor modal / dialog component done #564 |
working on |
Refactor custom button done #567 |
Refactor multistep form done #568 |
:working on
Screen
|
working on skeleton |
Refactor skeleton component done #582 |
refactor components:
|
refactor components done:
|
refactor components done card |
refactor InputText done |
working on logo |
I've made progress on this issue. Here's what I've done so far: [Inside Screens -> Appearance Folder]
I'm currently working on trip components inside screens. I'll continue to update this issue as I make more progress. Here's the commit with my changes: [commit 4ab6099] |
Done Refactoring TripDetailsComponent From inside Trip Folder inside screens: Here's the commit with my changes: [commit 7e35339] Please review and if you have suggestions let me know. |
moved auth logic from redux to tanstack-query |
working on |
Done refactoring about page. Separated the Created a new component and imported into index.js and took out the style on page to different file and imported into index.js. Also I noticed some error with my last commit and did some update as well. So, for those working on this issue please review and update accordingly. |
Our frontend code has grown to be quite messy. Let's fix this.
Some of this will be fixed with the tamagui PR, which implements a ui package to handle our primitives.
The next step is to refactor our components and screens folders to remove all business logic, and place that logic within custom hooks.
Here is a great example of how to do this: https://x.com/_georgemoller/status/1739644203867464091?s=46&t=BIQs8xeH5ZAzltdKl3PARg
Also https://stackoverflow.com/questions/69332889/reactjs-separation-of-ui-and-business-logic
https://javascript.plainenglish.io/use-custom-hook-to-separate-logic-ui-in-react-efbe3b4b423a
Next Steps
Phases:
State Management Improvements
Known Areas That Need Improvement (WIP)
Components
Click to expand the checklist
Note, all of these should be in folders. The files in root of components should be moved to their own folders while we do this. All primitive ui elements should be coming from our packages/ui folder.
Screens
Click to expand the checklist
Note, all of these should be in folders. The files in root of components should be moved to their own folders while we do this. All primitive ui elements should be coming from our packages/ui folder.
Please keep track of components in progress below, so that we do not overlap work.
The text was updated successfully, but these errors were encountered: