repair code error

frontend/src/components/dialog/generate-share-link.js

@@ -99,6 +99,7 @@ class GenerateShareLink extends React.Component {
   generateShareLink = () => {
     let isValid = this.validateParamsInput();
     if (isValid) {
+      this.setState({errorInfo: ''});
       let { itemPath, repoID } = this.props;
       let { password, expireDays } = this.state;
       let permissions = this.permissions;
@@ -122,6 +123,7 @@ class GenerateShareLink extends React.Component {
         isShowPasswordInput: false,
         expireDays: '',
         isExpireChecked: false,
+        errorInfo: '',
       });
       this.permissions = {
         'can_edit': false,
@@ -163,7 +165,7 @@ class GenerateShareLink extends React.Component {
     if (this.isExpireDaysNoLimit) {
       if (isExpireChecked) {
         if (!expireDays) {
-          this.setState({errorInfo: gettext('Please enter days')});
+          this.setState({errorInfo: 'Please enter days'});
           return false;
         }
         let flag = reg.test(expireDays);
@@ -175,7 +177,7 @@ class GenerateShareLink extends React.Component {
       }
     } else {
       if (!expireDays) {
-        this.setState({errorInfo: gettext('Please enter days')});
+        this.setState({errorInfo: 'Please enter days'});
         return false;
       }
       let flag = reg.test(expireDays);
@@ -284,7 +286,7 @@ class GenerateShareLink extends React.Component {
               <Input type="radio" name="radio1" onChange={this.setPermission('preview')} />{'  '}{gettext('Preview only')}
             </Label>
           </FormGroup>
-          <Label className="err-message">{this.state.errorInfo}</Label><br />
+          <Label className="err-message">{gettext(this.state.errorInfo)}</Label><br />
           <Button onClick={this.generateShareLink}>{gettext('Generate')}</Button>
         </Form>
       );

frontend/src/components/dialog/share-dialog.js

@@ -9,7 +9,7 @@ import GenerateUploadLink from './generate-upload-link';
 import '../../css/share-link-dialog.css';
 
 const propTypes = {
-  itemType: PropTypes.bool.isRequired, // there will be three choose: ['library', 'dir', 'file']
+  itemType: PropTypes.string.isRequired, // there will be three choose: ['library', 'dir', 'file']
   itemName: PropTypes.string.isRequired,
   itemPath: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,

frontend/src/pages/my-libs/item.js

@@ -1,5 +1,5 @@
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@reach/router';
@@ -8,6 +8,8 @@ import { gettext, siteRoot, storages, canGenerateShareLink, canGenerateUploadLin
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import RenameInput from '../../components/rename-input';
+import ModalPotal from '../../components/modal-portal';
+import ShareDialog from '../../components/dialog/share-dialog';
 
 const propTypes = {
   data: PropTypes.object.isRequired,
@@ -29,6 +31,7 @@ class Item extends Component {
       showOpIcon: false,
       operationMenuOpen: false,
       showChangeLibName: false, 
+      isShowSharedDialog: false,
       highlight: false,
     };
   }
@@ -73,7 +76,11 @@ class Item extends Component {
 
   share = (e) => {
     e.preventDefault();
-    // TODO
+    this.setState({isShowSharedDialog: true});
+  }
+
+  toggleShareDialog = () => {
+    this.setState({isShowSharedDialog: false});
   }
 
   showDeleteItemPopup = (e) => {
@@ -232,6 +239,7 @@ class Item extends Component {
     );
 
     const desktopItem = (
+      <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
           <td>
@@ -254,9 +262,22 @@ class Item extends Component {
           {storages.length ? <td>{data.storage_name}</td> : null}
           <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
         </tr>
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+              <ShareDialog 
+                itemType={'library'}
+                itemName={data.repo_name}
+                itemPath={'/'}
+                repoID={data.repo_id}
+                toggleDialog={this.toggleShareDialog}
+              />
+          </ModalPotal>
+        )}
+      </Fragment>
     );
 
     const mobileItem = (
+      <Fragment>
         <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
           <td>
@@ -269,6 +290,18 @@ class Item extends Component {
           </td>
           <td>{data.repo_name ? mobileOperations : ''}</td>
         </tr>
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+              <ShareDialog 
+                itemType={'library'}
+                itemName={data.repo_name}
+                itemPath={'/'}
+                repoID={data.repo_id}
+                toggleDialog={this.toggleShareDialog}
+              />
+          </ModalPotal>
+        )}
+      </Fragment>
     );
 
     return window.innerWidth >= 768 ? desktopItem : mobileItem;