Code Refactor: ConsultationDetails.tsx

[rithviknishad]

ConsultationDetails.tsx contains 1000+ lines of hard-to-maintain code for all the tabs.

• Break each tab into a separate component
• Use object to show current tab.

Currently we are doing

{tab === "UPDATES" && <div>....</div>}
{tab === "FEED" && <div>...</div>}

Instead, we could do something like:

// ConsultationUpdatesTab.tsx

export interface ConsultationTabProps {
  // necessary props received for each tab
}

export default function ConsultationUpdatesTab(props: ConsultationTabProps) {
  return <div>...</div>
}


// ConsultationDetails.tsx

const CONSULTATION_TABS = {
  UPDATES: ConsultationUpdatesTab,
  FEED: ConsultationFeedTab,
  ...
}

...

const SelectedTab = CONSULTATION_TABS[tab];

return <div>
  ...
  <SelectedTab {...necessaryProps} />
  ...
</div>

[nazrul7711]

hey @rithviknishad i would like to work on this

[github-actions]

Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, @aparnacoronasafe, This issue has been automatically marked as stale because it has not had any recent activity.

[thtauhid]

Hi,
If anyone ain't working on this issue now, I'd like to work on it.