Break up organization-related state from global state

To break down the monolithic PortalContext context, we must extract the organization-related state from it.

Certain organization-related states should remain global, while others should be localized to their own components.

How it looks now

Currently, the PortalContext looks like this (I am only listing organization-related states):

• orgId and setOrgId

  • Used by: Preview Feature, Dashboard, and virtually every other portal page
  • Should remain a global state

• orgInfo and setOrgInfo

  • Used by: Preview Feature, Dashboard, and virtually every other portal page

• isFetchingOrgInfo and setIsFetchingOrgInfo

  • Used by: Preview Feature, Dashboard, and virtually every other portal page

• orgRepData and setOrgRepData

  • Used by: Dashboard Homepage
  • Should be part of the dashboard homepage state or whatever component the data is consumed by.

• currentLinks and setCurrentLinks

  • Used by: Edit organization form
  • Should be part of the Edit Organization page/form state

How global state for organizations should look

const { isLoading, organization, changeOrganization } = useOrganizationStore();

We should simplify the interface from 10 returned values to 3.

organization should contain orgId and orgInfo in one model.

isLoading should contain the loading state. (Although, perhaps there is a better pattern than this...)

changeOrganization will utilize a reducer to modify the organization state. This would improve having a bunch of setters, which can lead to awkward in-between states (e.g., orgId changed, but orgInfo is stale and out of sync.)

e.g.

changeOrganization(656);

Will update isLoading to true and organization to null. After the data has been fetched, isLoading will be false and organization will roughly be:

{
  organizationId: 656,
  name: 'IBM',
  ...etc,
}