diff --git a/src/components/Projekte/Daten/Aparts/List.jsx b/src/components/Projekte/Daten/Aparts/List.jsx
new file mode 100644
index 0000000000..209757b8eb
--- /dev/null
+++ b/src/components/Projekte/Daten/Aparts/List.jsx
@@ -0,0 +1,30 @@
+import { memo, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MobxContext } from '../../../../mobxContext.js'
+import { useApartsNavData } from '../../../../modules/useApartsNavData.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Menu } from './Menu.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+
+export const List = memo(
+ observer(() => {
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useApartsNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/Aparts/Menu.jsx b/src/components/Projekte/Daten/Aparts/Menu.jsx
index aceb99a864..621307efcd 100644
--- a/src/components/Projekte/Daten/Aparts/Menu.jsx
+++ b/src/components/Projekte/Daten/Aparts/Menu.jsx
@@ -7,24 +7,22 @@ import { MdContentCopy } from 'react-icons/md'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { observer } from 'mobx-react-lite'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { MobxContext } from '../../../../mobxContext.js'
const iconStyle = { color: 'white' }
export const Menu = memo(
- observer(() => {
+ observer(({ toggleFilterInput }) => {
const { search } = useLocation()
const navigate = useNavigate()
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { apId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -56,18 +54,19 @@ export const Menu = memo(
tanstackQueryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ tanstackQueryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createApart?.apart?.id
navigate(`./${id}${search}`)
}, [client, store, tanstackQueryClient, navigate, search, apId])
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/Aparts/index.jsx b/src/components/Projekte/Daten/Aparts/index.jsx
index 6de0d482e5..ea4a216067 100644
--- a/src/components/Projekte/Daten/Aparts/index.jsx
+++ b/src/components/Projekte/Daten/Aparts/index.jsx
@@ -1,46 +1,14 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
-import { useParams } from 'react-router'
+import { memo } from 'react'
+import { useAtom } from 'jotai'
-import { StoreContext } from '../../../../storeContext.js'
-import { createApsQuery } from '../../../../modules/createApsQuery.js'
-import { createApartsQuery } from '../../../../modules/createApartsQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Ap } from '../Ap/index.jsx'
+import { List } from './List.jsx'
-export const Component = memo(
- observer(() => {
- const { apId } = useParams()
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { apartGqlFilterForTree, nodeLabelFilter } = store.tree
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createApartsQuery({
- apId,
- apartGqlFilterForTree,
- apolloClient,
- }),
- )
- const aparts = data?.data?.apById?.apartsByApId?.nodes ?? []
- const totalCount = data?.data?.apById?.apartsCount?.totalCount ?? 0
+ if (isDesktopView) return
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.apart}
- />
- )
- }),
-)
+ return
+})
diff --git a/src/components/Projekte/Daten/Apber/Menu.jsx b/src/components/Projekte/Daten/Apber/Menu.jsx
index 8d599d6af3..f0461f1bdb 100644
--- a/src/components/Projekte/Daten/Apber/Menu.jsx
+++ b/src/components/Projekte/Daten/Apber/Menu.jsx
@@ -13,7 +13,7 @@ import isEqual from 'lodash/isEqual'
import { MenuBar } from '../../../shared/MenuBar/index.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
const iconStyle = { color: 'white' }
@@ -25,7 +25,7 @@ export const Menu = memo(
const client = useApolloClient()
const queryClient = useQueryClient()
const { projId, apId, apberId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -57,6 +57,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createApber?.apber?.id
navigate(
`/Daten/Projekte/${projId}/Arten/${apId}/AP-Berichte/${id}${search}`,
@@ -104,6 +107,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
// navigate to parent
navigate(`/Daten/Projekte/${projId}/Arten/${apId}/AP-Berichte${search}`)
}, [
diff --git a/src/components/Projekte/Daten/Apber/index.jsx b/src/components/Projekte/Daten/Apber/index.jsx
index 34120e0cf7..8f46079482 100644
--- a/src/components/Projekte/Daten/Apber/index.jsx
+++ b/src/components/Projekte/Daten/Apber/index.jsx
@@ -14,7 +14,7 @@ import { DateField } from '../../../shared/Date.jsx'
import { FormTitle } from '../../../shared/FormTitle/index.jsx'
import { constants } from '../../../../modules/constants.js'
import { query } from './query.js'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { ifIsNumericAsNumber } from '../../../../modules/ifIsNumericAsNumber.js'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { apber } from '../../../shared/fragments.js'
@@ -70,7 +70,7 @@ export const Component = memo(
observer(() => {
const { apberId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const client = useApolloClient()
const queryClient = useQueryClient()
@@ -140,7 +140,7 @@ export const Component = memo(
}
+ MenuBarComponent={Menu}
/>
{
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
+
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useApbersNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/Apbers/Menu.jsx b/src/components/Projekte/Daten/Apbers/Menu.jsx
index e8642f68f9..3fa3993095 100644
--- a/src/components/Projekte/Daten/Apbers/Menu.jsx
+++ b/src/components/Projekte/Daten/Apbers/Menu.jsx
@@ -6,24 +6,22 @@ import { FaPlus } from 'react-icons/fa6'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { observer } from 'mobx-react-lite'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { MobxContext } from '../../../../mobxContext.js'
const iconStyle = { color: 'white' }
export const Menu = memo(
- observer(() => {
+ observer(({ toggleFilterInput }) => {
const { search } = useLocation()
const navigate = useNavigate()
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { apId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -55,18 +53,19 @@ export const Menu = memo(
tanstackQueryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ tanstackQueryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createApber?.apber?.id
navigate(`./${id}${search}`)
}, [client, store, tanstackQueryClient, navigate, search, apId])
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/Apbers/index.jsx b/src/components/Projekte/Daten/Apbers/index.jsx
index 20efe6e104..ea4a216067 100644
--- a/src/components/Projekte/Daten/Apbers/index.jsx
+++ b/src/components/Projekte/Daten/Apbers/index.jsx
@@ -1,46 +1,14 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
-import { useParams } from 'react-router'
+import { memo } from 'react'
+import { useAtom } from 'jotai'
-import { StoreContext } from '../../../../storeContext.js'
-import { createApsQuery } from '../../../../modules/createApsQuery.js'
-import { createApbersQuery } from '../../../../modules/createApbersQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Ap } from '../Ap/index.jsx'
+import { List } from './List.jsx'
-export const Component = memo(
- observer(() => {
- const { apId } = useParams()
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { apberGqlFilterForTree, nodeLabelFilter } = store.tree
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createApbersQuery({
- apId,
- apberGqlFilterForTree,
- apolloClient,
- }),
- )
- const apbers = data?.data?.apById?.apbersByApId?.nodes ?? []
- const totalCount = data?.data?.apById?.apbersCount?.totalCount ?? 0
+ if (isDesktopView) return
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.apber}
- />
- )
- }),
-)
+ return
+})
diff --git a/src/components/Projekte/Daten/Apberuebersicht/Menu.jsx b/src/components/Projekte/Daten/Apberuebersicht/Menu.jsx
index 167805f865..0a0caa4560 100644
--- a/src/components/Projekte/Daten/Apberuebersicht/Menu.jsx
+++ b/src/components/Projekte/Daten/Apberuebersicht/Menu.jsx
@@ -13,7 +13,7 @@ import isEqual from 'lodash/isEqual'
import { MenuBar } from '../../../shared/MenuBar/index.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
const iconStyle = { color: 'white' }
@@ -25,7 +25,7 @@ export const Menu = memo(
const client = useApolloClient()
const queryClient = useQueryClient()
const { projId, apberUebersichtId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
diff --git a/src/components/Projekte/Daten/Apberuebersicht/index.jsx b/src/components/Projekte/Daten/Apberuebersicht/index.jsx
index c894df173c..ba40bb630b 100644
--- a/src/components/Projekte/Daten/Apberuebersicht/index.jsx
+++ b/src/components/Projekte/Daten/Apberuebersicht/index.jsx
@@ -14,7 +14,7 @@ import { MarkdownField } from '../../../shared/MarkdownField/index.jsx'
import { TextFieldNonUpdatable } from '../../../shared/TextFieldNonUpdatable.jsx'
import { FormTitle } from '../../../shared/FormTitle/index.jsx'
import { query } from './query.js'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { ifIsNumericAsNumber } from '../../../../modules/ifIsNumericAsNumber.js'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { apberuebersicht } from '../../../shared/fragments.js'
@@ -73,7 +73,7 @@ export const Component = memo(
observer(() => {
const { apberUebersichtId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const client = useApolloClient()
const { user } = store
const { token } = user
@@ -190,7 +190,7 @@ export const Component = memo(
}
+ MenuBarComponent={Menu}
/>
diff --git a/src/components/Projekte/Daten/Apberuebersichts/List.jsx b/src/components/Projekte/Daten/Apberuebersichts/List.jsx
new file mode 100644
index 0000000000..2f82d6b6a1
--- /dev/null
+++ b/src/components/Projekte/Daten/Apberuebersichts/List.jsx
@@ -0,0 +1,30 @@
+import { memo, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MobxContext } from '../../../../mobxContext.js'
+import { useApberuebersichtsNavData } from '../../../../modules/useApberuebersichtsNavData.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Menu } from './Menu.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+
+export const List = memo(
+ observer(() => {
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useApberuebersichtsNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/Apberuebersichts/Menu.jsx b/src/components/Projekte/Daten/Apberuebersichts/Menu.jsx
index 9cf5aeb006..8c2408ae8b 100644
--- a/src/components/Projekte/Daten/Apberuebersichts/Menu.jsx
+++ b/src/components/Projekte/Daten/Apberuebersichts/Menu.jsx
@@ -10,17 +10,15 @@ import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import styled from '@emotion/styled'
import { observer } from 'mobx-react-lite'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
import { moveTo } from '../../../../modules/moveTo/index.js'
import { copyTo } from '../../../../modules/copyTo/index.js'
import { closeLowerNodes } from '../../TreeContainer/closeLowerNodes.js'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { MobxContext } from '../../../../mobxContext.js'
const Fitter = styled.div`
margin-top: -15px;
@@ -29,13 +27,13 @@ const Fitter = styled.div`
const iconStyle = { color: 'white' }
export const Menu = memo(
- observer(() => {
+ observer(({ toggleFilterInput }) => {
const { search, pathname } = useLocation()
const navigate = useNavigate()
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { projId, apberuebersichtId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -75,14 +73,12 @@ export const Menu = memo(
navigate(`./${id}${search}`)
}, [projId, client, store, tanstackQueryClient, navigate, search])
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/Apberuebersichts/index.jsx b/src/components/Projekte/Daten/Apberuebersichts/index.jsx
index 13a9305ea5..ae215e2a53 100644
--- a/src/components/Projekte/Daten/Apberuebersichts/index.jsx
+++ b/src/components/Projekte/Daten/Apberuebersichts/index.jsx
@@ -1,45 +1,14 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
-import { useParams } from 'react-router'
+import { memo } from 'react'
+import { useAtom } from 'jotai'
-import { StoreContext } from '../../../../storeContext.js'
-import { createApberuebersichtsQuery } from '../../../../modules/createApberuebersichtsQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Projekt } from '../Projekt/index.jsx'
+import { List } from './List.jsx'
-export const Component = memo(
- observer(() => {
- const { projId } = useParams()
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { apberuebersichtGqlFilterForTree, nodeLabelFilter } = store.tree
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createApberuebersichtsQuery({
- projId,
- apberuebersichtGqlFilterForTree,
- apolloClient,
- }),
- )
- const apberuebersichts = data?.data?.allApberuebersichts?.nodes ?? []
- const totalCount = data?.data?.totalCount?.totalCount ?? 0
+ if (isDesktopView) return
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.apberuebersicht}
- />
- )
- }),
-)
+ return
+})
diff --git a/src/components/Projekte/Daten/Aps/List.jsx b/src/components/Projekte/Daten/Aps/List.jsx
new file mode 100644
index 0000000000..c30ebac2f2
--- /dev/null
+++ b/src/components/Projekte/Daten/Aps/List.jsx
@@ -0,0 +1,30 @@
+import { memo, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MobxContext } from '../../../../mobxContext.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Menu } from './Menu.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+import { useApsNavData } from '../../../../modules/useApsNavData.js'
+
+export const List = memo(
+ observer(() => {
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useApsNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/Aps/Menu.jsx b/src/components/Projekte/Daten/Aps/Menu.jsx
index 2a006f3f76..ad330c485a 100644
--- a/src/components/Projekte/Daten/Aps/Menu.jsx
+++ b/src/components/Projekte/Daten/Aps/Menu.jsx
@@ -10,18 +10,16 @@ import { BsSignStopFill } from 'react-icons/bs'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import styled from '@emotion/styled'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
import { moveTo } from '../../../../modules/moveTo/index.js'
import { copyTo } from '../../../../modules/copyTo/index.js'
import { closeLowerNodes } from '../../TreeContainer/closeLowerNodes.js'
import { ApFilter } from '../../TreeContainer/ApFilter/index.jsx'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { MobxContext } from '../../../../mobxContext.js'
const Fitter = styled.div`
margin-top: ${(props) => (props.inmenu === 'true' ? -8 : -15)}px;
@@ -30,13 +28,13 @@ const Fitter = styled.div`
const iconStyle = { color: 'white' }
export const Menu = memo(
- observer(() => {
+ observer(({ toggleFilterInput }) => {
const { search, pathname } = useLocation()
const navigate = useNavigate()
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { projId, apId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const { setMoving, moving, copying, setCopying } = store
@@ -122,14 +120,12 @@ export const Menu = memo(
const isMoving = !!moving.table
const isCopying = !!copying.table
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/Aps/index.jsx b/src/components/Projekte/Daten/Aps/index.jsx
index 529bde0e01..ae215e2a53 100644
--- a/src/components/Projekte/Daten/Aps/index.jsx
+++ b/src/components/Projekte/Daten/Aps/index.jsx
@@ -1,45 +1,14 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
-import { useParams } from 'react-router'
+import { memo } from 'react'
+import { useAtom } from 'jotai'
-import { StoreContext } from '../../../../storeContext.js'
-import { createApsQuery } from '../../../../modules/createApsQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Projekt } from '../Projekt/index.jsx'
+import { List } from './List.jsx'
-export const Component = memo(
- observer(() => {
- const { projId } = useParams()
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { apGqlFilterForTree, nodeLabelFilter } = store.tree
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createApsQuery({
- projId,
- apGqlFilterForTree,
- apolloClient,
- }),
- )
- const aps = data?.data?.allAps?.nodes ?? []
- const totalCount = data?.data?.totalCount?.totalCount ?? 0
+ if (isDesktopView) return
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.ap}
- />
- )
- }),
-)
+ return
+})
diff --git a/src/components/Projekte/Daten/Assozart/Menu.jsx b/src/components/Projekte/Daten/Assozart/Menu.jsx
index c4ed092e83..8ad9a8b251 100644
--- a/src/components/Projekte/Daten/Assozart/Menu.jsx
+++ b/src/components/Projekte/Daten/Assozart/Menu.jsx
@@ -13,7 +13,7 @@ import isEqual from 'lodash/isEqual'
import { MenuBar } from '../../../shared/MenuBar/index.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
const iconStyle = { color: 'white' }
@@ -25,7 +25,7 @@ export const Menu = memo(
const client = useApolloClient()
const queryClient = useQueryClient()
const { projId, apId, assozartId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -57,6 +57,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createAssozart?.assozart?.id
navigate(
`/Daten/Projekte/${projId}/Arten/${apId}/assoziierte-Arten/${id}${search}`,
@@ -104,6 +107,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
// navigate to parent
navigate(
`/Daten/Projekte/${projId}/Arten/${apId}/assoziierte-Arten${search}`,
diff --git a/src/components/Projekte/Daten/Assozart/index.jsx b/src/components/Projekte/Daten/Assozart/index.jsx
index c0b082ac06..3cb34d03a3 100644
--- a/src/components/Projekte/Daten/Assozart/index.jsx
+++ b/src/components/Projekte/Daten/Assozart/index.jsx
@@ -10,7 +10,7 @@ import { SelectLoadingOptions } from '../../../shared/SelectLoadingOptions.jsx'
import { FormTitle } from '../../../shared/FormTitle/index.jsx'
import { query } from './query.js'
import { queryAeTaxonomies } from './queryAeTaxonomies.js'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { ifIsNumericAsNumber } from '../../../../modules/ifIsNumericAsNumber.js'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { assozart } from '../../../shared/fragments.js'
@@ -45,7 +45,7 @@ export const Component = memo(
const { assozartId: id } = useParams()
const client = useApolloClient()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const queryClient = useQueryClient()
const [fieldErrors, setFieldErrors] = useState({})
@@ -143,7 +143,7 @@ export const Component = memo(
}
+ MenuBarComponent={Menu}
/>
{
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useAssozartsNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/Assozarts/Menu.jsx b/src/components/Projekte/Daten/Assozarts/Menu.jsx
index 808ac127de..957ba687ea 100644
--- a/src/components/Projekte/Daten/Assozarts/Menu.jsx
+++ b/src/components/Projekte/Daten/Assozarts/Menu.jsx
@@ -7,24 +7,22 @@ import { MdContentCopy } from 'react-icons/md'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { observer } from 'mobx-react-lite'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { MobxContext } from '../../../../mobxContext.js'
const iconStyle = { color: 'white' }
export const Menu = memo(
- observer(() => {
+ observer(({ toggleFilterInput }) => {
const { search } = useLocation()
const navigate = useNavigate()
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { apId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -56,18 +54,19 @@ export const Menu = memo(
tanstackQueryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ tanstackQueryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createAssozart?.assozart?.id
navigate(`./${id}${search}`)
}, [client, store, tanstackQueryClient, navigate, search, apId])
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/Assozarts/index.jsx b/src/components/Projekte/Daten/Assozarts/index.jsx
index 6153ffed8d..ea4a216067 100644
--- a/src/components/Projekte/Daten/Assozarts/index.jsx
+++ b/src/components/Projekte/Daten/Assozarts/index.jsx
@@ -1,46 +1,14 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
-import { useParams } from 'react-router'
+import { memo } from 'react'
+import { useAtom } from 'jotai'
-import { StoreContext } from '../../../../storeContext.js'
-import { createApsQuery } from '../../../../modules/createApsQuery.js'
-import { createAssozartsQuery } from '../../../../modules/createAssozartsQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Ap } from '../Ap/index.jsx'
+import { List } from './List.jsx'
-export const Component = memo(
- observer(() => {
- const { apId } = useParams()
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { assozartGqlFilterForTree, nodeLabelFilter } = store.tree
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createAssozartsQuery({
- apId,
- assozartGqlFilterForTree,
- apolloClient,
- }),
- )
- const assozarts = data?.data?.apById?.assozartsByApId?.nodes ?? []
- const totalCount = data?.data?.apById?.assozartsCount?.totalCount ?? 0
+ if (isDesktopView) return
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.assozart}
- />
- )
- }),
-)
+ return
+})
diff --git a/src/components/Projekte/Daten/Beob/index.jsx b/src/components/Projekte/Daten/Beob/index.jsx
index 2612f125db..316277a6c1 100644
--- a/src/components/Projekte/Daten/Beob/index.jsx
+++ b/src/components/Projekte/Daten/Beob/index.jsx
@@ -15,7 +15,7 @@ import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { Error } from '../../../shared/Error.jsx'
import { Spinner } from '../../../shared/Spinner.jsx'
import { Field as BeobField } from './Field.jsx'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
const OuterContainer = styled.div`
container-type: inline-size;
@@ -41,7 +41,7 @@ export const Beob = memo(
const { beobId: id } = useParams()
const client = useApolloClient()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const { sortedBeobFields: sortedBeobFieldsPassed, setSortedBeobFields } =
store
const sortedBeobFields = sortedBeobFieldsPassed.slice()
diff --git a/src/components/Projekte/Daten/BeobNichtBeurteilts/List.jsx b/src/components/Projekte/Daten/BeobNichtBeurteilts/List.jsx
new file mode 100644
index 0000000000..884dcceeeb
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobNichtBeurteilts/List.jsx
@@ -0,0 +1,33 @@
+import { memo, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MobxContext } from '../../../../mobxContext.js'
+import { useBeobNichtBeurteiltsNavData } from '../../../../modules/useBeobNichtBeurteiltsNavData.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Menu } from './Menu.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+
+const menuBarProps = { apfloraLayer: 'beobNichtBeurteilt' }
+
+export const List = memo(
+ observer(() => {
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useBeobNichtBeurteiltsNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/Beobzuordnungs/Menu.jsx b/src/components/Projekte/Daten/BeobNichtBeurteilts/Menu.jsx
similarity index 64%
rename from src/components/Projekte/Daten/Beobzuordnungs/Menu.jsx
rename to src/components/Projekte/Daten/BeobNichtBeurteilts/Menu.jsx
index f2fdb426d2..58f84a0549 100644
--- a/src/components/Projekte/Daten/Beobzuordnungs/Menu.jsx
+++ b/src/components/Projekte/Daten/BeobNichtBeurteilts/Menu.jsx
@@ -5,29 +5,25 @@ import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import uniq from 'lodash/uniq'
import { observer } from 'mobx-react-lite'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { isMobilePhone } from '../../../../modules/isMobilePhone.js'
-import { useSearchParamsState } from '../../../../modules/useSearchParamsState.js'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { useProjekteTabs } from '../../../../modules/useProjekteTabs.js'
+import { MobxContext } from '../../../../mobxContext.js'
const iconStyle = { color: 'white' }
+// TODO: how to pass both props?
+// TODO: need to add menu to other beobs to enable filtering
export const Menu = memo(
- observer(({ apfloraLayer }) => {
+ observer(({ apfloraLayer, toggleFilterInput }) => {
const tanstackQueryClient = useQueryClient()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const { setActiveApfloraLayers, activeApfloraLayers } = store
- const [projekteTabs, setProjekteTabs] = useSearchParamsState(
- 'projekteTabs',
- isMobilePhone() ? ['tree'] : ['tree', 'daten'],
- )
+ const [projekteTabs, setProjekteTabs] = useProjekteTabs()
const showMapIfNotYetVisible = useCallback(
(projekteTabs) => {
const isVisible = projekteTabs.includes('karte')
@@ -47,14 +43,12 @@ export const Menu = memo(
activeApfloraLayers,
])
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/BeobNichtBeurteilts/index.jsx b/src/components/Projekte/Daten/BeobNichtBeurteilts/index.jsx
new file mode 100644
index 0000000000..ea4a216067
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobNichtBeurteilts/index.jsx
@@ -0,0 +1,14 @@
+import { memo } from 'react'
+import { useAtom } from 'jotai'
+
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Ap } from '../Ap/index.jsx'
+import { List } from './List.jsx'
+
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
+
+ if (isDesktopView) return
+
+ return
+})
diff --git a/src/components/Projekte/Daten/BeobNichtZuzuordnens/List.jsx b/src/components/Projekte/Daten/BeobNichtZuzuordnens/List.jsx
new file mode 100644
index 0000000000..55954cc661
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobNichtZuzuordnens/List.jsx
@@ -0,0 +1,33 @@
+import { memo, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MobxContext } from '../../../../mobxContext.js'
+import { useBeobNichtZuzuordnensNavData } from '../../../../modules/useBeobNichtZuzuordnensNavData.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Menu } from '../BeobNichtBeurteilts/Menu.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+
+const menuBarProps = { apfloraLayer: 'beobNichtZuzuordnen' }
+
+export const List = memo(
+ observer(() => {
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useBeobNichtZuzuordnensNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/BeobNichtZuzuordnens/Menu.jsx b/src/components/Projekte/Daten/BeobNichtZuzuordnens/Menu.jsx
new file mode 100644
index 0000000000..58f84a0549
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobNichtZuzuordnens/Menu.jsx
@@ -0,0 +1,61 @@
+import { memo, useCallback, useContext } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { FaMap } from 'react-icons/fa6'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import uniq from 'lodash/uniq'
+import { observer } from 'mobx-react-lite'
+
+import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
+import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
+import { useProjekteTabs } from '../../../../modules/useProjekteTabs.js'
+import { MobxContext } from '../../../../mobxContext.js'
+
+const iconStyle = { color: 'white' }
+
+// TODO: how to pass both props?
+// TODO: need to add menu to other beobs to enable filtering
+export const Menu = memo(
+ observer(({ apfloraLayer, toggleFilterInput }) => {
+ const tanstackQueryClient = useQueryClient()
+
+ const store = useContext(MobxContext)
+ const { setActiveApfloraLayers, activeApfloraLayers } = store
+
+ const [projekteTabs, setProjekteTabs] = useProjekteTabs()
+ const showMapIfNotYetVisible = useCallback(
+ (projekteTabs) => {
+ const isVisible = projekteTabs.includes('karte')
+ if (!isVisible) {
+ setProjekteTabs([...projekteTabs, 'karte'])
+ }
+ },
+ [setProjekteTabs],
+ )
+ const onClickShowOnMap = useCallback(() => {
+ showMapIfNotYetVisible(projekteTabs)
+ setActiveApfloraLayers(uniq([...activeApfloraLayers, apfloraLayer]))
+ }, [
+ showMapIfNotYetVisible,
+ projekteTabs,
+ setActiveApfloraLayers,
+ activeApfloraLayers,
+ ])
+
+ return (
+
+
+ {!!toggleFilterInput && (
+
+ )}
+
+
+
+
+
+
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/BeobNichtZuzuordnens/index.jsx b/src/components/Projekte/Daten/BeobNichtZuzuordnens/index.jsx
new file mode 100644
index 0000000000..a77b4b1cc3
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobNichtZuzuordnens/index.jsx
@@ -0,0 +1,14 @@
+import { memo } from 'react'
+import { useAtom } from 'jotai'
+
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { List } from './List.jsx'
+import { Component as Ap } from '../Ap/index.jsx'
+
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
+
+ if (isDesktopView) return
+
+ return
+})
diff --git a/src/components/Projekte/Daten/BeobZugeordnets/List.jsx b/src/components/Projekte/Daten/BeobZugeordnets/List.jsx
new file mode 100644
index 0000000000..42cf0b873f
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobZugeordnets/List.jsx
@@ -0,0 +1,33 @@
+import { memo, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MobxContext } from '../../../../mobxContext.js'
+import { useBeobZugeordnetsNavData } from '../../../../modules/useBeobZugeordnetsNavData.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Menu } from '../BeobNichtBeurteilts/Menu.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+
+const menuBarProps = { apfloraLayer: 'beobZugeordnet' }
+
+export const List = memo(
+ observer(() => {
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useBeobZugeordnetsNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/BeobZugeordnets/Menu.jsx b/src/components/Projekte/Daten/BeobZugeordnets/Menu.jsx
new file mode 100644
index 0000000000..58f84a0549
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobZugeordnets/Menu.jsx
@@ -0,0 +1,61 @@
+import { memo, useCallback, useContext } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { FaMap } from 'react-icons/fa6'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import uniq from 'lodash/uniq'
+import { observer } from 'mobx-react-lite'
+
+import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
+import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
+import { useProjekteTabs } from '../../../../modules/useProjekteTabs.js'
+import { MobxContext } from '../../../../mobxContext.js'
+
+const iconStyle = { color: 'white' }
+
+// TODO: how to pass both props?
+// TODO: need to add menu to other beobs to enable filtering
+export const Menu = memo(
+ observer(({ apfloraLayer, toggleFilterInput }) => {
+ const tanstackQueryClient = useQueryClient()
+
+ const store = useContext(MobxContext)
+ const { setActiveApfloraLayers, activeApfloraLayers } = store
+
+ const [projekteTabs, setProjekteTabs] = useProjekteTabs()
+ const showMapIfNotYetVisible = useCallback(
+ (projekteTabs) => {
+ const isVisible = projekteTabs.includes('karte')
+ if (!isVisible) {
+ setProjekteTabs([...projekteTabs, 'karte'])
+ }
+ },
+ [setProjekteTabs],
+ )
+ const onClickShowOnMap = useCallback(() => {
+ showMapIfNotYetVisible(projekteTabs)
+ setActiveApfloraLayers(uniq([...activeApfloraLayers, apfloraLayer]))
+ }, [
+ showMapIfNotYetVisible,
+ projekteTabs,
+ setActiveApfloraLayers,
+ activeApfloraLayers,
+ ])
+
+ return (
+
+
+ {!!toggleFilterInput && (
+
+ )}
+
+
+
+
+
+
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/BeobZugeordnets/index.jsx b/src/components/Projekte/Daten/BeobZugeordnets/index.jsx
new file mode 100644
index 0000000000..cbbc3bcaf2
--- /dev/null
+++ b/src/components/Projekte/Daten/BeobZugeordnets/index.jsx
@@ -0,0 +1,14 @@
+import { memo } from 'react'
+import { useAtom } from 'jotai'
+
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Tpop } from '../Tpop/Tpop.jsx'
+import { List } from './List.jsx'
+
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
+
+ if (isDesktopView) return
+
+ return
+})
diff --git a/src/components/Projekte/Daten/Beobzuordnung/Menu.jsx b/src/components/Projekte/Daten/Beobzuordnung/Menu.jsx
index 7a54570973..be0b174ace 100644
--- a/src/components/Projekte/Daten/Beobzuordnung/Menu.jsx
+++ b/src/components/Projekte/Daten/Beobzuordnung/Menu.jsx
@@ -14,12 +14,12 @@ import {
import { MenuBar } from '../../../shared/MenuBar/index.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { showCoordOfBeobOnMapsZhCh } from '../../../../modules/showCoordOfBeobOnMapsZhCh.js'
import { showCoordOfBeobOnMapGeoAdminCh } from '../../../../modules/showCoordOfBeobOnMapGeoAdminCh.js'
import { copyBeobZugeordnetKoordToTpop } from '../../../../modules/copyBeobZugeordnetKoordToTpop/index.js'
import { createNewPopFromBeob } from '../../../../modules/createNewPopFromBeob/index.js'
-import { StyledLoadingButton, StyledButton } from '../TpopRouter/Menu.jsx'
+import { StyledLoadingButton, StyledButton } from '../Tpop/Menu.jsx'
export const Menu = memo(
observer(() => {
@@ -28,7 +28,7 @@ export const Menu = memo(
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { projId, apId, beobId, tpopId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const isBeobZugeordnet = !!tpopId
const isBeobNichtBeurteilt =
diff --git a/src/components/Projekte/Daten/Beobzuordnung/index.jsx b/src/components/Projekte/Daten/Beobzuordnung/index.jsx
index 8b6d82b63b..5d01aa7bee 100644
--- a/src/components/Projekte/Daten/Beobzuordnung/index.jsx
+++ b/src/components/Projekte/Daten/Beobzuordnung/index.jsx
@@ -21,7 +21,7 @@ import { saveNichtZuordnenToDb } from './saveNichtZuordnenToDb.js'
import { saveArtIdToDb } from './saveArtIdToDb.js'
import { saveTpopIdToDb } from './saveTpopIdToDb.js'
import { sendMail } from '../../../../modules/sendMail.js'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { Error } from '../../../shared/Error.jsx'
import { Spinner } from '../../../shared/Spinner.jsx'
@@ -142,7 +142,7 @@ export const Component = memo(
: 'uups'
const client = useApolloClient()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const { data, loading, error, refetch } = useQuery(query, {
variables: {
@@ -304,7 +304,7 @@ export const Component = memo(
}
+ MenuBarComponent={Menu}
/>
diff --git a/src/components/Projekte/Daten/Beobzuordnungs/index.jsx b/src/components/Projekte/Daten/Beobzuordnungs/index.jsx
deleted file mode 100644
index 5aabd42928..0000000000
--- a/src/components/Projekte/Daten/Beobzuordnungs/index.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
-import { useParams, useLocation } from 'react-router'
-
-import { StoreContext } from '../../../../storeContext.js'
-import { createApsQuery } from '../../../../modules/createApsQuery.js'
-import { createBeobsQuery } from '../../../../modules/createBeobsQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
-
-export const Component = memo(
- observer(() => {
- const { apId, tpopId } = useParams()
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { beobGqlFilterForTree, nodeLabelFilter } = store.tree
- const { pathname } = useLocation()
-
- const isBeobzugeordnet = !!tpopId && pathname.includes('Beobachtungen')
- const isBeobNichtBeurteilt =
- !tpopId && pathname.includes('nicht-beurteilte-Beobachtungen')
- const isBeobNichtZuzuordnen =
- !tpopId && pathname.includes('nicht-zuzuordnende-Beobachtungen')
- const type =
- isBeobzugeordnet ? 'zugeordnet'
- : isBeobNichtBeurteilt ? 'nichtBeurteilt'
- : isBeobNichtZuzuordnen ? 'nichtZuzuordnen'
- : 'noType'
- const apfloraLayer =
- type === 'zugeordnet' ? 'beobZugeordnet'
- : type === 'nichtBeurteilt' ? 'beobNichtBeurteilt'
- : type === 'nichtZuzuordnen' ? 'beobNichtZuzuordnen'
- : 'beobNichtZuzuordnen'
- const title =
- type === 'zugeordnet' ? 'Beobachtungen zugeordnet'
- : type === 'nichtBeurteilt' ? 'Beobachtungen nicht beurteilt'
- : type === 'nichtZuzuordnen' ? 'Beobachtungen nicht zuzuordnen'
- : 'Beobachtungen'
-
- const { data, isLoading, error } = useQuery(
- createBeobsQuery({
- tpopId,
- apId: tpopId ? undefined : apId,
- beobGqlFilterForTree,
- apolloClient,
- type,
- }),
- )
- const beobs = data?.data?.allBeobs?.nodes ?? []
- const totalCount = data?.data?.beobsCount?.totalCount ?? 0
-
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.beob}
- />
- )
- }),
-)
diff --git a/src/components/Projekte/Daten/CurrentIssues/List.jsx b/src/components/Projekte/Daten/CurrentIssues/List.jsx
new file mode 100644
index 0000000000..61c595189d
--- /dev/null
+++ b/src/components/Projekte/Daten/CurrentIssues/List.jsx
@@ -0,0 +1,18 @@
+import { memo } from 'react'
+
+import { useCurrentissuesNavData } from '../../../../modules/useCurrentissuesNavData.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+
+export const List = memo(() => {
+ const { navData, isLoading, error } = useCurrentissuesNavData()
+ const currentissues = navData?.data?.allCurrentissues?.nodes ?? []
+ const totalCount = navData?.data?.allCurrentissues?.totalCount ?? 0
+
+ if (isLoading) return
+
+ if (error) return
+
+ return
+})
diff --git a/src/components/Projekte/Daten/CurrentIssues/index.jsx b/src/components/Projekte/Daten/CurrentIssues/index.jsx
index e5f8932de6..caab62a1ea 100644
--- a/src/components/Projekte/Daten/CurrentIssues/index.jsx
+++ b/src/components/Projekte/Daten/CurrentIssues/index.jsx
@@ -1,32 +1,13 @@
import { memo } from 'react'
-import { useApolloClient } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
+import { useAtom } from 'jotai'
-import { createCurrentissuesQuery } from '../../../../modules/createCurrentissuesQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { List } from './List.jsx'
export const Component = memo(() => {
- const apolloClient = useApolloClient()
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createCurrentissuesQuery({
- apolloClient,
- }),
- )
- const currentissues = data?.data?.allCurrentissues?.nodes ?? []
- const totalCount = data?.data?.totalCount?.totalCount ?? 0
+ if (isDesktopView) return null
- if (isLoading) return
-
- if (error) return
-
- return (
-
- )
+ return
})
diff --git a/src/components/Projekte/Daten/EkAbrechnungstypWertes/List.jsx b/src/components/Projekte/Daten/EkAbrechnungstypWertes/List.jsx
new file mode 100644
index 0000000000..fd0e9ba62e
--- /dev/null
+++ b/src/components/Projekte/Daten/EkAbrechnungstypWertes/List.jsx
@@ -0,0 +1,30 @@
+import { memo, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MobxContext } from '../../../../mobxContext.js'
+import { useEkAbrechnungstypWertesNavData } from '../../../../modules/useEkAbrechnungstypWertesNavData.js'
+import { List as SharedList } from '../../../shared/List/index.jsx'
+import { Menu } from './Menu.jsx'
+import { Spinner } from '../../../shared/Spinner.jsx'
+import { Error } from '../../../shared/Error.jsx'
+
+export const List = memo(
+ observer(() => {
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useEkAbrechnungstypWertesNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/EkAbrechnungstypWertes/Menu.jsx b/src/components/Projekte/Daten/EkAbrechnungstypWertes/Menu.jsx
index 9cf7bfb632..aeaf7addeb 100644
--- a/src/components/Projekte/Daten/EkAbrechnungstypWertes/Menu.jsx
+++ b/src/components/Projekte/Daten/EkAbrechnungstypWertes/Menu.jsx
@@ -10,17 +10,15 @@ import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import styled from '@emotion/styled'
import { observer } from 'mobx-react-lite'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
import { moveTo } from '../../../../modules/moveTo/index.js'
import { copyTo } from '../../../../modules/copyTo/index.js'
import { closeLowerNodes } from '../../TreeContainer/closeLowerNodes.js'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { MobxContext } from '../../../../mobxContext.js'
const Fitter = styled.div`
margin-top: -15px;
@@ -29,13 +27,13 @@ const Fitter = styled.div`
const iconStyle = { color: 'white' }
export const Menu = memo(
- observer(() => {
+ observer(({ toggleFilterInput }) => {
const { search, pathname } = useLocation()
const navigate = useNavigate()
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { projId, ekAbrechnungstypWerteId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -72,14 +70,12 @@ export const Menu = memo(
navigate(`./${id}${search}`)
}, [client, store, tanstackQueryClient, navigate, search])
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/EkAbrechnungstypWertes/index.jsx b/src/components/Projekte/Daten/EkAbrechnungstypWertes/index.jsx
index 373760ef6a..caab62a1ea 100644
--- a/src/components/Projekte/Daten/EkAbrechnungstypWertes/index.jsx
+++ b/src/components/Projekte/Daten/EkAbrechnungstypWertes/index.jsx
@@ -1,44 +1,13 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
+import { memo } from 'react'
+import { useAtom } from 'jotai'
-import { StoreContext } from '../../../../storeContext.js'
-import { createEkAbrechnungstypWertesQuery } from '../../../../modules/createEkAbrechnungstypWertesQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { List } from './List.jsx'
-export const Component = memo(
- observer(() => {
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { ekAbrechnungstypWerteGqlFilterForTree, nodeLabelFilter } =
- store.tree
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createEkAbrechnungstypWertesQuery({
- ekAbrechnungstypWerteGqlFilterForTree,
- apolloClient,
- }),
- )
- const ekAbrechnungstypWertes =
- data?.data?.allEkAbrechnungstypWertes?.nodes ?? []
- const totalCount = data?.data?.totalCount?.totalCount ?? 0
+ if (isDesktopView) return null
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.ekAbrechnungstypWerte}
- />
- )
- }),
-)
+ return
+})
diff --git a/src/components/Projekte/Daten/Ekfrequenz/Menu.jsx b/src/components/Projekte/Daten/Ekfrequenz/Menu.jsx
index 350ff53f0d..66b1747ac2 100644
--- a/src/components/Projekte/Daten/Ekfrequenz/Menu.jsx
+++ b/src/components/Projekte/Daten/Ekfrequenz/Menu.jsx
@@ -13,7 +13,7 @@ import isEqual from 'lodash/isEqual'
import { MenuBar } from '../../../shared/MenuBar/index.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
const iconStyle = { color: 'white' }
@@ -25,7 +25,7 @@ export const Menu = memo(
const client = useApolloClient()
const queryClient = useQueryClient()
const { projId, apId, ekfrequenzId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -57,6 +57,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createEkfrequenz?.ekfrequenz?.id
navigate(
`/Daten/Projekte/${projId}/Arten/${apId}/EK-Frequenzen/${id}${search}`,
@@ -104,6 +107,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
// navigate to parent
navigate(`/Daten/Projekte/${projId}/Arten/${apId}/EK-Frequenzen${search}`)
}, [
diff --git a/src/components/Projekte/Daten/Ekfrequenz/index.jsx b/src/components/Projekte/Daten/Ekfrequenz/index.jsx
index 40d2a4872e..62fe412c25 100644
--- a/src/components/Projekte/Daten/Ekfrequenz/index.jsx
+++ b/src/components/Projekte/Daten/Ekfrequenz/index.jsx
@@ -11,7 +11,7 @@ import { Kontrolljahre } from './Kontrolljahre.jsx'
import { FormTitle } from '../../../shared/FormTitle/index.jsx'
import { query } from './query.js'
import { queryEkAbrechnungstypWertes } from './queryEkAbrechnungstypWertes.js'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { ifIsNumericAsNumber } from '../../../../modules/ifIsNumericAsNumber.js'
import { ekfrequenz } from '../../../shared/fragments.js'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
@@ -80,7 +80,7 @@ export const Component = memo(
const queryClient = useQueryClient()
const client = useApolloClient()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const [fieldErrors, setFieldErrors] = useState({})
@@ -160,7 +160,7 @@ export const Component = memo(
}
+ MenuBarComponent={Menu}
/>
{
+ const store = useContext(MobxContext)
+ const { nodeLabelFilter } = store.tree
+
+ const { navData, isLoading, error } = useEkfrequenzsNavData()
+
+ if (isLoading) return
+
+ if (error) return
+
+ return (
+
+ )
+ }),
+)
diff --git a/src/components/Projekte/Daten/Ekfrequenzs/Menu.jsx b/src/components/Projekte/Daten/Ekfrequenzs/Menu.jsx
index e0c7d7cc7e..a7a02e4dd6 100644
--- a/src/components/Projekte/Daten/Ekfrequenzs/Menu.jsx
+++ b/src/components/Projekte/Daten/Ekfrequenzs/Menu.jsx
@@ -7,26 +7,24 @@ import { MdContentCopy } from 'react-icons/md'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { observer } from 'mobx-react-lite'
-import { useAtom } from 'jotai'
import { MenuBar, buttonWidth } from '../../../shared/MenuBar/index.jsx'
+import { FilterButton } from '../../../shared/MenuBar/FilterButton.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
-import { LabelFilter, labelFilterWidth } from '../../../shared/LabelFilter.jsx'
-import { listLabelFilterIsIconAtom } from '../../../../JotaiStore/index.js'
+import { MobxContext } from '../../../../mobxContext.js'
const iconStyle = { color: 'white' }
// TODO: add menu to setOpenChooseApToCopyEkfrequenzsFrom
export const Menu = memo(
- observer(() => {
+ observer(({ toggleFilterInput }) => {
const { search } = useLocation()
const navigate = useNavigate()
const client = useApolloClient()
const tanstackQueryClient = useQueryClient()
const { apId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const { setOpenChooseApToCopyEkfrequenzsFrom } = store
const onClickAdd = useCallback(async () => {
@@ -59,6 +57,9 @@ export const Menu = memo(
tanstackQueryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ tanstackQueryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createEkfrequenz?.ekfrequenz?.id
navigate(`./${id}${search}`)
}, [client, store, tanstackQueryClient, navigate, search, apId])
@@ -68,14 +69,12 @@ export const Menu = memo(
[setOpenChooseApToCopyEkfrequenzsFrom],
)
- const [labelFilterIsIcon] = useAtom(listLabelFilterIsIconAtom)
-
return (
-
+ {!!toggleFilterInput && (
+
+ )}
diff --git a/src/components/Projekte/Daten/Ekfrequenzs/index.jsx b/src/components/Projekte/Daten/Ekfrequenzs/index.jsx
index 2213283109..ea4a216067 100644
--- a/src/components/Projekte/Daten/Ekfrequenzs/index.jsx
+++ b/src/components/Projekte/Daten/Ekfrequenzs/index.jsx
@@ -1,48 +1,14 @@
-import { memo, useContext } from 'react'
-import { useApolloClient, gql } from '@apollo/client'
-import { useQuery } from '@tanstack/react-query'
-import { observer } from 'mobx-react-lite'
-import { useParams } from 'react-router'
+import { memo } from 'react'
+import { useAtom } from 'jotai'
-import { StoreContext } from '../../../../storeContext.js'
-import { createApsQuery } from '../../../../modules/createApsQuery.js'
-import { createEkfrequenzsQuery } from '../../../../modules/createEkfrequenzsQuery.js'
-import { List } from '../../../shared/List/index.jsx'
-import { Menu } from './Menu.jsx'
-import { Spinner } from '../../../shared/Spinner.jsx'
-import { Error } from '../../../shared/Error.jsx'
+import { isDesktopViewAtom } from '../../../../JotaiStore/index.js'
+import { Component as Ap } from '../Ap/index.jsx'
+import { List } from './List.jsx'
-export const Component = memo(
- observer(() => {
- const { apId } = useParams()
- const apolloClient = useApolloClient()
- const store = useContext(StoreContext)
- const { ekfrequenzGqlFilterForTree, nodeLabelFilter } = store.tree
+export const Component = memo(() => {
+ const [isDesktopView] = useAtom(isDesktopViewAtom)
- const { data, isLoading, error } = useQuery(
- createEkfrequenzsQuery({
- apId,
- ekfrequenzGqlFilterForTree,
- apolloClient,
- }),
- )
- const ekfrequenzs =
- data?.data?.apById?.ekfrequenzsByApId?.nodes ?? []
- const totalCount =
- data?.data?.apById?.ekfrequenzsCount?.totalCount ?? 0
+ if (isDesktopView) return
- if (isLoading) return
-
- if (error) return
-
- return (
-
}
- highlightSearchString={nodeLabelFilter.ekfrequenz}
- />
- )
- }),
-)
+ return
+})
diff --git a/src/components/Projekte/Daten/Ekzaehleinheit/Menu.jsx b/src/components/Projekte/Daten/Ekzaehleinheit/Menu.jsx
index c0657883e6..06fb78b3cb 100644
--- a/src/components/Projekte/Daten/Ekzaehleinheit/Menu.jsx
+++ b/src/components/Projekte/Daten/Ekzaehleinheit/Menu.jsx
@@ -13,7 +13,7 @@ import isEqual from 'lodash/isEqual'
import { MenuBar } from '../../../shared/MenuBar/index.jsx'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { MenuTitle } from '../../../shared/Files/Menu/index.jsx'
const iconStyle = { color: 'white' }
@@ -25,7 +25,7 @@ export const Menu = memo(
const client = useApolloClient()
const queryClient = useQueryClient()
const { projId, apId, zaehleinheitId } = useParams()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const onClickAdd = useCallback(async () => {
let result
@@ -57,6 +57,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
const id = result?.data?.createEkzaehleinheit?.ekzaehleinheit?.id
navigate(
`/Daten/Projekte/${projId}/Arten/${apId}/EK-Zähleinheiten/${id}${search}`,
@@ -104,6 +107,9 @@ export const Menu = memo(
queryClient.invalidateQueries({
queryKey: [`treeApFolders`],
})
+ queryClient.invalidateQueries({
+ queryKey: [`treeAp`],
+ })
// navigate to parent
navigate(
`/Daten/Projekte/${projId}/Arten/${apId}/EK-Zähleinheiten${search}`,
diff --git a/src/components/Projekte/Daten/Ekzaehleinheit/index.jsx b/src/components/Projekte/Daten/Ekzaehleinheit/index.jsx
index eded95030c..a885fb7595 100644
--- a/src/components/Projekte/Daten/Ekzaehleinheit/index.jsx
+++ b/src/components/Projekte/Daten/Ekzaehleinheit/index.jsx
@@ -11,7 +11,7 @@ import { Checkbox2States } from '../../../shared/Checkbox2States.jsx'
import { FormTitle } from '../../../shared/FormTitle/index.jsx'
import { query } from './query.js'
import { queryLists } from './queryLists.js'
-import { StoreContext } from '../../../../storeContext.js'
+import { MobxContext } from '../../../../mobxContext.js'
import { ifIsNumericAsNumber } from '../../../../modules/ifIsNumericAsNumber.js'
import { ErrorBoundary } from '../../../shared/ErrorBoundary.jsx'
import { Error } from '../../../shared/Error.jsx'
@@ -53,7 +53,7 @@ export const Component = memo(
const queryClient = useQueryClient()
const client = useApolloClient()
- const store = useContext(StoreContext)
+ const store = useContext(MobxContext)
const [fieldErrors, setFieldErrors] = useState({})
@@ -166,7 +166,7 @@ export const Component = memo(
}
+ MenuBarComponent={Menu}
/>