Skip to content

Commit

Permalink
feat: Show loading indicators and failure indicators for soil id (#1688)
Browse files Browse the repository at this point in the history
Commits:
* feat: Location dashboard displays "Loading..." or "No matches" or soil id results

* feat: Add loading spinner for matches section in Soil ID screen

* feat: error and alert boxes appear for soil id screen's top soil matches section

* feat: temporary location callout displays each datum section with loading spinner, error, no matches, or the top match

* refactor: Move message box components to separate files

* refactor: Consolidate no matches and error strings

* refactor: get soil match and ecological site similarly between TemporaryLocationCallout and LocationPrediction on dashboard

* fix: use consistent apostrophe characters in strings

* fix: minor styling and refactoring

* fix: Remove unused import after rebase

* refactor: Consolidate some duplicate logic with SoilIdStatusDisplay

* fix: Update test snapshot to accomodate soil id tile existing regardless of status
  • Loading branch information
knipec authored Jul 8, 2024
1 parent ede74f9 commit dafa571
Show file tree
Hide file tree
Showing 13 changed files with 751 additions and 145 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1367,7 +1367,217 @@ exports[`renders correctly 1`] = `
},
]
}
/>
>
<View
style={
{
"alignItems": "flex-start",
"backgroundColor": "#00344D",
"borderRadius": 4,
"flexDirection": "column",
"padding": 18,
}
}
>
<View
style={
[
{
"flexDirection": "row",
},
{
"alignItems": "center",
},
]
}
>
<View
style={
{
"marginRight": 15,
}
}
>
< />
</View>
<Text
letterSpacing="0.15px"
lineHeight="24px"
style={
{
"color": "#93E39B",
"fontSize": 16,
"fontWeight": "bold",
"textTransform": "uppercase",
}
}
>
Soil ID
</Text>
</View>
<View
style={
{
"height": 15,
}
}
/>
<Text
letterSpacing="0.15px"
lineHeight="24px"
style={
{
"color": "#FFFFFF",
"fontSize": 16,
"fontWeight": "400",
"marginBottom": 5,
}
}
>
<Text
style={
{
"fontWeight": "bold",
}
}
>
Top Match
:
</Text>
<Text
style={{}}
>
Loading…
</Text>
</Text>
<Text
letterSpacing="0.15px"
lineHeight="24px"
style={
{
"color": "#FFFFFF",
"fontSize": 16,
"fontWeight": "400",
"marginBottom": 25,
}
}
>
<Text
style={
{
"fontWeight": "bold",
}
}
>
Ecological Site Name
:
</Text>
<Text
style={{}}
>
Loading…
</Text>
</Text>
<View
accessibilityRole="button"
accessibilityState={
{
"busy": undefined,
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"selected": undefined,
}
}
accessibilityValue={
{
"max": undefined,
"min": undefined,
"now": undefined,
"text": undefined,
}
}
accessible={true}
collapsable={false}
colorScheme="primary"
dataSet={{}}
focusable={true}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
{
"alignItems": "center",
"backgroundColor": "#028843",
"borderRadius": 4,
"flexDirection": "row",
"justifyContent": "center",
"paddingBottom": 6,
"paddingLeft": 16,
"paddingRight": 16,
"paddingTop": 6,
"width": "100%",
}
}
>
<View
dataSet={{}}
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
test={true}
>
<View
dataSet={{}}
style={{}}
>
<Text
dataSet={{}}
style={
{
"backgroundColor": undefined,
"color": "#fafafa",
"fontFamily": undefined,
"fontSize": 14,
"fontStyle": "normal",
"fontWeight": "500",
"letterSpacing": 0.4,
"lineHeight": 24,
"textDecorationLine": undefined,
"textTransform": "uppercase",
}
}
>
Explore the data
</Text>
</View>
<View
dataSet={{}}
style={
{
"width": 6,
}
}
/>
<Icon
color="#fafafa"
name="chevron-right"
size={20}
style={{}}
/>
</View>
</View>
</View>
</View>
</View>
</RCTScrollView>
</View>
Expand Down
46 changes: 46 additions & 0 deletions dev-client/src/components/SoilIdStatusDisplay.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* Copyright © 2024 Technology Matters
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see https://www.gnu.org/licenses/.
*/

import {ReactNode} from 'react';

import {SoilIdStatus} from 'terraso-client-shared/soilId/soilIdTypes';

export type SoilIdStatusDisplayProps = {
status: SoilIdStatus;

loading: ReactNode;
error: ReactNode;
noData: ReactNode;
data: ReactNode;
};
export const SoilIdStatusDisplay = ({
status,
loading,
error,
noData,
data,
}: SoilIdStatusDisplayProps) => {
if (status === 'loading') {
return loading;
} else if (status === 'error') {
return error;
} else if (status === 'DATA_UNAVAILABLE') {
return noData;
} else {
return data;
}
};
49 changes: 49 additions & 0 deletions dev-client/src/components/messages/AlertMessageBox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
* Copyright © 2024 Technology Matters
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see https://www.gnu.org/licenses/.
*/

import {Icon} from 'terraso-mobile-client/components/icons/Icon';
import {
Box,
Column,
Row,
Text,
} from 'terraso-mobile-client/components/NativeBaseAdapters';

type MessageBoxProps = React.PropsWithChildren<{
title?: string;
}>;

export const AlertMessageBox = ({title, children}: MessageBoxProps) => {
return (
<Box
backgroundColor="primary.contrast"
borderColor="warning.main"
borderWidth="2px"
borderRadius="4px"
padding="md">
<Row>
<Icon name="warning-amber" color="warning.main" mr="md" />
<Column flex={1}>
<Text variant="body1-strong" color="warning.content" mb="sm">
{title}
</Text>
{children}
</Column>
</Row>
</Box>
);
};
49 changes: 49 additions & 0 deletions dev-client/src/components/messages/ErrorMessageBox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
* Copyright © 2024 Technology Matters
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see https://www.gnu.org/licenses/.
*/

import {Icon} from 'terraso-mobile-client/components/icons/Icon';
import {
Box,
Column,
Row,
Text,
} from 'terraso-mobile-client/components/NativeBaseAdapters';

type MessageBoxProps = React.PropsWithChildren<{
title?: string;
}>;

export const ErrorMessageBox = ({title, children}: MessageBoxProps) => {
return (
<Box
backgroundColor="error.background"
borderColor="error.main"
borderWidth="2px"
borderRadius="4px"
padding="md">
<Row>
<Icon name="error-outline" color="error.main" mr="md" />
<Column flex={1}>
<Text variant="body1-strong" color="error.content" mb="sm">
{title}
</Text>
{children}
</Column>
</Row>
</Box>
);
};
24 changes: 24 additions & 0 deletions dev-client/src/model/soilId/soilIdTypes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*
* Copyright © 2024 Technology Matters
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see https://www.gnu.org/licenses/.
*/

import {
SoilIdResults,
SoilIdStatus,
} from 'terraso-client-shared/soilId/soilIdSlice';

// TODO: This could be moved to client-shared
export type SoilIdData = SoilIdResults & {status: SoilIdStatus};
Loading

0 comments on commit dafa571

Please sign in to comment.