From e5e0d605e78803166d3af07649a47522831e3ec5 Mon Sep 17 00:00:00 2001 From: Frank Filius Date: Thu, 29 Aug 2024 13:47:43 +0200 Subject: [PATCH 1/2] Remove attention and implementations --- .../ui/feedback/Attention.stories.tsx | 18 -------- src/components/ui/feedback/Attention.tsx | 36 ---------------- .../ui/feedback/Warning.stories.tsx | 13 ------ src/components/ui/feedback/Warning.tsx | 18 -------- .../ui/feedback/alert/AlertBase.tsx | 4 +- .../ui/feedback/alert/AlertInformation.tsx | 12 ------ .../home/components/ModuleSettings.tsx | 41 ++++++++++++++++--- src/modules/home/components/Modules.tsx | 31 ++++---------- .../home/components/ModulesWarning.tsx | 26 ------------ src/modules/home/screens/Home.screen.tsx | 7 ++-- .../waste-guide/components/Fraction.tsx | 6 +-- 11 files changed, 51 insertions(+), 161 deletions(-) delete mode 100644 src/components/ui/feedback/Attention.stories.tsx delete mode 100644 src/components/ui/feedback/Attention.tsx delete mode 100644 src/components/ui/feedback/Warning.stories.tsx delete mode 100644 src/components/ui/feedback/Warning.tsx delete mode 100644 src/components/ui/feedback/alert/AlertInformation.tsx delete mode 100644 src/modules/home/components/ModulesWarning.tsx diff --git a/src/components/ui/feedback/Attention.stories.tsx b/src/components/ui/feedback/Attention.stories.tsx deleted file mode 100644 index 3aae9913d..000000000 --- a/src/components/ui/feedback/Attention.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import {Meta, StoryObj} from '@storybook/react' -import {Attention} from '@/components/ui/feedback/Attention' -import {Paragraph} from '@/components/ui/text/Paragraph' - -export default { - component: Attention, -} as Meta - -export const Default: StoryObj = { - args: { - children: ( - - Er is iets misgegaan met de app. Sorry voor het ongemak! - - ), - warning: false, - }, -} diff --git a/src/components/ui/feedback/Attention.tsx b/src/components/ui/feedback/Attention.tsx deleted file mode 100644 index bdb3a6dfb..000000000 --- a/src/components/ui/feedback/Attention.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import {ReactNode} from 'react' -import {StyleSheet, View} from 'react-native' -import {Theme} from '@/themes/themes' -import {useThemable} from '@/themes/useThemable' - -type Props = { - children: ReactNode - warning?: boolean -} - -export const Attention = ({children, warning}: Props) => { - const styles = useThemable(createStyles) - - return ( - - {children} - - ) -} - -const borderWidth = 2 - -const createStyles = ({color, size}: Theme) => - StyleSheet.create({ - attention: { - borderLeftColor: color.attention.default.border, - borderLeftWidth: borderWidth, - paddingLeft: size.spacing.md - borderWidth, - }, - warning: { - borderLeftColor: color.attention.warning.border, - }, - }) diff --git a/src/components/ui/feedback/Warning.stories.tsx b/src/components/ui/feedback/Warning.stories.tsx deleted file mode 100644 index a094868fc..000000000 --- a/src/components/ui/feedback/Warning.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import {Meta, StoryObj} from '@storybook/react' -import {Warning} from '@/components/ui/feedback/Warning' - -export default { - component: Warning, -} as Meta - -export const Default: StoryObj = { - args: { - title: 'Sorry …', - text: 'Er is iets misgegaan', - }, -} diff --git a/src/components/ui/feedback/Warning.tsx b/src/components/ui/feedback/Warning.tsx deleted file mode 100644 index d3d64f200..000000000 --- a/src/components/ui/feedback/Warning.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import {Attention} from '@/components/ui/feedback/Attention' -import {Paragraph} from '@/components/ui/text/Paragraph' -import {Title} from '@/components/ui/text/Title' - -type Props = { - text: string - title: string -} - -export const Warning = ({text, title}: Props) => ( - - - <Paragraph variant="small">{text}</Paragraph> - </Attention> -) diff --git a/src/components/ui/feedback/alert/AlertBase.tsx b/src/components/ui/feedback/alert/AlertBase.tsx index 3e4fbd12b..4ab2b6f47 100644 --- a/src/components/ui/feedback/alert/AlertBase.tsx +++ b/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)} diff --git a/src/components/ui/feedback/alert/AlertInformation.tsx b/src/components/ui/feedback/alert/AlertInformation.tsx deleted file mode 100644 index ecce5b95b..000000000 --- a/src/components/ui/feedback/alert/AlertInformation.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import {AlertVariant} from '@/components/ui/feedback/alert/Alert.types' -import { - AlertBase, - AlertBaseProps, -} from '@/components/ui/feedback/alert/AlertBase' - -export const AlertInformation = (props: AlertBaseProps) => ( - <AlertBase - {...props} - variant={AlertVariant.information} - /> -) diff --git a/src/modules/home/components/ModuleSettings.tsx b/src/modules/home/components/ModuleSettings.tsx index 25256f0a5..6c858647c 100644 --- a/src/modules/home/components/ModuleSettings.tsx +++ b/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"> diff --git a/src/modules/home/components/Modules.tsx b/src/modules/home/components/Modules.tsx index 4e289d2e3..8a1ae01f4 100644 --- a/src/modules/home/components/Modules.tsx +++ b/src/modules/home/components/Modules.tsx @@ -1,38 +1,21 @@ 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" - /> - ) - } +type Props = { + modules: Module[] +} - if (modulesError || !enabledModules) { - return ( - <ModulesWarning - onRetry={refetchModules} - text="Er is iets misgegaan bij het ophalen van de modules." - /> - ) - } +export const Modules = ({modules}: Props) => { + const {enabledModules} = useModules() const availableModules = enabledModules?.filter(m => !m.hiddenInMenu) - if (!availableModules.length) { + if (!modules.length) { return ( <Box> <EmptyMessage diff --git a/src/modules/home/components/ModulesWarning.tsx b/src/modules/home/components/ModulesWarning.tsx deleted file mode 100644 index 4c805edaa..000000000 --- a/src/modules/home/components/ModulesWarning.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import {Button} from '@/components/ui/buttons/Button' -import {Box} from '@/components/ui/containers/Box' -import {Warning} from '@/components/ui/feedback/Warning' -import {Gutter} from '@/components/ui/layout/Gutter' - -type Props = { - onRetry?: () => void - text: string -} - -export const ModulesWarning = ({onRetry, text}: Props) => ( - <Box> - <Warning - text={text} - title="Fout" - /> - <Gutter height="md" /> - {!!onRetry && ( - <Button - label="Probeer opnieuw" - onPress={onRetry} - testID="HomeModulesWarningRetryButton" - /> - )} - </Box> -) diff --git a/src/modules/home/screens/Home.screen.tsx b/src/modules/home/screens/Home.screen.tsx index 74de18a38..d4a21baa3 100644 --- a/src/modules/home/screens/Home.screen.tsx +++ b/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> ) } diff --git a/src/modules/waste-guide/components/Fraction.tsx b/src/modules/waste-guide/components/Fraction.tsx index 6331bc9e8..7b2611b69 100644 --- a/src/modules/waste-guide/components/Fraction.tsx +++ b/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> ) From 3dafed15a275349863720b24f426b58f8dd8c16f Mon Sep 17 00:00:00 2001 From: Frank Filius <frank.filius@gmail.com> Date: Thu, 29 Aug 2024 16:33:02 +0200 Subject: [PATCH 2/2] Get info from prop --- src/modules/home/components/Modules.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/modules/home/components/Modules.tsx b/src/modules/home/components/Modules.tsx index 8a1ae01f4..0ce1313f4 100644 --- a/src/modules/home/components/Modules.tsx +++ b/src/modules/home/components/Modules.tsx @@ -2,7 +2,6 @@ import {pascalCase} from 'pascal-case' import {Box} from '@/components/ui/containers/Box' import {EmptyMessage} from '@/components/ui/feedback/EmptyMessage' import {Column} from '@/components/ui/layout/Column' -import {useModules} from '@/hooks/useModules' import {ModuleButton} from '@/modules/home/components/ModuleButton' import {ModuleStatus, type Module} from '@/modules/types' @@ -11,9 +10,7 @@ type Props = { } export const Modules = ({modules}: Props) => { - const {enabledModules} = useModules() - - const availableModules = enabledModules?.filter(m => !m.hiddenInMenu) + const availableModules = modules?.filter(m => !m.hiddenInMenu) if (!modules.length) { return (