Merge pull request #122 from xsnippet/react-update

[Components] Moved non-component methods to entries files

Author: Olha Kurkaiedova

.babelrc

@@ -1,6 +1,8 @@
 {
   "presets": ["react", "env"],
   "plugins": [
-    "syntax-dynamic-import"
+    "syntax-dynamic-import",
+    "transform-class-properties",
+    "transform-object-rest-spread"
   ]
 }

package.json

@@ -50,6 +50,8 @@
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "clean-webpack-plugin": "^0.1.17",

src/actions/index.js

@@ -1,5 +1,5 @@
 import parseLinkHeader from 'parse-link-header'
-import * as misc from '../misc'
+import { getApiUri } from '../misc/url'
 
 export const setRecentSnippets = snippets => ({
   type: 'SET_RECENT_SNIPPETS',
@@ -15,7 +15,7 @@ export const fetchRecentSnippets = marker => (dispatch) => {
   let qs = ''
   if (marker) { qs = `&marker=${marker}` }
 
-  return fetch(misc.getApiUri(`snippets?limit=20${qs}`))
+  return fetch(getApiUri(`snippets?limit=20${qs}`))
     .then((response) => {
       const links = parseLinkHeader(response.headers.get('Link'))
 
@@ -31,7 +31,7 @@ export const setSnippet = snippet => ({
 })
 
 export const fetchSnippet = id => dispatch => (
-  fetch(misc.getApiUri(`snippets/${id}`))
+  fetch(getApiUri(`snippets/${id}`))
     .then(response => response.json())
     .then(json => dispatch(setSnippet(json)))
 )
@@ -42,13 +42,13 @@ export const setSyntaxes = syntaxes => ({
 })
 
 export const fetchSyntaxes = dispatch => (
-  fetch(misc.getApiUri('syntaxes'))
+  fetch(getApiUri('syntaxes'))
     .then(response => response.json())
     .then(json => dispatch(setSyntaxes(json)))
 )
 
 export const postSnippet = (snippet, onSuccess) => dispatch => (
-  fetch(misc.getApiUri('snippets'), {
+  fetch(getApiUri('snippets'), {
     method: 'POST',
     headers: {
       'Accept': 'application/json',

src/components/ListBox.jsx

@@ -7,7 +7,6 @@ class ListBox extends React.Component {
     this.state = {
       selected: null,
     }
-    this.onClick = this.onClick.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -29,7 +28,7 @@ class ListBox extends React.Component {
     }
   }
 
-  onClick(e) {
+  onClick = e => {
     const { value } = e.target.dataset
 
     this.setState({ selected: value })

src/components/ListBoxWithSearch.jsx

@@ -1,18 +1,17 @@
 import React from 'react'
 
 import ListBox from './ListBox'
-import * as misc from '../misc'
+import { regExpEscape } from '../misc/reqExp'
 
 class ListBoxWithSearch extends React.PureComponent {
   constructor(props) {
     super(props)
     this.state = {
       searchQuery: null,
     }
-    this.onSearch = this.onSearch.bind(this)
   }
 
-  onSearch(e) {
+  onSearch = e => {
     this.setState({ searchQuery: e.target.value.trim() })
   }
 
@@ -31,7 +30,7 @@ class ListBoxWithSearch extends React.PureComponent {
     // Filter out only those items that match search query. If no query is
     // set, do nothing and use the entire set.
     if (searchQuery) {
-      const regExp = new RegExp(misc.regExpEscape(searchQuery), 'gi')
+      const regExp = new RegExp(regExpEscape(searchQuery), 'gi')
       items = items.filter(item => item.name.match(regExp))
     }
 

src/components/NewSnippet.jsx

@@ -3,121 +3,120 @@ import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
 import { WithContext as Tags } from 'react-tag-input'
 
-import brace from 'brace'
-import 'brace/ext/modelist'
 import 'brace/theme/textmate'
 
-import Joi from 'joi'
-
 import Notification from './common/Notification'
 import ListBoxWithSearch from './ListBoxWithSearch'
-import * as actions from '../actions'
+import { fetchSyntaxes, postSnippet } from '../actions'
+
+import { validateSnippet } from '../entries/snippetValidation'
+import { getCurrentModeName, getModesByName } from '../misc/modes'
+import { onEditorLoad } from '../misc/editor'
+import { recalcLangHeaderHeight } from '../misc/dom'
+
+import { delimeterKeys } from '../entries/keyboardKeys'
+import { defaultOptions } from '../entries/aceEditorOptions'
 
 import '../styles/NewSnippet.styl'
 
 class NewSnippet extends React.Component {
   constructor(props) {
     super(props)
-    this.schema = Joi.object().keys({
-      content: Joi.string().required(),
-    })
-    this.keys = {
-      TAB: 9,
-      SPACE: 32,
-      ENTER: 13,
-      COMMA: 188,
-    }
+
     this.state = {
       content: '',
       title: '',
       tags: [],
       syntax: '',
       validationError: null,
     }
-    this.recalcLangHeaderHeight = () => {
-      const newSnippetHeaderHeight = document.getElementsByClassName('new-snippet-code-header')[0].offsetHeight
-
-      document.getElementsByClassName('new-snippet-lang-header')[0]
-        .setAttribute('style', `height:${newSnippetHeaderHeight}px`)
-    }
-    this.onEditorLoad = (editor) => {
-      // we want to disable built-in find in favor of browser's one
-      editor.commands.removeCommand('find')
-    }
-    this.postSnippet = this.postSnippet.bind(this)
-    this.onSyntaxClick = this.onSyntaxClick.bind(this)
-    this.onInputChange = this.onInputChange.bind(this)
-    this.onTagAdded = this.onTagAdded.bind(this)
-    this.onTagRemoved = this.onTagRemoved.bind(this)
-    this.onTagBlur = this.onTagBlur.bind(this)
   }
 
   componentDidMount() {
     const { dispatch } = this.props
-    dispatch(actions.fetchSyntaxes)
+    dispatch(fetchSyntaxes)
   }
 
-  onTagAdded(tag) {
+  onTagAdded = tag => {
     if (tag && tag.text) {
       this.setState({ tags: [...this.state.tags, tag] }, () => {
-        this.recalcLangHeaderHeight()
+        recalcLangHeaderHeight()
       })
     }
   }
 
-  onTagRemoved(i) {
+  onTagRemoved = i => {
     const { tags } = this.state
 
     this.setState({ tags: tags.filter((tag, index) => index !== i) }, () => {
-      this.recalcLangHeaderHeight()
+      recalcLangHeaderHeight()
     })
   }
 
-  onTagBlur(tag) {
+  onTagBlur = tag => {
     this.onTagAdded({ id: tag, text: tag })
   }
 
-  onSyntaxClick(syntax) {
+  onSyntaxClick = syntax => {
     this.setState({ syntax })
   }
 
-  onInputChange(e) {
+  onInputChange = e => {
     const { name, value } = e.target
 
     this.setState({ [name]: value })
   }
 
-  postSnippet(e) {
+  validate = () => {
+    const { content } = this.state
+
+    return validateSnippet({ content: content.trim() })
+  }
+
+  post = e => {
     e.preventDefault()
     const { dispatch, history } = this.props
-    const { error } = Joi.validate({ content: this.state.content.trim() }, this.schema)
+    const { error } = this.validate()
 
     this.setState({ validationError: error })
 
-    if (error === null) {
+    if (!error) {
       const {
         content, title, tags, syntax,
       } = this.state
 
-      dispatch(actions.postSnippet({
+      dispatch(postSnippet({
         content, title, tags: tags.map(tag => tag.text), syntax,
       }, json => history.push(`/${json.id}`)))
     }
   }
 
-  render() {
-    const { modesByName } = brace.acequire('ace/ext/modelist')
-    const mode = modesByName[this.state.syntax] || modesByName.text
-    const syntaxes = this.props.syntaxes.map(item => ({
+  getSyntaxes = () => {
+    const { modesByName } = getModesByName()
+
+    return this.props.syntaxes.map(item => ({
       name: modesByName[item].caption,
       value: item,
     }))
+  }
+
+  renderValidationError = () => {
+    const { validationError } = this.state
+
+    return validationError && <Notification
+      message="Content is required :("
+      show={!!validationError}
+    />
+  }
+
+  render() {
+    const { syntax, content, title, tags } = this.state
 
     return (
       <form
         className="new-snippet"
         key="New Snippet"
-        onSubmit={this.postSnippet}
+        onSubmit={this.post}
         role="presentation"
       >
         <div className="new-snippet-code-wrapper">
@@ -127,52 +126,41 @@ class NewSnippet extends React.Component {
               placeholder="Title"
               name="title"
               type="text"
-              value={this.state.title}
+              value={title}
               onChange={this.onInputChange}
             />
             <Tags
               placeholder="Tags"
-              tags={this.state.tags}
+              tags={tags}
               handleDelete={this.onTagRemoved}
               handleAddition={this.onTagAdded}
               handleInputBlur={this.onTagBlur}
-              delimiters={
-                [this.keys.TAB, this.keys.SPACE, this.keys.ENTER, this.keys.COMMA]
-              }
+              delimiters={delimeterKeys}
             />
           </div>
           <div className="new-snippet-code">
             <AceEditor
-              mode={mode.name}
+              mode={getCurrentModeName(syntax)}
               width="100%"
               height="100%"
               focus
               theme="textmate"
-              onLoad={this.onEditorLoad}
-              setOptions={{
-                showFoldWidgets: false,
-                useWorker: false,
-                fontSize: '13px',
-                maxLines: Infinity,
-                showPrintMargin: false,
-              }}
+              onLoad={onEditorLoad}
+              setOptions={defaultOptions}
               editorProps={{ $blockScrolling: Infinity }}
-              value={this.state.content}
+              value={content}
               onChange={(content) => { this.setState({ content }) }}
             />
 
             <div className="new-snippet-code-bottom-bar">
-              <Notification
-                message="Content is required :("
-                show={!!this.state.validationError}
-              />
+              {this.renderValidationError()}
               <input type="submit" value="POST SNIPPET" />
             </div>
           </div>
         </div>
         <div className="new-snippet-lang-wrapper">
           <ListBoxWithSearch
-            items={syntaxes}
+            items={this.getSyntaxes()}
             onClick={this.onSyntaxClick}
           />
         </div>

src/components/RecentSnippetItem.jsx

@@ -1,28 +1,28 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import brace from 'brace'
 
-import * as misc from '../misc'
-import conf from '../conf'
+import { getCurrentModeCaption } from '../misc/modes'
+import { downloadSnippet } from '../misc/download'
+import { getSnippetTitle, formatDate } from '../misc/snippet'
+import { getRawUrl } from '../misc/url'
 
 const RecentSnippetItem = ({ snippet }) => {
-  const { modesByName } = brace.acequire('ace/ext/modelist')
-  const mode = modesByName[snippet.get('syntax')] || modesByName.text
-  const syntax = mode.caption
-  const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`
-  const download = () => misc.downloadSnippet(snippet)
-  const rawUrl = conf.RAW_SNIPPET_URI_FORMAT.replace('%s', snippet.get('id'))
+  const syntax = getCurrentModeCaption(snippet.get('syntax'))
+  const title = getSnippetTitle(snippet)
+  const rawUrl = getRawUrl(snippet.get('id'))
+
+  const download = () => downloadSnippet(snippet)
 
   return (
     <li className="recent-snippet-item">
       <div className="recent-snippet-meta">
         <div>
-          <Link to={`${snippet.get('id')}`} className="recent-snippet-meta-title">{snippetTitle}</Link>
+          <Link to={`${snippet.get('id')}`} className="recent-snippet-meta-title">{title}</Link>
           <div className="recent-snippet-meta-tags">
             {snippet.get('tags').map(item => <span className="recent-snippet-meta-tag" key={item}>{item}</span>)}
           </div>
         </div>
-        <span className="recent-snippet-meta-info">{misc.formatDate(snippet.get('created_at'))}, by Guest</span>
+        <span className="recent-snippet-meta-info">{formatDate(snippet.get('created_at'))}, by Guest</span>
       </div>
       <div className="recent-snippet-actions">
         <span className="recent-snippet-lang">{syntax}</span>