small refactor, lint and fixes

frontend/scenes/Document/components/DocumentMove/DocumentMove.js

@@ -1,13 +1,11 @@
 // @flow
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { observable, runInAction, action } from 'mobx';
+import { observable, action } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { withRouter } from 'react-router';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import _ from 'lodash';
-import invariant from 'invariant';
-import { client } from 'utils/ApiClient';
 import styled from 'styled-components';
 import { size } from 'styles/constants';
 
@@ -81,18 +79,7 @@ type Props = {
 
     if (this.searchTerm) {
       try {
-        const res = await client.get('/documents.search', {
-          query: this.searchTerm,
-        });
-        invariant(res && res.data, 'res or res.data missing');
-        const { data } = res;
-        runInAction('search document', () => {
-          // Fill documents store
-          data.forEach(documentData =>
-            this.props.documents.add(new Document(documentData))
-          );
-          this.resultIds = data.map(documentData => documentData.id);
-        });
+        this.resultIds = await this.props.documents.search(this.searchTerm);
       } catch (e) {
         console.error('Something went wrong');
       }

frontend/scenes/Document/components/DocumentMove/components/PathToDocument.js

@@ -12,6 +12,30 @@ import ChevronIcon from 'components/Icon/ChevronIcon';
 import Document from 'models/Document';
 import DocumentsStore from 'stores/DocumentsStore';
 
+const ResultWrapper = styled.div`
+display: flex;
+margin-bottom: 10px;
+
+color: ${color.text};
+cursor: default;
+`;
+
+const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
+padding-top: 3px;
+padding-left: 5px;
+
+&:hover,
+&:active,
+&:focus {
+  margin-left: 0px;
+  border-radius: 2px;
+  background: ${color.black};
+  color: ${color.smokeLight};
+  outline: none;
+  cursor: pointer;
+}
+`;
+
 type Props = {
   documentId?: string,
   onSuccess?: Function,
@@ -58,7 +82,7 @@ type Props = {
             <ChevronIcon />
             {' '}
             {this.resultDocument.pathToDocument
-              .map(doc => <span>{doc.title}</span>)
+              .map(doc => <span key={doc.id}>{doc.title}</span>)
               .reduce((prev, curr) => [prev, <ChevronIcon />, curr])}
           </Flex>}
         {document &&
@@ -72,28 +96,4 @@ type Props = {
   }
 }
 
-const ResultWrapper = styled.div`
-  display: flex;
-  margin-bottom: 10px;
-
-  color: ${color.text};
-  cursor: default;
-`;
-
-const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
-  padding-top: 3px;
-  padding-left: 5px;
-
-  &:hover,
-  &:active,
-  &:focus {
-    margin-left: 0px;
-    border-radius: 2px;
-    background: ${color.black};
-    color: ${color.smokeLight};
-    outline: none;
-    cursor: pointer;
-  }
-`;
-
 export default PathToDocument;