use named export

src/components/Projekte/Daten/Ap/Ap/ApUsers/ApUser.jsx

@@ -13,7 +13,7 @@ const DelIcon = styled(IconButton)`
   padding-bottom: 6px !important;
 `
 
-const ApUser = ({ user, refetch }) => {
+export const ApUser = observer(({ user, refetch }) => {
   const client = useApolloClient()
   const { enqueNotification } = useContext(StoreContext)
 
@@ -56,6 +56,4 @@ const ApUser = ({ user, refetch }) => {
       </DelIcon>
     </div>
   )
-}
-
-export default observer(ApUser)
+})

src/components/Projekte/Daten/Ap/Ap/ApUsers/NewUser.jsx

@@ -4,7 +4,7 @@ import { useQuery, useApolloClient, gql } from '@apollo/client'
 
 import { Select } from '../../../../../shared/Select.jsx'
 
-const NewUser = ({ apId, apUsers, refetch }) => {
+export const NewUser = observer(({ apId, apUsers, refetch }) => {
   const client = useApolloClient()
 
   const [error, setError] = useState(null)
@@ -13,29 +13,27 @@ const NewUser = ({ apId, apUsers, refetch }) => {
     data,
     loading,
     error: queryError,
-  } = useQuery(
-    gql`
-      query benutzerForNewUser {
-        allUsers(
-          orderBy: NAME_ASC
-          filter: { role: { in: ["apflora_ap_writer", "apflora_ap_reader"] } }
-        ) {
-          nodes {
-            id
-            name
-            role
-          }
+  } = useQuery(gql`
+    query benutzerForNewUser {
+      allUsers(
+        orderBy: NAME_ASC
+        filter: { role: { in: ["apflora_ap_writer", "apflora_ap_reader"] } }
+      ) {
+        nodes {
+          id
+          name
+          role
         }
       }
-    `,
-  )
-  const userData = data ? data?.allUsers?.nodes ?? [] : []
+    }
+  `)
+  const userData = data ? (data?.allUsers?.nodes ?? []) : []
   const apUserIds = apUsers.map((u) => u?.userByUserName?.id)
   const options = userData
     .filter((d) => !apUserIds.includes(d.id))
     .map((d) => ({
-      value: d.name,
-      label: `${d.name} (${d.role.replace('apflora_', '')})`,
+      value: d.name ?? '(kein Name)',
+      label: `${d.name ?? '(kein Name)'} (${d.role.replace('apflora_', '')})`,
     }))
 
   const saveToDb = useCallback(
@@ -68,6 +66,8 @@ const NewUser = ({ apId, apUsers, refetch }) => {
     if (queryError) setError(queryError.message)
   }, [queryError])
 
+  console.log('NewUser', { apUsers, userData, options })
+
   return (
     <Select
       key={apUsers.length}
@@ -80,6 +80,4 @@ const NewUser = ({ apId, apUsers, refetch }) => {
       saveToDb={saveToDb}
     />
   )
-}
-
-export default observer(NewUser)
+})

src/components/Projekte/Daten/Ap/Ap/ApUsers/index.jsx

@@ -4,8 +4,8 @@ import { useQuery, gql } from '@apollo/client'
 import styled from '@emotion/styled'
 import { useParams } from 'react-router-dom'
 
-import ApUser from './ApUser'
-import NewUser from './NewUser'
+import { ApUser } from './ApUser.jsx'
+import { NewUser } from './NewUser.jsx'
 import { Label } from '../../../../../shared/Label.jsx'
 import { Error } from '../../../../../shared/Error.jsx'
 
@@ -33,7 +33,7 @@ const InfoRow = styled.li`
   margin-bottom: 0;
 `
 
-const ApUsers = () => {
+export const ApUsers = observer(() => {
   const { apId } = useParams()
 
   const { data, error, loading, refetch } = useQuery(
@@ -120,6 +120,4 @@ const ApUsers = () => {
       />
     </Container>
   )
-}
-
-export default observer(ApUsers)
+})

src/components/Projekte/Daten/Ap/Ap/index.jsx

@@ -16,7 +16,7 @@ import { query } from './query.js'
 import { queryAeTaxonomies } from './queryAeTaxonomies.js'
 import { StoreContext } from '../../../../../storeContext.js'
 import { ifIsNumericAsNumber } from '../../../../../modules/ifIsNumericAsNumber.js'
-import ApUsers from './ApUsers/index.jsx'
+import { ApUsers } from './ApUsers/index.jsx'
 import { ap, aeTaxonomies } from '../../../../shared/fragments.js'
 import { Spinner } from '../../../../shared/Spinner.jsx'
 import { Error } from '../../../../shared/Error.jsx'