From 4d404e4f34370f922eb1a3032dcba60af5ffac52 Mon Sep 17 00:00:00 2001
From: GeovanaRamos <geovannna.1998@gmail.com>
Date: Wed, 2 Oct 2019 11:02:20 -0300
Subject: [PATCH 1/7] Added is_checkpoint attr to Story

---
 app/src/components/ToolbarName.js | 13 +++++++++++--
 app/src/pages/StoryEditPage.js    |  6 +++---
 app/src/utils/DataFormat.js       |  5 +++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/src/components/ToolbarName.js b/app/src/components/ToolbarName.js
index 3ccb835..160376c 100644
--- a/app/src/components/ToolbarName.js
+++ b/app/src/components/ToolbarName.js
@@ -10,6 +10,8 @@ import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
 import Tooltip from '@material-ui/core/Tooltip';
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import  Checkbox  from '@material-ui/core/Checkbox'
 
 const style = {
     toolbar: {
@@ -97,7 +99,14 @@ export default class ToolbarName extends Component {
             <Toolbar style={style.toolbar}>
                 <Grid item xs={2} />
                 <Grid item xs={4}>
-                    {this.props.story ? null : (
+                    {this.props.story ?
+                        <FormControlLabel
+                            control={
+                                <Checkbox checked={this.props.item.is_checkpoint} value="checkedA"/>
+                            }
+                            label="Checkpoint"
+                        />
+                        : (
                         <NameField
                             name={this.props.name}
                             items={this.props.items}
@@ -118,7 +127,7 @@ export default class ToolbarName extends Component {
                     </Tooltip>
                 )}
                 </Grid>
-                <Grid item xs={2} />
+                <Grid item xs={2}/>
                 <Grid item xs={3}>
                     <Button
                         color="secondary"
diff --git a/app/src/pages/StoryEditPage.js b/app/src/pages/StoryEditPage.js
index 42a59ea..795b6a6 100644
--- a/app/src/pages/StoryEditPage.js
+++ b/app/src/pages/StoryEditPage.js
@@ -115,8 +115,8 @@ class StoryEditPage extends Component {
         const first_element_is_intent = (this.props.content.length !== 0 && this.props.content[0].type !== 'utter');
         const contents_changed = JSON.stringify(this.props.content) !== JSON.stringify(this.props.old_content);
         let is_enabled = this.props.content_text_validation.length === 0;
-        
-        
+
+
         return first_element_is_intent && contents_changed && is_enabled;
     }
 
@@ -186,7 +186,7 @@ class StoryEditPage extends Component {
                         is_enabled={this.isButtonEnabled()}
                         saveData={this.props.saveData}
                         deleteItem={() => this.changeStatusDialog(true)}
-                        item={new Story(this.props.story_id, this.props.content, this.props.name)}
+                        item={new Story(this.props.story_id, this.props.content, this.props.name, this.props.is_checkpoint)}
                     />
                     <div style={{
                         height: "calc(100vh - 74px - 72px)",
diff --git a/app/src/utils/DataFormat.js b/app/src/utils/DataFormat.js
index f233060..ef8ecbd 100644
--- a/app/src/utils/DataFormat.js
+++ b/app/src/utils/DataFormat.js
@@ -21,9 +21,10 @@ export class Intent {
 };
 
 export class Story {
-    constructor(id = '', content = [], name = ''){
+    constructor(id = '', content = [], name = '', is_checkpoint = false){
         this.id = id;
         this.name = name;
         this.content = content;
+        this.is_checkpoint = is_checkpoint;
     }
-};
\ No newline at end of file
+};

From 9f2473a9d5daf33721c351c7ea7f8a6dc93afc38 Mon Sep 17 00:00:00 2001
From: GeovanaRamos <geovannna.1998@gmail.com>
Date: Wed, 2 Oct 2019 14:24:16 -0300
Subject: [PATCH 2/7] Added action to handle checkpoint change

---
 app/src/components/ToolbarName.js |  9 ++++++++-
 app/src/ducks/stories.js          | 19 +++++++++++++++----
 app/src/pages/StoryEditPage.js    |  1 +
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ToolbarName.js b/app/src/components/ToolbarName.js
index 160376c..572b061 100644
--- a/app/src/components/ToolbarName.js
+++ b/app/src/components/ToolbarName.js
@@ -94,6 +94,10 @@ export default class ToolbarName extends Component {
         }
     }
 
+    handleCheckbox(event){
+        this.props.setCheckpoint(event.target.checked);
+    }
+
     render() {
         return (
             <Toolbar style={style.toolbar}>
@@ -102,7 +106,10 @@ export default class ToolbarName extends Component {
                     {this.props.story ?
                         <FormControlLabel
                             control={
-                                <Checkbox checked={this.props.item.is_checkpoint} value="checkedA"/>
+                                <Checkbox
+                                    checked={this.props.item.is_checkpoint}
+                                    onChange={e => this.handleCheckbox(e)}
+                                />
                             }
                             label="Checkpoint"
                         />
diff --git a/app/src/ducks/stories.js b/app/src/ducks/stories.js
index 9c57474..48d7f45 100644
--- a/app/src/ducks/stories.js
+++ b/app/src/ducks/stories.js
@@ -15,7 +15,8 @@ const INITIAL_STATE = {
     old_content: [],
     story_id: "",
     notification_text: "",
-    content_text_validation: ""
+    content_text_validation: "",
+    is_checkpoint: false
 };
 
 function createArrayObjCopyOf(samples = []) {
@@ -50,7 +51,8 @@ export const getStory = (state = INITIAL_STATE, action) => {
         name: action.story.name,
         story_id: action.story.id,
         content: action.story.content,
-        old_content: action.story.content
+        old_content: action.story.content,
+        is_checkpoint: action.story.is_checkpoint
     };
 }
 
@@ -105,7 +107,7 @@ export const deleteContent = (state = INITIAL_STATE, action) => {
 
 export const undoDeleteContent = (state = INITIAL_STATE) => {
     const text = validationContent(state.old_content);
-    
+
     return {
         ...state,
         content_text_validation: text,
@@ -137,7 +139,14 @@ export const addToStory = (state = INITIAL_STATE, action) => {
         content: new_content,
         content_text_validation: text,
         old_content: createArrayObjCopyOf(state.content),
-    }
+    };
+}
+
+export const setCheckpoint = (state = INITIAL_STATE, action) => {
+    return {
+        ...state,
+        is_checkpoint: action.is_checkpoint
+    };
 }
 
 export const createNewStory = (state = INITIAL_STATE) => {
@@ -171,6 +180,7 @@ export const { Types, Creators } = createActions({
     undoDeleteContent: [],
     notifyAction: ['text'],
     addToStory: ['item', 'mode'],
+    setCheckpoint: ['is_checkpoint'],
     deleteContent: ['content_position'],
     notifyContentTextValidation: ['text'],
     reorderContent: ['start_index', 'end_index'],
@@ -266,6 +276,7 @@ export default createReducer(INITIAL_STATE, {
     [Types.GET_STORIES]: getStories,
     [Types.GET_INTENTS]: getIntents,
     [Types.ADD_TO_STORY]: addToStory,
+    [Types.SET_CHECKPOINT]: setCheckpoint,
     [Types.NOTIFY_ACTION]: notifyAction,
     [Types.DELETE_CONTENT]: deleteContent,
     [Types.REORDER_CONTENT]: reorderContent,
diff --git a/app/src/pages/StoryEditPage.js b/app/src/pages/StoryEditPage.js
index 795b6a6..9aa2e05 100644
--- a/app/src/pages/StoryEditPage.js
+++ b/app/src/pages/StoryEditPage.js
@@ -187,6 +187,7 @@ class StoryEditPage extends Component {
                         saveData={this.props.saveData}
                         deleteItem={() => this.changeStatusDialog(true)}
                         item={new Story(this.props.story_id, this.props.content, this.props.name, this.props.is_checkpoint)}
+                        setCheckpoint={this.props.setCheckpoint}
                     />
                     <div style={{
                         height: "calc(100vh - 74px - 72px)",

From 597b1f583e42b779228372ecd3bcf1a1bbc673f9 Mon Sep 17 00:00:00 2001
From: GeovanaRamos <geovannna.1998@gmail.com>
Date: Wed, 2 Oct 2019 14:38:50 -0300
Subject: [PATCH 3/7] Enabling save button on checkpoint change

---
 app/src/ducks/stories.js       | 9 ++++++---
 app/src/pages/StoryEditPage.js | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/src/ducks/stories.js b/app/src/ducks/stories.js
index 48d7f45..b3810eb 100644
--- a/app/src/ducks/stories.js
+++ b/app/src/ducks/stories.js
@@ -16,7 +16,8 @@ const INITIAL_STATE = {
     story_id: "",
     notification_text: "",
     content_text_validation: "",
-    is_checkpoint: false
+    is_checkpoint: false,
+    old_checkpoint: false
 };
 
 function createArrayObjCopyOf(samples = []) {
@@ -52,7 +53,8 @@ export const getStory = (state = INITIAL_STATE, action) => {
         story_id: action.story.id,
         content: action.story.content,
         old_content: action.story.content,
-        is_checkpoint: action.story.is_checkpoint
+        is_checkpoint: action.story.is_checkpoint,
+        old_checkpoint: action.story.is_checkpoint
     };
 }
 
@@ -145,7 +147,8 @@ export const addToStory = (state = INITIAL_STATE, action) => {
 export const setCheckpoint = (state = INITIAL_STATE, action) => {
     return {
         ...state,
-        is_checkpoint: action.is_checkpoint
+        is_checkpoint: action.is_checkpoint,
+        old_checkpoint: !action.is_checkpoint
     };
 }
 
diff --git a/app/src/pages/StoryEditPage.js b/app/src/pages/StoryEditPage.js
index 9aa2e05..d239b5a 100644
--- a/app/src/pages/StoryEditPage.js
+++ b/app/src/pages/StoryEditPage.js
@@ -115,9 +115,9 @@ class StoryEditPage extends Component {
         const first_element_is_intent = (this.props.content.length !== 0 && this.props.content[0].type !== 'utter');
         const contents_changed = JSON.stringify(this.props.content) !== JSON.stringify(this.props.old_content);
         let is_enabled = this.props.content_text_validation.length === 0;
+        const checkpoint_changed = this.props.is_checkpoint !== this.props.old_checkpoint;
 
-
-        return first_element_is_intent && contents_changed && is_enabled;
+        return first_element_is_intent && (contents_changed || checkpoint_changed) && is_enabled;
     }
 
     render() {

From a244756614b6fa7d9cee97c958b7c90176951e76 Mon Sep 17 00:00:00 2001
From: GeovanaRamos <geovannna.1998@gmail.com>
Date: Wed, 2 Oct 2019 15:36:11 -0300
Subject: [PATCH 4/7] Added list for checkpoints

---
 app/src/icons/CheckpointIcon.js | 13 +++++++++++++
 app/src/pages/StoryEditPage.js  | 15 +++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 app/src/icons/CheckpointIcon.js

diff --git a/app/src/icons/CheckpointIcon.js b/app/src/icons/CheckpointIcon.js
new file mode 100644
index 0000000..7592f9f
--- /dev/null
+++ b/app/src/icons/CheckpointIcon.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const SvgCheckpointIcon = props => (
+  <svg width={24} height={24} {...props}>
+    <path
+      d="M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z"
+      fill="props.fill"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export default SvgCheckpointIcon;
diff --git a/app/src/pages/StoryEditPage.js b/app/src/pages/StoryEditPage.js
index d239b5a..da119ea 100644
--- a/app/src/pages/StoryEditPage.js
+++ b/app/src/pages/StoryEditPage.js
@@ -10,6 +10,7 @@ import { Creators as StoryAction } from "../ducks/stories";
 import Button from '@material-ui/core/Button';
 import IntentIcon from '../icons/IntentIcon';
 import UtterIcon from '../icons/UtterIcon';
+import CheckpointIcon from '../icons/CheckpointIcon'
 import StoryList from '../components/StoryList';
 import { Story } from '../utils/DataFormat.js';
 import TextField from '@material-ui/core/TextField';
@@ -52,6 +53,7 @@ class StoryEditPage extends Component {
         super(props);
         this.props.getIntents()
         this.props.getUtters()
+        this.props.getStories()
 
         const id = this.props.history.location.pathname.split('/').pop();
         isNaN(id) ? this.props.createNewStory() : this.getStory(id);
@@ -163,6 +165,19 @@ class StoryEditPage extends Component {
                                 items={this.filterItems(this.props.utters)}
                                 selected_item_position={this.props.selected_item_position}
                             />
+                            <Typography variant="body2" color="primary">
+                                Checkpoints
+                            </Typography>
+                            <ItemsList
+                                story={true}
+                                icon={<CheckpointIcon />}
+                                isSelected={this.isSelected}
+                                content={this.props.content}
+                                highlighted_text={this.state.value}
+                                actionOnClick={this.props.addUtter}
+                                items={this.props.stories}
+                                selected_item_position={this.props.selected_item_position}
+                            />
                         </Grid>
                     </Grid>
                     <Grid container>

From 8c4edd864f3c5e5b9fbe7f85db483e34d6f3632f Mon Sep 17 00:00:00 2001
From: GeovanaRamos <geovannna.1998@gmail.com>
Date: Thu, 3 Oct 2019 13:01:08 -0300
Subject: [PATCH 5/7] Added method to get checkpoints from api

---
 app/src/ducks/stories.js       | 19 +++++++++++++++++++
 app/src/pages/StoryEditPage.js |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/src/ducks/stories.js b/app/src/ducks/stories.js
index b3810eb..24050af 100644
--- a/app/src/ducks/stories.js
+++ b/app/src/ducks/stories.js
@@ -10,6 +10,7 @@ const INITIAL_STATE = {
     intents: [],
     stories: [],
     content: [],
+    checkpoints: [],
     loading: true,
     name: "",
     old_content: [],
@@ -24,6 +25,13 @@ function createArrayObjCopyOf(samples = []) {
     return samples.map(text => { return { ...text } });
 }
 
+export const getCheckpoints = (state = INITIAL_STATE, action) => {
+    return {
+        ...state,
+        checkpoints: action.checkpoints
+    };
+}
+
 export const getIntents = (state = INITIAL_STATE, action) => {
     return {
         ...state,
@@ -207,6 +215,16 @@ export const { Types, Creators } = createActions({
             }
         }
     },
+    getCheckpoints: () => {
+      return async (dispatch) => {
+          try {
+              const response = await axios.get(STORY_URL + 'checkpoints');
+              await dispatch({ type: Types.GET_CHECKPOINTS, checkpoints: response.data });
+          } catch (error) {
+              throw (error);
+          }
+      }
+    },
     getIntents: () => {
         return async (dispatch) => {
             try {
@@ -275,6 +293,7 @@ export const { Types, Creators } = createActions({
 
 export default createReducer(INITIAL_STATE, {
     [Types.GET_STORY]: getStory,
+    [Types.GET_CHECKPOINTS]: getCheckpoints,
     [Types.GET_UTTERS]: getUtters,
     [Types.GET_STORIES]: getStories,
     [Types.GET_INTENTS]: getIntents,
diff --git a/app/src/pages/StoryEditPage.js b/app/src/pages/StoryEditPage.js
index da119ea..7a5d94d 100644
--- a/app/src/pages/StoryEditPage.js
+++ b/app/src/pages/StoryEditPage.js
@@ -53,7 +53,7 @@ class StoryEditPage extends Component {
         super(props);
         this.props.getIntents()
         this.props.getUtters()
-        this.props.getStories()
+        this.props.getCheckpoints()
 
         const id = this.props.history.location.pathname.split('/').pop();
         isNaN(id) ? this.props.createNewStory() : this.getStory(id);
@@ -175,7 +175,7 @@ class StoryEditPage extends Component {
                                 content={this.props.content}
                                 highlighted_text={this.state.value}
                                 actionOnClick={this.props.addUtter}
-                                items={this.props.stories}
+                                items={this.props.checkpoints}
                                 selected_item_position={this.props.selected_item_position}
                             />
                         </Grid>

From 4d1c2a8a10a3fd0758af1b2d3e28ca9109641af1 Mon Sep 17 00:00:00 2001
From: GeovanaRamos <geovannna.1998@gmail.com>
Date: Mon, 7 Oct 2019 10:34:59 -0300
Subject: [PATCH 6/7] Created action to add checkpoint to story

---
 app/src/components/ExampleStory.js | 48 ++++++++++++++++++++++++++----
 app/src/components/StoryList.js    |  8 ++++-
 app/src/ducks/stories.js           | 10 +++++++
 app/src/pages/StoryEditPage.js     |  7 +----
 4 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/app/src/components/ExampleStory.js b/app/src/components/ExampleStory.js
index cddde83..c3dcd71 100644
--- a/app/src/components/ExampleStory.js
+++ b/app/src/components/ExampleStory.js
@@ -61,21 +61,57 @@ class ExampleStory extends Component {
 
         let last_item = {};
         let content = this.props.content;
+        let new_content = [];
+        let index = 0;
 
         for (let i = 0, size = content.length; i < size; i++) {
-            if (last_item.type === "utter") {
-                content[i] = { ...content[i], sequence: true };
+            console.log(content[i])
+            if (content[i].type === "checkpoint"){
+                let checkpoint = content[i].content;
+                for (let i = 0, size = checkpoint.length; i < size; i++) {
+
+                    if (last_item.type === "utter") {
+                        new_content[index] = { ...checkpoint[i], sequence: true };
+                    } else {
+                        new_content[index] = { ...checkpoint[i], sequence: false};
+                    }
+                    last_item = new_content[index];
+                    index++;
+                }
+            } else if (last_item.type === "utter") {
+                new_content[index] = { ...content[i], sequence: true };
+                last_item = new_content[index];
+                index++;
             } else if (content[i].sequence) {
-                content[i].sequence = false;
+                new_content[index].sequence = false;
+                last_item = new_content[index];
+                index++;
+            } else {
+                new_content[index] = content[i];
+                last_item = new_content[index];
+                index++;
             }
 
-            last_item = content[i];
+
         }
 
-        return content.map((item, index) => {
+        console.log(new_content);
+
+        return new_content.map((item, index) => {
             let element;
             if (item.type === "intent") { element = this.exampleIntent(item, index) }
             else if (item.sequence) { element = this.exampleSimpleUtter(item, index) }
+            // else if (item.type === "checkpoint") {
+            //     for (let i = 0, size = item.content.length; i < size; i++) {
+            //         if (item.content[i].type === "intent") {
+            //             element = this.exampleIntent(item.content[i], index);
+            //         } else if(item.content[i].sequence) {
+            //             element = this.exampleSimpleUtter(item.content[i], index);
+            //         } else {
+            //             element = this.exampleUtter(item.content[i], index);
+            //         }
+            //     }
+            // }
             else { element = this.exampleUtter(item, index) };
             return element;
         })
@@ -94,4 +130,4 @@ class ExampleStory extends Component {
 }
 const mapStateToProps = state => { return { ...state.story } };
 
-export default connect(mapStateToProps)(ExampleStory);
\ No newline at end of file
+export default connect(mapStateToProps)(ExampleStory);
diff --git a/app/src/components/StoryList.js b/app/src/components/StoryList.js
index e77ba31..fd189f5 100644
--- a/app/src/components/StoryList.js
+++ b/app/src/components/StoryList.js
@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import UtterIcon from '../icons/UtterIcon';
 import { message } from "../utils/messages";
 import IntentIcon from '../icons/IntentIcon';
+import CheckpointIcon from '../icons/CheckpointIcon';
 import { Grid, Card } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import IconButton from '@material-ui/core/IconButton';
@@ -76,7 +77,12 @@ class StoryList extends Component {
     }
 
     getIcon(type) {
-        return type === "intent" ? <IntentIcon style={styles.intent_icon} /> : <UtterIcon style={styles.utter_icon} />
+        if(type === "intent")
+            return <IntentIcon style={styles.intent_icon} />
+        else if (type === "utter")
+            return <UtterIcon style={styles.utter_icon} />
+        else
+            return <CheckpointIcon style={styles.utter_icon} />
     }
 
     onDragEnd(result) {
diff --git a/app/src/ducks/stories.js b/app/src/ducks/stories.js
index 24050af..105dc15 100644
--- a/app/src/ducks/stories.js
+++ b/app/src/ducks/stories.js
@@ -215,6 +215,16 @@ export const { Types, Creators } = createActions({
             }
         }
     },
+    addCheckpoint: (checkpoint) => {
+        return async (dispatch) => {
+            try {
+                const response = await axios.get(STORY_URL + checkpoint.id + '/checkpoint');
+                await dispatch({ type: Types.ADD_TO_STORY, item: response.data, mode: "checkpoint" });
+            } catch (error) {
+                throw (error);
+            }
+        }
+    },
     getCheckpoints: () => {
       return async (dispatch) => {
           try {
diff --git a/app/src/pages/StoryEditPage.js b/app/src/pages/StoryEditPage.js
index 7a5d94d..7f36ac4 100644
--- a/app/src/pages/StoryEditPage.js
+++ b/app/src/pages/StoryEditPage.js
@@ -147,7 +147,6 @@ class StoryEditPage extends Component {
                                 highlighted_text={this.state.value}
                                 actionOnClick={this.props.addIntent}
                                 items={this.filterItems(this.props.intents)}
-                                content={this.props.content}
                                 selected_item_position={this.props.selected_item_position}
                             />
                         </Grid>
@@ -158,8 +157,6 @@ class StoryEditPage extends Component {
                             <ItemsList
                                 story={true}
                                 icon={<UtterIcon />}
-                                isSelected={this.isSelected}
-                                content={this.props.content}
                                 highlighted_text={this.state.value}
                                 actionOnClick={this.props.addUtter}
                                 items={this.filterItems(this.props.utters)}
@@ -171,10 +168,8 @@ class StoryEditPage extends Component {
                             <ItemsList
                                 story={true}
                                 icon={<CheckpointIcon />}
-                                isSelected={this.isSelected}
-                                content={this.props.content}
                                 highlighted_text={this.state.value}
-                                actionOnClick={this.props.addUtter}
+                                actionOnClick={this.props.addCheckpoint}
                                 items={this.props.checkpoints}
                                 selected_item_position={this.props.selected_item_position}
                             />

From e9979706cc8a824e42a065a8c6f698c6544e7f25 Mon Sep 17 00:00:00 2001
From: GeovanaRamos <geovannna.1998@gmail.com>
Date: Tue, 8 Oct 2019 08:47:27 -0300
Subject: [PATCH 7/7] Added checkpoint icon to stories page

---
 app/src/components/ExampleStory.js | 15 +--------------
 app/src/components/StoryCard.js    | 11 +++++++++--
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/app/src/components/ExampleStory.js b/app/src/components/ExampleStory.js
index c3dcd71..71752e9 100644
--- a/app/src/components/ExampleStory.js
+++ b/app/src/components/ExampleStory.js
@@ -65,7 +65,7 @@ class ExampleStory extends Component {
         let index = 0;
 
         for (let i = 0, size = content.length; i < size; i++) {
-            console.log(content[i])
+
             if (content[i].type === "checkpoint"){
                 let checkpoint = content[i].content;
                 for (let i = 0, size = checkpoint.length; i < size; i++) {
@@ -95,23 +95,10 @@ class ExampleStory extends Component {
 
         }
 
-        console.log(new_content);
-
         return new_content.map((item, index) => {
             let element;
             if (item.type === "intent") { element = this.exampleIntent(item, index) }
             else if (item.sequence) { element = this.exampleSimpleUtter(item, index) }
-            // else if (item.type === "checkpoint") {
-            //     for (let i = 0, size = item.content.length; i < size; i++) {
-            //         if (item.content[i].type === "intent") {
-            //             element = this.exampleIntent(item.content[i], index);
-            //         } else if(item.content[i].sequence) {
-            //             element = this.exampleSimpleUtter(item.content[i], index);
-            //         } else {
-            //             element = this.exampleUtter(item.content[i], index);
-            //         }
-            //     }
-            // }
             else { element = this.exampleUtter(item, index) };
             return element;
         })
diff --git a/app/src/components/StoryCard.js b/app/src/components/StoryCard.js
index 0f784d5..d1db0fb 100644
--- a/app/src/components/StoryCard.js
+++ b/app/src/components/StoryCard.js
@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import { Card } from '@material-ui/core';
 import UtterIcon from '../icons/UtterIcon';
 import IntentIcon from '../icons/IntentIcon';
+import CheckpointIcon from '../icons/CheckpointIcon';
 import Typography from '@material-ui/core/Typography';
 import { setHighlight } from "../utils/utils";
 
@@ -44,14 +45,20 @@ export default class StoryCard extends Component {
                         {setHighlight(item.name, this.props.highlighted_text)}
                     </Typography>
                 )
-            }
-            else {
+            } else if (item.type === "utter") {
                 return (
                     <Typography key={'story_card_item_' + index} style={styles.utter} varant="body1" noWrap>
                         <UtterIcon style={styles.utter_icon} />
                         {setHighlight(item.name, this.props.highlighted_text)}
                     </Typography>
                 )
+            } else if (item.type === "checkpoint") {
+                return (
+                    <Typography key={'story_card_item_' + index} style={styles.utter} varant="body1" noWrap>
+                        <CheckpointIcon style={styles.utter_icon} />
+                        {setHighlight(item.name, this.props.highlighted_text)}
+                    </Typography>
+                )
             }
         })
         return list;