use named export

barbalex · Oct 28, 2024 · a58d426 · a58d426
1 parent f1c9947
commit a58d426
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 167 deletions.
diff --git a/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/Geschaetzt.jsx b/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/Geschaetzt.jsx
@@ -8,7 +8,7 @@ import { StoreContext } from '../../../../../../storeContext.js'
 import updateTpopkontrzaehlByIdGql from './updateTpopkontrzaehlById.js'
 import { ifIsNumericAsNumber } from '../../../../../../modules/ifIsNumericAsNumber.js'
 
-const Geschaetzt = ({ row, refetch }) => {
+export const Geschaetzt =observer( ({ row, refetch }) => {
   const store = useContext(StoreContext)
   const client = useApolloClient()
   const queryClient = useQueryClient()
@@ -68,6 +68,4 @@ const Geschaetzt = ({ row, refetch }) => {
       errors={errors}
     />
   )
-}
-
-export default observer(Geschaetzt)
+})
diff --git a/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/createTpopkontrzaehl.js b/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/createTpopkontrzaehl.js
@@ -2,7 +2,7 @@ import { gql } from '@apollo/client'
 
 import { tpopkontrzaehl } from '../../../../../shared/fragments.js'
 
-export default gql`
+export const createTpopkontrzaehl = gql`
   mutation createTpopkontrzaehlForCount($tpopkontrId: UUID) {
     createTpopkontrzaehl(
       input: { tpopkontrzaehl: { tpopkontrId: $tpopkontrId } }

diff --git a/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/index.jsx b/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/index.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback, useMemo } from 'react'
+import { useContext, useCallback, useMemo, memo } from 'react'
 import styled from '@emotion/styled'
 import sortBy from 'lodash/sortBy'
 import uniqBy from 'lodash/uniqBy'
@@ -10,9 +10,9 @@ import { useQueryClient } from '@tanstack/react-query'
 
 import Einheit from './Einheit.jsx'
 import Gezaehlt from './Gezaehlt.jsx'
-import Geschaetzt from './Geschaetzt.jsx'
-import query from './query.js'
-import createTpopkontrzaehl from './createTpopkontrzaehl.js'
+import { Geschaetzt } from './Geschaetzt.jsx'
+import { query } from './query.js'
+import { createTpopkontrzaehl } from './createTpopkontrzaehl.js'
 import { StoreContext } from '../../../../../../storeContext.js'
 import { Error } from '../../../../../shared/Error.jsx'
 import { Spinner } from '../../../../../shared/Spinner.jsx'
@@ -160,172 +160,177 @@ const ShowNew = styled.div`
   }
 `
 
-const Count = ({
-  id,
-  tpopkontrId,
-  nr,
-  showEmpty,
-  showNew,
-  refetch,
-  einheitsUsed = [],
-  ekzaehleinheits = [],
-  ekzaehleinheitsOriginal = [],
-}) => {
-  const client = useApolloClient()
-  const queryClient = useQueryClient()
+export const Count = memo(
+  observer(
+    ({
+      id,
+      tpopkontrId,
+      nr,
+      showEmpty,
+      showNew,
+      refetch,
+      einheitsUsed = [],
+      ekzaehleinheits = [],
+      ekzaehleinheitsOriginal = [],
+    }) => {
+      const client = useApolloClient()
+      const queryClient = useQueryClient()
 
-  const store = useContext(StoreContext)
-  const { setToDelete } = useContext(StoreContext)
+      const store = useContext(StoreContext)
+      const { setToDelete } = useContext(StoreContext)
 
-  const { activeNodeArray } = store.tree
+      const { activeNodeArray } = store.tree
 
-  const {
-    data,
-    loading,
-    error,
-    refetch: refetchMe,
-  } = useQuery(query, {
-    variables: {
-      id: id || '99999999-9999-9999-9999-999999999999',
-    },
-  })
-
-  const row = data?.tpopkontrzaehlById ?? {}
-
-  const createNew = useCallback(() => {
-    client
-      .mutate({
-        mutation: createTpopkontrzaehl,
-        variables: { tpopkontrId },
+      const {
+        data,
+        loading,
+        error,
+        refetch: refetchMe,
+      } = useQuery(query, {
+        variables: {
+          id: id || '99999999-9999-9999-9999-999999999999',
+        },
       })
-      .then(() => refetch())
-  }, [client, refetch, tpopkontrId])
 
-  const zaehleinheitWerte = useMemo(() => {
-    const allEinheits = data?.allTpopkontrzaehlEinheitWertes?.nodes ?? []
-    // do list this count's einheit
-    const einheitsNotToList = einheitsUsed.filter((e) => e !== row.einheit)
-    let zaehleinheitWerte = ekzaehleinheits
-      // remove already set values
-      .filter((e) => !einheitsNotToList.includes(e.code))
-    // add this zaehleineits value if missing
-    // so as to show values input in earlier years that shall not be input any more
-    const thisRowsEinheit = allEinheits.find((e) => e.code === row.einheit)
-    if (thisRowsEinheit) {
-      zaehleinheitWerte = uniqBy([thisRowsEinheit, ...zaehleinheitWerte], 'id')
-    }
-    return sortBy(zaehleinheitWerte, (z) => {
-      const ekzaehleinheitOriginal = ekzaehleinheitsOriginal.find(
-        (e) => e.tpopkontrzaehlEinheitWerteByZaehleinheitId.code === z.code,
-      )
-      if (!ekzaehleinheitOriginal) return 999
-      return ekzaehleinheitOriginal.sort || 999
-    }).map((el) => ({
-      value: el.code,
-      label: el.text,
-    }))
-  }, [
-    data?.allTpopkontrzaehlEinheitWertes?.nodes,
-    einheitsUsed,
-    ekzaehleinheits,
-    ekzaehleinheitsOriginal,
-    row.einheit,
-  ])
+      const row = data?.tpopkontrzaehlById ?? {}
 
-  const showDelete = nr > 1
+      const createNew = useCallback(() => {
+        client
+          .mutate({
+            mutation: createTpopkontrzaehl,
+            variables: { tpopkontrId },
+          })
+          .then(() => refetch())
+      }, [client, refetch, tpopkontrId])
 
-  const remove = useCallback(
-    ({ row }) => {
-      const afterDeletionHook = () => {
-        refetch()
-        queryClient.invalidateQueries({
-          queryKey: [`treeTpopfreiwkontrzaehl`],
-        })
-      }
-      setToDelete({
-        table: 'tpopkontrzaehl',
-        id: row.id,
-        label: null,
-        url: activeNodeArray,
-        afterDeletionHook,
-      })
-    },
-    [setToDelete, activeNodeArray, refetch, queryClient],
-  )
+      const zaehleinheitWerte = useMemo(() => {
+        const allEinheits = data?.allTpopkontrzaehlEinheitWertes?.nodes ?? []
+        // do list this count's einheit
+        const einheitsNotToList = einheitsUsed.filter((e) => e !== row.einheit)
+        let zaehleinheitWerte = ekzaehleinheits
+          // remove already set values
+          .filter((e) => !einheitsNotToList.includes(e.code))
+        // add this zaehleineits value if missing
+        // so as to show values input in earlier years that shall not be input any more
+        const thisRowsEinheit = allEinheits.find((e) => e.code === row.einheit)
+        if (thisRowsEinheit) {
+          zaehleinheitWerte = uniqBy(
+            [thisRowsEinheit, ...zaehleinheitWerte],
+            'id',
+          )
+        }
+        return sortBy(zaehleinheitWerte, (z) => {
+          const ekzaehleinheitOriginal = ekzaehleinheitsOriginal.find(
+            (e) => e.tpopkontrzaehlEinheitWerteByZaehleinheitId.code === z.code,
+          )
+          if (!ekzaehleinheitOriginal) return 999
+          return ekzaehleinheitOriginal.sort || 999
+        }).map((el) => ({
+          value: el.code,
+          label: el.text,
+        }))
+      }, [
+        data?.allTpopkontrzaehlEinheitWertes?.nodes,
+        einheitsUsed,
+        ekzaehleinheits,
+        ekzaehleinheitsOriginal,
+        row.einheit,
+      ])
 
-  //console.log('Count, row:', row)
+      const showDelete = nr > 1
 
-  if (showNew) {
-    return (
-      <Container
-        nr={nr}
-        shownew={showNew}
-      >
-        <EinheitLabel>{`Zähleinheit ${nr}`}</EinheitLabel>
-        <ShowNew>
-          <Button
-            color="primary"
-            onClick={createNew}
-          >
-            <StyledAddIcon /> Neu
-          </Button>
-        </ShowNew>
-      </Container>
-    )
-  }
-  if (showEmpty) {
-    return (
-      <Container
-        nr={nr}
-        showempty={showEmpty}
-      >
-        <EinheitLabel>{`Zähleinheit ${nr}`}</EinheitLabel>
-      </Container>
-    )
-  }
-  if (loading) return <Spinner />
+      const remove = useCallback(
+        ({ row }) => {
+          const afterDeletionHook = () => {
+            refetch()
+            queryClient.invalidateQueries({
+              queryKey: [`treeTpopfreiwkontrzaehl`],
+            })
+          }
+          setToDelete({
+            table: 'tpopkontrzaehl',
+            id: row.id,
+            label: null,
+            url: activeNodeArray,
+            afterDeletionHook,
+          })
+        },
+        [setToDelete, activeNodeArray, refetch, queryClient],
+      )
 
-  if (error) return <Error error={error} />
+      //console.log('Count, row:', row)
 
-  return (
-    <StyledForm
-      nr={nr}
-      data-id={`count${nr}`}
-      showdelete={showDelete.toString()}
-    >
-      <Einheit
-        row={row}
-        refetch={refetch}
-        zaehleinheitWerte={zaehleinheitWerte}
-        nr={nr}
-      />
-      <GezaehltLabel>gezählt</GezaehltLabel>
-      <GeschaetztLabel>geschätzt</GeschaetztLabel>
-      <GezaehltVal>
-        <Gezaehlt
-          row={row}
-          refetch={refetchMe}
-        />
-      </GezaehltVal>
-      <GeschaetztVal>
-        <Geschaetzt
-          row={row}
-          refetch={refetchMe}
-        />
-      </GeschaetztVal>
-      {showDelete && (
-        <Delete>
-          <StyledDeleteButton
-            title="löschen"
-            onClick={() => remove({ row })}
-            color="inherit"
+      if (showNew) {
+        return (
+          <Container
+            nr={nr}
+            shownew={showNew}
+          >
+            <EinheitLabel>{`Zähleinheit ${nr}`}</EinheitLabel>
+            <ShowNew>
+              <Button
+                color="primary"
+                onClick={createNew}
+              >
+                <StyledAddIcon /> Neu
+              </Button>
+            </ShowNew>
+          </Container>
+        )
+      }
+      if (showEmpty) {
+        return (
+          <Container
+            nr={nr}
+            showempty={showEmpty}
           >
-            <DeleteIcon />
-          </StyledDeleteButton>
-        </Delete>
-      )}
-    </StyledForm>
-  )
-}
+            <EinheitLabel>{`Zähleinheit ${nr}`}</EinheitLabel>
+          </Container>
+        )
+      }
+      if (loading) return <Spinner />
+
+      if (error) return <Error error={error} />
 
-export default observer(Count)
+      return (
+        <StyledForm
+          nr={nr}
+          data-id={`count${nr}`}
+          showdelete={showDelete.toString()}
+        >
+          <Einheit
+            row={row}
+            refetch={refetch}
+            zaehleinheitWerte={zaehleinheitWerte}
+            nr={nr}
+          />
+          <GezaehltLabel>gezählt</GezaehltLabel>
+          <GeschaetztLabel>geschätzt</GeschaetztLabel>
+          <GezaehltVal>
+            <Gezaehlt
+              row={row}
+              refetch={refetchMe}
+            />
+          </GezaehltVal>
+          <GeschaetztVal>
+            <Geschaetzt
+              row={row}
+              refetch={refetchMe}
+            />
+          </GeschaetztVal>
+          {showDelete && (
+            <Delete>
+              <StyledDeleteButton
+                title="löschen"
+                onClick={() => remove({ row })}
+                color="inherit"
+              >
+                <DeleteIcon />
+              </StyledDeleteButton>
+            </Delete>
+          )}
+        </StyledForm>
+      )
+    },
+  ),
+)
diff --git a/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/query.js b/src/components/Projekte/Daten/Tpopfreiwkontr/Form/Count/query.js
@@ -5,7 +5,7 @@ import {
   tpopkontrzaehlEinheitWerte,
 } from '../../../../../shared/fragments.js'
 
-export default gql`
+export const query = gql`
   query TpopkontrzaehlQueryForCount($id: UUID!) {
     tpopkontrzaehlById(id: $id) {
       ...TpopkontrzaehlFields

diff --git a/src/components/Projekte/Daten/Tpopfreiwkontr/Form/index.jsx b/src/components/Projekte/Daten/Tpopfreiwkontr/Form/index.jsx
@@ -18,7 +18,7 @@ import { Danger } from './Danger.jsx'
 import { Remarks } from './Remarks.jsx'
 import { EkfRemarks } from './EkfRemarks.jsx'
 import { Files } from './Files.jsx'
-import Count from './Count/index.jsx'
+import { Count } from './Count/index.jsx'
 import Verification from './Verification.jsx'
 import Image from './Image.jsx'
 import { StoreContext } from '../../../../../storeContext.js'