use named export

barbalex · Oct 27, 2024 · f0a2cc0 · f0a2cc0
1 parent 1d8edaf
commit f0a2cc0
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 40 deletions.
diff --git a/src/components/Ekf/List/Item.jsx b/src/components/Ekf/List/Item.jsx
@@ -31,7 +31,7 @@ const InnerContainer = styled.div`
   }
 `
 
-const EkfList = ({ projektCount, style, row }) => {
+export const Item = ({ projektCount, style, row }) => {
   const { search } = useLocation()
   const { ekfId, userId, ekfYear } = useParams()
   const navigate = useNavigate()
@@ -59,5 +59,3 @@ const EkfList = ({ projektCount, style, row }) => {
     </OuterContainer>
   )
 }
-
-export default EkfList
diff --git a/src/components/Ekf/List/index.jsx b/src/components/Ekf/List/index.jsx
@@ -5,7 +5,7 @@ import styled from '@emotion/styled'
 import { observer } from 'mobx-react-lite'
 import SimpleBar from 'simplebar-react'
 
-import Item from './Item.jsx'
+import { Item } from './Item.jsx'
 
 const Container = styled.div`
   height: 100%;
@@ -22,7 +22,7 @@ const StyledSimplebar = styled(SimpleBar)`
   overflow-x: hidden;
 `
 
-const EkfList = ({ ekf }) => {
+export const EkfList = observer(({ ekf }) => {
   const projektCount = uniq(ekf.map((e) => e.projekt)).length
   const itemHeight = projektCount > 1 ? 110 : 91
 
@@ -41,12 +41,14 @@ const EkfList = ({ ekf }) => {
           width={350}
         >
           {({ index, style }) => (
-            <Item projektCount={projektCount} style={style} row={ekf[index]} />
+            <Item
+              projektCount={projektCount}
+              style={style}
+              row={ekf[index]}
+            />
           )}
         </List>
       </StyledSimplebar>
     </Container>
   )
-}
-
-export default observer(EkfList)
+})
diff --git a/src/components/Ekf/index.jsx b/src/components/Ekf/index.jsx
@@ -7,7 +7,7 @@ import sortBy from 'lodash/sortBy'
 
 // when Karte was loaded async, it did not load,
 // but only in production!
-import EkfList from './List'
+import { EkfList } from './List/index.jsx'
 import { Component as Tpopfreiwkontr } from '../Projekte/Daten/Tpopfreiwkontr/index.jsx'
 import { StoreContext } from '../../storeContext.js'
 import { StyledSplitPane } from '../shared/StyledSplitPane'

diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx
@@ -103,7 +103,7 @@ const CardTitle = styled.h3`
   margin-top: 4px;
 `
 
-const Home = () => (
+export const Component = () => (
   <OuterContainer>
     <picture>
       <source
@@ -118,7 +118,11 @@ const Home = () => (
       />
     </picture>
     <ScrollContainer>
-      <PageTitle align="center" variant="h6" color="inherit">
+      <PageTitle
+        align="center"
+        variant="h6"
+        color="inherit"
+      >
         Bedrohte Pflanzenarten fördern
       </PageTitle>
       <CardContainer>
@@ -183,15 +187,23 @@ const Home = () => (
           <CardTitle>Freiwillige</CardTitle>
           unterstützen die Artverantwortlichen bei der Kontrolle von
           Populationen und der{' '}
-          <a href="//vermehrung.ch" target="_blank" rel="noopener noreferrer">
+          <a
+            href="//vermehrung.ch"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Vermehrung von Aktionsplanarten
           </a>
           .
         </Card>
         <Card>
           <CardTitle>Organisation des Projektes</CardTitle>
           durch&nbsp;
-          <a href="//toposmm.ch" target="_blank" rel="noopener noreferrer">
+          <a
+            href="//toposmm.ch"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             topos
           </a>
           &nbsp;im Auftrag der&nbsp;
@@ -219,5 +231,3 @@ const Home = () => (
     </ScrollContainer>
   </OuterContainer>
 )
-
-export const Component = Home
diff --git a/src/components/Messages/Messages/Messages.jsx b/src/components/Messages/Messages/Messages.jsx
@@ -6,7 +6,7 @@ import { useApolloClient } from '@apollo/client'
 import { observer } from 'mobx-react-lite'
 import { DateTime } from 'luxon'
 
-import createUsermessage from '../createUsermessage.js'
+import { createUsermessage } from '../createUsermessage.js'
 import { StoreContext } from '../../../storeContext.js'
 
 const Container = styled.div`
@@ -30,7 +30,7 @@ const OkButton = styled(Button)`
   right: 12px;
 `
 
-const UserMessages = ({ unreadMessages }) => {
+export const Messages = observer(({ unreadMessages }) => {
   const client = useApolloClient()
   const store = useContext(StoreContext)
   const { user } = store
@@ -54,18 +54,22 @@ const UserMessages = ({ unreadMessages }) => {
         const date = DateTime.fromISO(m.time).toFormat('yyyy.LL.dd')
 
         return (
-          <MessageRow key={m.id} paddBottom={paddBottom}>
+          <MessageRow
+            key={m.id}
+            paddBottom={paddBottom}
+          >
             <Linkify properties={{ target: '_blank' }}>
               <MessageDiv>{`${date}: ${m.message}`}</MessageDiv>
             </Linkify>
-            <OkButton onClick={() => onClickRead(m)} color="inherit">
+            <OkButton
+              onClick={() => onClickRead(m)}
+              color="inherit"
+            >
               o.k.
             </OkButton>
           </MessageRow>
         )
       })}
     </Container>
   )
-}
-
-export default observer(UserMessages)
+})
diff --git a/src/components/Messages/Messages/index.jsx b/src/components/Messages/Messages/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from '@emotion/styled'
 
