The globetrotter from sertmer

User can get a list of Yelp activities for a location

When I send a `GET` request to `/api/v1/yelp_activities/?lat=<LATITUDE>&long=<LONGITUDE>`
I want to receive a status of 200 and a list of 20 activities from the Yelp API in the response body
So that I populate a map of activities

Response Body:

{
    "activities": [
        {
            "name": "Pantheon - Basilica di Santa Maria ad Martyres",
            "address": "Piazza della Rotonda, 00186 Rome, Italy",
            "category": "Churches",
            "rating": 4.5,
            "image": "https://s3-media3.fl.yelpcdn.com/bphoto/wDcbtQyxePfBYfHHXYiwGw/o.jpg",
            "lat": 41.898614,
            "long": 12.476869
        },
        {
            "name": "Colosseo",
            "address": "Piazza del Colosseo 1, 00184 Rome, Italy",
            "category": "Local Flavor",
            "rating": 4.5,
            "image": "https://s3-media1.fl.yelpcdn.com/bphoto/QcMxqdZmJTMpeeuT_NfHAg/o.jpg",
            "lat": 41.8902496828181,
            "long": 12.4922484062616
        },
        {
            "name": "Piazza San Pietro",
            "address": "Piazza San Pietro, 00120 Rome, Italy",
            "category": "Landmarks & Historical Buildings",
            "rating": 5.0,
            "image": "https://s3-media1.fl.yelpcdn.com/bphoto/hF-g108L9sPMVPNckn1qUQ/o.jpg",
            "lat": 41.9022346138837,
            "long": 12.4566379080506
        }
        ...
}

Acceptance Criteria:

All tests passing
Happy path tested
Documentation is written

User can see link to create a new trip

As a logged in user
When I click create trip
I want to be taken to a different page

Sub-Tasks

when you click the add trip button the view changes to a form

Acceptance Criteria:

User can view a specific trip on the globe

As a logged in user
When I click on a Trip (on the trip page)
I want to see a globe with my trip displayed
So that I can see my origin and destination(s) for the selected trip

Subtasks:

Links to the globe page

Acceptance Criteria:

User can name a new trip

As a logged in user
When I view the create trip page
I want to name a trip
So that I can quickly recognize which trip I am working with

Subtasks:

Create name input
onChange, store in local state
error handling for duplicates?

Acceptance Criteria:

Error Handling

Add Trip (City, Country format)
Add Destination (City, Country format)

Resolve undefined {Route} error with snapshot tests

For various (now deleted) snapshot tests, route.params returns an undefined error in situations where props data has been passed as a second argument in the navigation.navigate() clause.

Next steps involve researching the issue and implementing workarounds.

User can delete an activity

When I send a 'POST' request to  '/graphql/'
With my API key and activity id
I want to receive a status of 200 and the deleted activity's information in the response
So that I can delete an activity

Request Body:

mutation {
  deleteActivity (userApiKey: "<USER_API_KEY>", activityId: 2) {
    id
    name
    address
    date
    category
    rating
    image
    lat
    long
  }
}

Response Body:

{
  "data": {
    "deleteActivity": {
      "id": "2",
      "name": "Castell de Montjuïc",
      "address": "Carretera de Montjuïc, 66, 08038 Barcelona, Spain",
      "date": "2022-03-18",
      "category": "Castles",
      "rating": 4.0,
      "image": "https://s3-media1.fl.yelpcdn.com/bphoto/qvvaNwsAnLxa_g8_0IYiVA/o.jpg",
      "lat": "41.3633333212171",
      "long": "2.16618073941884"
    }
  }
}

Acceptance Criteria:

All tests passing
Happy path tested
Documentation is written

User can navigate to the locations view

As a logged in user
When view a specific Trip, 
I want to be taken to the Locations view
So that I can see a map of that location, and a calendar of my events

Subtasks:

implement Navigation on press of location
Build out location, calendar, and day components

Acceptance Criteria:

User can create a new trip

When I send a 'POST' request to  '/graphql/'
With my API key, trip name, and trip origin in the request body with a mutation string
I want to receive a status of 201 and the newly created trip in the response body
So that I can add a trip to the database

Request Body:

{
  "mutation": "{ createTrip(userApiKey: \"b9aead4b955bccb5c57ef830580f3de5\", name: \"Northern Lights\", origin: \"Reykjavik, Iceland\") { trip { id name origin originAbbrev originLat originLong } } }"
}

Response Body:

{
  "data": {
    "createTrip": {
      "trip": {
        "id": "2",
        "name": "Northern Lights",
        "origin": "Reykjavík, Iceland",
        "originAbbrev": "REK",
        "originLat": "64.146582",
        "originLong": "-21.9426354"
      }
    }
  }
}

Acceptance Criteria:

All tests passing
Happy path tested
Sad path(s) tested
- If no airport at provided origin, the first three letters are used
- If no coordinates found, an error message is returned
Documentation is written

💅Finesse Trips View 💅

As a logged-in user
When I view the create trip page
I want it to be easy to create a trip
So that I can plan my next vacation

Subtasks:

Style to wireframe
Update Snapshots

Acceptance Criteria:

All tests passing
Happy path tested

Implement Travis CI

register app
configure environments
deploy

Implement react-navigation in our project

Compare react-navigation to router
install dependencies
implement navigation between components

User can add an activity to a trip destination

When I send a 'POST' request to  '/graphql/'
With my API key, trip destination id, date, and activity information
I want to receive a status of 201 and the newly created activity in the response body
So that I can add an activity to a date belonging to a trip destination

Request Body:

{
  "mutation": "{ createDestination(userApiKey: \"b9aead4b955bccb5c57ef830580f3de5\", tripId: 2, location: \"Stockholm, Sweden\", startDate: \"2021-12-18\", endDate: \"2021-12-24\") { destination { id location abbrev lat long tripdestinationSet { startDate endDate trip { name origin originAbbrev } } } } }"
}

Response Body:

{
  "data": {
    "createDestination": {
      "destination": {
        "id": "4",
        "location": "Stockholm, Sweden",
        "abbrev": "STO",
        "lat": "59.32932349999999",
        "long": "18.0685808"
        "tripdestinationSet": [ {
          "startDate": "2021-12-18",
          "endDate": "2021-12-24",
          "trip": {
            "name": "Northern Lights",
            "origin": "Reykjavík, Iceland",
            "originAbbrev": "REK",
          }
        } ]
      }
    }
  }
}

Acceptance Criteria:

All tests passing
Happy path tested
Sad path(s) tested
Documentation is written

User can create a new trip

As a logged in user
When I fill out all of the forms on the create trip page
I want to click submit
So that I can create a new trip

Subtasks:

error handling to ensure all forms are filled out, dates selected, everything in correct format
pull things out of local state, wrap in correct object format for POST request
fire POST on submit

Acceptance Criteria:

Research use of Yelp API

Research placing of latitude and longitude pins on a map

User can see a location's points of interest on a map

Build out ApiCalls

Build out fetch request code for the following:

Get trips
Get a single trip
Post a new trip (create trip)

Stretch Consideration

Delete a trip?
Amend a trip (patch)?

User can add yelp location to specific day on calendar

User can add start / end dates to a new trip via a calendar

As a logged in user
When I view the create trip page
I want to add start and end dates for that desination
So that I can plan my trip

Subtasks:

add two calendars with a library (?)
capture all the dates, store in local state on submit

Acceptance Criteria:

Test apiCalls

Each fetch block requires the following:

Test URL .toHaveBeenCalledWith()
Returned value (happy path - resolves.toEqual)
Returned value (sad path{s} - rejects.toEqual)

User can see a list of saved trips

When I send a 'POST' request to '/graphql/'
With a query string and my API key in the request body
I want to receive a status of 200
And a list of all of my saved trips in the response body

Request Body:

{
  "query": "{ allTrips(userApiKey: \"b9aead4b955bccb5c57ef830580f3de5\") { id name origin originAbbrev originLat originLong tripdestinationSet { destination { location abbrev lat long } startDate endDate } } }"
}

Response Body:

{
  "data": {
    "allTrips": [
      {
        "id": "1",
        "name": "Spring Break",
        "origin": "Denver, CO, USA",
        "originAbbrev": "DEN",
        "originLat": "39.7392",
        "originLong": "104.9903",
        "tripdestinationSet": [
          {
            "destination": {
              "location": "Barcelona, Spain",
              "abbrev": "BCN",
              "lat": "41.3851",
              "long": "2.1734"
            },
            "startDate": "2020-03-16",
            "endDate": "2020-03-19"
          },
          {
            "destination": {
              "location": "Prague, Czech Republic",
              "abbrev": "PRG",
              "lat": "50.0755",
              "long": "14.4378"
            },
            "startDate": "2020-03-19",
            "endDate": "2020-03-23"
          },
          {
            "destination": {
              "location": "Tokyo, Japan",
              "abbrev": "TYO",
              "lat": "35.6762",
              "long": "139.6503"
            },
            "startDate": "2020-03-23",
            "endDate": "2020-03-30"
          }
        ]
      }
    ]
  }
}

Acceptance Criteria:

All tests passing
Happy path tested
Sad path tested
- Returns 401 (Unauthorized) status code and error message if API key is missing or invalid
Documentation is written

Complete Agenda / Activities Caching Functionality

Plan A: Finish building out the bottom half of the screen with React Maps
Plan B: Handroll our own calendar

Null values for latitude & longitude - Yelp data's edge cases

Stockholm, Sweden is an example we've found where at least one location marker in the fetched landmark data lacks values for latitude and longitude <> or .

We might consider using conditional logic to account for such edge cases so to avoid app-breaking errors.

User lands on landing page

As a logged-in user
When I view the create trip page
I want it to be easy to create a trip
So that I can plan my next vacation

Subtasks:

Create LandingPage component
Style it
Route it correctly

Acceptance Criteria:

All tests passing
Happy path tested

User sees location view after clicking on the globe pin

As a logged in user
When I am on the Globe page
I want to be able to click on a pin
So that I can see the locations page

Subtasks:

Android compatibility Trip component

The add trip button does not render on the Android simulator

User can see a list of saved trips

As a logged in user
When I open the app
I want to see a list of my existing trips
So that I can decide which one to interact with

Subtasks:

Launch GET trips on app load
store in state
iterate over the trips, forEach, create Trip component
display on the 'dom'

Acceptance Criteria:

User must create destination with consecutive dates

User must create destinations with consecutive dates or else will see an error

Calendar focus

Calendar snaps back to current date on selection look into why this is happening.

Activities fails to appropriately render (post-mutation)

For both Adding and Deleting an activity, the user sees immediate feedback in the appearance or loss of the Activity card in question. However, this is reflective of local alterations in state that do not persist if the user navigates back one screen (from Maps to Trip Preview) then returns to view the Maps page. Navigating two pages back to Trips, then returning to Maps does succeed in generating the updated activity data.

We do invoke (on the same press/click that fires the activity mutations) a handleTripsFetch method that we're prop-drilling from the Trips component that re-fetches the mutated data from the backend and caches it in Trips (which is then mapped and passed across various pages until it eventually is used to render the Activity data in the Maps component. Invoking this method which resets the foundational state (all Trips data) in the Trips component fails to render the updated activities data.

We've tried implementing useEffect() in both TripPreview and Maps to force a render based off of the newly fetched data to no avail, and have tried creatively invoking handleTripsFetch() on the button press that navigates the user from TripPreview to Map without luck.

Migrating to redux is perhaps a solution, albeit a labor-intensive one. Maybe we could look at the other available lifecycle methods?

User can specify category of Yelp activities

When I send a `GET` request to `/api/v1/yelp_activities/?lat=<LATITUDE>&long=<LONGITUDE>&category=<CATEGORY>`
I want to receive a status of 200 and a list of 20 activities in the specified category from the Yelp API in the response body
So that I populate a map of activities

Possible Categories:

active
arts
food
health
hotels
localflavor
nightlife
restaurants
shopping

Response Body:

{
    "activities": [
        {
            "name": "Pantheon - Basilica di Santa Maria ad Martyres",
            "address": "Piazza della Rotonda, 00186 Rome, Italy",
            "category": "Churches",
            "rating": 4.5,
            "image": "https://s3-media3.fl.yelpcdn.com/bphoto/wDcbtQyxePfBYfHHXYiwGw/o.jpg",
            "lat": 41.898614,
            "long": 12.476869
        },
        {
            "name": "Colosseo",
            "address": "Piazza del Colosseo 1, 00184 Rome, Italy",
            "category": "Local Flavor",
            "rating": 4.5,
            "image": "https://s3-media1.fl.yelpcdn.com/bphoto/QcMxqdZmJTMpeeuT_NfHAg/o.jpg",
            "lat": 41.8902496828181,
            "long": 12.4922484062616
        },
        {
            "name": "Piazza San Pietro",
            "address": "Piazza San Pietro, 00120 Rome, Italy",
            "category": "Landmarks & Historical Buildings",
            "rating": 5.0,
            "image": "https://s3-media1.fl.yelpcdn.com/bphoto/hF-g108L9sPMVPNckn1qUQ/o.jpg",
            "lat": 41.9022346138837,
            "long": 12.4566379080506
        }
        ...
}

Acceptance Criteria:

Happy path tested
Sad path tested (no category param)
Documentation is written

Create sprint 1 tables and migrations

Users Table -

email, name, api_key

Trips Table -

name, user_id, origin, origin_abbrev, origin_lat, origin_long, start_date_id, end_date_id

Destinations Table -

location, abbrev, lat, long, country

Trip_Destinations Table -

trip_id, destination_id

Dates Table -

date, trip_destination_id
Database Migration

Test Apicalls

Each fetch block requires the following:

Test URL .toHaveBeenCalledWith()
Returned value (happy path - resolves.toEqual)
Returned value (sad path{s} - rejects.toEqual)

Resolve Props Error - Non-serializable values

We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/en/troubleshooting.html#i-get-the-warning-we-found-non-serializable-values-in-the-navigation-state for more details.

Setup Travis CI and Heroku Deployment

Deployment

Setup Travis CI
Setup Heroku Deployment

User can spin the globe

As a logged in user
When I am on the Globe page
I want to be able to spin the gobe
So that I can see my origin and destination(s)

Subtasks:

Implement Snapshot testing

Snapshot testing appears to be the same (using Jest) as it was for standard React

Reference:
https://jestjs.io/docs/en/tutorial-react-native

Example:

// __tests__/Intro-test.js
import React from 'react';
import Intro from '../Intro';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
  const tree = renderer.create(<Intro />).toJSON();
  expect(tree).toMatchSnapshot();
});

