uploading

src/components/UploadModal/index.js

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from "react";
 import { connect } from "react-redux";
-import { Button, Loader, Message, Modal } from "semantic-ui-react";
+import { Button, Loader, Message, Modal, Icon } from "semantic-ui-react";
 import { gql } from "@apollo/client";
 import { graphql } from "@apollo/client/react/hoc";
 import PropTypes from "prop-types";
@@ -21,17 +21,19 @@ const getUploadDate = gql`
   }
 `;
 
+/*
 const uploadPerspective = gql`
   mutation uploadPerspective($id: LingvodocID!, $debugFlag: Boolean) {
     tsakorpus(perspective_id: $id, debug_flag: $debugFlag) {
       triumph
     }
   }
 `;
+*/
 
 const Upload = props => {
 
-  const [uploaded, setUploaded] = useState(false);
+  const [uploading, setUploading] = useState(props.uploading); // uploading value goes from the parent component
   const getTranslation = useContext(TranslationContext);
   const { id, title, data, actions, user, uploadPerspective } = props;
   const { loading, error, refetch, perspective } = data;
@@ -78,23 +80,33 @@ const Upload = props => {
             ? new Date(uploaded_at).toLocaleString()
             : "<never>"
           }
+          { user.id == 1 && (
+            <Button
+              content={uploading ? (
+                <span>
+                  {getTranslation("Uploading")}... <Icon name="spinner" loading />
+                </span>
+              ) : (
+                getTranslation(uploaded_at ? "Refresh" : "Upload")
+              )}
+              onClick={() => {
+                setUploading(true);
+                uploadPerspective(title);
+              }}
+              disabled={uploading}
+              className="lingvo-button-greenest"
+              style={{marginLeft: "1.5em"}}
+            />
+          )}
         </p>
       </Modal.Content>
       <Modal.Actions>
-        { user.id == 1 && (
+        { user.id !== undefined && uploaded_at && (
           <Button
-            content={getTranslation("Upload")}
-            onClick={() => {
-              uploadPerspective({
-                variables: { id }
-              }).then(() => {
-                refetch();
-                setUploaded(true);
-              })
-            }}
-            disabled={uploaded}
-            className="lingvo-button-greenest"
+            content={getTranslation("Uploaded corpora")}
+            className="lingvo-button-violet"
             style={{float: 'left'}}
+            onClick={()=> window.open(`http://83.149.198.78/${id[0]}_${id[1]}/search`, "_blank")}
           />
         )}
         <Button
@@ -110,6 +122,8 @@ const Upload = props => {
 Upload.propTypes = {
   id: PropTypes.array.isRequired,
   title: PropTypes.string.isRequired,
+  uploading: PropTypes.bool.isRequired,
+  uploadPerspective: PropTypes.func.isRequired,
   data: PropTypes.shape({
     loading: PropTypes.bool.isRequired
   }).isRequired,
@@ -127,8 +141,8 @@ export default compose(
     dispatch => ({ actions: bindActionCreators({ closeUploadModal }, dispatch) })
   ),
   branch(({ upload }) => !upload, renderNothing),
-  withProps(({ upload: { id, title } }) => ({ id, title })),
+  withProps(({ upload: { id, title, uploading, uploadPerspective } }) => ({ id, title, uploading, uploadPerspective })),
   graphql(getUploadDate, { options: { fetchPolicy: "network-only" }}),
-  graphql(uploadPerspective, { name: "uploadPerspective" }),
-  onlyUpdateForKeys(["upload", "uploaded", "data"])
+  //graphql(uploadPerspective, { name: "uploadPerspective" }),
+  onlyUpdateForKeys(["upload", "uploading", "data"])
 )(Upload);

src/ducks/upload.js

@@ -3,21 +3,31 @@ import { combineReducers } from "redux";
 // Actions
 const OPEN_MODAL = "@upload/OPEN_MODAL";
 const CLOSE_MODAL = "@upload/CLOSE_MODAL";
+const UPDATE_MODAL = "@upload/UPDATE_MODAL";
 
-export const openUploadModal = (id, title) => ({
+export const openUploadModal = (id, title, uploading, uploadPerspective) => ({
   type: OPEN_MODAL,
   payload: {
     id,
-    title
+    title,
+    uploading,
+    uploadPerspective
   }
 });
 
+export const updateUploadModal = (uploading) => ({
+  type: UPDATE_MODAL,
+  payload: { uploading }
+});
+
 export const closeUploadModal = () => ({ type: CLOSE_MODAL });
 
 const upload = (state = null, { type, payload }) => {
   switch (type) {
     case OPEN_MODAL:
       return payload;
+    case UPDATE_MODAL:
+      return { ...state, uploading: payload.uploading };
     case CLOSE_MODAL:
       return null;
     default:

src/pages/Perspective/PerspectivePath.js

@@ -16,7 +16,7 @@ import { openPerspectivePropertiesModal } from "ducks/perspectiveProperties";
 import { openRoles } from "ducks/roles";
 import { openSaveDictionaryModal } from "ducks/saveDictionary";
 import { openStatistics } from "ducks/statistics";
-import { openUploadModal } from "ducks/upload";
+import { openUploadModal, updateUploadModal } from "ducks/upload";
 import TranslationContext from "Layout/TranslationContext";
 
 const queryPerspectivePath = gql`
@@ -48,6 +48,14 @@ export const queryAvailablePerspectives = gql`
   }
 `;
 
+const uploadPerspective = gql`
+  mutation uploadPerspective($id: LingvodocID!, $debugFlag: Boolean) {
+    tsakorpus(perspective_id: $id, debug_flag: $debugFlag) {
+      triumph
+    }
+  }
+`;
+
 const license_dict_translator = getTranslation => ({
   proprietary: [getTranslation("Proprietary"), null],
   "cc-by-4.0": ["CC-BY-4.0", "https://creativecommons.org/licenses/by/4.0/legalcode"],
@@ -59,6 +67,29 @@ const license_dict_translator = getTranslation => ({
  * Perspective breadcrumb component.
  */
 class PerspectivePath extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      uploading: false
+    };
+
+    this.uploadPerspectiveWrapper = this.uploadPerspectiveWrapper.bind(this);
+  };
+
+  uploadPerspectiveWrapper(title) {
+    const {id, actions, uploadPerspective} = this.props;
+
+    this.setState({ uploading: true });
+
+    uploadPerspective({
+      variables: { id }
+    }).then(() => {
+      this.setState({ uploading: false });
+      actions.updateUploadModal(false);
+    })
+  }
+
   render() {
     /* eslint-disable no-shadow */
     const {
@@ -181,7 +212,11 @@ class PerspectivePath extends React.Component {
                           icon={<i className="lingvo-icon lingvo-icon_published" />}
                           text={this.context("Upload")}
                           onClick={() =>
-                            actions.openUploadModal(id, `'${T(e.translations)}' ${upload_str}`)
+                            actions.openUploadModal(
+                              id,
+                              `'${T(e.translations)}' ${upload_str}`,
+                              this.state.uploading,
+                              this.uploadPerspectiveWrapper)
                           }
                         />
                       )}
@@ -299,6 +334,7 @@ PerspectivePath.propTypes = {
   dictionary_id: PropTypes.array.isRequired,
   queryPerspectivePath: PropTypes.object.isRequired,
   queryAvailablePerspectives: PropTypes.object.isRequired,
+  uploadPerspective: PropTypes.func.isRequired,
   mode: PropTypes.string.isRequired,
   className: PropTypes.string,
   actions: PropTypes.object.isRequired,
@@ -325,7 +361,8 @@ export default compose(
           openRoles,
           openSaveDictionaryModal,
           openStatistics,
-          openUploadModal
+          openUploadModal,
+          updateUploadModal
         },
         dispatch
       )
@@ -338,5 +375,6 @@ export default compose(
   graphql(queryAvailablePerspectives, {
     name: "queryAvailablePerspectives",
     options: props => ({ variables: { dictionary_id: props.dictionary_id } })
-  })
+  }),
+  graphql(uploadPerspective, { name: "uploadPerspective" })
 )(PerspectivePath);