src/components/Profile.tsx

import axios from "axios";
import React from "react";
import { Text, TouchableOpacity, View } from 'react-native'
import { API_URL, reportAxiosError } from "../globals";
import { useProfile } from "../hooks/useProfile";
import { authStore } from "../stores/AuthStore";
import UnauthorizedLayout from "./Auth/AuthLayout";
import { PrimaryButton } from "./Auth/Buttons";
import * as SecureStore from "expo-secure-store";
import * as WebBrowser from 'expo-web-browser';

/**
 * Props for the {@link Profile} component.
 */
export interface ProfileProps {
    /**
     * The id of the logged in user.
     */
    userId: string
}

/**
 * The screen component that displays the user's profile. Gets user information from the {@link useProfile} hook.
 * @component
 */
export const Profile: React.FC<ProfileProps> = ({userId}) => {
    const {profile, getProfileStatus} = useProfile(userId)

    /**
     * Logs out the current user by sending an XHR request to the OAuth 'revoke-token' endpoint.
     */
    const logout = async () => {
        try {
            const tokenParams = new URLSearchParams();
            tokenParams.append('client_id', 'atlas.mobile');
            tokenParams.append('token', authStore.accessToken as string);
            
            const response = await axios.post(API_URL + `/o/revoke-token/`, tokenParams, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
            });  

            await SecureStore.deleteItemAsync('access');
            authStore.setAccessTokenAsync(null);
        } catch (error) {
            reportAxiosError("Something went wrong when retrieving access token", error);
            console.log(error.response)
        } 
    }

    /**
     * Opens up the company privacy policy in the browser.
     */
    const openPrivacyPolicy = async () => {
        await WebBrowser.openBrowserAsync(API_URL + "/privacy")
    }

    return (
        <UnauthorizedLayout>
            <View style={{flex: 1, justifyContent: "center", alignItems: 'center'}}>
                <Text style={{color: 'white', marginBottom: 20}}>Username: {profile?.username}</Text>
                <Text style={{color: 'white', marginBottom: 40}}>Email: {profile?.email}</Text>
                <PrimaryButton onPress={logout} text="Logout" />
            </View>
            <TouchableOpacity onPress={openPrivacyPolicy}>
                <Text style={{fontSize: 12, textDecorationLine: "underline", alignSelf: "flex-end", color: 'white'}}>Privacy policy</Text>
            </TouchableOpacity>
        </UnauthorizedLayout>
    )
}