[Feature] Load ProfileOrganizationsView by one request (GraphQL)

ovr · Oct 25, 2017 · a7e8399 · a7e8399
1 parent 4b7ee01
commit a7e8399
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 19 deletions.
diff --git a/actions/profile.js b/actions/profile.js
@@ -31,6 +31,14 @@ query($login: String!) {
         },
         followers {
             totalCount
+        },
+        organizations(first: 10) {
+            nodes {
+                id,
+                avatarUrl,
+                name
+            },
+            totalCount
         }
     }
 }

diff --git a/components/OrganizationAvatar/OrganizationAvatar.js b/components/OrganizationAvatar/OrganizationAvatar.js
@@ -17,10 +17,12 @@ export default class OrganizationAvatar extends PureComponent<Props> {
     render() {
         const { organization, size, style } = this.props;
 
+        const uri = organization.avatar_url ? organization.avatar_url : organization.avatarUrl;
+
         return (
             <Image
                 style={[{ width: size, height: size }, style]}
-                source={{ uri: organization.avatar_url }}
+                source={{ uri }}
             />
         );
     }

diff --git a/components/ProfileOrganizationsView/ProfileOrganizationsView.js b/components/ProfileOrganizationsView/ProfileOrganizationsView.js
@@ -39,7 +39,8 @@ export default class ProfileOrganizationsView extends PureComponent<Props> {
                             <OrganizationAvatar
                                 key={organization.id}
                                 organization={organization}
-                                size={50} style={styles.organizationAvatar}
+                                size={50}
+                                style={styles.organizationAvatar}
                             />
                         )
                     )

diff --git a/containers/Profile/Profile.js b/containers/Profile/Profile.js
@@ -6,35 +6,21 @@ import { View, StyleSheet, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 
 import { Spinner, ErrorView, ProfileView, ProfileOrganizationsView, ContributionsGraph, Blank } from 'components';
-import { fetchProfile, fetchOrganizations } from 'actions';
+import { fetchProfile } from 'actions';
 
 // import flow types
 import type { ProfileState } from 'reducers/profile';
-import type { ProfileOrganizationsState } from 'reducers/profile-organizations';
 import type { NavigationState } from 'reducers/navigation';
 
 type Props = {
     profile: ProfileState,
-    profileOrganizations: ProfileOrganizationsState,
     navigation: NavigationState,
     fetchProfile: typeof fetchProfile,
-    fetchOrganizations: typeof fetchOrganizations,
 }
 
 class Profile extends PureComponent<Props> {
     componentWillMount() {
         this.props.fetchProfile(this.props.navigation.params.id);
-        this.props.fetchOrganizations(this.props.navigation.params.id);
-    }
-
-    renderOrganizations() {
-        const { loading, error, organizations } = this.props.profileOrganizations;
-
-        if (loading || error || !organizations) {
-            return null;
-        }
-
-        return <ProfileOrganizationsView organizations={organizations} />;
     }
 
     render() {
@@ -69,7 +55,7 @@ class Profile extends PureComponent<Props> {
         return (
             <ScrollView style={styles.root}>
                 <ProfileView user={user} />
-                {this.renderOrganizations()}
+                <ProfileOrganizationsView organizations={user.organizations.nodes} />
                 <ContributionsGraph user={user} />
                 <Blank />
             </ScrollView>
@@ -97,5 +83,5 @@ export default connect(
             navigation: state.navigation
         };
     },
-    { fetchProfile, fetchOrganizations }
+    { fetchProfile }
 )(Profile);