move badge client code to separate file

Author: kamicut

src/lib/badges-api.js

@@ -0,0 +1,36 @@
+const { default: ApiClient } = require('./api-client')
+const logger = require('./logger')
+
+const apiClient = new ApiClient()
+
+/**
+ * Get badges from an organization
+ *
+ * @param {int} orgId - id of the organization
+ * @returns {array[badges]}
+ */
+export async function getOrgBadges(orgId) {
+  try {
+    const badges = await apiClient.get(`/organizations/${orgId}/badges`)
+    return badges
+  } catch (e) {
+    if (e.statusCode === 401) {
+      logger.error("User doesn't have access to organization badges.")
+    } else {
+      logger.error(e)
+    }
+  }
+}
+
+export async function getUserBadges(userId) {
+  try {
+    const badges = await apiClient.get(`/user/${userId}/badges`)
+    return badges
+  } catch (e) {
+    if (e.statusCode === 401) {
+      logger.error("User doesn't have access to organization badges.")
+    } else {
+      logger.error(e)
+    }
+  }
+}

src/pages/organizations/[id]/index.js

@@ -19,17 +19,15 @@ import Button from '../../../components/button'
 import Modal from 'react-modal'
 import ProfileModal from '../../../components/profile-modal'
 import { contains, prop, map } from 'ramda'
-import APIClient from '../../../lib/api-client'
 import join from 'url-join'
 import { getSession } from 'next-auth/react'
+import { getOrgBadges, getUserBadges } from '../../../lib/badges-api'
 import TeamsTable from '../../../components/tables/teams'
 import UsersTable from '../../../components/tables/users'
 import logger from '../../../lib/logger'
 
 const URL = process.env.APP_URL
 
-const apiClient = new APIClient()
-
 export function SectionWrapper(props) {
   return (
     <div>
@@ -72,7 +70,6 @@ class Organization extends Component {
 
     this.closeProfileModal = this.closeProfileModal.bind(this)
     this.renderBadges = this.renderBadges.bind(this)
-    this.getBadges = this.getBadges.bind(this)
   }
 
   async componentDidMount() {
@@ -90,9 +87,9 @@ class Organization extends Component {
       const profileInfo = await getUserOrgProfile(id, user.id)
 
       // Fetch badges for this organization
-      const profileBadges = (
-        await apiClient.get(`/user/${user.id}/badges`)
-      ).badges.filter((b) => b.organization_id === parseInt(id))
+      const profileBadges = (await getUserBadges(user.id)).badges.filter(
+        (b) => b.organization_id === parseInt(id)
+      )
 
       this.setState({
         profileInfo,
@@ -164,16 +161,17 @@ class Organization extends Component {
   async getBadges() {
     try {
       const { id: orgId } = this.props
-      const badges = await apiClient.get(`/organizations/${orgId}/badges`)
+      const badges = await getOrgBadges(orgId)
       this.setState({
         badges,
       })
     } catch (e) {
-      if (e.statusCode === 401) {
-        logger.error("User doesn't have access to organization badges.")
-      } else {
-        logger.error(e)
-      }
+      this.setState({
+        org: {
+          error: e,
+          status: 'error',
+        },
+      })
     }
   }
 

src/pages/teams/[id]/index.js

@@ -33,6 +33,7 @@ import { getOrgStaff } from '../../../lib/org-api'
 import { toast } from 'react-toastify'
 import logger from '../../../lib/logger'
 import MembersTable from './members-table'
+import { getOrgBadges } from '../../../lib/badges-api'
 
 const APP_URL = process.env.APP_URL
 const Map = dynamic(() => import('../../../components/team-map'), {
@@ -101,18 +102,21 @@ class Team extends Component {
       let team = await getTeam(id)
       let teamMembers = { moderators: [], members: [] }
       let teamProfile = []
+      let orgBadges = []
       teamMembers = await getTeamMembers(id)
       teamProfile = await getTeamProfile(id)
 
       let orgOwners = []
       if (team.org) {
         orgOwners = (await getOrgStaff(team.org.organization_id)).owners
+        orgBadges = await getOrgBadges(team.org.organization_id)
       }
       this.setState({
         team,
         teamProfile,
         teamMembers,
         orgOwners,
+        orgBadges,
         loading: false,
       })
     } catch (e) {
@@ -262,6 +266,8 @@ class Team extends Component {
     const members = map(prop('id'), teamMembers.members)
     const moderators = map(prop('osm_id'), teamMembers.moderators)
 
+    logger.info(this.state)
+
     // TODO: moderators is an array of ints while members are an array of strings. fix this.
     const isUserModerator =
       contains(parseInt(userId), moderators) ||