Shift Title and Tabs to routingTools to prevent circular references

frontend/src/index.js

@@ -7,7 +7,7 @@ import { WebSocketLink } from '@apollo/client/link/ws'
 import { SubscriptionClient } from 'subscriptions-transport-ws'
 
 import { graphqlAddress, graphqlWebsocketAddress } from './settings'
-import App from './ui/layout/App'
+import { App } from './ui/layout'
 
 // The websocket link, for subscriptions.
 const wsClient = new SubscriptionClient(

frontend/src/ui/admin/UserInspection.js

@@ -9,7 +9,7 @@ import { skillTree, includePrerequisitesAndLinks, processSkill, getDefaultSkillD
 
 import { useUserQuery } from 'api/admin'
 import { Par, HorizontalSlider } from 'ui/components'
-import { TitleItem } from 'ui/layout/Title'
+import { TitleItem } from 'ui/routingTools'
 import { SkillFlask } from 'ui/eduTools'
 
 export function UserInspection() {

frontend/src/ui/eduTools/course/components/CourseName.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useParams } from 'react-router-dom'
 
-import { TitleItem } from 'ui/layout/Title'
+import { TitleItem } from 'ui/routingTools'
 
 import { courses } from '../../courses'
 

frontend/src/ui/eduTools/exercises/containers/BlankExercise.js

@@ -10,7 +10,7 @@ import { exercises } from 'step-wise/eduTools'
 
 import { TranslationFile, TranslationSection, useTranslator } from 'i18n'
 import { LoadingNote, ErrorNote } from 'ui/components/flow'
-import { TitleItem } from 'ui/layout/Title'
+import { TitleItem } from 'ui/routingTools'
 
 import { ExerciseContainer } from './ExerciseContainer'
 

frontend/src/ui/eduTools/skills/SkillPage.js

@@ -5,7 +5,7 @@ import { skillTree } from 'step-wise/eduTools'
 
 import { TranslationFile, useTranslator } from 'i18n'
 import { LoadingNote } from 'ui/components'
-import { TabPages, tabData } from 'ui/layout/tabs'
+import { TabPages, tabData } from 'ui/routingTools'
 
 import { ExercisePage } from '../exercises'
 

frontend/src/ui/eduTools/skills/components/SkillName.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { skillTree } from 'step-wise/eduTools'
 
-import { TitleItem } from 'ui/layout/Title'
+import { TitleItem } from 'ui/routingTools'
 
 import { useSkillId } from '../util'
 

frontend/src/ui/layout/App.js

@@ -17,7 +17,7 @@ const withApolloProvider = WrappedComponent => props => (
 	</ApolloProvider>
 )
 
-function App() {
+function AppWithoutProvider() {
 	return (
 		<div id="app">
 			<div id="appInner">
@@ -38,4 +38,5 @@ function App() {
 	)
 }
 
-export default withApolloProvider(App)
+const App = withApolloProvider(AppWithoutProvider)
+export { App }

frontend/src/ui/layout/Header.js

@@ -7,11 +7,10 @@ import Container from '@material-ui/core/Container'
 
 import { TranslationFile } from 'i18n'
 
-import { GroupIndicator } from 'ui/pages/groups/Indicator'
+import { Title, TabBar } from 'ui/routingTools'
+import { GroupIndicator } from 'ui/pages'
 
 import Menu from './Menu'
-import Title from './Title'
-import { TabBar } from './tabs'
 
 const useStyles = makeStyles((theme) => ({
 	toolbar: {
@@ -25,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }))
 
-export default function Header({ Indicator }) {
+export function Header({ Indicator }) {
 	const theme = useTheme()
 	const classes = useStyles()
 	const [titleCollapsed, setTitleCollapsed] = useState(false)

frontend/src/ui/layout/Page.js

@@ -2,11 +2,11 @@ import React from 'react'
 
 import { useRoute } from 'ui/routingTools'
 import { ModalManager, OfflineNotification, RecommendLogIn } from 'ui/components'
+import { TabProvider } from 'ui/routingTools'
 import { FieldController } from 'ui/form'
 
-import PageContainer from './PageContainer'
-import Header from './Header'
-import { TabProvider } from './tabs'
+import { PageContainer } from './PageContainer'
+import { Header } from './Header'
 
 export function Page() {
 	// Determine the contents.

frontend/src/ui/layout/PageContainer.js

@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }))
 
-export default function PageContainer({ children }) {
+export function PageContainer({ children }) {
 	const theme = useTheme()
 	const classes = useStyles()
 	return <Container maxWidth={theme.appWidth} className={classes.pageContainer}>{children}</Container>

frontend/src/ui/layout/index.js

@@ -1,4 +1,3 @@
-export { default as App } from './App'
-export { default as Header } from './Header.js'
-export { default as LinkBar } from './LinkBar.js'
-export { default as Page } from './Page.js'
+export * from './App'
+export * from './Header.js'
+export * from './Page.js'

frontend/src/ui/pages/Groups/Indicator.js

@@ -4,9 +4,9 @@ import { useNavigate } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
 import Tooltip from '@material-ui/core/Tooltip'
 
+import { TranslationFile, TranslationSection, Translation, WordList } from 'i18n'
 import { usePrevious } from 'util/index' // Unit test import issue: should be 'util' but this fails unit tests.
 import { useActiveGroup, useOtherMembers } from 'api/group'
-import { TranslationFile, TranslationSection, Translation, WordList } from 'i18n'
 import { usePaths } from 'ui/routingTools'
 
 import { translationPath } from './support'

frontend/src/ui/pages/Groups/index.js

@@ -1,2 +1,3 @@
 export * from './NewGroup'
 export * from './Groups'
+export * from './Indicator'

frontend/src/ui/layout/Title.js → frontend/src/ui/routingTools/Title.js

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
 
 // Set up the heading in the default breadcrumbs format.
 const TitleContext = createContext()
-export default function Title({ className, setTitleCollapsed }) {
+export function Title({ className, setTitleCollapsed }) {
 	const classes = useStyles()
 	const fullTitleRef = useRef()
 	const partialTitleRef = useRef()

frontend/src/ui/routingTools/index.js

@@ -1,3 +1,5 @@
 export * from './util'
 export * from './routes'
 export * from './route'
+export * from './Title'
+export * from './tabs'

frontend/src/ui/layout/tabs/TabBar.js → frontend/src/ui/routingTools/tabs/TabBar.js

@@ -4,9 +4,9 @@ import { useTheme } from '@material-ui/core/styles'
 import AppBar from '@material-ui/core/AppBar'
 import Container from '@material-ui/core/Container'
 
-import Tabs from './Tabs'
+import { Tabs } from './Tabs'
 
-export default function TabBar() {
+export function TabBar() {
 	const theme = useTheme()
 	return (
 		<AppBar position="static" color="secondary">

frontend/src/ui/layout/tabs/TabLabel.js → frontend/src/ui/routingTools/tabs/TabLabel.js

@@ -4,7 +4,8 @@ import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 
 import { useTranslator } from 'i18n'
-import tabData from './tabData'
+
+import { tabData } from './tabData'
 
 const useStyles = makeStyles((theme) => ({
 	tab: {
@@ -27,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }))
 
-export default function TabLabel({ tab, showLabel, showIcon }) {
+export function TabLabel({ tab, showLabel, showIcon }) {
 	const translate = useTranslator()
 
 	// Extract data (icon, title) on the tab.

frontend/src/ui/layout/tabs/TabPages.js → frontend/src/ui/routingTools/tabs/TabPages.js

@@ -11,7 +11,7 @@ import { useRoute, insertParametersIntoPath } from 'ui/routingTools'
 import { getOrderedTabs, useTab } from './util'
 import { useTabs, useTabContext } from './TabProvider'
 
-export default function TabPages({ pages, initialPage, updateUrl = true }) {
+export function TabPages({ pages, initialPage, updateUrl = true }) {
 	const urlTab = useTab()
 	const tabs = useConsistentValue(getOrderedTabs(pages))
 	const tabContext = useTabs(tabs, urlTab || initialPage)

frontend/src/ui/layout/tabs/TabProvider.js → frontend/src/ui/routingTools/tabs/TabProvider.js

@@ -7,7 +7,7 @@ import { useConsistentValue, useLatest, useUpdater } from 'util/index' // Unit t
 import { getOrderedTabs } from './util'
 
 const TabContext = createContext()
-export default function TabProvider({ children }) {
+export function TabProvider({ children }) {
 	const [tab, setTab] = useState()
 	const [tabs, setTabs] = useState([])
 	const tabIndex = tabs.length === 0 || !tabs.includes(tab) ? 0 : tabs.indexOf(tab)

frontend/src/ui/layout/tabs/Tabs.js → frontend/src/ui/routingTools/tabs/Tabs.js

@@ -7,7 +7,7 @@ import MuiTab from '@material-ui/core/Tab'
 import { useDimension, useResizeListener } from 'util/index' // Unit test import issue: should be 'util' but this fails unit tests.
 
 import { useTabContext } from './TabProvider'
-import TabLabel from './TabLabel'
+import { TabLabel } from './TabLabel'
 
 // Define limits on tab width where tabs switch their contents.
 const lowerTabWidthLimit = 110 // Below this there is only an icon. Above this there is text.
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }))
 
-export default function Tabs() {
+export function Tabs() {
 	const theme = useTheme()
 	const classes = useStyles()
 	const { tabs, tabIndex, setTabIndex } = useTabContext()

frontend/src/ui/routingTools/tabs/index.js

@@ -0,0 +1,6 @@
+export * from './TabProvider'
+export * from './tabData'
+export * from './TabPages'
+export * from './Tabs'
+export * from './TabLabel'
+export * from './TabBar'

frontend/src/ui/layout/tabs/tabData.js → frontend/src/ui/routingTools/tabs/tabData.js

@@ -58,4 +58,4 @@ applyMapping(tabData, (tab, id) => {
 })
 
 // Export the result.
-export default tabData
+export { tabData }

frontend/src/ui/layout/tabs/util.js → frontend/src/ui/routingTools/tabs/util.js

@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom'
 
 import { sortByIndices } from 'step-wise/util'
 
-import tabData from './tabData'
+import { tabData } from './tabData'
 
 export function getOrderedTabs(pages) {
 	pages = Array.isArray(pages) ? pages : Object.keys(pages) // Ensure pages is an array of page indices.