-
Notifications
You must be signed in to change notification settings - Fork 8
Ca 37 - First iteration of Contributors List view, fully functional. #14
base: develop
Are you sure you want to change the base?
Changes from all commits
3077d54
0a198b2
801c2fc
97cc322
5d2d8c3
ed320c1
549600f
c076152
88136f8
38a6935
5af4915
052983c
199e5e5
6098398
76fcaf9
6398e08
c00171b
901faa1
a00b474
160325d
a1a1acc
495826c
6c4d91c
e82e4d2
cd6e535
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -124,3 +124,5 @@ buck-out/ | |
*.jsbundle | ||
|
||
package-lock.json | ||
|
||
colors.txt |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,22 @@ | ||
import React from 'react'; | ||
import { StyleSheet } from 'react-native'; | ||
import { View, Text } from 'native-base'; | ||
import { View } from 'native-base'; | ||
import PageHeader from './pageHeader'; | ||
import ListContainer from './listContainer'; | ||
|
||
const styles = StyleSheet.create({ | ||
content: { | ||
display: 'flex', | ||
flex: 1, | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
} | ||
}); | ||
|
||
const Contributors = () => ( | ||
<View style={styles.content}> | ||
<Text>Contributors Page</Text> | ||
</View> | ||
); | ||
|
||
export default Contributors; | ||
export default function ContributorsView() { | ||
return ( | ||
<View style={styles.content}> | ||
<PageHeader /> | ||
<ListContainer style={styles.content}/> | ||
</View> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/* eslint-disable no-console */ | ||
import React, { Component } from 'react'; | ||
import { | ||
StyleSheet, | ||
View, | ||
Text, | ||
FlatList | ||
} from 'react-native'; | ||
|
||
import ContributorListItem from './listItem'; | ||
|
||
const styles = StyleSheet.create({ | ||
flex: { | ||
display: 'flex', | ||
flex: 1, | ||
}, | ||
}); | ||
|
||
// const sortData = (dataArray) => { | ||
// // sorts the array by join date | ||
// dataArray.sort((firstItem, secondItem) => (firstItem.joined < secondItem.joined ? -1 : 1)) | ||
// // then sorts array by active status | ||
// .sort((firstItem, secondItem) => (firstItem.active > secondItem.active ? -1 : 1)); | ||
// return dataArray; | ||
// }; | ||
|
||
export default class ListContainer extends Component { | ||
constructor() { | ||
super(); | ||
this.state = { | ||
contributorsData: [], | ||
dataLoaded: false, | ||
isSelected: true | ||
}; | ||
} | ||
|
||
componentDidMount() { | ||
fetch('https://api-dev.coding.garden/contributors') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We decided to use async/await for all promises on the backend and enforced it with an eslint plugin. I think we should follow that on frontend as well. |
||
.then(res => res.json()) | ||
.then((data) => { | ||
// sortData(data); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If we are sure that this isn't being used it should be removed. |
||
console.log(data); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No lingering console logs should remain in the code. |
||
this.setState({ | ||
contributorsData: data, | ||
dataLoaded: true | ||
}); | ||
}) | ||
.catch(error => console.log(error)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should state be explicitly set here as part of the error handling? |
||
} | ||
|
||
renderSeparator = () => <View style={{ height: 1, backgroundColor: '#121212', }}></View>; | ||
|
||
render() { | ||
if (this.state.dataLoaded) { | ||
return ( | ||
<FlatList | ||
style={styles.flex} | ||
data={this.state.contributorsData} | ||
renderItem={({ item }, index) => { | ||
const contributorData = item.attributes; | ||
const devTeams = item.attributes.teamIds; | ||
return ( | ||
<ContributorListItem | ||
contributorData={contributorData} | ||
devTeams={devTeams} | ||
index={index} | ||
/> | ||
); | ||
} | ||
} | ||
keyExtractor={item => item.attributes.name} | ||
ItemSeparatorComponent={this.renderSeparator} | ||
/> | ||
); | ||
} | ||
return <Text style={{ alignSelf: 'center', marginTop: 50 }}>Loading...</Text>; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from 'react'; | ||
import { StyleSheet, Text } from 'react-native'; | ||
|
||
const styles = StyleSheet.create({ | ||
devTeamHeader: { | ||
borderBottomWidth: 1, | ||
borderColor: '#121212', | ||
width: '100%' | ||
}, | ||
}); | ||
|
||
export default function devTeamHeader() { | ||
return <Text style={styles.devTeamHeader}>Develompent Teams</Text>; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React from 'react'; | ||
import { StyleSheet, View, Text } from 'react-native'; | ||
import propTypes from 'prop-types'; | ||
|
||
const styles = StyleSheet.create({ | ||
teamIcon: { | ||
width: 30, | ||
height: 40, | ||
borderRadius: 20, | ||
borderColor: '#212121', | ||
borderWidth: 1 | ||
}, | ||
}); | ||
|
||
export default function DevTeamIcon(props) { | ||
const { id } = props.team; | ||
|
||
return ( | ||
<View | ||
style={[styles.teamIcon, { alignItems: 'center', justifyContent: 'center' }]}> | ||
<Text>{ id }</Text> | ||
</View> | ||
); | ||
} | ||
|
||
DevTeamIcon.propTypes = { | ||
team: propTypes.object, | ||
teamId: propTypes.string, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from 'react'; | ||
import { StyleSheet, View } from 'react-native'; | ||
import propTypes from 'prop-types'; | ||
|
||
import DevTeamIcon from './devTeamIcon'; | ||
|
||
const styles = StyleSheet.create({ | ||
devTeamsList: { | ||
display: 'flex', | ||
flexDirection: 'row', | ||
flex: 1, | ||
paddingVertical: 5, | ||
backgroundColor: '#cccccc', | ||
}, | ||
}); | ||
|
||
export default function devTeamsList(props) { | ||
const { devTeams } = props; | ||
|
||
return ( | ||
<View style={styles.devTeamsList}> | ||
{ | ||
devTeams.map((team, index) => <DevTeamIcon key={index} team={team} />) | ||
} | ||
</View> | ||
); | ||
} | ||
|
||
devTeamsList.propTypes = { | ||
devTeams: propTypes.array, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from 'react'; | ||
import propTypes from 'prop-types'; | ||
import { | ||
StyleSheet, | ||
View, | ||
} from 'react-native'; | ||
|
||
import DevTeamHeader from './devTeamHeader'; | ||
import DevTeamsList from './devTeamsList'; | ||
|
||
const styles = StyleSheet.create({ | ||
devTeamsOuter: { | ||
height: 70, | ||
}, | ||
|
||
|
||
}); | ||
|
||
export default function contributorDevTeams(props) { | ||
const { devTeams } = props; | ||
return ( | ||
<View style={ styles.devTeamsOuter }> | ||
<DevTeamHeader /> | ||
<DevTeamsList devTeams={ devTeams } /> | ||
</View> | ||
); | ||
} | ||
|
||
contributorDevTeams.propTypes = { | ||
devTeams: propTypes.array, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import propTypes from 'prop-types'; | ||
import { StyleSheet, Text } from 'react-native'; | ||
|
||
const styles = StyleSheet.create({ | ||
name: { | ||
fontSize: 24, | ||
flex: 1 | ||
}, | ||
}); | ||
|
||
export default function contributorName(props) { | ||
return <Text numberOfLines={1} style={styles.name}>{ props.name }</Text>; | ||
} | ||
|
||
contributorName.propTypes = { | ||
name: propTypes.string | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import React from 'react'; | ||
import { StyleSheet, View } from 'react-native'; | ||
import propTypes from 'prop-types'; | ||
|
||
import ContributorName from './contribName'; | ||
import UserProfileIcon from './userProfileIcon'; | ||
|
||
const styles = StyleSheet.create({ | ||
headerOuter: { | ||
height: 30, | ||
display: 'flex', | ||
flex: 1, | ||
flexDirection: 'row', | ||
justifyContent: 'space-between', | ||
} | ||
}); | ||
|
||
export default function contributorHeader(props) { | ||
const { name, github } = props; | ||
|
||
const { headerOuter } = styles; | ||
return ( | ||
<View style={ headerOuter }> | ||
<ContributorName name={ name } /> | ||
<UserProfileIcon github={ github } /> | ||
</View> | ||
); | ||
} | ||
|
||
contributorHeader.propTypes = { | ||
name: propTypes.string, | ||
github: propTypes.string, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { StyleSheet } from 'react-native'; | ||
import { Icon } from 'native-base'; | ||
|
||
const styles = StyleSheet.create({ | ||
profileIcon: { | ||
width: 24, | ||
height: 24, | ||
marginTop: 4, | ||
color: '#121212', | ||
} | ||
}); | ||
|
||
export default function userProfileIcon(props) { | ||
const { github } = props; | ||
const githubProfileURL = `https://www.github.com/${github}`; | ||
return ( | ||
<Icon | ||
style={styles.profileIcon} | ||
name="person" | ||
uri={ githubProfileURL } | ||
/> | ||
); | ||
} | ||
|
||
userProfileIcon.propTypes = { | ||
github: PropTypes.string, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import React from 'react'; | ||
import { StyleSheet, TouchableOpacity } from 'react-native'; | ||
import { Icon } from 'native-base'; | ||
import propTypes from 'prop-types'; | ||
|
||
const styles = StyleSheet.create({ | ||
expanderOuter: { | ||
width: 30, | ||
height: 50, | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
backgroundColor: '#ffffff' | ||
}, | ||
expanderIcon: { | ||
width: 18, | ||
height: 24, | ||
color: '#121212', | ||
} | ||
}); | ||
|
||
export default function expanderIcon(props) { | ||
const { isExpanded, toggleExpanded, } = props; | ||
|
||
return ( | ||
<TouchableOpacity style={ styles.expanderOuter } onPress={ toggleExpanded }> | ||
{ | ||
isExpanded | ||
? <Icon | ||
style={ styles.expanderIcon } | ||
name="arrow-up" | ||
/> | ||
: <Icon | ||
style={ styles.expanderIcon } | ||
name="arrow-down" | ||
/> | ||
} | ||
</TouchableOpacity> | ||
); | ||
} | ||
|
||
expanderIcon.propTypes = { | ||
toggleExpanded: propTypes.func, | ||
isExpanded: propTypes.bool | ||
}; |
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.
Can this be destructured to