# All files / atlas/src/hooks useProfile.ts

4.76% Statements 1/21
0% Branches 0/2
0% Functions 0/3
5% Lines 1/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88

    3x

     // This file houses crud methods to interact with user profile data on the server. They are generally called by react query mutations.

    import axios, { AxiosRequestConfig } from "axios"
    import { QueryClient, useMutation, useQuery, useQueryClient } from "react-query";
    import { API_URL, reportAxiosError } from "../globals"
    import { authStore } from "../stores/AuthStore";
    import { useAuth } from "./useAuth";

    /**
     * Interface that contains data in a user's profile.
     */
    export interface UserProfile {
        /**
         * The user's id
         */
        id?: string
        /**
         * The user's username
         */
        username?: string
        /**
         * The user's email
         */
        email?: string
        /**
         * The user's base64 encoded profile picture.
         */
        picture?: string
    }

    /**
     * A custom hook containing [react-query]{@link https://react-query.tanstack.com/} queries and mutations and other logic related to interacting with {@link UserProfile} objects.
     * @category Hooks
     * @namespace useProfile
     */
    export const useProfile = (userId: string) => {
        /**
         * The local instance of the [react-query QueryClient]{@link https://react-query.tanstack.com/reference/QueryClient#_top}.
         * @memberOf useLandmarks
         */
        let queryClient: QueryClient;

        try {
            queryClient = useQueryClient()
        } catch (error) {
            console.log("Something went wrong when retrieving query client:")
            console.log(error)
        }

        const { refreshAccessToken } = useAuth();

         /**
         * The callback responsible for retrieving the {@link Profile} matching the given ID from the API , used by the [react-query useQuery]{@link https://react-query.tanstack.com/reference/useQuery#_top} hook.
         * * @memberOf useProfile
         */
        const getProfile = async (id: string) => {
            const config: AxiosRequestConfig = {
                method: 'GET',
                url: API_URL + `/api/user-profile/${id}/`,
                headers: { "Authorization": "Bearer " + authStore.accessToken, }
            }

            try {
                const response = await axios(config);
                return response.data;
            } catch (error) {
                if (error.response.status == 401) {
                    try {
                        await refreshAccessToken()
                        const response = await axios({...config, headers: { "Authorization": "Bearer " + authStore.accessToken }});

                        return response.data;
                    } catch (error) {
                        // refreshAccessToken will report errors
                    }
                }

                reportAxiosError('Something went wrong when retrieving landmarks', error)
                throw new Error;
            }
        }

        // get query
        const { data: profile, status: getProfileStatus } = useQuery<UserProfile, Error>(['getProfile', userId], async () => getProfile(userId))

        return { profile, getProfileStatus } //reading
    }