use named export

barbalex · Oct 27, 2024 · 4f85495 · 4f85495
1 parent fee974e
commit 4f85495
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 99 deletions.
diff --git a/src/components/AppBar/Bar/Projekte/More/EkfUser/index.jsx b/src/components/AppBar/Bar/Projekte/More/EkfUser/index.jsx
@@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom'
 
 import { Select } from '../../../../../shared/Select.jsx'
 import { Error } from '../../../../../shared/Error.jsx'
-import queryAdresses from './queryAdresses.js'
+import { queryAdresses } from './queryAdresses.js'
 
 const Container = styled.div`
   padding: 0 16px;
@@ -14,7 +14,7 @@ const Container = styled.div`
 const ekfRefDate = new Date() //.setMonth(new Date().getMonth() - 2)
 const ekfRefYear = new Date(ekfRefDate).getFullYear()
 
-const EkfUser = ({ closeMenu }) => {
+export const EkfUser = ({ closeMenu }) => {
   const navigate = useNavigate()
   const { search } = useLocation()
 
@@ -49,5 +49,3 @@ const EkfUser = ({ closeMenu }) => {
     </Container>
   )
 }
-
-export default EkfUser
diff --git a/src/components/AppBar/Bar/Projekte/More/EkfUser/queryAdresses.js b/src/components/AppBar/Bar/Projekte/More/EkfUser/queryAdresses.js
@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client'
 
-export default gql`
+export const queryAdresses = gql`
   query adrQuery {
     allUsers(
       orderBy: NAME_ASC

diff --git a/src/components/AppBar/Bar/Projekte/More/index.jsx b/src/components/AppBar/Bar/Projekte/More/index.jsx
@@ -8,7 +8,7 @@ import { useParams } from 'react-router-dom'
 
 import { isMobilePhone } from '../../../../../modules/isMobilePhone.js'
 import { logout } from '../../../../../modules/logout.js'
-import EkfUser from './EkfUser/index.jsx'
+import { EkfUser } from './EkfUser/index.jsx'
 import { StoreContext } from '../../../../../storeContext.js'
 import { IdbContext } from '../../../../../idbContext.js'
 import { useSearchParamsState } from '../../../../../modules/useSearchParamsState.js'
@@ -27,97 +27,97 @@ const Version = styled.div`
   user-select: none;
 `
 
-const AppbarMore = ({ onClickExporte: passedOnClickExporte, role }) => {
-  const { projId } = useParams()
+export const More = observer(
+  ({ onClickExporte: passedOnClickExporte, role }) => {
+    const { projId } = useParams()
 
-  const store = useContext(StoreContext)
-  const { deletedDatasets, user, setShowDeletions } = store
-  const { idb } = useContext(IdbContext)
+    const store = useContext(StoreContext)
+    const { deletedDatasets, user, setShowDeletions } = store
+    const { idb } = useContext(IdbContext)
 
-  const [anchorEl, setAnchorEl] = useState(null)
-  const closeMenu = useCallback(() => setAnchorEl(null), [])
-  /**
-   * need to clone projekteTabs
-   * because otherwise removing elements errors out (because elements are sealed)
-   */
+    const [anchorEl, setAnchorEl] = useState(null)
+    const closeMenu = useCallback(() => setAnchorEl(null), [])
+    /**
+     * need to clone projekteTabs
+     * because otherwise removing elements errors out (because elements are sealed)
+     */
 
-  const isMobile = isMobilePhone()
-  const [projekteTabs] = useSearchParamsState(
-    'projekteTabs',
-    isMobile ? ['tree'] : ['tree', 'daten'],
-  )
-  const exporteIsActive = !!projId
+    const isMobile = isMobilePhone()
+    const [projekteTabs] = useSearchParamsState(
+      'projekteTabs',
+      isMobile ? ['tree'] : ['tree', 'daten'],
+    )
+    const exporteIsActive = !!projId
 
-  const showDeletedDatasets = useCallback(() => {
-    closeMenu()
-    // prevent following from happening
-    // before setAnchor has finished
-    setTimeout(() => setShowDeletions(true))
-  }, [closeMenu, setShowDeletions])
-  const onClickMehrButton = useCallback(
-    (event) => setAnchorEl(event.currentTarget),
-    [],
-  )
-  const onClickExporte = useCallback(() => {
-    closeMenu()
-    // prevent following from happening
-    // before setAnchor has finished
-    setTimeout(() => passedOnClickExporte())
-  }, [closeMenu, passedOnClickExporte])
-  const onClickLogout = useCallback(() => {
-    logout(idb)
-  }, [idb])
+    const showDeletedDatasets = useCallback(() => {
+      closeMenu()
+      // prevent following from happening
+      // before setAnchor has finished
+      setTimeout(() => setShowDeletions(true))
+    }, [closeMenu, setShowDeletions])
+    const onClickMehrButton = useCallback(
+      (event) => setAnchorEl(event.currentTarget),
+      [],
+    )
+    const onClickExporte = useCallback(() => {
+      closeMenu()
+      // prevent following from happening
+      // before setAnchor has finished
+      setTimeout(() => passedOnClickExporte())
+    }, [closeMenu, passedOnClickExporte])
+    const onClickLogout = useCallback(() => {
+      logout(idb)
+    }, [idb])
 
-  const onClickUptime = useCallback(() => {
-    window.open('https://uptime.apflora.ch')
-    setAnchorEl(null)
-  }, [])
+    const onClickUptime = useCallback(() => {
+      window.open('https://uptime.apflora.ch')
+      setAnchorEl(null)
+    }, [])
 
-  return (
-    <Container>
-      <MehrButton
-        aria-label="Mehr"
-        aria-owns={anchorEl ? 'appbar-more-menu' : null}
-        aria-haspopup="true"
-        onClick={onClickMehrButton}
-        data-id="appbar-more"
-      >
-        Mehr
-      </MehrButton>
-      <Menu
-        id="appbar-more-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={closeMenu}
-      >
-        {isMobile && exporteIsActive && (
+    return (
+      <Container>
+        <MehrButton
+          aria-label="Mehr"
+          aria-owns={anchorEl ? 'appbar-more-menu' : null}
+          aria-haspopup="true"
+          onClick={onClickMehrButton}
+          data-id="appbar-more"
+        >
+          Mehr
+        </MehrButton>
+        <Menu
+          id="appbar-more-menu"
+          anchorEl={anchorEl}
+          open={Boolean(anchorEl)}
+          onClose={closeMenu}
+        >
+          {isMobile && exporteIsActive && (
+            <MenuItem
+              onClick={onClickExporte}
+              disabled={projekteTabs.includes('exporte')}
+            >
+              Exporte
+            </MenuItem>
+          )}
           <MenuItem
-            onClick={onClickExporte}
-            disabled={projekteTabs.includes('exporte')}
+            onClick={showDeletedDatasets}
+            disabled={deletedDatasets.length === 0}
           >
-            Exporte
+            gelöschte Datensätze wiederherstellen
           </MenuItem>
-        )}
-        <MenuItem
-          onClick={showDeletedDatasets}
-          disabled={deletedDatasets.length === 0}
-        >
-          gelöschte Datensätze wiederherstellen
-        </MenuItem>
-        {['apflora_manager', 'apflora_ap_writer'].includes(role) && (
-          <EkfUser closeMenu={closeMenu} />
-        )}
-        <MenuItem
-          onClick={onClickLogout}
-          data-id="appbar-more-logout"
-        >{`${user.name} abmelden (und Cache leeren)`}</MenuItem>
-        <MenuItem onClick={onClickUptime}>
-          Verfügbarkeit der Server von apflora.ch
-        </MenuItem>
-        <Version>Version: 1.105.7 vom 22.10.2024</Version>
-      </Menu>
-    </Container>
-  )
-}
-
-export default observer(AppbarMore)
+          {['apflora_manager', 'apflora_ap_writer'].includes(role) && (
+            <EkfUser closeMenu={closeMenu} />
+          )}
+          <MenuItem
+            onClick={onClickLogout}
+            data-id="appbar-more-logout"
+          >{`${user.name} abmelden (und Cache leeren)`}</MenuItem>
+          <MenuItem onClick={onClickUptime}>
+            Verfügbarkeit der Server von apflora.ch
+          </MenuItem>
+          <Version>Version: 1.105.7 vom 22.10.2024</Version>
+        </Menu>
+      </Container>
+    )
+  },
+)
diff --git a/src/components/AppBar/Bar/Projekte/index.jsx b/src/components/AppBar/Bar/Projekte/index.jsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { Link, useParams, useLocation } from 'react-router-dom'
 
 import { isMobilePhone } from '../../../../modules/isMobilePhone.js'
-import More from './More/index.jsx'
+import { More } from './More/index.jsx'
 import Daten from './Daten.jsx'
 import { StoreContext } from '../../../../storeContext.js'
 import { useSearchParamsState } from '../../../../modules/useSearchParamsState.js'
@@ -16,13 +16,13 @@ const StyledButton = styled(Button)`
   color: white !important;
   border-color: rgba(255, 255, 255, 0.5) !important;
   border-right-color: ${(props) =>
-    props.followed === 'true'
-      ? ' rgba(255, 255, 255, 0.25)'
-      : ' rgba(255, 255, 255, 0.5)'} !important;
+    props.followed === 'true' ?
+      ' rgba(255, 255, 255, 0.25)'
+    : ' rgba(255, 255, 255, 0.5)'} !important;
   border-left-color: ${(props) =>
-    props.preceded === 'true'
-      ? ' rgba(255, 255, 255, 0.25)'
-      : ' rgba(255, 255, 255, 0.5)'} !important;
+    props.preceded === 'true' ?
+      ' rgba(255, 255, 255, 0.25)'
+    : ' rgba(255, 255, 255, 0.5)'} !important;
   border-top-left-radius: ${(props) =>
     props.preceded === 'true' ? '0' : '4px'} !important;
   border-bottom-left-radius: ${(props) =>
@@ -195,7 +195,10 @@ const ProjekteBar = () => {
       >
         Dokumentation
       </DokuButton>
-      <More onClickExporte={onClickExporte} role={role} />
+      <More
+        onClickExporte={onClickExporte}
+        role={role}
+      />
     </>
   )
 }