Merged PR 31966: Remove attention and implementations

Met Herjen besproken dat deze eruit kan

src/components/ui/feedback/alert/AlertBase.tsx

@@ -66,9 +66,7 @@ export const AlertBase = ({
           ref={setAccessibilityFocus}
           style={styles?.view}
           testID={testID}>
-          {children ? (
-            children
-          ) : (
+          {children ?? (
             <Row align="between">
               <SingleSelectable
                 accessibilityLabel={accessibleText(title, text)}

src/modules/home/components/ModuleSettings.tsx

@@ -1,15 +1,22 @@
 import {pascalCase} from 'pascal-case'
 import {getVersion} from 'react-native-device-info'
+import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
 import {Box} from '@/components/ui/containers/Box'
+import {EmptyMessage} from '@/components/ui/feedback/EmptyMessage'
 import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
 import {Column} from '@/components/ui/layout/Column'
+import {FullScreenError} from '@/components/ui/layout/FullScreenError'
+import {ModulesFigure} from '@/components/ui/media/errors/ModulesFigure'
 import {Paragraph} from '@/components/ui/text/Paragraph'
+import {useSelector} from '@/hooks/redux/useSelector'
 import {useModules} from '@/hooks/useModules'
 import {ModuleSetting} from '@/modules/home/components/ModuleSetting'
-import {ModulesWarning} from '@/modules/home/components/ModulesWarning'
+import {selectIsInternetReachable} from '@/store/slices/internetConnection'
 
 export const ModuleSettings = () => {
-  const {toggleableModules, modulesLoading} = useModules()
+  const {modulesError, toggleableModules, modulesLoading, refetchModules} =
+    useModules()
+  const isInternetReachable = useSelector(selectIsInternetReachable)
 
   if (modulesLoading) {
     return (
@@ -20,14 +27,38 @@ export const ModuleSettings = () => {
     )
   }
 
-  if (!toggleableModules || toggleableModules.length === 0) {
+  if (modulesError || !toggleableModules) {
+    if (isInternetReachable === false) {
+      return <NoInternetErrorFullScreen />
+    }
+
     return (
-      <ModulesWarning
-        text={`We hebben geen modules gevonden voor versie ${getVersion()} van de app.`}
+      <FullScreenError
+        buttonAccessibilityLabel="Laad de modules opnieuw"
+        buttonLabel="Laad opnieuw"
+        error={modulesError}
+        Image={ModulesFigure}
+        onPress={refetchModules}
+        testProps={{
+          testID: 'ModuleSettingsErrorScreen',
+        }}
+        text="Probeer het later opnieuw."
+        title="Helaas kunnen de modules niet geladen worden"
       />
     )
   }
 
+  if (!toggleableModules.length) {
+    return (
+      <Box>
+        <EmptyMessage
+          testID="ModuleSettingsEmptyList"
+          text={`We hebben geen modules gevonden voor versie ${getVersion()} van de app.`}
+        />
+      </Box>
+    )
+  }
+
   return (
     <Box>
       <Column gutter="md">

src/modules/home/components/Modules.tsx

@@ -1,38 +1,18 @@
 import {pascalCase} from 'pascal-case'
 import {Box} from '@/components/ui/containers/Box'
 import {EmptyMessage} from '@/components/ui/feedback/EmptyMessage'
-import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
 import {Column} from '@/components/ui/layout/Column'
-import {useModules} from '@/hooks/useModules'
 import {ModuleButton} from '@/modules/home/components/ModuleButton'
-import {ModulesWarning} from '@/modules/home/components/ModulesWarning'
-import {ModuleStatus} from '@/modules/types'
+import {ModuleStatus, type Module} from '@/modules/types'
 
-export const Modules = () => {
-  const {enabledModules, modulesError, modulesLoading, refetchModules} =
-    useModules()
-
-  if (modulesLoading) {
-    return (
-      <PleaseWait
-        grow
-        testID="HomeModulesLoadingSpinner"
-      />
-    )
-  }
-
-  if (modulesError || !enabledModules) {
-    return (
-      <ModulesWarning
-        onRetry={refetchModules}
-        text="Er is iets misgegaan bij het ophalen van de modules."
-      />
-    )
-  }
+type Props = {
+  modules: Module[]
+}
 
-  const availableModules = enabledModules?.filter(m => !m.hiddenInMenu)
+export const Modules = ({modules}: Props) => {
+  const availableModules = modules?.filter(m => !m.hiddenInMenu)
 
-  if (!availableModules.length) {
+  if (!modules.length) {
     return (
       <Box>
         <EmptyMessage

src/modules/home/screens/Home.screen.tsx

@@ -10,7 +10,8 @@ import {Modules} from '@/modules/home/components/Modules'
 import {selectIsInternetReachable} from '@/store/slices/internetConnection'
 
 export const HomeScreen = () => {
-  const {modulesError, modulesLoading, refetchModules} = useModules()
+  const {enabledModules, modulesError, modulesLoading, refetchModules} =
+    useModules()
   const {isPortrait} = useDeviceContext()
 
   const isInternetReachable = useSelector(selectIsInternetReachable)
@@ -19,7 +20,7 @@ export const HomeScreen = () => {
     return <PleaseWait testID="HomeLoadingSpinner" />
   }
 
-  if (modulesError) {
+  if (modulesError || !enabledModules) {
     if (isInternetReachable === false) {
       return <NoInternetErrorFullScreen />
     }
@@ -48,7 +49,7 @@ export const HomeScreen = () => {
 
   return (
     <Screen testID="HomeScreen">
-      <Modules />
+      <Modules modules={enabledModules} />
     </Screen>
   )
 }

src/modules/waste-guide/components/Fraction.tsx

@@ -1,4 +1,4 @@
-import {Attention} from '@/components/ui/feedback/Attention'
+import {AlertBase} from '@/components/ui/feedback/alert/AlertBase'
 import {AlertWarning} from '@/components/ui/feedback/alert/AlertWarning'
 import {Column} from '@/components/ui/layout/Column'
 import {Row} from '@/components/ui/layout/Row'
@@ -140,12 +140,12 @@ export const Fraction = ({fraction, testID}: Props) => {
         />
       </Column>
       {!!afvalwijzerAfvalkalenderOpmerking && (
-        <Attention>
+        <AlertBase testID={testID + 'Remark'}>
           <FractionContent
             content={afvalwijzerAfvalkalenderOpmerking}
             testID={`${testID}RemarksContent`}
           />
-        </Attention>
+        </AlertBase>
       )}
     </Column>
   )