apps
/
atlas-mobile-ts


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
							

<!DOCTYPE html>
<html lang="en">

<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> src/hooks/useLandmarks.ts</title>

  <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="./build/entry.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700|Inconsolata,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link type="text/css" rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night.min.css">
  <link type="text/css" rel="stylesheet" href="styles/app.min.css">
  <link type="text/css" rel="stylesheet" href="styles/iframe.css">
  <link type="text/css" rel="stylesheet" href="">
  <script async defer src="https://buttons.github.io/buttons.js"></script>

  
</head>


<body class="layout small-header">
    <div id="stickyNavbarOverlay"></div>
    

<div class="top-nav">
    <div class="inner">
        <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
        <div class="logo">
            
            
        </div>
        <div class="menu">
            
            <div class="navigation">
                <a
                    href="index.html"
                    class="link"
                >
                    API Documentation
                </a>
                
                
            </div>
        </div>
    </div>
</div>
    <div id="main">
        <div
            class="sidebar "
            id="sidebarNav"
        >
            
            <nav>
                
                    <h2><a href="index.html">Documentation</a></h2><div class="category"><h3>Interfaces</h3><ul><li><a href="AddLandmarkProps.html">AddLandmarkProps</a></li><li><a href="CommentProps.html">CommentProps</a></li><li><a href="IdToken.html">IdToken</a></li><li><a href="IntroProps.html">IntroProps</a></li><li><a href="Landmark.html">Landmark</a></li><li><a href="LandmarkDetailsProps.html">LandmarkDetailsProps</a></li><li><a href="LandmarkPinProps.html">LandmarkPinProps</a></li><li><a href="LMComment.html">LMComment</a></li><li><a href="ProfileProps.html">ProfileProps</a></li><li><a href="RegisterProps.html">RegisterProps</a></li><li><a href="UserProfile.html">UserProfile</a></li></ul><h3>Components</h3><ul><li><a href="App.html">App</a></li><li><a href="Atlas.html">Atlas</a></li><li><a href="Comment.html">Comment</a></li><li><a href="PrimaryButton.html">PrimaryButton</a></li><li><a href="Profile.html">Profile</a></li><li><a href="SecondaryButton.html">SecondaryButton</a></li></ul><h3>Global</h3><ul><li><a href="global.html#IconStrings">IconStrings</a></li></ul></div><div class="category"><h2>Hooks</h2><h3>Namespaces</h3><ul><li><a href="useAuth.html">useAuth</a></li><li><a href="useLandmarks.html">useLandmarks</a></li><li><a href="useProfile.html">useProfile</a></li></ul></div><div class="category"><h2>Map</h2><h3>Interfaces</h3><ul><li><a href="UserLocation.html">UserLocation</a></li></ul><h3>Components</h3><ul><li><a href="AddLandmark.html">AddLandmark</a></li><li><a href="LandmarkDetails.html">LandmarkDetails</a></li><li><a href="LandmarkPin.html">LandmarkPin</a></li><li><a href="Map.html">Map</a></li></ul></div><div class="category"><h2>Navigation</h2><h3>Components</h3><ul><li><a href="AuthorizedNavigator.html">AuthorizedNavigator</a></li><li><a href="UnauthorizedNavigator.html">UnauthorizedNavigator</a></li></ul><h3><a href="global.html">Global</a></h3></div><div class="category"><h2>Stores</h2><h3>Classes</h3><ul><li><a href="AuthStore.html">AuthStore</a></li></ul></div><div class="category"><h2>Unauthorized</h2><h3>Components</h3><ul><li><a href="Intro.html">Intro</a></li><li><a href="UnauthorizedLayout.html">UnauthorizedLayout</a></li></ul><h3>Components / Registration</h3><ul><li><a href="RegisterMain.html">RegisterMain</a></li></ul></div>
                
            </nav>
        </div>
        <div class="core" id="main-content-wrapper">
            <div class="content">
                <header class="page-title">
                    <p>Source</p>
                    <h1>src/hooks/useLandmarks.ts</h1>
                </header>
                

    <section>
        <article>
            <pre class="prettyprint source linenums"><code>// This file houses crud methods to interact with landmarks on the server. They are generally called by react query mutations.

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

/**
 * Interface representing a landmark's comment.
 */
export interface LMComment {
    /**
     * The comment's id.
     */
    id: string,
    /**
     * The id of the user who posted the comment
     */
    poster: string,
    /**
     * The text content of the comment
     */
    text: string
    /**
     * The landmark that this comment is associated with.
     */
    landmark: Landmark
}

/**
 * Interface representing a landmark object
 */
export interface Landmark {
    /**
     * The id of the landmark.
     */
    id?: string | null,
    /**
     * The rating of the landmark.
     */
    rating?: number | null,
    /**
     * The id of the user who created the landmark.
     */
    user?: string | null,
    /**
     * The longitude of the landmark's location.
     */
    longitude?: number | null,
    /**
     * The latitude of the landmark's location.
     */
    latitude?: number | null, 
    /**
     * The landmark's title.
     */
    title?: string | null,
    /**
     * The landmark's description.
     */
    description?: string | null,
    /**
     * User [comments]{@link LMComment} associated with this landmark.
     */
    comments?: LMComment[] | null,
    /**
     * An integer representing the type of this landmark.
     */
    landmark_type?: number | null, // for working with existing database schema, should be changed
    /**
     * A Date object representing when this landmark was created.
     */
    time?: Date | null
}

