import React from 'react';
import StoryNarrative from './StoryNarrative';
import StoryTasks from './StoryTasks';
import estimateTasks from './estimateTasks';

class Story extends React.Component {
    render() {
        const tasksToggleTitle = (this.props.displayTasks ? 'Hide tasks' : 'Show tasks');
        const elTasks = (this.props.displayTasks ? <StoryTasks tasks={this.props.tasks}/> : null);
        const estimation = estimateTasks(this.props.tasks);
        const estimationTextStyle = (this.props.active ? 'bg-success' : 'text-muted');

        /* eslint no-script-url: 0 */

        return (
            <div>
                <StoryNarrative markdown={this.props.narrative}/>
                {elTasks}

                <div className='row'>
                    <div className='col-md-2'>
                        <a
                        className='btn btn-default'
                        href='javascript:;'
                        onClick={this.props.onToggleTasks}>
                            {tasksToggleTitle}
                        </a>
                    </div>

                    <div className='checkbox col-md-2'>
                        <label>
                            <input
                                type='checkbox'
                                checked={this.props.active}
                                onChange={this.props.onChangeActivity}/>

                            Include into total estimation
                        </label>
                    </div>

                    <div className='col-md-3'>
                        <p className={estimationTextStyle}>
                            75%-likely doable within {estimation} h
                        </p>
                    </div>
                </div>
            </div>
        );
    }
}

export default Story;

@@ -156,65 +156,34 @@
 ';%0A%0A
-class Story extends React.Component %7B%0A    render() %7B%0A    
+export default props =%3E %7B%0A
     
@@ -204,29 +204,24 @@
 gleTitle = (
-this.
 props.displa
@@ -259,28 +259,24 @@
 asks');%0A    
- 
-   
 const elTask
@@ -276,29 +276,24 @@
  elTasks = (
-this.
 props.displa
@@ -320,21 +320,16 @@
  tasks=%7B
-this.
 props.ta
@@ -344,28 +344,24 @@
  null);%0A    
-   
- 
 const estima
@@ -381,21 +381,16 @@
 teTasks(
-this.
 props.ta
@@ -399,20 +399,16 @@
 s);%0A    
-  
-  
 const es
@@ -428,21 +428,16 @@
 tyle = (
-this.
 props.ac
@@ -474,20 +474,16 @@
 ted');%0A%0A
-    
     /* e
@@ -509,20 +509,16 @@
 : 0 */%0A%0A
-    
     retu
@@ -534,22 +534,14 @@
     
-    
 %3Cdiv%3E%0A
-    
     
@@ -574,21 +574,16 @@
 rkdown=%7B
-this.
 props.na
@@ -605,20 +605,16 @@
         
-   
- 
 %7BelTasks
@@ -616,20 +616,16 @@
 Tasks%7D%0A%0A
-    
         
@@ -658,36 +658,32 @@
                 
-  
-  
 %3Cdiv className='
@@ -713,20 +713,16 @@
         
-    
 %3Ca%0A     
@@ -736,20 +736,16 @@
         
-  
-  
 classNam
@@ -784,20 +784,16 @@
         
-    
 href='ja
@@ -824,20 +824,16 @@
         
-  
-  
 onClick=
@@ -833,21 +833,16 @@
 nClick=%7B
-this.
 props.on
@@ -879,20 +879,16 @@
         
-    
 %7BtasksTo
@@ -898,20 +898,16 @@
 eTitle%7D%0A
-    
         
@@ -935,36 +935,32 @@
             
-    
 %3C/div%3E%0A%0A
             
@@ -939,36 +939,32 @@
         %3C/div%3E%0A%0A
-    
                 
@@ -1023,20 +1023,16 @@
     
-    
 %3Clabel%3E%0A
     
@@ -1023,28 +1023,24 @@
     %3Clabel%3E%0A
-    
             
@@ -1086,20 +1086,16 @@
         
-    
 type='ch
@@ -1130,20 +1130,16 @@
         
-    
 checked=
@@ -1139,21 +1139,16 @@
 hecked=%7B
-this.
 props.ac
@@ -1181,20 +1181,16 @@
         
-  
-  
 onChange
@@ -1195,13 +1195,8 @@
 ge=%7B
-this.
 prop
@@ -1218,20 +1218,16 @@
 ity%7D/%3E%0A%0A
-    
         
@@ -1292,20 +1292,16 @@
         
-    
 %3C/label%3E
@@ -1313,36 +1313,32 @@
             
- 
-   
 %3C/div%3E%0A%0A
             
@@ -1317,36 +1317,32 @@
         %3C/div%3E%0A%0A
-    
                 
@@ -1388,20 +1388,16 @@
         
-    
 %3Cp class
@@ -1424,20 +1424,16 @@
 Style%7D%3E%0A
-    
         
@@ -1512,42 +1512,11 @@
     
-    %3C/p%3E%0A                    %3C/div
+%3C/p
 %3E%0A  
@@ -1567,38 +1567,21 @@
     
-);%0A    %7D%0A%7D%0A%0Aexport default Story
+%3C/div%3E%0A    );%0A%7D
 ;%0A

Make the Story a stateless functional component