mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 01:56:16 +00:00
224 lines
7.3 KiB
TypeScript
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;
|