Save/Edit favorite in editor

src/browser/components/buttons/index.jsx

@@ -87,6 +87,10 @@ export const EditorButton = styled.span`
   }
 `
 
+export const EditModeEditorButton = styled(EditorButton)`
+  color: ${props => props.theme.editModeButtonText};
+`
+
 export const StyledNavigationButton = styled.button`
   background: transparent;
   border: 0;

src/browser/modules/Editor/Editor.jsx

@@ -24,18 +24,19 @@ import { connect } from 'preact-redux'
 import { withBus } from 'preact-suber'
 import { executeCommand, executeSystemCommand } from 'shared/modules/commands/commandsDuck'
 import * as favorites from 'shared/modules/favorites/favoritesDuck'
-import { SET_CONTENT, FOCUS, EXPAND } from 'shared/modules/editor/editorDuck'
+import { SET_CONTENT, EDIT_CONTENT, FOCUS, EXPAND } from 'shared/modules/editor/editorDuck'
 import { getHistory } from 'shared/modules/history/historyDuck'
 import { getCmdChar, shouldEditorAutocomplete } from 'shared/modules/settings/settingsDuck'
 import { Bar, ActionButtonSection, EditorWrapper } from './styled'
-import { EditorButton } from 'browser-components/buttons'
+import { EditorButton, EditModeEditorButton } from 'browser-components/buttons'
 import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck'
 import { debounce } from 'services/utils'
 import * as viewTypes from 'shared/modules/stream/frameViewTypes'
 import Codemirror from './Codemirror'
 import * as schemaConvert from './editorSchemaConverter'
 import cypherFunctions from './cypher/functions'
 import consoleCommands from './language/consoleCommands'
+import Render from 'browser-components/Render'
 
 export class Editor extends Component {
   constructor (props) {
@@ -61,6 +62,7 @@ export class Editor extends Component {
 
   clearEditor () {
     this.setEditorValue('')
+    this.setContentId(null)
   }
 
   handleEnter (cm) {
@@ -169,6 +171,11 @@ export class Editor extends Component {
 
     if (this.props.bus) {
       this.props.bus.take(SET_CONTENT, (msg) => {
+        this.setContentId(null)
+        this.setEditorValue(msg.message)
+      })
+      this.props.bus.take(EDIT_CONTENT, (msg) => {
+        this.setContentId(msg.id)
         this.setEditorValue(msg.message)
       })
       this.props.bus.take(FOCUS, this.focusEditor.bind(this))
@@ -187,6 +194,10 @@ export class Editor extends Component {
     })
   }
 
+  setContentId (id) {
+    this.setState({contentId: id})
+  }
+
   updateCode (newCode, change, cb = () => {
   }) {
     const mode = this.props.cmdchar && newCode.trim().indexOf(this.props.cmdchar) === 0
@@ -317,13 +328,25 @@ export class Editor extends Component {
           />
         </EditorWrapper>
         <ActionButtonSection>
-          <EditorButton
-            onClick={() => this.props.onFavortieClick(this.getEditorValue())}
-            disabled={this.getEditorValue().length < 1}
-            title='Favorite'
-            hoverIcon='"\58"'
-            icon='"\73"'
-          />
+          <Render if={this.state.contentId}>
+            <EditModeEditorButton
+              onClick={() => this.props.onFavoriteUpdateClick(this.state.contentId, this.getEditorValue())}
+              disabled={this.getEditorValue().length < 1}
+              color='#ffaf00'
+              title='Favorite'
+              hoverIcon='"\74"'
+              icon='"\25"'
+            />
+          </Render>
+          <Render if={!this.state.contentId}>
+            <EditorButton
+              onClick={() => this.props.onFavoriteClick(this.getEditorValue())}
+              disabled={this.getEditorValue().length < 1}
+              title='Update favorite'
+              hoverIcon='"\58"'
+              icon='"\73"'
+            />
+          </Render>
           <EditorButton
             onClick={() => this.clearEditor()}
             disabled={this.getEditorValue().length < 1}
@@ -346,10 +369,14 @@ export class Editor extends Component {
 
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
-    onFavortieClick: (cmd) => {
+    onFavoriteClick: (cmd) => {
       const action = favorites.addFavorite(cmd)
       ownProps.bus.send(action.type, action)
     },
+    onFavoriteUpdateClick: (id, cmd) => {
+      const action = favorites.updateFavorite(id, cmd)
+      ownProps.bus.send(action.type, action)
+    },
     onExecute: (cmd) => {
       const action = executeCommand(cmd)
       ownProps.bus.send(action.type, action)

src/browser/modules/Sidebar/Favorite.jsx

@@ -20,7 +20,7 @@
 
 import {connect} from 'preact-redux'
 import * as favorite from 'shared/modules/favorites/favoritesDuck'
-import {StyledListItem, StyledFavoriteText, DeleteFavButton, ExecFavortieButton} from './styled'
+import {StyledListItem, StyledFavoriteText, DeleteFavButton, ExecFavoriteButton} from './styled'
 import {withBus} from 'preact-suber'
 import {Component} from 'preact'
 import {DragSource, DropTarget} from 'react-dnd'
@@ -97,9 +97,11 @@ class FavoriteDp extends Component {
     const name = extractNameFromCommand(this.props.content)
     let favoriteContent = (
       <StyledListItem isChild={this.props.isChild}>
-        <ExecFavortieButton onClick={() => this.props.onExecClick(this.props.content)} />
+        <ExecFavoriteButton onClick={() => this.props.onExecClick(this.props.content)} />
         <StyledFavoriteText {...this.props}
-          onClick={() => this.props.onItemClick(this.props.content)}>{name}</StyledFavoriteText>
+          onClick={() => this.props.onItemClick(this.props.id, this.props.content)}>
+          {name}
+        </StyledFavoriteText>
         <DeleteFavButton id={this.props.id} removeClick={() => this.props.removeClick(this.props.id)}
           isStatic={this.props.isStatic} />
       </StyledListItem>

src/browser/modules/Sidebar/Favorites.jsx

@@ -158,8 +158,8 @@ const mapStateToProps = (state) => {
 }
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
-    onItemClick: (cmd) => {
-      ownProps.bus.send(editor.SET_CONTENT, editor.setContent(cmd))
+    onItemClick: (id, cmd) => {
+      ownProps.bus.send(editor.EDIT_CONTENT, editor.editContent(id, cmd))
     },
     onExecClick: (cmd) => {
       const action = executeCommand(cmd)

src/browser/modules/Sidebar/styled.jsx

@@ -136,7 +136,7 @@ const StyledExecFavoriteButton = styled.div`
     opacity: 1;
   }
 `
-export const ExecFavortieButton = (props) => {
+export const ExecFavoriteButton = (props) => {
   return (
     <StyledExecFavoriteButton {...props}>
       <PlainPlayIcon />

src/browser/styles/themes.js

@@ -68,6 +68,7 @@ export const base = {
   formButtonBorder: '1px solid #ccc',
   formButtonBorderHover: '1px solid ##adadad',
   formButtonBackgroundHover: '#e6e6e6',
+  editModeButtonText: '#ffaf00',
 
   // Borders
   frameBorder: 'none',

src/shared/modules/editor/editorDuck.js

@@ -25,10 +25,12 @@ import { APP_START } from 'shared/modules/app/appDuck'
 
 const NAME = 'editor'
 export const SET_CONTENT = NAME + '/SET_CONTENT'
+export const EDIT_CONTENT = NAME + '/EDIT_CONTENT'
 export const FOCUS = `${NAME}/FOCUS`
 export const EXPAND = `${NAME}/EXPAND`
 
 export const setContent = (newContent) => ({ type: SET_CONTENT, message: newContent })
+export const editContent = (id, message) => ({ type: EDIT_CONTENT, message, id })
 
 export const populateEditorFromUrlEpic = (some$, store) => {
   return some$.ofType(APP_START)

src/shared/modules/favorites/favoritesDuck.js

@@ -29,19 +29,27 @@ export const ADD_FAVORITE = 'favorites/ADD_FAVORITE'
 export const REMOVE_FAVORITE = 'favorites/REMOVE_FAVORITE'
 export const LOAD_FAVORITES = 'favorites/LOAD_FAVORITES'
 export const SYNC_FAVORITES = 'favorites/SYNC_FAVORITES'
+export const UPDATE_FAVORITE = 'favorites/UPDATE_FAVORITE'
 export const UPDATE_FAVORITES = 'favorites/UPDATE_FAVORITES'
 
 export const getFavorites = (state) => state[NAME]
+export const getFavorite = (state, id) => state.filter((favorite) => favorite.id === id)[0]
+export const removeFavoriteById = (state, id) => state.filter((favorite) => favorite.id !== id)
 const versionSize = 20
+
 // reducer
 const initialState = staticScriptsList.map(script => Object.assign({}, script, {isStatic: true}))
 
 export default function reducer (state = initialState, action) {
   switch (action.type) {
     case REMOVE_FAVORITE:
-      return state.filter((favorite) => favorite.id !== action.id)
+      return removeFavoriteById(state, action.id)
     case ADD_FAVORITE:
       return state.concat([{id: uuid.v4(), content: action.cmd}])
+    case UPDATE_FAVORITE:
+      const mergedFavorite = Object.assign({}, getFavorite(state, action.id), {content: action.cmd})
+      const updatedFavorites = state.map((_) => _.id === action.id ? mergedFavorite : _)
+      return mergeFavorites(initialState, updatedFavorites)
     case LOAD_FAVORITES:
     case UPDATE_FAVORITES:
       return mergeFavorites(initialState, action.favorites)
@@ -78,6 +86,13 @@ export function syncFavorites (favorites) {
     favorites
   }
 }
+export function updateFavorite (id, cmd) {
+  return {
+    type: UPDATE_FAVORITE,
+    id,
+    cmd
+  }
+}
 export function updateFavorites (favorites) {
   return {
     type: UPDATE_FAVORITES,

src/shared/modules/favorites/favoritesDuck.test.js

@@ -50,6 +50,35 @@ describe('favorites reducer', () => {
     const nextState = reducer(initialState, action)
     expect(nextState).toEqual([favoriteScript1, favoriteScript3])
   })
+  test('should return favorite by id', () => {
+    const favoriteScript1 = { id: uuid.v4(), name: 'Test1', content: 'match (n) return n limit 1' }
+    const favoriteScript2 = { id: uuid.v4(), name: 'Test2', content: 'match (a) return a' }
+    const initialState = [
+      favoriteScript1,
+      favoriteScript2
+    ]
+
+    const nextState = reducer(initialState, {})
+    expect(favorites.getFavorite(nextState, favoriteScript1.id)).toEqual(favoriteScript1)
+    expect(favorites.getFavorite(nextState, favoriteScript2.id)).toEqual(favoriteScript2)
+  })
+  test('should update favorite by id', () => {
+    const favoriteScript1 = { id: uuid.v4(), name: 'Test1', content: 'match (n) return n limit 1' }
+    const favoriteScript2 = { id: uuid.v4(), name: 'Test2', content: 'match (a) return a' }
+    const initialState = [
+      favoriteScript1,
+      favoriteScript2
+    ]
+    const newContent = '//Foobar'
+    const action = {
+      type: favorites.UPDATE_FAVORITE,
+      id: favoriteScript1.id,
+      cmd: newContent
+    }
+    const nextState = reducer(initialState, action)
+    expect(favorites.getFavorite(nextState, favoriteScript1.id)).toEqual({...favoriteScript1, content: newContent})
+    expect(favorites.getFavorite(nextState, favoriteScript2.id)).toEqual(favoriteScript2)
+  })
 })
 
 describe('favorites actions', () => {