Skip to content

Commit 4fcb23b

Browse files
elysseaaelysseaa
committed
Fix inline styles, permission handling
- Moved all inline styles to stylesheet - Fixed permission handling to render satisfied permissions as complete - Updated icon/button colors to use Colors.ts colors - Ran linter to reduce tab size
1 parent 414860d commit 4fcb23b

File tree

1 file changed

+140
-87
lines changed

1 file changed

+140
-87
lines changed

‎Auth/InsufficientPermissions.tsx‎

Lines changed: 140 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,157 @@
11
import MaterialIcons from '@react-native-vector-icons/material-icons';
22
import React, { useState } from 'react';
33
import { Button, Modal, StyleSheet, Text, View } from 'react-native';
4+
import { Colors } from '../Themes/Colors';
45

5-
type InsufficientPermissionsProps = {
6-
featureName: string,
7-
onRetry: () => void,
8-
missingPermissions: string[],
9-
requiredPermissions: string[],
6+
type InsufficientPermissionsProps = {
7+
featureName: string;
8+
onRetry: () => void;
9+
missingPermissions: string[];
10+
requiredPermissions: string[];
1011
};
1112

12-
function InsufficientPermissions({ featureName, onRetry,
13-
missingPermissions, requiredPermissions }: InsufficientPermissionsProps) {
14-
const [detailsVisible, setDetailsVisible] = useState(false);
13+
function InsufficientPermissions({
14+
featureName,
15+
onRetry,
16+
missingPermissions,
17+
requiredPermissions,
18+
}: InsufficientPermissionsProps) {
19+
const [detailsVisible, setDetailsVisible] = useState(false);
20+
const satisfiedPermissions = requiredPermissions.filter(
21+
(item) => !missingPermissions.includes(item),
22+
);
1523

16-
type PermissionDetailsListProps = {
17-
permissions: string[],
18-
hasPermission: boolean
19-
};
20-
const PermissionDetailsList = ({permissions, hasPermission} : PermissionDetailsListProps) => {
21-
return permissions.map((permission, index) => (
22-
<View key={index} style={[ styles.permissionItem, { borderTopWidth: index === 0 ? 1 : 0 }]}>
23-
{hasPermission?
24-
<MaterialIcons name={"check-circle-outline"} size={30} color="#36B92B" style={{ margin: 20 }} />
25-
:
26-
<MaterialIcons name={"error-outline"} size={30} color="#b00020" style={{ margin: 20 }} />
27-
}
28-
<Text style={{ fontSize: 20 }}>{permission}</Text>
29-
</View>
30-
));
31-
}
24+
type PermissionDetailsListProps = {
25+
permissions: string[];
26+
hasPermission: boolean;
27+
};
28+
const PermissionDetailsList = ({ permissions, hasPermission }: PermissionDetailsListProps) => {
29+
return permissions.map((permission, index) => (
30+
<View key={index} style={index === 0 ? styles.permissionItemFirst : styles.permissionItem}>
31+
{hasPermission ? (
32+
<MaterialIcons
33+
name={'check-circle-outline'}
34+
size={30}
35+
color={Colors.success}
36+
style={styles.icon}
37+
/>
38+
) : (
39+
<MaterialIcons
40+
name={'error-outline'}
41+
size={30}
42+
color={Colors.danger}
43+
style={styles.icon}
44+
/>
45+
)}
46+
<Text style={styles.permissionItemText}>{permission}</Text>
47+
</View>
48+
));
49+
};
3250

33-
const PermissionDetailsDialog = () => {
34-
return (
35-
<Modal
36-
animationType="fade"
37-
transparent={true}>
38-
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
39-
<View style={styles.modalView}>
40-
<Text style={{ fontSize: 25, marginVertical: 20 }}>Required Permissions</Text>
41-
<PermissionDetailsList permissions={missingPermissions} hasPermission={false}/>
42-
<PermissionDetailsList permissions={requiredPermissions} hasPermission={true}/>
43-
<View style={{ alignItems:'flex-end', marginVertical: 20 }}>
44-
<Button
45-
onPress={() => setDetailsVisible(false)}
46-
title="Close"
47-
/>
48-
</View>
49-
</View>
50-
</View>
51-
</Modal>
52-
);
53-
};
54-
51+
const PermissionDetailsDialog = () => {
5552
return (
56-
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 10 }}>
57-
{
58-
detailsVisible &&
59-
<PermissionDetailsDialog></PermissionDetailsDialog>
60-
}
61-
<MaterialIcons name={"error-outline"} size={100} color="#b00020" style={{ padding: 10 }} />
62-
<Text style={{ fontSize: 30, textAlign: "center", marginBottom: 20 }}>
63-
{featureName} permissions required
64-
</Text>
65-
<View style={{display:"flex", flexDirection:"row", flexWrap:"wrap"}}>
66-
<View style={{marginHorizontal: 5}}>
67-
<Button onPress={() => {}} title="Go to #it-helpdesk" />
68-
</View>
69-
<View style={{marginHorizontal: 5}}>
70-
<Button onPress={onRetry} color="#EEB211" title="Retry" />
71-
</View>
72-
</View>
73-
<View style={{marginTop: 10}}>
74-
<Button onPress={() => setDetailsVisible(true)} title="View details" />
53+
<Modal animationType="fade" transparent={true}>
54+
<View style={styles.viewContainer}>
55+
<View style={styles.modalView}>
56+
<Text style={styles.modalText}>Required Permissions</Text>
57+
<PermissionDetailsList permissions={missingPermissions} hasPermission={false} />
58+
<PermissionDetailsList permissions={satisfiedPermissions} hasPermission={true} />
59+
<View style={styles.modalButton}>
60+
<Button onPress={() => setDetailsVisible(false)} title="Close" />
7561
</View>
76-
</View>
62+
</View>
63+
</View>
64+
</Modal>
7765
);
66+
};
67+
68+
return (
69+
<View style={styles.viewContainer}>
70+
{detailsVisible && <PermissionDetailsDialog></PermissionDetailsDialog>}
71+
<MaterialIcons name={'error-outline'} size={100} color={Colors.danger} style={styles.icon} />
72+
<Text style={styles.mainText}>{featureName} permissions required</Text>
73+
<View style={styles.buttonTopRow}>
74+
<View style={styles.button}>
75+
<Button onPress={() => {}} title="Go to #it-helpdesk" />
76+
</View>
77+
<View style={styles.button}>
78+
<Button onPress={onRetry} color={Colors.Gold} title="Retry" />
79+
</View>
80+
</View>
81+
<View style={styles.buttonBottomRow}>
82+
<Button onPress={() => setDetailsVisible(true)} title="View details" />
83+
</View>
84+
</View>
85+
);
7886
}
7987