User can add origin & destination to a trip

As a logged-in user
When I move to the create trip view,
I want to be able to add an origin and destination for my trip
So that I can keep track of where I begin my trip

Subtasks:

Create origin input
Create destination input
on change of inputs, store in local state

Acceptance Criteria:

Lat/long sad path for yelp_activities endpoint

When I send a `GET` request to `/api/v1/yelp_activities`
Without lat and/or long query params
I want to receive a status of 400 and a user-friendly error response instead of a 500 server error

Response Body:

{
    "errors": [
        {
            "message": "Please specify a location by including lat and long params in the URL."
        }
    ]
}

Acceptance Criteria:

Sad path tested

User can delete a trip

When I send a 'POST' request to  '/graphql/'
With my API key and trip id
I want to receive a status of 200 and the deleted trip's information in the response
So that I can delete a trip

Request Body:

mutation {
    deleteTrip (userApiKey: "<USER_API_KEY>", tripId: 5) {
        id
        name
        origin
        originAbbrev
        originLat
        originLong
    }
}

Response Body:

{
    "data": {
        "deleteTrip": {
            "id": "5",
            "name": "Celebratory Adventure",
            "origin": "London, UK",
            "originAbbrev": "LON",
            "originLat": "51.5073509",
            "originLong": "-0.1277583"
        }
    }
}

