mobileapp/screens/Account.js

import React, { useEffect } from 'react';
import { Image, ImageBackground, StyleSheet, View, TouchableOpacity, } from 'react-native';
import { Text, } from 'react-native-paper'
import 'react-native-get-random-values';
import { useAuthState } from '../contexts/AuthContext';
import { useMapState } from '../contexts/MapContext';
import * as SecureStore from 'expo-secure-store';
import axios from 'axios';

const Account = ({navigation}) => {
    useEffect(() => {
      const getUserInfo = async () => {
        try {
          const response = await axios.get(`http://10.0.0.151:8000/api/me/`, {
            headers: {
              "Authorization": "Bearer " + await SecureStore.getItemAsync('accessToken')
            }
          });
          console.log(response.data);
        } 
        catch (error) {
          console.log(error.request.headers);
          console.log(error.response.data);
        }
      }

      getUserInfo();
    }, []);

    const {mapState, state} = useMapState();
    const {authDispatch, authState} = useAuthState();

    const checkAccessToken = async () => {
      console.log(await SecureStore.getItemAsync('accessToken'));
    }

    const checkIdToken = async () => {
      console.log(authState.idToken);
    }

    const revokeToken = async () => {
      const tokenParams = new URLSearchParams();
      tokenParams.append('token', await SecureStore.getItemAsync('accessToken'));
      tokenParams.append('client_id', 'atlas.clicknpush');

      try {
        const response = await axios.post(`http://10.0.0.151:8000/o/revoke_token/`, tokenParams, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });
        await SecureStore.deleteItemAsync('accessToken');
        authDispatch({type: 'SET_ACCESS_TOKEN', payload: ''});
      } 
      catch (error) {
        console.log(error.response.data);
      }
    }

    return(
        <ImageBackground style={styles.container} source={require('../assets/cover.jpg')}>
            <View style={styles.contentContainer}>
                <Image style={styles.pfp} source={require('../assets/default-pfp.png')}/>
                <View style={styles.quickStats}>
                    {/* <Text>{state.rank}</Text>
                    <Text>{state.landmarks.filter(l => l.postedBy == state.username).length}</Text> */}
                    <Text></Text>
                </View>
                <TouchableOpacity style={styles.registerBtn} onPress={checkAccessToken} >
                  <Text style={{ color: 'white', fontSize: 15 }}>Check access token</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.registerBtn} onPress={checkIdToken} >
                  <Text style={{ color: 'white', fontSize: 15 }}>Check id token</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.registerBtn} onPress={revokeToken} >
                  <Text style={{ color: 'white', fontSize: 15 }}>Revoke token</Text>
                </TouchableOpacity>
            </View>
        </ImageBackground>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end'
  },

  contentContainer: {
    backgroundColor: '#df3f3f',
    height: '80%',
    alignItems: 'center'
  },
  pfp: {
    marginTop: -75,
    borderRadius: 75,
    zIndex: 5,
    height: 150,
    width: 150,  
  },
  quickStats: {
      width: '100%',
    marginTop: 50,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
  },
  title: {
    fontFamily: 'RacingSansOne-Regular',
    marginTop: 30, 
    color: 'white',
    fontSize: 30
  },

  textContainer: { 
    marginHorizontal: 20,
    borderRadius: 50,
  },

  textInput: {
    marginBottom: 10,
    paddingLeft: 30,
    borderRadius: 50,
    overflow: 'hidden',
    backgroundColor: 'white',
    height: 50
  },

  loginBtn: {
    borderRadius: 50,
    width: 170,
    marginLeft: 10,
    justifyContent: 'center',
    backgroundColor: '#df3f3f',
    height: 60,
    alignItems: 'center'
  },

  registerBtn: {
    width: 170,
    marginRight: 10,
    borderColor: 'white',
    borderWidth: 2,
    borderRadius: 50,
    justifyContent: 'center',
    backgroundColor: 'transparent',
    height: 60,
    alignItems: 'center'
  },

  btnContainer: {
    flexDirection: 'row-reverse',
    justifyContent: 'center'
  },
})
 
export default Account;