change editTeam form

Author: kamicut

components/edit-team-form.js

@@ -29,7 +29,7 @@ function renderErrors (errors) {
   })
 }
 
-export default function EditTeamForm ({ initialValues, onSubmit, staff, isCreateForm, extraTags = [], profileValues }) {
+export default function EditTeamForm ({ initialValues, onSubmit, staff, isCreateForm, orgTeamTags = [], teamTags = [], profileValues }) {
   if (profileValues) {
     initialValues.tags = {}
     profileValues.forEach(({ id, value }) => {
@@ -42,14 +42,34 @@ export default function EditTeamForm ({ initialValues, onSubmit, staff, isCreate
       onSubmit={onSubmit}
       render={({ status, isSubmitting, submitForm, values, errors, setFieldValue, setErrors, setStatus }) => {
         let uniqueOrgs
-        let extraFields
+        let extraOrgTeamFields = []
+        let extraTeamFields = []
         if (staff && isCreateForm) {
           uniqueOrgs = uniqBy(prop('organization_id'), staff.map(({ name, organization_id }) => {
             return { name, organization_id }
           }))
         }
-        if (extraTags.length > 0) {
-          extraFields = extraTags.map(({ id, name, required, description }) => {
+        if (orgTeamTags.length > 0) {
+          extraOrgTeamFields = orgTeamTags.map(({ id, name, required, description }) => {
+            return (
+              <div className='form-control form-control__vertical' key={`extra-tag-${id}`}>
+                <label htmlFor={`extra-tag-${id}`}>{name}
+                  {required ? <span className='form--required'>*</span> : ''}
+                  {description ? descriptionPopup(description) : ''}
+                </label>
+                <Field
+                  type='text'
+                  name={`tags.key-${id}`}
+                  required={required}
+                  value={values.tags[`key-${id}`]}
+                />
+              </div>
+            )
+          })
+        }
+
+        if (teamTags.length > 0) {
+          extraTeamFields = teamTags.map(({ id, name, required, description }) => {
             return (
               <div className='form-control form-control__vertical' key={`extra-tag-${id}`}>
                 <label htmlFor={`extra-tag-${id}`}>{name}
@@ -112,10 +132,17 @@ export default function EditTeamForm ({ initialValues, onSubmit, staff, isCreate
               )
               : ''
             }
-            {extraTags.length > 0
+            {extraOrgTeamFields.length > 0
               ? <>
                 <h2>Org Attributes</h2>
-                {extraFields}
+                {extraOrgTeamFields}
+              </>
+              : ''
+            }
+            {extraTeamFields.length > 0
+              ? <>
+                <h2>Other Team Attributes</h2>
+                {extraTeamFields}
               </>
               : ''
             }

pages/team-edit.js

@@ -7,7 +7,7 @@ import getConfig from 'next/config'
 import EditTeamForm from '../components/edit-team-form'
 import Button from '../components/button'
 import theme from '../styles/theme'
-import { getTeamAttributes, getTeamProfile } from '../lib/profiles-api'
+import { getOrgTeamAttributes, getTeamAttributes, getTeamProfile } from '../lib/profiles-api'
 const { publicRuntimeConfig } = getConfig()
 
 export default class TeamEdit extends Component {
@@ -32,13 +32,18 @@ export default class TeamEdit extends Component {
     const { id } = this.props
     try {
       let team = await getTeam(id)
-      let teamAttributes = await getTeamAttributes(id)
+      let teamAttributes = await getTeamAttributes(id) || []
+      let orgTeamAttributes = []
       let profileValues = []
       profileValues = await getTeamProfile(id)
+      if (team.org) {
+        orgTeamAttributes = await getOrgTeamAttributes(team.org.organization_id)
+      }
       this.setState({
         team,
         profileValues,
         teamAttributes,
+        orgTeamAttributes,
         loading: false
       })
     } catch (e) {
@@ -109,7 +114,7 @@ export default class TeamEdit extends Component {
   }
 
   render () {
-    const { team, error, teamAttributes, profileValues } = this.state
+    const { team, error, teamAttributes, orgTeamAttributes, profileValues } = this.state
 
     if (error) {
       if (error.status >= 400 && error.status < 500) {
@@ -139,7 +144,8 @@ export default class TeamEdit extends Component {
           <EditTeamForm
             initialValues={pick(['name', 'bio', 'hashtag', 'editing_policy', 'location', 'privacy'], team)}
             profileValues={profileValues}
-            extraTags={teamAttributes}
+            teamTags={teamAttributes}
+            orgTeamTags={orgTeamAttributes}
             onSubmit={async (values, actions) => {
               try {
                 let tags = Object.keys(values.tags).map(key => {