refactor: switch organization screen to new Redux api

src/api/actions/index.js

@@ -1,8 +1,11 @@
-import { createPaginationActionSet } from 'utils';
+import { createActionSet, createPaginationActionSet } from 'utils';
 
 export const ACTIVITY_GET_EVENTS_RECEIVED = createPaginationActionSet(
   'ACTIVITY_GET_EVENTS_RECEIVED'
 );
 export const ACTIVITY_GET_STARRED_REPOS_FOR_USER = createPaginationActionSet(
   'ACTIVITY_GET_STARRED_REPOS_FOR_USER'
 );
+export const ORGS_GET_MEMBERS = createPaginationActionSet('ORGS_GET_MEMBERS');
+
+export const ORGS_GET_BY_ID = createActionSet('ORGS_GET_BY_ID');

src/api/client.js

@@ -149,4 +149,20 @@ export class Client {
       }));
     },
   };
+
+  orgs = {
+    getById: async (orgId, params) => {
+      return this.call(`orgs/${orgId}`, params).then(response => ({
+        response,
+        schema: Schemas.ORG,
+      }));
+    },
+    getMembers: async (orgId, params) => {
+      return this.call(`orgs/${orgId}/members`, params).then(response => ({
+        response,
+        nextPageUrl: this.getNextPageUrl(response),
+        schema: Schemas.USER_ARRAY,
+      }));
+    },
+  };
 }

src/api/reducers/entities.js

@@ -4,6 +4,9 @@ import { merge } from 'lodash';
 export const entities = (
   state = {
     events: {},
+    orgs: {},
+    repos: {},
+    users: {},
   },
   action
 ) => {

src/api/reducers/pagination.js

@@ -81,4 +81,5 @@ export const pagination = combineReducers({
   ACTIVITY_GET_STARRED_REPOS_FOR_USER: paginate(
     Actions.ACTIVITY_GET_STARRED_REPOS_FOR_USER
   ),
+  ORGS_GET_MEMBERS: paginate(Actions.ORGS_GET_MEMBERS),
 });

src/api/schemas/index.js

@@ -1,9 +1,15 @@
 import { eventSchema } from './events';
 import { repoSchema } from './repos';
+import { orgSchema } from './orgs';
+import { userSchema } from './users';
 
 export default {
   EVENT: eventSchema,
   EVENT_ARRAY: [eventSchema],
   REPO: repoSchema,
   REPO_ARRAY: [repoSchema],
+  USER: userSchema,
+  USER_ARRAY: [userSchema],
+  ORG: orgSchema,
+  ORG_ARRAY: [orgSchema],
 };

src/api/schemas/orgs.js

@@ -0,0 +1,9 @@
+import { schema } from 'normalizr';
+
+export const orgSchema = new schema.Entity(
+  'orgs',
+  {},
+  {
+    idAttribute: org => org.login.toLowerCase(),
+  }
+);

src/api/schemas/users.js

@@ -0,0 +1,9 @@
+import { schema } from 'normalizr';
+
+export const userSchema = new schema.Entity(
+  'users',
+  {},
+  {
+    idAttribute: user => user.login.toLowerCase(),
+  }
+);

src/components/members.component.js

@@ -72,8 +72,6 @@ const MembersFlatList = styled(FlatList).attrs({
   },
   data: props => props.data,
   showsHorizontalScrollIndicator: false,
-  renderItem: props => props.renderItem,
-  keyExtractor: props => props.keyExtractor,
   horizontal: true,
 })``;
 
