Skip to content
This repository was archived by the owner on Mar 9, 2022. It is now read-only.

Ca 37 - First iteration of Contributors List view, fully functional. #14

Open
wants to merge 25 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
3077d54
added: pageHeader component
rabbitwerks Mar 3, 2019
0a198b2
stuck: flatlist isnt rendering
rabbitwerks Mar 12, 2019
801c2fc
update: fetching contrib data from github json, flatmap with listItem…
rabbitwerks Mar 19, 2019
97cc322
update: changed githubData to contributorData, removed mock data
rabbitwerks Mar 20, 2019
5d2d8c3
update: dataLoaded state property, style changes, cleaned up code
rabbitwerks Mar 20, 2019
ed320c1
added: contributorName List Item component
rabbitwerks Mar 20, 2019
549600f
update: changed folder name, no file changes
rabbitwerks Mar 21, 2019
c076152
added: dev team component
rabbitwerks Mar 21, 2019
88136f8
update: more styling done to listItem elements, sorting incoming data…
rabbitwerks Mar 21, 2019
38a6935
refactor: changed to SFC, removed conditional cmp render, unused impo…
rabbitwerks Mar 21, 2019
5af4915
update: renderSeparator Fn, userProfileIcon, added: contribHeader
rabbitwerks Mar 22, 2019
052983c
update: minor design changes
rabbitwerks Mar 23, 2019
199e5e5
update: truncated long contrib names
rabbitwerks Mar 23, 2019
6098398
added: devTeamHeader cmp from devTeams parent cmp
rabbitwerks Mar 23, 2019
76fcaf9
fix: removed unused prop-types import
rabbitwerks Mar 23, 2019
6398e08
added: DevTeamList cmp from devTeams parent cmp, minor styling changes.
rabbitwerks Mar 23, 2019
c00171b
update: setting backgroundColor of every other to slighty darker grey…
rabbitwerks Mar 24, 2019
901faa1
added: devTeamIcon cmp
rabbitwerks Apr 3, 2019
a00b474
refactor: updated to receive formatted data response from backend
rabbitwerks Apr 7, 2019
160325d
add: listItem cmp and extended info include, going to be exported to cmp
rabbitwerks Apr 8, 2019
a1a1acc
update: refactored cmps, added expander arrow, removed cmp wraper
rabbitwerks Apr 11, 2019
495826c
update: oPress degubbing
rabbitwerks Apr 11, 2019
6c4d91c
update: onPress toggle Fn working; moved event function to prop of Ex…
rabbitwerks May 3, 2019
e82e4d2
update: refactored code to accept new data response format, fully fun…
Jun 8, 2019
cd6e535
Merge branch 'develop' into CA-37
rabbitwerks Jun 11, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -124,3 +124,5 @@ buck-out/
*.jsbundle

package-lock.json

colors.txt
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@
"dependencies": {
"@expo/vector-icons": "^9.0.0",
"expo": "^32.0.0",
"expo-cli": "^2.11.6",
"native-base": "^2.10.0",
"prop-types": "^15.7.2",
"react": "^16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-easy-grid": "^0.2.1"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
Expand Down
2 changes: 1 addition & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class App extends Component {
constructor() {
super();
this.state = {
page: Pages.HOME,
page: Pages.CONTRIBUTORS,
fontsLoaded: false,
};
this.NavbarCallback = this.NavbarCallback.bind(this);
Expand Down
20 changes: 11 additions & 9 deletions src/components/contributors/index.js
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({
Copy link
Contributor

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

const { content } = 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>
);
}
78 changes: 78 additions & 0 deletions src/components/contributors/listContainer/index.js
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')
Copy link
Contributor

Choose a reason for hiding this comment

The 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);
Copy link
Contributor

Choose a reason for hiding this comment

The 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);
Copy link
Contributor

Choose a reason for hiding this comment

The 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));
Copy link
Contributor

Choose a reason for hiding this comment

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