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.