@@ -106,6 +104,7 @@ const MembersListComponent = ({
   smallTitle,
   navigation,
   authUser,
+  ...other
 }: Props) => (
   <Container noMargin={noMargin}>
     <SectionTitle isTitleSmall={smallTitle}>{title}</SectionTitle>
@@ -118,6 +117,7 @@ const MembersListComponent = ({
       )}
     <View>
       <MembersFlatList
+        {...other}
         data={members}
         renderItem={({ item, index }) => (
           <AvatarContainer

src/organization/organization.action.js

@@ -1,45 +1,15 @@
 import { createAction } from 'redux-actions';
 
-import { fetchOrg, fetchOrgMembers, v3 } from 'api';
+import { v3 } from 'api';
 import {
-  GET_ORG,
-  GET_ORG_LOADING,
-  GET_ORG_ERROR,
   GET_ORG_REPOS,
   GET_ORG_REPOS_LOADING,
   GET_ORG_REPOS_ERROR,
-  GET_ORG_MEMBERS,
-  GET_ORG_MEMBERS_LOADING,
-  GET_ORG_MEMBERS_ERROR,
 } from './organization.constants';
 
-export const getOrg = createAction(GET_ORG);
-export const getOrgLoading = createAction(GET_ORG_LOADING);
-export const getOrgError = createAction(GET_ORG_ERROR);
 export const getOrgRepos = createAction(GET_ORG_REPOS);
 export const getOrgReposLoading = createAction(GET_ORG_REPOS_LOADING);
 export const getOrgReposError = createAction(GET_ORG_REPOS_ERROR);
-export const getOrgMembers = createAction(GET_ORG_MEMBERS);
-export const getOrgMembersLoading = createAction(GET_ORG_MEMBERS_LOADING);
-export const getOrgMembersError = createAction(GET_ORG_MEMBERS_ERROR);
-
-export const fetchOrganizations = orgName => (dispatch, getState) => {
-  // use a selector here
-  const accessToken = getState().auth.accessToken;
-
-  dispatch(getOrgLoading(true));
-  dispatch(getOrgError(''));
-
-  return fetchOrg(orgName, accessToken)
-    .then(data => {
-      dispatch(getOrgLoading(false));
-      dispatch(getOrg(data));
-    })
-    .catch(error => {
-      dispatch(getOrgLoading(false));
-      dispatch(getOrgError(error));
-    });
-};
 
 export const fetchOrganizationRepos = url => (dispatch, getState) => {
   const accessToken = getState().auth.accessToken;
@@ -58,20 +28,3 @@ export const fetchOrganizationRepos = url => (dispatch, getState) => {
       dispatch(getOrgReposError(error));
     });
 };
-
-export const fetchOrganizationMembers = orgName => (dispatch, getState) => {
-  const accessToken = getState().auth.accessToken;
-
-  dispatch(getOrgMembersLoading(true));
-  dispatch(getOrgMembersError(''));
-
-  return fetchOrgMembers(orgName, accessToken)
-    .then(data => {
-      dispatch(getOrgMembersLoading(false));
-      dispatch(getOrgMembers(data));
-    })
-    .catch(error => {
-      dispatch(getOrgMembersLoading(false));
-      dispatch(getOrgMembersError(error));
-    });
-};

src/organization/organization.constants.js

@@ -1,9 +1,3 @@
-export const GET_ORG = 'GET_ORG';
-export const GET_ORG_LOADING = 'GET_ORG_LOADING';
-export const GET_ORG_ERROR = 'GET_ORG_ERROR';
 export const GET_ORG_REPOS = 'GET_ORG_REPOS';
 export const GET_ORG_REPOS_LOADING = 'GET_ORG_REPOS_LOADING';
 export const GET_ORG_REPOS_ERROR = 'GET_ORG_REPOS_ERROR';
-export const GET_ORG_MEMBERS = 'GET_ORG_MEMBERS';
-export const GET_ORG_MEMBERS_LOADING = 'GET_ORG_MEMBERS_LOADING';
-export const GET_ORG_MEMBERS_ERROR = 'GET_ORG_MEMBERS_ERROR';

src/organization/organization.reducer.js

@@ -1,15 +1,9 @@
 import { handleActions } from 'redux-actions';
 
 import {
-  GET_ORG,
-  GET_ORG_LOADING,
-  GET_ORG_ERROR,
   GET_ORG_REPOS,
   GET_ORG_REPOS_LOADING,
   GET_ORG_REPOS_ERROR,
-  GET_ORG_MEMBERS,
-  GET_ORG_MEMBERS_LOADING,
-  GET_ORG_MEMBERS_ERROR,
 } from './organization.constants';
 
 const initialState = {
@@ -26,24 +20,6 @@ const initialState = {
 
 export const organizationReducer = handleActions(
   {
-    [GET_ORG]: (state, { payload }) => {
-      return {
-        ...state,
-        organization: payload,
-      };
-    },
-    [GET_ORG_LOADING]: (state, { payload }) => {
-      return {
-        ...state,
-        isPendingOrg: payload,
-      };
-    },
-    [GET_ORG_ERROR]: (state, { payload }) => {
-      return {
-        ...state,
-        organizationError: payload,
-      };
-    },
     [GET_ORG_REPOS]: (state, { payload }) => {
       return {
         ...state,
@@ -62,24 +38,6 @@ export const organizationReducer = handleActions(
         organizationRepositoriesError: payload,
       };
     },
-    [GET_ORG_MEMBERS]: (state, { payload }) => {
-      return {
-        ...state,
-        members: payload,
-      };
-    },
-    [GET_ORG_MEMBERS_LOADING]: (state, { payload }) => {
-      return {
-        ...state,
-        isPendingMembers: payload,
-      };
-    },
-    [GET_ORG_MEMBERS_ERROR]: (state, { payload }) => {
-      return {
-        ...state,
-        organizationMembersError: payload,
-      };
-    },
   },
   initialState
 );

src/organization/organization.selectors.js

@@ -2,47 +2,17 @@ import { createSelector } from 'reselect';
 
 const getOrganizationFromStore = state => state.organization;
 
-export const getOrganization = createSelector(
-  getOrganizationFromStore,
-  organization => organization.organization || {}
-);
-
 export const getOrganizationRepositories = createSelector(
   getOrganizationFromStore,
   organization => organization.repositories || []
 );
 
-export const getOrganizationMembers = createSelector(
-  getOrganizationFromStore,
-  organization => organization.members || []
-);
-
-export const getOrganizationIsPendingOrg = createSelector(
-  getOrganizationFromStore,
-  organization => organization.isPendingOrg || false
-);
-
 export const getOrganizationIsPendingRepos = createSelector(
   getOrganizationFromStore,
   organization => organization.isPendingRepos || false
 );
 
-export const getOrganizationIsPendingMembers = createSelector(
-  getOrganizationFromStore,
-  organization => organization.isPendingMembers || false
-);
-
-export const getOrganizationError = createSelector(
-  getOrganizationFromStore,
-  organization => organization.organizationError || ''
-);
-
 export const getOrganizationRepositoriesError = createSelector(
   getOrganizationFromStore,
   organization => organization.organizationRepositoriesError || ''
 );
-
-export const getOrganizationMembersError = createSelector(
-  getOrganizationFromStore,
-  organization => organization.organizationMembersError || ''
-);