refactor: working group page header props and tabs

Joystream · Feb 13, 2024 · 5d69641 · 5d69641
1 parent 9b434c1
commit 5d69641
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 10 deletions.
diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/AboutTab.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/AboutTab.tsx
@@ -77,7 +77,7 @@ export const AboutTab = ({ workingGroup }: Props) => {
           <MarkdownPreview markdown={workingGroup.about || defaultDescription} />
           {handbookLink && (
             <ExternalLinkButtonGhost size="small" href={handbookLink} disabled={false} target="_blank">
-              Learn more from Knowlage Book
+              Learn more from the Handbook
               <LinkSymbol />
             </ExternalLinkButtonGhost>
           )}

diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/WorkingGroup.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/WorkingGroup.tsx
@@ -16,7 +16,7 @@ export const WorkingGroup = () => {
 
   return (
     <PageLayout
-      header={<WorkingGroupPageHeader />}
+      header={<WorkingGroupPageHeader group={group} />}
       main={isLoading || !group ? <Loading /> : <AboutTab workingGroup={group} />}
       sidebar={!isLoading && group && <AboutTabSidebar workingGroup={group} />}
       sidebarScrollable

diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/WorkingGroupHistory.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/WorkingGroupHistory.tsx
@@ -15,7 +15,7 @@ export function WorkingGroupHistory() {
 
   return (
     <PageLayout
-      header={<WorkingGroupPageHeader />}
+      header={<WorkingGroupPageHeader group={group} />}
       main={isLoading || !group ? <Loading /> : <HistoryTab workingGroup={group} />}
       sidebar={!isLoading && group && <HistoryTabSidebar workingGroup={group} />}
       sidebarScrollable

diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/WorkingGroupOpenings.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/WorkingGroupOpenings.tsx
@@ -15,7 +15,7 @@ export function WorkingGroupOpenings() {
 
   return (
     <PageLayout
-      header={<WorkingGroupPageHeader withButtons />}
+      header={<WorkingGroupPageHeader group={group} withButtons />}
       main={isLoading || !group ? <Loading /> : <OpeningsTab workingGroup={group} />}
       sidebar={!isLoading && group && <OpeningsTabSidebar workingGroup={group} />}
       sidebarScrollable

diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/components/WorkingGroupPageHeader.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/components/WorkingGroupPageHeader.tsx
@@ -5,20 +5,19 @@ import { PageHeader } from '@/app/components/PageHeader'
 import { nameMapping } from '@/common/helpers'
 import { CreateOpeningButton } from '@/working-groups/components/CreateOpeningButton'
 import { useMyWorkers } from '@/working-groups/hooks/useMyWorkers'
-import { useWorkingGroup } from '@/working-groups/hooks/useWorkingGroup'
-import { urlParamToWorkingGroupId } from '@/working-groups/model/workingGroupName'
+import { WorkingGroup } from '@/working-groups/types'
 
 import { StatusBadge, StatusGroup } from '../../components/StatusBadges'
 
 import { WorkingGroupTabs } from './WorkingGroupTabs'
 
 interface WorkingGroupPageHeaderProps {
+  group: WorkingGroup | undefined
   withButtons?: boolean
 }
 
-export const WorkingGroupPageHeader = React.memo(({ withButtons = false }: WorkingGroupPageHeaderProps) => {
+export const WorkingGroupPageHeader = React.memo(({ group, withButtons = false }: WorkingGroupPageHeaderProps) => {
   const { name } = useParams<{ name: string }>()
-  const { group } = useWorkingGroup({ name: urlParamToWorkingGroupId(name) })
   const { workers } = useMyWorkers()
   const isLead = useMemo(
     () => group?.isActive && workers.find((w) => w.membership.id === group?.leadId),

diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/components/WorkingGroupTabs.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroup/components/WorkingGroupTabs.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useParams } from 'react-router-dom'
+import { generatePath, useParams } from 'react-router-dom'
 
 import { usePageTabs, TabsDefinition } from '@/app/hooks/usePageTabs'
 import { Tabs } from '@/common/components/Tabs'
@@ -13,7 +13,7 @@ const workingGroupTabs: TabsDefinition[] = [
 
 export const WorkingGroupTabs = () => {
   const { name } = useParams<{ name: string }>()
-  const tabs = usePageTabs(workingGroupTabs.map(([title, path]) => [title, path.replace(':name', name)]))
+  const tabs = usePageTabs(workingGroupTabs.map(([title, path]) => [title, generatePath(path, { name })]))
 
   return <Tabs tabs={tabs} />
 }