Snippets name input (#992)

* snippets name input

* set 'name' property

* code

* update snippet name in /snippets

* fix imports

* snippet name -> add a name

components/Editor.js

@@ -451,6 +451,8 @@ class Editor extends React.Component {
             snippet={this.props.snippet}
             onCreate={this.handleSnippetCreate}
             onDelete={this.handleSnippetDelete}
+            name={config.name}
+            onChange={this.updateSetting}
           />
         )}
         <FontFace {...config} />

components/Input.js

@@ -3,7 +3,17 @@ import React from 'react'
 import { COLORS } from '../lib/constants'
 
 const Input = React.forwardRef(
-  ({ color = COLORS.SECONDARY, align = 'right', width = '100%', label, ...props }, ref) => (
+  (
+    {
+      color = COLORS.SECONDARY,
+      align = 'right',
+      width = '100%',
+      fontSize = '12px',
+      label,
+      ...props
+    },
+    ref
+  ) => (
     <React.Fragment>
       {label && <label>{label}</label>}
       <input ref={ref} {...props} />
@@ -11,7 +21,7 @@ const Input = React.forwardRef(
         {`
           input {
             width: ${width};
-            font-size: 12px;
+            font-size: ${fontSize};
             color: ${color};
             background: transparent;
             border: none;

components/SnippetToolbar.js

@@ -3,6 +3,7 @@ import { useAsyncCallback, useOnline } from 'actionsack'
 
 import Button from './Button'
 import Toolbar from './Toolbar'
+import Input from './Input'
 import ConfirmButton from './ConfirmButton'
 import { useAuth } from './AuthContext'
 
@@ -52,17 +53,9 @@ function SnippetToolbar(props) {
   const user = useAuth()
   const online = useOnline()
 
-  if (!online) {
-    return null
-  }
-
-  if (!user) {
-    return null
-  }
-
-  if (!props.snippet) {
-    return null
-  }
+  if (!online) return null
+  if (!user) return null
+  if (!props.snippet) return null
 
   const sameUser = user.uid === props.snippet.userId
 
@@ -72,12 +65,22 @@ function SnippetToolbar(props) {
         marginTop: 16,
         marginBottom: 0,
         flexDirection: 'row-reverse',
+        alignItems: 'center',
         // justifyContent: 'space-between',
         zIndex: 1,
       }}
     >
       <DuplicateButton onClick={props.onCreate} />
       {sameUser && <DeleteButton onClick={props.onDelete} />}
+      <div style={{ marginRight: 'auto' }}>
+        <Input
+          align="left"
+          placeholder="Add a name…"
+          fontSize="14px"
+          value={props.name}
+          onChange={e => props.onChange('name', e.target.value)}
+        />
+      </div>
     </Toolbar>
   )
 }

lib/constants.js

@@ -1083,6 +1083,7 @@ export const DEFAULT_SETTINGS = {
   watermark: false,
   squaredImage: false,
   hiddenCharacters: false,
+  name: '',
 }
 
 export const DEFAULT_PRESETS = [

lib/util.js

@@ -25,6 +25,7 @@ export const saveSettings = morph.compose(
     'highlights',
     'fontUrl',
     'selectedLines',
+    'name',
   ])
 )
 export const savePresets = morph.compose(

pages/snippets.js

@@ -8,16 +8,14 @@ import { useAsyncCallback } from 'actionsack'
 import Button from '../components/Button'
 import LoginButton from '../components/LoginButton'
 import ConfirmButton from '../components/ConfirmButton'
-import { useAuth } from '../components/AuthContext'
-import { useAPI } from '../components/ApiContext'
-
 import { MetaLinks } from '../components/Meta'
 import Carbon from '../components/Carbon'
+import Page from '../components/Page'
 
-import { COLORS, DEFAULT_SETTINGS } from '../lib/constants'
+import { useAuth } from '../components/AuthContext'
+import { useAPI } from '../components/ApiContext'
 
-// Ours
-import Page from '../components/Page'
+import { COLORS, DEFAULT_SETTINGS } from '../lib/constants'
 
 function correctTimestamp(n) {
   if (n < 9e12) {
@@ -37,7 +35,7 @@ function Snippet(props) {
             {props.code}
           </Carbon>
         </div>
-        <div className="id">{props.title || props.id}</div>
+        <div className="id">{props.name || props.title || props.id}</div>
         <div className="meta">
           Edited {formatDistanceToNow(correctTimestamp(props.updatedAt), { addSuffix: true })}
         </div>