Files
cally/components/pages/settings/user_settings_views/MyGroup.tsx
Milan Paunovic 91717c699d ver bump
2024-09-28 08:59:05 +02:00

224 lines
7.3 KiB
TypeScript

import {
Avatar,
Button,
Card,
Colors,
Dialog,
FloatingButton,
PanningProvider,
Picker,
Text,
TextField,
TouchableOpacity,
View
} from "react-native-ui-lib";
import React, {useState} from "react";
import {ScrollView, StyleSheet} from "react-native";
import {PickerSingleValue} from "react-native-ui-lib/src/components/picker/types";
import {useCreateSubUser} from "@/hooks/firebase/useCreateSubUser";
import {ProfileType} from "@/contexts/AuthContext";
const MyGroup = () => {
const [showAddUserDialog, setShowAddUserDialog] = useState(false)
const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false)
const [selectedStatus, setSelectedStatus] = useState<string | PickerSingleValue>('CHILD');
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const {mutateAsync: createSubUser} = useCreateSubUser()
const handleCreateSubUser = async () => {
if (!firstName || !lastName || !email) {
console.error("All fields are required");
return;
}
if (!email.includes("@")) {
console.error("Invalid email address");
return;
}
await createSubUser({
firstName,
lastName,
email,
password: email,
userType: selectedStatus as ProfileType
});
}
return (
<View style={{flex: 1, height: "100%"}}>
<View>
<ScrollView style={styles.card}>
<Text text70 marginV-10>
Family
</Text>
<Text text70 marginB-10 marginT-15>
Caregivers
</Text>
</ScrollView>
</View>
<FloatingButton fullWidth hideBackgroundOverlay visible
button={{label: '+ Add a user device', onPress: () => setShowAddUserDialog(true)}}/>
<Dialog
visible={showAddUserDialog}
onDismiss={() => setShowAddUserDialog(false)}
panDirection={PanningProvider.Directions.DOWN}
>
<Card padding-25 gap-10>
<Text>
Add a new user device
</Text>
<Button backgroundColor={"#FD1775"}><Text white>Show a QR Code</Text></Button>
<Button backgroundColor={"#05A8B6"} onPress={() => {
setShowAddUserDialog(false)
setTimeout(() => {
setShowNewUserInfoDialog(true)
}, 500)
}}><Text white>Enter email address</Text></Button>
<TouchableOpacity onPress={() => setShowAddUserDialog(false)} center><Text>Return to user
settings</Text></TouchableOpacity>
</Card>
</Dialog>
<Dialog
panDirection={PanningProvider.Directions.DOWN}
visible={showNewUserInfoDialog}
onDismiss={() => setShowNewUserInfoDialog(false)}
>
<Card padding-25 style={styles.dialogCard}>
<View row spread>
<Text text60M>
New User Information
</Text>
<TouchableOpacity onPress={() => setShowAddUserDialog(false)}>
<Text>X</Text>
</TouchableOpacity>
</View>
<View row centerV gap-20 marginV-20>
<Avatar imageStyle={{borderRadius: 10}} containerStyle={{borderRadius: 10,}} size={60}
backgroundColor={Colors.grey60}/>
<TouchableOpacity onPress={() => {
}}>
<Text style={{color: Colors.green10}}>Upload User Profile Photo</Text>
</TouchableOpacity>
</View>
<Text style={styles.label}>Member Status</Text>
<Picker
value={selectedStatus}
//@ts-ignore
onChange={item => setSelectedStatus(item)}
style={styles.picker}
showSearch
floatingPlaceholder
>
<Picker.Item label="Child" value="CHILD"/>
<Picker.Item label="Parent" value="PARENT"/>
<Picker.Item label="Caregiver" value="CAREGIVER"/>
</Picker>
<Text style={styles.label}>First Name</Text>
<TextField
placeholder="First name"
value={firstName}
onChangeText={setFirstName}
style={styles.inputField}
/>
<Text style={styles.label}>Last Name</Text>
<TextField
placeholder="Last name"
value={lastName}
onChangeText={setLastName}
style={styles.inputField}
/>
<Text style={styles.label}>Email Address</Text>
<TextField
placeholder="Email address"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
autoCapitalize="none"
style={styles.inputField}
/>
<Button
disabled={!firstName || !lastName || !email}
label="Add group member"
backgroundColor="#FD1775"
style={{marginTop: 20}}
onPress={handleCreateSubUser}
/>
</Card>
</Dialog>
</View>
);
};
const styles = StyleSheet.create({
card: {
marginVertical: 15,
backgroundColor: "white",
width: "100%",
borderRadius: 15,
padding: 20,
},
pfp: {
aspectRatio: 1,
width: 60,
backgroundColor: "green",
borderRadius: 20,
},
txtBox: {
backgroundColor: "#fafafa",
borderRadius: 50,
borderWidth: 2,
borderColor: "#cecece",
padding: 15,
height: 45,
},
inputField: {
borderRadius: 50,
paddingVertical: 12,
paddingHorizontal: 16,
backgroundColor: Colors.grey80,
marginBottom: 16,
borderColor: Colors.grey50,
borderWidth: 1,
height: 40,
},
picker: {
borderRadius: 50,
paddingVertical: 12,
paddingHorizontal: 16,
backgroundColor: Colors.grey80,
marginBottom: 16,
borderColor: Colors.grey50,
borderWidth: 1,
marginTop: -20,
height: 40,
},
label: {
marginBottom: 5,
fontSize: 12,
color: Colors.grey40,
},
dialogCard: {
borderRadius: 10,
gap: 10,
},
});
export default MyGroup;