mirror of
https://github.com/urosran/cally.git
synced 2025-07-11 07:37:25 +00:00
90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Button,
|
|
Card,
|
|
Dialog,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from "react-native-ui-lib";
|
|
import QRCode from "react-native-qrcode-svg";
|
|
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
|
|
import Ionicons from "@expo/vector-icons/Ionicons";
|
|
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
|
|
import { StyleSheet } from "react-native";
|
|
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
|
|
|
const UserMenu = ({
|
|
user,
|
|
showQRCodeDialog,
|
|
setShowQRCodeDialog,
|
|
}: {
|
|
user: UserProfile;
|
|
showQRCodeDialog: boolean;
|
|
setShowQRCodeDialog: (value: string | boolean) => void;
|
|
}) => {
|
|
const {user: currentUser} = useAuthContext();
|
|
|
|
const handleShowQRCode = () => {
|
|
setShowQRCodeDialog(user.uid!);
|
|
};
|
|
|
|
const getQRCodeText = () => {
|
|
if (user.userType === ProfileType.FAMILY_DEVICE) {
|
|
return "Open Cally on the family device and scan the code to link it to your family group";
|
|
}
|
|
|
|
if (currentUser?.uid === user.uid) {
|
|
return "To connect another device to your profile, open the Cally app on that device and scan this QR code.";
|
|
}
|
|
|
|
return `To connect ${user.firstName}'s device to your Family Group, open the Cally app on their device and scan the QR code.`;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<TouchableOpacity onPress={handleShowQRCode}>
|
|
<Ionicons name="qr-code-outline" size={24} color="black" />
|
|
</TouchableOpacity>
|
|
|
|
<Dialog
|
|
visible={showQRCodeDialog}
|
|
onDismiss={() => setShowQRCodeDialog(false)}
|
|
panDirection={PanningDirectionsEnum.DOWN}
|
|
>
|
|
<Card padding-20 center>
|
|
<Text
|
|
center
|
|
marginT-15
|
|
marginH-15
|
|
marginB-25
|
|
style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
|
|
>
|
|
{getQRCodeText()}
|
|
</Text>
|
|
<QRCode value={user.uid!} size={150} />
|
|
<Button
|
|
marginT-20
|
|
style={styles.button}
|
|
label="Close"
|
|
labelStyle={{
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 15,
|
|
}}
|
|
onPress={() => setShowQRCodeDialog(false)}
|
|
/>
|
|
</Card>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
backgroundColor: "#d9d9d9",
|
|
width: 117,
|
|
height: 47,
|
|
},
|
|
});
|
|
|
|
export default UserMenu;
|