-import Messages from './Messages.jsx'
+import { Messages } from './Messages.jsx'
 
 const ScrollContainer = styled.div`
   min-width: 80% !important;
@@ -10,12 +10,10 @@ const ScrollContainer = styled.div`
   scrollbar-width: thin;
 `
 
-const UserMessages = ({ unreadMessages }) => {
+export const MessagesList = ({ unreadMessages }) => {
   return (
     <ScrollContainer>
       <Messages unreadMessages={unreadMessages} />
     </ScrollContainer>
   )
 }
-
-export default UserMessages
diff --git a/src/components/Messages/createUsermessage.js b/src/components/Messages/createUsermessage.js
@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client'
 
-export default gql`
+export const createUsermessage = gql`
   mutation createUsermessage($id: UUID!, $userName: String!) {
     createUsermessage(
       input: { usermessage: { userName: $userName, messageId: $id } }

diff --git a/src/components/Messages/index.jsx b/src/components/Messages/index.jsx
@@ -6,12 +6,12 @@ import styled from '@emotion/styled'
 import { useApolloClient, useQuery } from '@apollo/client'
 import { observer } from 'mobx-react-lite'
 
-import query from './data.js'
-import createUsermessage from './createUsermessage.js'
+import { query } from './query.js'
+import { createUsermessage } from './createUsermessage.js'
 import { StoreContext } from '../../storeContext.js'
 import { Error } from '../shared/Error.jsx'
 import { ErrorBoundary } from '../shared/ErrorBoundary.jsx'
-import Messages from './Messages/index.jsx'
+import { MessagesList } from './Messages/index.jsx'
 
 const StyledDialog = styled(Dialog)`
   display: flex;
@@ -32,7 +32,7 @@ const AllOkButton = styled(Button)`
   right: 25px;
 `
 
-const UserMessages = () => {
+export const Messages = observer(() => {
   const client = useApolloClient()
   const store = useContext(StoreContext)
   const { user } = store
@@ -53,7 +53,7 @@ const UserMessages = () => {
   const userNameExists = userNames.includes(userName)
   // DANGER: if no userName or non-existing, results are returned!
   const allMessages =
-    userName && userNameExists ? data?.allMessages?.nodes ?? [] : []
+    userName && userNameExists ? (data?.allMessages?.nodes ?? []) : []
   const unreadMessages = allMessages.filter(
     (m) => (m?.usermessagesByMessageId?.totalCount ?? 0) === 0,
   )
@@ -80,14 +80,16 @@ const UserMessages = () => {
       >
         <TitleRow>
           <DialogTitle id="dialog-title">Letzte Anpassungen:</DialogTitle>
-          <AllOkButton onClick={onClickReadAll} color="inherit">
+          <AllOkButton
+            onClick={onClickReadAll}
+            color="inherit"
+          >
             alle o.k.
           </AllOkButton>
         </TitleRow>
-        <Messages unreadMessages={unreadMessages} />
+        <MessagesList unreadMessages={unreadMessages} />
       </StyledDialog>
     </ErrorBoundary>
   )
-}
-
-export default observer(UserMessages)
+})
+export default Messages
diff --git a/src/components/Messages/data.js → src/components/Messages/query.js b/src/components/Messages/data.js → src/components/Messages/query.js
@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client'
 
-export default gql`
+export const query = gql`
   query UsermessagesQuery($name: String!, $aYearAgo: Datetime!) {
     allMessages(
       filter: {

diff --git a/src/components/Router/ProtectedRoute.jsx b/src/components/Router/ProtectedRoute.jsx
@@ -8,7 +8,9 @@ import { useLocation, useParams, Navigate } from 'react-router-dom'
 
 import { StoreContext } from '../../storeContext.js'
 const User = lazy(() => import('../User'))
-const Messages = lazy(() => import('../Messages'))
+const Messages = lazy(async () => ({
+  default: (await import('../Messages/index.jsx')).Messages,
+}))
 const Deletions = lazy(async () => ({
   default: (await import('../Deletions/index.jsx')).Deletions,
 }))