import React from 'react'

class ProjectRadioGroups extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         selectedProject: undefined,
         projectList: []
    }
  }

  addToProjectList(project) {
      var projectList = this.state.projectList;
      if(projectList.indexOf(project) == -1)
        projectList = this.state.projectList.concat([project])

      this.setState({selectedProject: project.value, projectList: projectList});
  }

  selectProject(project) {
      console.log("Select!");
      this.setState({selectedProject: project.value});
  }

  createDotStyle(project) {

    var dotStyle = {
        width: '13px',
        height: '13px',
        display: 'inline-block',
        marginRight: '5px',
        backgroundColor: project.color
    }
    return dotStyle;
  }

render() {
    console.log(this.state);

    // Group project after client id
    var groupedProjects = [];
    var that = this;
    this.state.projectList.forEach(function(project){
        if(groupedProjects[project.client] == null)
            groupedProjects[project.client] = [];

          groupedProjects[project.client].push(project);
    });

    //TODO: Fix sort
    groupedProjects.sort();

    var buttonGroups = Object.keys(groupedProjects).map(function(client) {        
        var projectButtons = groupedProjects[client].map(function(project) {
            var cls = "btn btn-secondary";
            if(project.value == that.state.selectedProject) { 
                cls += " active" 
            }
            return (<button key={project.value} onClick={() => that.selectProject(project)} type="button" className={cls}><span style={that.createDotStyle(project)}/>{project.label}</button>)
        });

        return (
            <div>
                <p style={{marginBottom: '2px', marginTop: '10px'}}><strong>{client}</strong></p>
                <div className="btn-group" role="group">
                    {projectButtons}
                </div>
            </div>
        );
        });

      return(
            <div>
                {buttonGroups}
            </div>
      );
  }
}

export default ProjectRadioGroups

@@ -20,16 +20,111 @@
 react'%0A%0A
+var LocalStorageMixin = require('react-localstorage');%0Aconst state_key = %22togglol-prg-state%22;%0A%0A
 class Pr
@@ -207,16 +207,70 @@
 props);%0A
+    if(localStorage.getItem(state_key) == null) %7B%0A    
     this
@@ -276,24 +276,27 @@
 s.state = %7B%0A
+   
          sel
@@ -321,32 +321,35 @@
 fined,%0A         
+   
 projectList: %5B%5D%0A
@@ -348,22 +348,124 @@
 ist: %5B%5D%0A
+        %7D%0A    %7D%0A    else %7B%0A            this.state = JSON.parse(localStorage.getItem(state_key));    %0A
     %7D%0A
+%0A
   %7D%0A%0A  a
@@ -765,38 +765,8 @@
 ) %7B%0A
-      console.log(%22Select!%22);%0A
     
@@ -821,16 +821,311 @@
 );%0A  %7D%0A%0A
+  removeProject(event, project) %7B%0A      var projectList = this.state.projectList.splice(0);%0A      var index = projectList.indexOf(project);%0A      if (index %3E -1) %7B%0A        projectList.splice(index, 1);%0A      %7D%0A%0A      this.setState(%7BprojectList: projectList%7D);%0A      event.preventDefault();%0A  %7D%0A%0A
   create
@@ -1364,19 +1364,89 @@
     
-console.log
+// Store state in localStorage%0A    localStorage.setItem(state_key, JSON.stringify
 (thi
@@ -1453,17 +1453,20 @@
 s.state)
-;
+);  
 %0A%0A    //
@@ -2161,16 +2161,47 @@
 (%3Cbutton
+ style=%7B%7BpaddingRight: '30px'%7D%7D
  key=%7Bpr
@@ -2335,23 +2335,323 @@
 )%7D/%3E
-%7Bproject.label%7D
+%0A                        %7Bproject.label%7D%0A                        %3Ca aria-hidden=%22true%22 style=%7B%7BmarginLeft: '5px', fontWeight: '700', opacity: '0.7', fontSize: '1.5em', position: 'absolute', bottom: '5px'%7D%7D onClick=%7B(e) =%3E that.removeProject(e, project)%7D %3E&times;%3C/a%3E                            %0A                    
 %3C/bu
@@ -2751,9 +2751,9 @@
 m: '
-2
+3
 px',

Store modal project state in localStorage