/**
 * A custom hook containing [react-query]{@link https://react-query.tanstack.com/} queries and mutations and other logic related to interacting with {@link Landmark} objects.
 * @category Hooks
 * @namespace useLandmarks
 */
export const useLandmarks = (region: Region | undefined) => {
    const { refreshAccessToken } = useAuth();

    /**
     * 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)
    }

    /**
     * The callback responsible for retrieving {@link Landmark} from the API, used by the [react-query useQuery]{@link https://react-query.tanstack.com/reference/useQuery#_top} hook.
     * * @memberOf useLandmarks
     */
    const getLandmarks = async (region: Region | undefined) => {
        // if (region) {
            const config: AxiosRequestConfig = {
            method: 'GET',
            // url: `${API_URL}/api/landmarks/?lat=${region.latitude}&amp;long=${region.longitude}&amp;lat_delta=${region.latitudeDelta}&amp;long_delta=${region.longitudeDelta}`,
            url: `${API_URL}/api/landmarks/`,
            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;
        }   
        // }
        // else {
        //     return [];
        // }
    }

     /**
     * The callback responsible for adding a new {@link Landmark} to the server, used by the [react-query useMutation]{@link https://react-query.tanstack.com/reference/useMutation#_top} hook.
     * * @memberOf useLandmarks
     */
    const createLandmark = async (landmarkValue: Landmark | undefined): Promise&lt;Landmark | undefined> => {
        const config: AxiosRequestConfig = {
            method: 'POST',
            data: landmarkValue,
            url: API_URL + `/api/landmark/`,
            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;
        }
    }

    /**
     * The callback responsible for updating a {@link Landmark} on the server, used by the [react-query useMutation]{@link https://react-query.tanstack.com/reference/useMutation#_top} hook.
     * * @memberOf useLandmarks
     */
    const editLandmark =  async (landmarkValue: Landmark) => {
        const config: AxiosRequestConfig = {
            method: 'PUT',
            data: landmarkValue,
            url: API_URL + `/api/landmark/`,
            headers: { "Authorization": "Bearer " + authStore.accessToken, }
        } 

        console.log(landmarkValue)

        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;
        }
    }

    /**
     * The callback responsible for deleting a {@link Landmark} from the server, used by the [react-query useMutation]{@link https://react-query.tanstack.com/reference/useMutation#_top} hook.
     * * @memberOf useLandmarks
     */
    const removeLandmark =  async (id?: string | null) => {
        const config: AxiosRequestConfig = {
            method: 'DELETE',
            url: API_URL + `/api/landmark/${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()    

                    // add new access token to header
                    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-all query
    const { data: landmarks, status: getLandmarksStatus, refetch: refetchLandmarks } = useQuery&lt;Landmark[], Error>(['getLandmarks', region], () => getLandmarks(region), {
        placeholderData: () => queryClient.getQueryData('getLandmarks'),
        staleTime: 1000,
        refetchInterval: 30000,
        refetchOnReconnect: true,
        refetchOnMount: false
    })

    // mutations
    const { status: addLandmarkStatus, mutateAsync: addLandmarkAsync, reset: resetAddLm, data: newLandmark } = useMutation(createLandmark, {
        onSuccess: data => {
            queryClient.invalidateQueries('getLandmarks')
        },  
    })

    const { status: updateLandmarkStatus, mutateAsync: updateLandmark, reset: resetUpdateLm } = useMutation(editLandmark, {
        onSuccess: () => queryClient.invalidateQueries('getLandmarks'),  
        onError: () => queryClient.invalidateQueries('getLandmarks'),  
    })

    const { status: deleteLandmarkStatus, mutateAsync: deleteLandmark, reset: resetDeleteLm } = useMutation(removeLandmark, {
        onSuccess: () => queryClient.invalidateQueries('getLandmarks'),  
        onError: () => queryClient.invalidateQueries('getLandmarks'),  
    })

    return { 
        landmarks, getLandmarksStatus, refetchLandmarks,  //reading
        addLandmarkAsync, resetAddLm, addLandmarkStatus, newLandmark, // creating
        updateLandmark, resetUpdateLm, updateLandmarkStatus, // updating
        deleteLandmark, resetDeleteLm, deleteLandmarkStatus, // deleting
    }
}
</code></pre>
        </article>
    </section>


            </div>
            
            <footer class="footer">
                <div class="content has-text-centered">
                    <p>Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a></p>
                    <p class="sidebar-created-by">
                        <a href="https://github.com/SoftwareBrothers/better-docs" target="_blank">BetterDocs theme</a> provided with <i class="fas fa-heart"></i> by 
                        <a href="http://softwarebrothers.co" target="_blank">SoftwareBrothers - JavaScript Development Agency</a>
                    </p>
                </div>
            </footer>
            
        </div>
        <div id="side-nav" class="side-nav">
        </div>
    </div>
<script src="scripts/app.min.js"></script>
<script>PR.prettyPrint();</script>
<script src="scripts/linenumber.js"> </script>

</body>
</html>