import React from 'react'
import graphqlApi from '../graphql-api'

export default class GroupSelectionForm extends React.Component {
  state = {
    groups: []
  }

  componentWillMount = async () => {
    const query = `{ groups { name } }`
    const response = await graphqlApi.request(query)

    this.setState({
      groups: response.data.groups
    })
  }

  render() {
    const groups = this.state.groups
    return (
      <div>
        <h3 className="is-centered">
          Add { this.props.fullName } to a group
          { this.props.primaryEmail }
        </h3>
        {
          groups.length > 0 &&
          <ul>
            {
              groups.map((group) => {
                return <label key={group.name} className="checkbox">
                        <input type="checkbox"/>
                        {group.name}
                      </label>
              })
            }
          </ul>
        }
      </div>
    )
  }
}

@@ -356,16 +356,102 @@
 %7D)%0A  %7D%0A%0A
+  saveGroups = (e) =%3E %7B%0A    e.preventDefault()%0A    console.log(%22todo:implement%22)%0A  %7D%0A%0A
   render
@@ -603,16 +603,43 @@
 a group%0A
+        %3C/h3%3E%0A        %3Ch4%3E%0A
         
@@ -671,33 +671,33 @@
 il %7D%0A        %3C/h
-3
+4
 %3E%0A        %7B%0A    
@@ -723,16 +723,34 @@
  %3E 0 &&%0A
+          %3Cdiv%3E%0A  
         
@@ -760,34 +760,38 @@
 ul%3E%0A            
-%7B%0A
+  %7B%0A  
               gr
@@ -832,38 +832,89 @@
     
+  
 return 
-%3Clabel key=%7Bgroup.name%7D
+(%0A                    %3Cli key=%7Bgroup.name%7D%3E%0A                      %3Clabel
  cla
@@ -1049,16 +1049,64 @@
 /label%3E%0A
+                    %3C/li%3E%0A                  )%0A  
         
@@ -1114,16 +1114,18 @@
      %7D)%0A
+  
         
@@ -1144,14 +1144,125 @@
     
+  
 %3C/ul%3E%0A
+            %3Cbutton className=%22button%22 onClick=%7Bthis.saveGroups%7D%3ESave and Continue%3C/button%3E%0A          %3C/div%3E%0A
     

Refactor Group Selection form when creating new individual