Frontend - Separate Business Logic from UI

[andrew-bierman]

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:

• [ ] Moving current component logic to custom hooks
• [ ] Improving current component logic, removing unnecessary redux logic in favor of standard use state or jotai - I'm thinking for things like search, weather, createTrip etc. not everything needs to move out of redux immediately.

State Management Improvements

Known Areas That Need Improvement (WIP)

• [ ] Search - does not need to be global, can handle with useState in custom hook i think
• [ ] Weather - does not need to be global, can handle with useState in custom hook i think
• [ ] Create Trip - does not need to be global, can handle with useState OR Jotai in custom hook i think

Components

Click to expand the checklist

• [x] Avatar.tsx
• [x] ThreeDotsMenu
• [x] footer
• [x] pack_table
• [x] Dropdown.tsx
• [x] TripCard.tsx
• [x] hero
• [x] paginationChooseLimit
• [x] DuplicateIcon
• [x] Water.tsx
• [x] inventory
• [x] password-reset
• [x] EditableText
• [x] card
• [x] item
• [x] progress
• [x] GearList.tsx
• [x] carousel
• [x] itemtable
• [x] select
• [x] InputText
• [x] chat
• [x] landing_page
• [x] skeleton
• [x] ItemRow.tsx
• [x] custombutton
• [x] loading-placeholder
• [x] trip
• [x] Loader.tsx
• [x] dashboard
• [x] logo
• [x] user
• [x] PackOptions
• [x] destination
• [x] map
• [x] weather
• [x] ScoreContainer.tsx
• [x] details
• [x] modal
• [x] SearchInput.tsx
• [x] dialog
• [x] multi_step
• [x] SummaryCard.tsx
• [x] feed
• [x] pack

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

• [x] Drawer.tsx
• [x] Navigation.tsx
• [x] about
• [x] dashboard
• [x] header
• [x] #648
• [x] LoginScreen.tsx
• [x] RegisterScreen.tsx
• [x] appearance
• [x] feed
• [x] items
• [x] user

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.

[shahzaib-manzoor]

:Working on Pack Fixing breaking of code and refactor

[andrew-bierman]

Let's take this in phases like the following:

• [ ] Moving current component logic to custom hooks
• [ ] Improving current component logic, removing unnecessary redux logic in favor of standard use state or jotai - I'm thinking for things like search, weather, createTrip etc. not everything needs to move out of redux immediately.

[andrew-bierman]

• [x] search input

initial work on search input is done. still need to fix state logic after phase 1, still going through store

[andrew-bierman]

Added list of components to issue FYI, let's track what has been done and what is still pending

[yasTheDreamer]

• [x] search input

initial work on search input is done. still need to fix state logic after phase 1, still going through store

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

[andrew-bierman]

• [x] search input

initial work on search input is done. still need to fix state logic after phase 1, still going through store

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

[fshah21]

Moved about screen and appearance screen logic into custom hooks. https://github.com/andrew-bierman/PackRat/pull/537/files

[taronaleksanian]

:Working on Dashboard

[taronaleksanian]

Moved dashboard screen logic into custom hooks. https://github.com/andrew-bierman/PackRat/pull/540

[taronaleksanian]

:Working on User screen

[taronaleksanian]

Moved User screen logic into custom hooks. https://github.com/andrew-bierman/PackRat/pull/541

[fshah21]

Still working on this: https://github.com/andrew-bierman/PackRat/pull/542. Moving items screen into custom hooks.

[taronaleksanian]

:Working on Settings screen

[taronaleksanian]

Moved Settings screen logic into custom hooks https://github.com/andrew-bierman/PackRat/pull/545

[taronaleksanian]

:Working on Login screen

[taronaleksanian]

Moved Login screen logic into custom hooks https://github.com/andrew-bierman/PackRat/pull/546

[taronaleksanian]

:Working on Register screen

[shahzaib-manzoor]

in progress components: [pack_table, Dropdown.tsx, TripCard.tsx]

[taronaleksanian]

Moved Register screen logic into custom hooks https://github.com/andrew-bierman/PackRat/pull/548 I rebased from https://github.com/andrew-bierman/PackRat/pull/546

[taronaleksanian]

:Working on Navigation / Drawer screen

[andrew-bierman]

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.

[andrew-bierman]

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.

[taronaleksanian]

Moved Navigation and Drawer screen logic into custom hooks https://github.com/andrew-bierman/PackRat/pull/550

[taronaleksanian]

:Working on Trip screen

[shewit-gh]

:wroking on feeds

[yangTauTauAjah]

working on "progress" component

[gauthamdas]

working on ScoreContainer.tsx

[taronaleksanian]

@shahzi113awan I'm working on trip screen, I saw you are working on the Tripcard component, did you finish it?, or if you haven't started yet can I take it?

[shahzaib-manzoor]

@shahzi113awan I'm working on trip screen, I saw you are working on the Tripcard component, did you finish it?, or if you haven't started yet can I take it? it's done already

[shahzaib-manzoor]

@taronaleksanian can you please mark checked the items which you have done , so we don't need to search through comments