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

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

• Drawer.tsx
• Navigation.tsx
• about
• dashboard
• header
• trip #648
• LoginScreen.tsx
• RegisterScreen.tsx
• appearance
• feed
• items
• 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]

• 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]

• 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]

• 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. #540

[taronaleksanian]

:Working on User screen

[taronaleksanian]

Moved User screen logic into custom hooks. #541

[fshah21]

Still working on this: #542. Moving items screen into custom hooks.

[taronaleksanian]

:Working on Settings screen

[taronaleksanian]

Moved Settings screen logic into custom hooks #545

[taronaleksanian]

:Working on Login screen

[taronaleksanian]

Moved Login screen logic into custom hooks #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 #548
I rebased from #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 #550

[taronaleksanian]

:Working on Trip screen

[shewit-gh]

:wroking on feeds

[yangTauTauAjah]

working on "progress" component

[shahzaib-manzoor]

can you kindly provide the branch where that component was done? @shahzi113awan
let me push the code

[shahzaib-manzoor]

can you kindly provide the branch where that component was done? @shahzi113awan
let me push the code

552

[shahzaib-manzoor]

in progress :
map
weather

[taronaleksanian]

in progress : map weather

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

[taronaleksanian]

in progress components:
modal
dialog

[gauthamdas]

working on password-reset

[shahzaib-manzoor]

in Progress :
chat

[yangTauTauAjah]

need to review pull request for progress component #560

[uros-simeunovic]

In progress:

• Avatar.tsx
• GearList.tsx
• ItemRow.tsx

[yangTauTauAjah]

Working on several components:

• trip
• hero
• carousel
• itemtable
• destination

#560

[taronaleksanian]

Refactor modal / dialog component done #564

[taronaleksanian]

working on
custombutton
multistep

[taronaleksanian]

Refactor custom button done #567

[taronaleksanian]

Refactor multistep form done #568

[shewit-gh]

:working on
Components

• footer
• Select
• card

Screen

• items

[taronaleksanian]

working on

skeleton
card
InputText
EditableText
loading-placeholder
ThreeDotsMenu

[taronaleksanian]

Refactor skeleton component done #582

[yangTauTauAjah]

refactor components:

• DuplicateIcon
• Item
• PaginationChooseLimit

[yangTauTauAjah]

refactor components done:

• DuplicateIcon
• Item
• PaginationChooseLimit

#594

[taronaleksanian]

refactor components done

card
EditableText
loading-placeholder
ThreeDotsMenu

#602

[taronaleksanian]

refactor InputText done

#604

[taronaleksanian]

working on

logo
landing_page

[taronaleksanian]

refactor landing_page logo done

landing_page #615
logo #616

[pinocchio-life-like]

I've made progress on this issue. Here's what I've done so far: [Inside Screens -> Appearance Folder]

1. Refactored the AppearanceContainer component to separate concerns into smaller components.
2. Created new components: ThemeSwitch, DemoCard, NativeBaseBox, PaperCard, and KitchenSink.
3. Updated the useAppearance hook to manage the theme state.

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]

[pinocchio-life-like]

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.

[taronaleksanian]

moved auth logic from redux to tanstack-query
#649

[taronaleksanian]

working on
move search state from redux to tanstack-query

[pinocchio-life-like]

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.