This repository has been archived by the owner on May 20, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
DIsplay a map full of stations and let a user select a station to view data at that station. #14
Closed
Closed
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
a801fd5
Display station map
ryancoughlin 704fbe2
more maps maps more maps maps more maps maps more maps maps more maps…
ryancoughlin c7507f9
more changes
ryancoughlin 2d76bcf
clean up
ryancoughlin 79cfcf8
wip
ryancoughlin 7f0babc
Fetch other station locations from map pin
ryancoughlin d067e0d
Clean up
ryancoughlin 2212df9
Clean up navigation styles
ryancoughlin a03de27
Remove unneeded style from tide phrase
ryancoughlin 60b6ae5
Add in config based environment files based on iOS scheme
ryancoughlin 078d436
wip
ryancoughlin File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -35,7 +35,7 @@ local.properties | |
node_modules/ | ||
npm-debug.log | ||
yarn-error.log | ||
.env | ||
.env* | ||
|
||
# BUCK | ||
buck-out/ | ||
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import React, { Component } from 'react' | ||
import { | ||
Image, | ||
Text, | ||
View, | ||
StyleSheet, | ||
} from 'react-native' | ||
|
||
import BaseStyle from '../base-styles' | ||
import callout from '../assets/images/map/callout.png' | ||
|
||
export default class MapCallout extends Component { | ||
get formatStationLocation() { | ||
const { station } = this.props | ||
const latitude = station.location[1] | ||
const longitude = station.location[0] | ||
|
||
return `${latitude} N ${longitude} W` | ||
} | ||
|
||
render() { | ||
const { station } = this.props | ||
|
||
return ( | ||
<View style={styles.container}> | ||
<Image source={callout} style={styles.callout} /> | ||
<View style={styles.textContainer}> | ||
<Text | ||
style={styles.stationName} | ||
numberOfLines={1} | ||
ellipsizeMode={'tail'} | ||
> | ||
{station.name} | ||
</Text> | ||
<Text style={styles.stationLocation}>{this.formatStationLocation}</Text> | ||
</View> | ||
</View> | ||
) | ||
} | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
position: 'relative', | ||
width: 258, | ||
height: 98, | ||
}, | ||
textContainer: { | ||
zIndex: 1, | ||
marginTop: 31, | ||
marginLeft: 40, | ||
}, | ||
callout: { | ||
position: 'absolute', | ||
}, | ||
stationName: { | ||
fontSize: BaseStyle.smallFontSize, | ||
marginBottom: 1, | ||
width: 170, | ||
}, | ||
stationLocation: { | ||
fontFamily: BaseStyle.numericFontFamily, | ||
fontSize: 10, | ||
color: BaseStyle.subtleColor, | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@BlakeWilliams I am calling this on mount so it kicks off the first time (when you open the app for the first time). If you then select a new location via the map, this works as well. Lastly, while within this same state you go to the map and pick another station nothing happens. You see the new screen come in, but no actions are fetched.
Thinking about this now, this is accurate since the component is already mounted? But at the same time that is odd because it works once then stops.
I was hooking into
componentWillReceiveProps
and that was fired way too much due to the reducer setting the props after various actions were completed.Could I still use that method above but do some logic to compare
this.props
andnextProps
basically:if (this.props.location !== this.nextProps) { // kick off a new request }
(Also as I was writing this I thought of that solution, another reason PR's and code reviews are so great. I have had this happen a few times).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe you need two different components. One that fetches current location on mount and another that fetches the one from props?