8088
const styles = StyleSheet.create({
81-
modalView: {
82-
margin: 30,
83-
backgroundColor: 'white',
84-
borderRadius: 20,
85-
padding: 20,
86-
shadowOffset: {
87-
width: 0,
88-
height: 2,
89-
},
90-
shadowOpacity: 0.25,
91-
shadowRadius: 4,
92-
elevation: 5,
93-
width:"75%"
89+
button: {
90+
marginHorizontal: 5,
91+
},
92+
buttonBottomRow: {
93+
marginTop: 10,
94+
},
95+
buttonTopRow: {
96+
display: 'flex',
97+
flexDirection: 'row',
98+
flexWrap: 'wrap',
99+
},
100+
icon: {
101+
margin: 10,
102+
},
103+
mainText: {
104+
fontSize: 30,
105+
marginBottom: 20,
106+
textAlign: 'center',
107+
},
108+
modalButton: {
109+
alignItems: 'flex-end',
110+
marginVertical: 20,
111+
},
112+
modalText: {
113+
fontSize: 20,
114+
marginVertical: 20,
115+
},
116+
modalView: {
117+
backgroundColor: 'white',
118+
borderRadius: 20,
119+
elevation: 5,
120+
margin: 20,
121+
padding: 20,
122+
shadowOffset: {
123+
width: 0,
124+
height: 2,
94125
},
95-
permissionItem: {
96-
justifyContent: 'flex-start',
97-
alignItems: "center",
98-
flexDirection:"row",
99-
borderBlockColor:"gray",
100-
borderBottomWidth: 1
101-
}
126+
shadowOpacity: 0.25,
127+
shadowRadius: 4,
128+
width: '75%',
129+
},
130+
permissionItem: {
131+
alignItems: 'center',
132+
borderBlockColor: 'gray',
133+
borderBottomWidth: 1,
134+
borderTopWidth: 0,
135+
flexDirection: 'row',
136+
justifyContent: 'flex-start',
137+
},
138+
permissionItemFirst: {
139+
alignItems: 'center',
140+
borderBlockColor: 'gray',
141+
borderBottomWidth: 1,
142+
borderTopWidth: 1,
143+
flexDirection: 'row',
144+
justifyContent: 'flex-start',
145+
},
146+
permissionItemText: {
147+
fontSize: 15,
148+
},
149+
viewContainer: {
150+
alignItems: 'center',
151+
flex: 1,
152+
justifyContent: 'center',
153+
margin: 10,
154+
},
102155
});
103156

104-
export default InsufficientPermissions;
157+
export default InsufficientPermissions;

0 commit comments

Comments
 (0)