addfriend.js

//要user id
//傳friend code給後端 且要verify

import React, {useState} from 'react';
import { Switch, Alert, StyleSheet, View, Text, Button, TouchableOpacity, ToastAndroid, TextInput} from 'react-native';
import { Feather } from '@expo/vector-icons';
import { globalStyles } from '../../styles/global';

export default function AddFriend() {
  
  const [CheckID, setCheckID] = useState(false);

  const handleButtonPress = () => {
      if (CheckID) {
        navigation.navigate('MyEvent');
      } else {
        Alert.alert('Friend not found!', 'Please enter correct friend code.');
        // [{ style: globalStyles.paragraph }]
      }
  };

  const user = {
    id: 'HAPPYYING666',
    username: 'Domingo',
    user_photo: 0,
    events: ['809BBF', '1A2B3C', 'STEVEN', '0H0E2E', '6969SX'],
    friends: ['Guavaaa', 'Jason', 'Tony', 'Bear'],
    email: 'IAMGAY@gmail.com',
    phone_number: '0911451419',
    language: 'English',
    notifs: [2, 4, 5],
    notif_on: true,
  };

  // copy
  const [isCopied, setIsCopied] = useState(false);
  const handleCopy = () => {
    setIsCopied(true);
    showToastMessage('copied', ToastAndroid.LONG); // 顯示 Toast 訊息
  };
  const showToastMessage = (message, duration) => {
    ToastAndroid.show(message, duration);
  };

  //TextInput
  const [FriendCode, setFriendCode] = useState('');
  const FriendCode_submitHandler = (text) => {  
    // console.log(todos);
      setFriendCode(text);
  }

  
  return (
    <View style={styles.container}>
      <View style={styles.rows}>
        <Text style={globalStyles.headingText}> Your friend code: </Text>
      </View>

      <View style={styles.container_1}>
        <View style={styles.rows_1}>
          <Text style={globalStyles.headingText}>{user.id}</Text>
          <TouchableOpacity onPress={handleCopy}>
            <Feather name="copy" size={20} color="black" style={{ padding: 8}} />
          </TouchableOpacity>
        </View>

        <View style={{ borderBottomColor: '#c5c5c5', borderBottomWidth: 1, padding: 10 }} />

        <Text style={[globalStyles.headingText, { padding: 8 }]}>Enter friend's code: </Text>

        <View style={styles.inputContainer}>
          <TextInput
            style={styles.textInput}
            placeholder="Enter friend's code"
            onChangeText={FriendCode_submitHandler}
            value={FriendCode}
          />
          {/* <TouchableOpacity style={styles.button} onPress={() => submitHandler(FriendCode)}> */}
          <TouchableOpacity style={styles.button} onPress = {handleButtonPress}>
            <Text style={styles.buttonText}>ADD</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

const submitHandler = () => {
  // Perform your desired logic here
  console.log('Submit button pressed');
  console.log('Friend Code:', FriendCode);
  // Add your code to handle the submission of friend code
};


const styles = StyleSheet.create({
	container: {
		flex:1,
		padding: 20,
		backgroundColor: '#FFF',
	},
  
  rows_1: {
    flexDirection: 'row',
    justifyContent: 'center', 
    alignItems: 'center',
    paddingTop:30,
  },

  rows: {
    flexDirection: 'row',
    justifyContent: 'space-between', 
    alignItems: 'flex-start',
  },

  textInput: {
    flex: 1,
    height: 50,
    paddingLeft: 10,
  },

  inputContainer: {
		marginTop: 10,
		paddingLeft: 10,
		marginBottom: 10,
		height: 50,
		borderRadius: 16,
		flexDirection: 'row',
		alignItems: 'center',
		borderWidth: 1,
		borderColor: '#809BBF',
		paddingVertical: 10,
		backgroundColor: '#fff',

	},

  //button
  buttonText: {
    color: 'white',
    fontSize: 14,
    textAlign: 'center',
    fontFamily: 'SpaceGrotesk_400Regular',
  },
  button: {
		width: 90,
		height: 50,
    backgroundColor: '#809BBF',
		justifyContent: 'center',
		borderRadius: 16,
	},
  buttonContainer: {
    marginLeft: 'auto',
    paddingRight: 0,
  },
})