Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/ Consoles - Extract console tabs into components #2189

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
+360 −469
Open

Feature/ Consoles - Extract console tabs into components #2189

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
02eed45
refactor console tabs
xkopenreview Nov 29, 2024
d40abe1
update test
xkopenreview Nov 29, 2024
101686b
Merge branch 'master' into feature/extract-console-tab
xkopenreview Dec 3, 2024
71f178a
Merge branch 'master' into feature/extract-console-tab
xkopenreview Dec 19, 2024
666eb68
Merge branch 'master' into feature/extract-console-tab
xkopenreview Feb 19, 2025
9e799b5
remove redundant state update
xkopenreview Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 26 additions & 73 deletions components/webfield/AreaChairConsole.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useContext, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import WebFieldContext from '../WebFieldContext'
import BasicHeader from './BasicHeader'
import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../Tabs'
import Table from '../Table'
import ErrorDisplay from '../ErrorDisplay'
import NoteSummary from './NoteSummary'
Expand All @@ -31,6 +30,7 @@ import LoadingSpinner from '../LoadingSpinner'
import ConsoleTaskList from './ConsoleTaskList'
import { getProfileLink } from '../../lib/webfield-utils'
import { formatProfileContent } from '../../lib/edge-utils'
import ConsoleTabs from './ConsoleTabs'