Acceptance Criteria:

All tests passing
Happy path tested
Documentation is written

User see all trip information on the TripPreview view

As a logged in user
When I click on an individual trip
I want view all of that trips information in one place
So that I can quickly review my plans

Subtasks:

Style Trip Preview to display the information nicely

Acceptance Criteria:

Build FE Readme

Implement Calendar Picker library into CreateTrip form

As a logged in user creating a new trip
I want to click a calendar
So I can pick the start and end dates of my time at this destination

Subtasks:

Research integrating the calendar library into the react native application (https://github.com/Tinysymphony/react-native-calendar-select)
install the library
add to createTrip form
after user chooses dates store in local state
ensure date format matches backend expectations

Acceptance Criteria:

User can create a destination for a trip

When I send a 'POST' request to  '/graphql/'
With my API key, trip id, destination, start date, and end date in the request body with a mutation string
I want to receive a status of 201 and the newly created destination in the response body
So that I can add a destination to an existing trip in the database

Request Body:

{
  "mutation": "{ createDestination(userApiKey: \"b9aead4b955bccb5c57ef830580f3de5\", tripId: 2, location: \"Stockholm, Sweden\", startDate: \"2021-12-18\", endDate: \"2021-12-24\") { destination { id location abbrev lat long tripdestinationSet { startDate endDate trip { name origin originAbbrev } } } } }"
}

Response Body:

{
  "data": {
    "createDestination": {
      "destination": {
        "id": "4",
        "location": "Stockholm, Sweden",
        "abbrev": "STO",
        "lat": "59.32932349999999",
        "long": "18.0685808"
        "tripdestinationSet": [ {
          "startDate": "2021-12-18",
          "endDate": "2021-12-24",
          "trip": {
            "name": "Northern Lights",
            "origin": "Reykjavík, Iceland",
            "originAbbrev": "REK",
          }
        } ]
      }
    }
  }
}

Acceptance Criteria:

All tests passing
Happy path tested
Sad path(s) tested
- If no airport at provided destination, the first three letters are used
- If no coordinates found, an error message is returned with 400 status code
Documentation is written

Finesse styling, part II

As a logged-in user
When I view the application
I want it to be easy and pleasing to use the app
So that I can plan my next vacation

Subtasks:

Style to wireframe
Update Snapshots

Acceptance Criteria:

All tests passing
Happy path tested

Render error messages for non-sequential dates

Add Destination calendar dates need to match up with prior trip legs

Migrate app-wide styling themes through to TripsPreview component

Remove duplicate headers in all page views
Render all Trip data beyond destinations and times
Apply blue / white 'sky' color theme

sertmer / globetrotter Goto Github PK

globetrotter's People

Contributors

Stargazers

Watchers

Forkers

globetrotter's Issues

Deployment

Recommend Projects

Recommend Topics

Recommend Org