Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 1x 5x 5x 5x 5x 5x 5x 6x 5x 1x 4x 1x 3x 5x | import { useMemo } from 'react';
import { ActivityIndicator, Text, View } from 'react-native';
import { QuickSelect } from '@repo/ui/components/QuickSelect';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { textStyles } from '@repo/ui/themes/typography';
import { useMaintenanceScopes } from '@/hooks/useMaintenanceScopes';
import {
useMaintenanceActionsSelector,
useMaintenanceStateSelector,
} from '@/screens/Maintenance/context';
const ChooseScope = () => {
const styles = useStyles();
const { scopes, isLoading, isError } = useMaintenanceScopes();
const value = useMaintenanceStateSelector(state => state.form.scope);
const changeScope = useMaintenanceActionsSelector(
actions => actions.changeScope,
);
const options = useMemo(
() =>
scopes.map(scope => ({
label: scope.label,
value: scope.value,
testID: `scope-chip-${scope.value}`,
})),
[scopes],
);
if (isLoading) {
return (
<View style={styles.loader} testID="scope-loader">
<ActivityIndicator />
</View>
);
}
if (isError) {
return (
<View style={styles.loader}>
<Text style={textStyles.content.regular} accessibilityRole="alert">
Something went wrong
</Text>
</View>
);
}
return (
<View style={styles.container}>
<QuickSelect
options={options}
value={value ?? null}
onChange={changeScope}
testID="choose-scope-quick-select"
/>
</View>
);
};
export default ChooseScope;
const useStyles = makeStyles(theme => ({
loader: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
container: {
flex: 1,
paddingHorizontal: theme.metrics.spacing[4],
backgroundColor: theme.colors.background.pageMuted,
},
}));
|