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}&long=${region.longitude}&lat_delta=${region.latitudeDelta}&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<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<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>
|