Feature / Emoji Sharing

package.json

@@ -60,5 +60,8 @@
     "save-svg-as-png": "^1.4.6",
     "uniquefilename": "^1.1.2",
     "whatwg-fetch": "^3.0.0"
+  },
+  "jest": {
+    "testURL": "http://localhost:8080"
   }
-}
+}

src/components/App.jsx

@@ -4,13 +4,15 @@ import Canvas from './Canvas'
 import Editor from './Editor'
 import Library from './Library'
 import Modal from './Modal'
+import Share from './Share'
 
 import evaluate from '../utils/evaluate'
 import mapFuncs from '../utils/mapFuncs'
 import getSvgBlob from '../utils/getSvgBlob'
 import postEmojiToServer from '../utils/postEmojiToServer'
 import saveSvg from '../utils/saveSvg'
 import { loadCode, saveCode } from '../utils/localStorage'
+import { generateShareUrl, decodeEmojiFromUrl } from '../utils/encode'
 
 import functionLibrary from '../library'
 
@@ -30,6 +32,7 @@ class App extends Component {
       commands: [],
       errors: [],
       showLibrary: false,
+      showShare: false,
       textCommands: loadCode() || EXAMPLE_CODE,
     }
 
@@ -39,6 +42,7 @@ class App extends Component {
     this.onEmojiSubmit = this.onEmojiSubmit.bind(this)
     this.updateCommands = this.updateCommands.bind(this)
     this.showLibrary = this.showLibrary.bind(this)
+    this.shareEmoji = this.shareEmoji.bind(this)
     this.insertEditorCommand = this.insertEditorCommand.bind(this)
   }
 
@@ -62,6 +66,8 @@ class App extends Component {
     })
   }
 
+
+
   onChangeName(e) {
     const { value } = e.target
 
@@ -79,6 +85,10 @@ class App extends Component {
     this.setState(({ showLibrary }) => ({ showLibrary: !showLibrary }))
   }
 
+  shareEmoji() { 
+    this.setState(({ showShare }) => ({ showShare: !showShare }))
+  }
+
   insertEditorCommand(command) {
     this.showLibrary()
     const commandToInsert = `${command}(50, 50, 100%, 0)`
@@ -88,7 +98,7 @@ class App extends Component {
   }
 
   render() {
-    const { commands, errors, showLibrary, name, textCommands, submitting } = this.state
+    const { commands, errors, showLibrary, showShare, name, textCommands, submitting } = this.state
     const { components, errors: cmdErrors } = mapFuncs(commands, functionLibrary)
     const allErrors = [...errors, ...cmdErrors]
 
@@ -113,6 +123,15 @@ class App extends Component {
                   Save Emoji!
                 </button>
 
+                <button 
+                  type="button" 
+                  className="button" 
+                  onClick={this.shareEmoji} 
+                  disabled={submitting}
+                >
+                  Share Emoji!
+                </button>
+
                 <button
                   type="button"
                   className="button"
@@ -163,6 +182,20 @@ class App extends Component {
             </button>
           </div>
         </Modal>
+
+        <Modal isOpen={showShare}>
+          <div className="modal flex-card flex-card--align-center">
+            <h1 className="modal__title">Share your Emoji!</h1>
+            <Share name={name} code={textCommands} components={components} />
+            <button
+              type="button"
+              className="button library-close-button"
+              onClick={this.shareEmoji}
+            >
+              X
+            </button>
+          </div>
+        </Modal>
       </div>
     )
   }

src/components/Share.jsx

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+
+import Canvas from './Canvas'
+
+import { generateShareUrl } from '../utils/encode'
+
+
+const Share = ({
+  name,
+  code,
+  components,
+}) => {
+  return (
+    <div className="share">
+      <div className="share__preview">
+        <Canvas components={components} />
+        <h3>{name}</h3>
+      </div>
+      <p>Share this link with your friends to show them your brand new Emoji!</p>
+      <textarea
+        className="share__code"
+        value={generateShareUrl({ name, textCommands: code })}
+        readOnly
+        rows={4}
+      />
+    </div>
+  )
+}
+
+export default Share

src/index.css

@@ -232,10 +232,33 @@ body:before {
   font-size: 1.2em;
 }
 
+.share {
+  background: white;
+  padding: 0 2rem;
+  font-size: 1.2em;
+}
+
+.share__code {
+  background: #fff9e3;
+  color: #ed217c;
+  padding: 1em;
+  width: 100%;
+  font-weight: bold;
+  resize: none;
+  border: none;
+  font-size: 1em;
+}
+
+.share__preview {
+  width: 50%;
+  text-align: center;
+  margin: 1em auto;
+}
+
 .library__code {
   background: #fff9e3;
   color: #ed217c;
-  padding: 0.1em 1em;
+  padding: 0.1em em;
 }
 
 .library__preview {

src/utils/__tests__/encode.test.js

@@ -0,0 +1,28 @@
+import { hashToEmoji, emojiToHash, generateShareUrl } from '../encode'
+
+
+describe('hashToEmoji', () => {
+  it('takes a base64 encoded string and returns textCommands and a name', () => {
+    const emoji = { name: 'testEmoji', textCommands: 'circle()' }
+    const code = 'eyJuYW1lIjoidGVzdEVtb2ppIiwidGV4dENvbW1hbmRzIjoiY2lyY2xlKCkifQ=='
+    expect(hashToEmoji(code)).toEqual(emoji)
+  })
+})
+
+describe('emojiToHash', () => {
+  it('takes an emoji and returns an encoded string', () => {
+    const emoji = { name: 'test', textCommands: 'circle()' }
+    const code = 'eyJuYW1lIjoidGVzdCIsInRleHRDb21tYW5kcyI6ImNpcmNsZSgpIn0='
+    expect(emojiToHash(emoji)).toEqual(code)
+  })
+})
+
+describe('generateShareUrl', () => {
+  it('creates a share URL for an emoji based off the current URL', () => {
+    const url = 'http://localhost:8080#emoji=eyJuYW1lIjoidGVzdCIsInRleHRDb21tYW5kcyI6ImNpcmNsZSgpIn0%3D'
+    expect(generateShareUrl({
+      name: 'test',
+      textCommands: 'circle()',
+    })).toBe(url)
+  })
+})

src/utils/encode.js

@@ -0,0 +1,21 @@
+const hashToEmoji = (hash) => {
+  return JSON.parse(atob(hash))
+}
+
+const emojiToHash = ({ name, textCommands }) => {
+  return btoa(JSON.stringify({
+    name,
+    textCommands,
+  }))
+}
+
+const generateShareUrl = (emoji) => {
+  const hash = encodeURIComponent(emojiToHash(emoji))
+  return `${window.location.origin}#emoji=${hash}`
+}
+
+export {
+  emojiToHash,
+  hashToEmoji,
+  generateShareUrl,
+}