const SelectAllCheckBox = ({ selectedNoteIds, setSelectedNoteIds, allNoteIds }) => {
const allNotesSelected = selectedNoteIds.length === allNoteIds?.length
Expand Down Expand Up @@ -181,9 +181,7 @@ const AreaChairConsole = ({ appContext }) => {
const { setBannerContent } = appContext
const [acConsoleData, setAcConsoleData] = useState({})
const [selectedNoteIds, setSelectedNoteIds] = useState([])
const [activeTabId, setActiveTabId] = useState(
decodeURIComponent(window.location.hash) || `#assigned-${pluralizeString(submissionName)}`
)
const [activeTabId, setActiveTabId] = useState(null)
const [sacLinkText, setSacLinkText] = useState('')

const edgeBrowserUrl = proposedAssignmentTitle
Expand Down Expand Up @@ -789,19 +787,6 @@ const AreaChairConsole = ({ appContext }) => {
getSACLinkText()
}, [acConsoleData.sacProfiles])

useEffect(() => {
const validTabIds = [
`#assigned-${pluralizeString(submissionName ?? '').toLowerCase()}`,
...(secondaryAreaChairName ? [`#${secondaryAreaChairUrlFormat}-assignments`] : []),
`#${areaChairUrlFormat}-tasks`,
]
if (!validTabIds.includes(activeTabId)) {
setActiveTabId(`#assigned-${pluralizeString(submissionName ?? '').toLowerCase()}`)
return
}
router.replace(activeTabId)
}, [activeTabId])

const missingConfig = Object.entries({
header,
group,
Expand Down Expand Up @@ -834,62 +819,30 @@ const AreaChairConsole = ({ appContext }) => {
title={header?.title}
instructions={`${headerInstructions}${sacLinkText}`}
/>

<Tabs>
<TabList>
<Tab
id={`assigned-${pluralizeString(submissionName).toLowerCase()}`}
active={
activeTabId === `#assigned-${pluralizeString(submissionName).toLowerCase()}`
? true
: undefined
}
onClick={() =>
setActiveTabId(`#assigned-${pluralizeString(submissionName).toLowerCase()}`)
}
>
Assigned {pluralizeString(submissionName)}
</Tab>
{secondaryAreaChairName && (
<Tab
id={`${secondaryAreaChairUrlFormat}-assignments`}
active={
activeTabId === `#${secondaryAreaChairUrlFormat}-assignments`
? true
: undefined
}
onClick={() => setActiveTabId(`#${secondaryAreaChairUrlFormat}-assignments`)}
>
{getSingularRoleName(prettyField(secondaryAreaChairName))} Assignments
</Tab>
)}
<Tab
id={`${areaChairUrlFormat}-tasks`}
active={activeTabId === `#${areaChairUrlFormat}-tasks` ? true : undefined}
onClick={() => setActiveTabId(`#${areaChairUrlFormat}-tasks`)}
>
{getSingularRoleName(prettyField(areaChairName))} Tasks
</Tab>
</TabList>

<TabPanels>
<TabPanel id={`assigned-${pluralizeString(submissionName).toLowerCase()}`}>
{activeTabId === `#assigned-${pluralizeString(submissionName).toLowerCase()}` &&
renderTable()}
</TabPanel>
{secondaryAreaChairName && (
<TabPanel id={`${secondaryAreaChairUrlFormat}-assignments`}>
{activeTabId === `#${secondaryAreaChairUrlFormat}-assignments` &&
renderTripletACTable()}
</TabPanel>
)}
<TabPanel id={`${areaChairUrlFormat}-tasks`}>
{activeTabId === `#${areaChairUrlFormat}-tasks` && (
<AreaChairConsoleTasks venueId={venueId} areaChairName={areaChairName} />
)}
</TabPanel>
</TabPanels>
</Tabs>
<ConsoleTabs
defaultActiveTabId={`assigned-${pluralizeString(submissionName).toLowerCase()}`}
tabs={[
{
id: `assigned-${pluralizeString(submissionName ?? '').toLowerCase()}`,
label: `Assigned ${pluralizeString(submissionName)}`,
content: renderTable(),
visible: true,
},
{
id: `${secondaryAreaChairUrlFormat}-assignments`,
label: `${getSingularRoleName(prettyField(secondaryAreaChairName))} Assignments`,
content: renderTripletACTable(),
visible: secondaryAreaChairName,
},
{
id: `${areaChairUrlFormat}-tasks`,
label: `${getSingularRoleName(prettyField(areaChairName))} Tasks`,
content: <AreaChairConsoleTasks venueId={venueId} areaChairName={areaChairName} />,
visible: true,
},
]}
updateActiveTabId={setActiveTabId}
/>
</>
)
}
Expand Down
61 changes: 61 additions & 0 deletions components/webfield/ConsoleTabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../Tabs'

const ConsoleTabs = ({ defaultActiveTabId, tabs = [], updateActiveTabId }) => {
const validTabIds = tabs.flatMap((tab) => (tab.visible ? tab.id : []))
const [activeTabId, setActiveTabId] = useState(
decodeURIComponent(window.location.hash.substring(1)) ||
defaultActiveTabId ||
validTabIds[0]
)
const router = useRouter()

useEffect(() => {
if (!validTabIds.includes(activeTabId)) {
setActiveTabId(defaultActiveTabId)
updateActiveTabId?.(`#${defaultActiveTabId}`)
return
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to call updateActiveTabId here? I think when setActiveTabId is called it will trigger useEffect again with a valid (default) tab, so the parent's state would already get updated in line 20 with the default. What do you think?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think you are right

updateActiveTabId?.(`#${activeTabId}`)
router.replace(`#${activeTabId}`).catch((e) => {
if (!e.cancelled) {
throw e
}
})
}, [activeTabId])

return (
<Tabs>
<TabList>
{tabs.map((tab) => {
const { id, label, visible } = tab
if (!visible) return null
return (
<Tab
key={id}
id={id}
active={activeTabId === id ? true : undefined}
onClick={() => setActiveTabId(id)}
>
{label}
</Tab>
)
})}
</TabList>
<TabPanels>
{tabs.map((tab) => {
const { id, content, visible } = tab
if (!visible || activeTabId !== `${id}`) return null
return (
<TabPanel key={id} id={id}>
{content}
</TabPanel>
)
})}
</TabPanels>
</Tabs>
)
}

export default ConsoleTabs
82 changes: 25 additions & 57 deletions components/webfield/EthicsChairConsole.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/* globals promptError: false */
import { useContext, useEffect, useState } from 'react'
import { useContext, useEffect } from 'react'
import { useRouter } from 'next/router'
import useUser from '../../hooks/useUser'
import useQuery from '../../hooks/useQuery'
import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../Tabs'
import { referrerLink, venueHomepageLink } from '../../lib/banner-links'
import WebFieldContext from '../WebFieldContext'
import BasicHeader from './BasicHeader'
Expand All @@ -12,6 +11,7 @@ import EthicsChairOverview from './EthicsChairConsole/EthicsChairOverview'
import PaperStatus from './EthicsChairConsole/EthicsChairPaperStatus'
import EthicsChairTasks from './EthicsChairConsole/EthicsChairTasks'
import { getRoleHashFragment } from '../../lib/utils'
import ConsoleTabs from './ConsoleTabs'

const EthicsChairConsole = ({ appContext }) => {
const {
Expand All @@ -31,17 +31,9 @@ const EthicsChairConsole = ({ appContext }) => {
const { setBannerContent } = appContext
const router = useRouter()
const query = useQuery()
const [activeTabId, setActiveTabId] = useState(
decodeURIComponent(window.location.hash) || '#overview'
)
const { user, userLoading } = useUser()

const ethicsChairsUrlFormat = getRoleHashFragment(ethicsChairsName)
const validTabIds = [
'#overview',
`#${submissionName.toLowerCase()}-status`,
`#${ethicsChairsUrlFormat}-tasks`,
]

useEffect(() => {
if (!query) return
Expand All @@ -53,14 +45,6 @@ const EthicsChairConsole = ({ appContext }) => {
}
}, [query, venueId])

useEffect(() => {
if (!validTabIds.includes(activeTabId)) {
setActiveTabId(validTabIds[0])
return
}
router.replace(activeTabId)
}, [activeTabId])

const missingConfig = Object.entries({
header,
entity: group,
Expand All @@ -85,45 +69,29 @@ const EthicsChairConsole = ({ appContext }) => {
return (
<>
<BasicHeader title={header?.title} instructions={header.instructions} />
<Tabs>
<TabList>
<Tab
id="overview"
active={activeTabId === '#overview' ? true : undefined}
onClick={() => setActiveTabId('#overview')}
>
Overview
</Tab>
<Tab
id={`${submissionName.toLowerCase()}-status`}
active={
activeTabId === `#${submissionName.toLowerCase()}-status` ? true : undefined
}
onClick={() => setActiveTabId(`#${submissionName.toLowerCase()}-status`)}
>
{submissionName} Status
</Tab>
<Tab
id={`${ethicsChairsUrlFormat}-tasks`}
active={activeTabId === `#${ethicsChairsUrlFormat}-tasks` ? true : undefined}
onClick={() => setActiveTabId(`#${ethicsChairsUrlFormat}-tasks`)}
>
Ethics Chair Tasks
</Tab>
</TabList>

<TabPanels>
<TabPanel id="overview">
<EthicsChairOverview />
</TabPanel>
<TabPanel id={`${submissionName.toLowerCase()}-status`}>
{activeTabId === `#${submissionName.toLowerCase()}-status` && <PaperStatus />}
</TabPanel>
<TabPanel id={`${ethicsChairsUrlFormat}-tasks`}>
{activeTabId === `#${ethicsChairsUrlFormat}-tasks` && <EthicsChairTasks />}
</TabPanel>
</TabPanels>
</Tabs>
<ConsoleTabs
defaultActiveTabId="overview"
tabs={[
Comment on lines +72 to +74
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The AC and Reviewer console have updateActiveTabId={setActiveTabId} set, do we not need this for the other consoles?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for AC and reviewer console the activaTabId is required to construct the referrer link so that user can go back to the same tab

for ethics chair console it's fixed to be paper status tab

[Ethics Chair Console](/group?id=${venueId}/${ethicsChairsName}#${submissionName.toLowerCase()}-status)

so i think it's not required

{
id: 'overview',
label: 'Overview',
content: <EthicsChairOverview />,
visible: true,
},
{
id: `${submissionName.toLowerCase()}-status`,
label: `${submissionName} Status`,
content: <PaperStatus />,
visible: true,
},
{
id: `${ethicsChairsUrlFormat}-tasks`,
label: 'Ethics Chair Tasks',
content: <EthicsChairTasks />,
visible: true,
},
]}
/>
</>
)
}
Expand Down
Loading
Loading