fix snippet toolbar logic

carbon-app · May 14, 2022 · 859abfe · 859abfe
1 parent 7557b55
commit 859abfe
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 87 deletions.
diff --git a/components/Editor.js b/components/Editor.js
@@ -290,10 +290,18 @@ class Editor extends React.Component {
       .then(() =>
         this.props.setToasts({
           type: 'SET',
-          toasts: [{ children: 'Snippet duplicated!', timeout: 3000 }],
+          toasts: [{ children: 'Snippet created', timeout: 3000 }],
         })
       )
 
+  handleSnippetUpdate = () =>
+    this.context.snippet.update(this.props.snippet.id, this.state).then(() =>
+      this.props.setToasts({
+        type: 'SET',
+        toast: { children: 'Snippet saved', timeout: 3000 },
+      })
+    )
+
   handleSnippetDelete = () =>
     this.context.snippet
       .delete(this.props.snippet.id)
@@ -402,10 +410,9 @@ class Editor extends React.Component {
           snippet={this.props.snippet}
           onCreate={this.handleSnippetCreate}
           onDelete={this.handleSnippetDelete}
+          onUpdate={this.handleSnippetUpdate}
           name={config.name}
           onChange={this.updateSetting}
-          setSnippet={this.props.setSnippet}
-          setToasts={this.props.setToasts}
         />
         <FontFace {...config} />
         <style jsx>

diff --git a/components/EditorContainer.js b/components/EditorContainer.js
@@ -25,12 +25,6 @@ function onReset() {
 
 function toastsReducer(curr, action) {
   switch (action.type) {
-    case 'ADD': {
-      if (!curr.find(t => t.children === action.toast.children)) {
-        return curr.concat(action.toast)
-      }
-      return curr
-    }
     case 'SET': {
       return action.toasts
     }

diff --git a/components/SnippetToolbar.js b/components/SnippetToolbar.js
@@ -7,12 +7,11 @@ import Input from './Input'
 import ConfirmButton from './ConfirmButton'
 import Popout, { managePopout } from './Popout'
 import { Down as ArrowDown } from './svg/Arrows'
-import { useAPI } from './ApiContext'
 import { useAuth } from './AuthContext'
 
 import { COLORS } from '../lib/constants'
 
-const popoutStyle = { width: '144px', right: 15, top: 40 }
+const popoutStyle = { width: '120px', right: -8, top: 40 }
 
 function DeleteButton(props) {
   const [onClick, { loading }] = useAsyncCallback(props.onClick)
@@ -26,7 +25,7 @@ function DeleteButton(props) {
       large
       color="#fff"
       onClick={onClick}
-      style={{ color: COLORS.RED, borderTop: `1px solid ${COLORS.GREEN}` }}
+      style={{ color: COLORS.RED }}
     >
       {loading ? 'Deleting…' : 'Delete'}
     </ConfirmButton>
@@ -38,21 +37,26 @@ function DuplicateButton(props) {
 
   return (
     <Button
-      display="block"
-      padding="8px"
-      flex="unset"
-      center
+      border
       large
+      center
       color={COLORS.GREEN}
       onClick={onClick}
+      data-cy="duplicate-button"
+      style={{ minWidth: 92 }}
+      title="Duplicate"
+      disabled={loading}
     >
       {loading ? 'Duplicating…' : 'Duplicate'}
     </Button>
   )
 }
 
-function SaveButton({ loading, onClick }) {
+function SaveButton({ loading, onClick, sameUser }) {
   useKeyboardListener('⌥-s', e => {
+    if (loading) {
+      return
+    }
     e.preventDefault()
     onClick()
   })
@@ -65,7 +69,11 @@ function SaveButton({ loading, onClick }) {
       color={COLORS.GREEN}
       onClick={onClick}
       data-cy="save-button"
-      style={{ minWidth: 84, borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+      style={{
+        minWidth: 84,
+        borderBottomRightRadius: sameUser ? 0 : undefined,
+        borderTopRightRadius: sameUser ? 0 : undefined,
+      }}
       title="Save"
       disabled={loading}
     >
@@ -74,83 +82,39 @@ function SaveButton({ loading, onClick }) {
   )
 }
 
-function SnippetToolbar({
-  toggleVisibility,
-  isVisible,
-  snippet,
-  setSnippet,
-  setToasts,
-  state,
-  ...props
-}) {
+function SnippetToolbar({ toggleVisibility, isVisible, snippet, ...props }) {
   const user = useAuth()
   const online = useOnline()
-  const api = useAPI()
-  const [update, { loading }] = useAsyncCallback(api.snippet.update)
+
+  const [save, { loading }] = useAsyncCallback(() => {
+    if (snippet) {
+      return props.onUpdate()
+    } else {
+      return props.onCreate()
+    }
+  })
 
   if (!online) return null
   if (!user) return null
 
   const sameUser = snippet && user.uid === snippet.userId
 
-  // TODO move this to Editor
-  function saveSnippet() {
-    if (loading || !user) {
-      return
-    }
-
-    if (!snippet) {
-      update(undefined, state).then(newSnippet => {
-        if (newSnippet && newSnippet.id) {
-          setSnippet(newSnippet)
-          setToasts({
-            type: 'ADD',
-            toast: { children: 'Snippet saved!', closable: true },
-          })
-        }
-      })
-    } else if (sameUser) {
-      update(snippet.id, state).then(() => {
-        setToasts({
-          type: 'ADD',
-          toast: { children: 'Snippet saved!', closable: true },
-        })
-      })
-    }
-  }
-
   return (
     <Toolbar
       style={{
         position: 'relative',
         zIndex: 1,
         marginTop: 16,
         marginBottom: 0,
-        flexDirection: 'row-reverse',
+        flexDirection: 'row',
         alignItems: 'center',
       }}
     >
-      <div className="flex">
-        <SaveButton loading={loading} onClick={saveSnippet} />
-        <Button
-          title="Save menu dropdown"
-          border
-          large
-          center
-          color={COLORS.GREEN}
-          padding="0 8px"
-          margin="0 8px 0 -1px"
-          onClick={toggleVisibility}
-          data-cy="save-button"
-          style={{
-            borderBottomLeftRadius: 0,
-            borderTopLeftRadius: 0,
-            maxWidth: '26px',
-          }}
-        >
-          <ArrowDown color={COLORS.GREEN} />
-        </Button>
-      </div>
+      <Popout hidden={!isVisible} borderColor={COLORS.GREEN} pointerRight="6px" style={popoutStyle}>
+        <div className="menu flex">
+          <DeleteButton onClick={props.onDelete} />
+        </div>
+      </Popout>
       <div style={{ marginRight: 'auto' }}>
         <Input
           align="left"
@@ -160,12 +124,33 @@ function SnippetToolbar({
           onChange={e => props.onChange('name', e.target.value)}
         />
       </div>
-      <Popout hidden={!isVisible} borderColor={COLORS.GREEN} pointerRight="6px" style={popoutStyle}>
-        <div className="menu flex">
+      <div className="flex">
+        {snippet && !sameUser ? (
           <DuplicateButton onClick={props.onCreate} />
-          {sameUser && <DeleteButton onClick={props.onDelete} />}
-        </div>
-      </Popout>
+        ) : (
+          <SaveButton loading={loading} onClick={save} sameUser={sameUser} />
+        )}
+        {sameUser && (
+          <Button
+            title="Save menu dropdown"
+            border
+            large
+            center
+            color={COLORS.GREEN}
+            padding="0 8px"
+            margin="0 0 0 -1px"
+            onClick={toggleVisibility}
+            data-cy="save-button"
+            style={{
+              borderBottomLeftRadius: 0,
+              borderTopLeftRadius: 0,
+              maxWidth: '26px',
+            }}
+          >
+            <ArrowDown color={COLORS.GREEN} />
+          </Button>
+        )}
+      </div>
       <style jsx>
         {`
           .menu {

diff --git a/components/Toolbar.js b/components/Toolbar.js
@@ -15,14 +15,10 @@ const Toolbar = props => (
           font-size: 14px;
         }
 
-        .toolbar > :global(div) {
+        .toolbar > :global(div:not(:last-child)) {
           margin-right: 8px;
         }
 
-        .toolbar > :global(div):last-child {
-          margin-right: 0px;
-        }
-
         @media (max-width: 920px) {
           .toolbar {
             max-width: 100%;