Add empty folder / empty trash msg + fix bug into refresFile method

Scille · Jun 22, 2017 · 23479f0 · 23479f0
1 parent 9adbc5f
commit 23479f0
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 71 deletions.
diff --git a/src/components/DeletedFiles.js b/src/components/DeletedFiles.js
@@ -21,28 +21,46 @@ class DeletedFiles extends Component {
     const showModal = this.props.dispatch.showModal
     const hideModal = this.props.dispatch.hideModal
 
-    const listFiles = files.map((file) => {
-      const detailsModal = { file, hideModal }
-      const restoreModal = { file, restoreFile, hideModal }
-      return (
-        <li key={file.path}>
-          <a>
-            <div className="icon"><i className='fa fa-file-o'/></div>
-            <div className="title">{file.name}</div>
-            <div className="details"></div>
-          </a>
-          <div className="options">
-            <div className="dropdown">
-              <i className="fa fa-ellipsis-h"/>
-              <div className="dropdown-content dropdown-content-right">
-                <a onClick={() => showModal('detailsModal', detailsModal)}><i className="fa fa-info"/> Details</a>
-                <a onClick={() => showModal('restoreModal', restoreModal)}><i className="fa fa-undo"/> Restore</a>
+    const ListFiles = () => {
+      if(loading)
+        return (<div id="loader-wrapper"><div id="loader"></div></div>)
+
+      if(files.length === 0)
+        return (
+          <div className="empty-list">
+            <i className="fa fa-trash-o"/>
+            <h1>You don’t have any deleted files</h1>
+          </div>
+        )
+
+      const listFiles = files.map((file) => {
+        const detailsModal = { file, hideModal }
+        const restoreModal = { file, restoreFile, hideModal }
+        return (
+          <li key={file.path}>
+            <a>
+              <div className="icon"><i className='fa fa-file-o'/></div>
+              <div className="title">{file.name}</div>
+              <div className="details"></div>
+            </a>
+            <div className="options">
+              <div className="dropdown">
+                <i className="fa fa-ellipsis-h"/>
+                <div className="dropdown-content dropdown-content-right">
+                  <a onClick={() => showModal('detailsModal', detailsModal)}><i className="fa fa-info"/> Details</a>
+                  <a onClick={() => showModal('restoreModal', restoreModal)}><i className="fa fa-undo"/> Restore</a>
+                </div>
               </div>
             </div>
-          </div>
-        </li>
+          </li>
+        )
+      })
+      return (
+        <div className={listView ? 'file-view list-view' : 'file-view grid-view'}>
+          <ul>{ listFiles }</ul>
+        </div>
       )
-    })
+    }
 
     return (
       <div className="view-switcher">
@@ -51,7 +69,7 @@ class DeletedFiles extends Component {
           <div className="breadcrumb">
             <ul>
               <li>
-                <div className="dropdown">
+                <div className="dropdown" style={{ cursor: "default" }}>
                   <i className="fa fa-2x fa-folder-open"/>
                 </div>
               </li>
@@ -70,10 +88,8 @@ class DeletedFiles extends Component {
             </div>
           </div>
       	</div>
-        <div className={listView ? 'file-view list-view' : 'file-view grid-view'}>
-          { loading ? (<div id="loader-wrapper"><div id="loader"></div></div>) : (<ul>{ listFiles }</ul>) }
-        </div>
 
+        { ListFiles() }
         <ModalsContainer></ModalsContainer>
       </div>
     )

diff --git a/src/components/DeletedFiles.test.js b/src/components/DeletedFiles.test.js
@@ -51,8 +51,7 @@ describe('DeletedFiles Component', () => {
       expect(header.find('.breadcrumb').text()).toBe('Trash')
       expect(header.find('.dropdown-content').text()).toBe('Views GridActions Refresh')
 
-      const fileView = enzymeWrapper.find('.file-view')
-      expect(fileView.find('#loader-wrapper').exists()).toBe(true)
+      expect(enzymeWrapper.find('#loader-wrapper').exists()).toBe(true)
 
       const modalsContainer = enzymeWrapper.find('ModalsContainer')
       expect(modalsContainer.exists()).toBe(false)

diff --git a/src/components/Modals.js b/src/components/Modals.js
@@ -171,10 +171,10 @@ export class SearchModal extends Component {
 
   handleSubmit(event) {
     const name = this.state.name
-    const search = this.props.search
+    const searchFile = this.props.searchFile
 
     event.preventDefault()
-    if(name !== '') search(name)
+    if(name !== '') searchFile(name)
   }
 
   render() {

diff --git a/src/components/Modals.test.js b/src/components/Modals.test.js
@@ -219,7 +219,7 @@ describe('Modals components', () => {
   describe('SearchModal', () => {
     const setup = () => {
       const props = {
-        search: jest.fn(),
+        searchFile: jest.fn(),
         hideModal: jest.fn()
       }
       const enzymeWrapper = shallow(<SearchModal {...props} />)
@@ -253,7 +253,7 @@ describe('Modals components', () => {
       })
       enzymeWrapper.find('form').simulate('submit', { preventDefault: () => {} })
       expect(handleSubmit.calledOnce)
-      expect(props.search.mock.calls.length).toBe(1)
+      expect(props.searchFile.mock.calls.length).toBe(1)
     })
 
     it('input change should call handleChange() when clicked', () => {

diff --git a/src/components/PersonalFiles.js b/src/components/PersonalFiles.js
@@ -62,9 +62,9 @@ class PersonalFiles extends Component {
 
     const moveTo = this.props.dispatch.moveTo
     const moveUp = this.props.dispatch.moveUp
-    const search = this.props.dispatch.search
     const refresh = this.props.dispatch.refresh
     const createFiles = this.props.dispatch.createFiles
+    const searchFile = this.props.dispatch.searchFile
     const renameFile = this.props.dispatch.renameFile
     const deleteFile = this.props.dispatch.deleteFile
     const downloadFile = this.props.dispatch.downloadFile
@@ -74,45 +74,63 @@ class PersonalFiles extends Component {
     const showModal = this.props.dispatch.showModal
     const hideModal = this.props.dispatch.hideModal
 
-    const searchModal = { search, hideModal }
+    const searchModal = { searchFile, hideModal }
     const createDirModal = { path: currentPath.route, createDir, hideModal }
 
-    const listFiles = files.map((file) => {
-      const icon = file.type === 'file' ? 'fa fa-file-o' : 'fa fa-folder-o'
-      const detailsModal = { file, hideModal }
-      const renameModal = { file, renameFile, hideModal }
-      const removeModal = {
-        file,
-        title: file.type === 'file' ? 'DELETE FILE' : 'DELETE DIRECTORY',
-        removeFunc: file.type === 'file' ? deleteFile : removeDir,
-        hideModal
-      }
-      return (
-        <li id={file.path} key={file.path} draggable="true"
-          onDrop={(event) => this.handleDrop(event, file.path, file.type === 'folder')}
-          onDragStart={(event) => this.handleDragStart(event, file)}
-          onDragOver={(event) => this.handleDragOver(event, file.path, file.type === 'folder')}
-          onDragLeave={(event) => this.handleDragLeave(event, file.path)}>
-          <a onClick={() => file.type === 'folder' ? moveTo(currentPath.route, file.name) : null}>
-            <div className="icon"><i className={icon}/></div>
-            <div className="title">{file.name}</div>
-            <div className="details">{bytesToSize(file['size'])}</div>
-          </a>
-          <div className="options">
-            <div className="dropdown">
-              <i className="fa fa-ellipsis-h"/>
-              <div className="dropdown-content dropdown-content-right">
-                <a onClick={() => showModal('detailsModal', detailsModal)}><i className="fa fa-info"/> Details</a>
-                { file.type === 'file' && <a onClick={() => downloadFile(file)}><i className="fa fa-download"/> Download</a> }
-                <a onClick={() => showModal('renameModal', renameModal)}><i className="fa fa-pencil-square-o"/> Rename</a>
-                <a onClick={() => console.log("Share")}><i className="fa fa-user-plus"/> Share</a>
-                <a onClick={() => showModal('removeModal', removeModal)}><i className="fa fa-trash-o"/> Delete</a>
+    const ListFiles = () => {
+      if(loading)
+        return (<div id="loader-wrapper"><div id="loader"></div></div>)
+
+      if(files.length === 0)
+        return (
+          <div className="empty-list">
+            <i className="fa fa-folder-open-o"/>
+            <h1>This folder is empty</h1>
+          </div>
+        )
+
+      const listFiles = files.map((file) => {
+        const icon = file.type === 'file' ? 'fa fa-file-o' : 'fa fa-folder-o'
+        const detailsModal = { file, hideModal }
+        const renameModal = { file, renameFile, hideModal }
+        const removeModal = {
+          file,
+          title: file.type === 'file' ? 'DELETE FILE' : 'DELETE DIRECTORY',
+          removeFunc: file.type === 'file' ? deleteFile : removeDir,
+          hideModal
+        }
+        return (
+          <li id={file.path} key={file.path} draggable="true"
+            onDrop={(event) => this.handleDrop(event, file.path, file.type === 'folder')}
+            onDragStart={(event) => this.handleDragStart(event, file)}
+            onDragOver={(event) => this.handleDragOver(event, file.path, file.type === 'folder')}
+            onDragLeave={(event) => this.handleDragLeave(event, file.path)}>
+            <a onClick={() => file.type === 'folder' ? moveTo(currentPath.route, file.name) : null}>
+              <div className="icon"><i className={icon}/></div>
+              <div className="title">{file.name}</div>
+              <div className="details">{bytesToSize(file['size'])}</div>
+            </a>
+            <div className="options">
+              <div className="dropdown">
+                <i className="fa fa-ellipsis-h"/>
+                <div className="dropdown-content dropdown-content-right">
+                  <a onClick={() => showModal('detailsModal', detailsModal)}><i className="fa fa-info"/> Details</a>
+                  { file.type === 'file' && <a onClick={() => downloadFile(file)}><i className="fa fa-download"/> Download</a> }
+                  <a onClick={() => showModal('renameModal', renameModal)}><i className="fa fa-pencil-square-o"/> Rename</a>
+                  <a onClick={() => console.log("Share")}><i className="fa fa-user-plus"/> Share</a>
+                  <a onClick={() => showModal('removeModal', removeModal)}><i className="fa fa-trash-o"/> Delete</a>
+                </div>
               </div>
             </div>
-          </div>
-        </li>
+          </li>
+        )
+      })
+      return (
+        <div className={listView ? 'file-view list-view' : 'file-view grid-view'}>
+          <ul>{ listFiles }</ul>
+        </div>
       )
-    })
+    }
 
     return (
       <div className="view-switcher">
@@ -152,9 +170,8 @@ class PersonalFiles extends Component {
             </div>
           </div>
       	</div>
-        <div className={listView ? 'file-view list-view' : 'file-view grid-view'}>
-          { loading ? (<div id="loader-wrapper"><div id="loader"></div></div>) : (<ul>{ listFiles }</ul>) }
-        </div>
+
+        { ListFiles() }
         <ModalsContainer></ModalsContainer>
       </div>
     )

diff --git a/src/components/PersonalFiles.test.js b/src/components/PersonalFiles.test.js
@@ -67,8 +67,7 @@ describe('PersonalFiles Component', () => {
       expect(header.find('.breadcrumb').find('.dropdown-content').text()).toBe('HomeDir')
       expect(header.find('.options').find('.dropdown-content').text()).toBe('Views GridActions Search Refresh New Folder Add Files')
 
-      const fileView = enzymeWrapper.find('.file-view')
-      expect(fileView.find('#loader-wrapper').exists()).toBe(true)
+      expect(enzymeWrapper.find('#loader-wrapper').exists()).toBe(true)
 
       const modalsContainer = enzymeWrapper.find('ModalsContainer')
       expect(modalsContainer.exists()).toBe(false)

diff --git a/src/components/ViewSwitcher.css b/src/components/ViewSwitcher.css
@@ -57,6 +57,17 @@
   top: 85px;
 }
 
+.view-switcher .empty-list {
+  padding: 0;
+	margin: 100px auto;
+  text-align: center;
+  color: var(--second-color);
+}
+.view-switcher .empty-list i {
+  font-size: 140px;
+  height: 150px;
+}
+
 .view-switcher .file-view ul {
 	list-style: none;
 	padding: 0;

diff --git a/src/containers/PersonalFilesContainer.js b/src/containers/PersonalFilesContainer.js
@@ -17,9 +17,9 @@ PersonalFiles.propTypes = {
     end: PropTypes.func.isRequired,
     moveTo: PropTypes.func.isRequired,
     moveUp: PropTypes.func.isRequired,
-    search: PropTypes.func.isRequired,
     refresh: PropTypes.func.isRequired,
     createFiles: PropTypes.func.isRequired,
+    searchFile: PropTypes.func.isRequired,
     renameFile: PropTypes.func.isRequired,
     deleteFile: PropTypes.func.isRequired,
     downloadFile: PropTypes.func.isRequired,
@@ -60,7 +60,6 @@ const mapDispatchToProps = (dispatch) => {
         dispatch(actionsCreators.socketListDir(route))
         dispatch(actionsCreators.removePath(index))
       },
-      search: (route) => dispatch(actionsCreators.socketSearchFile(name)),
       refresh: (route) => dispatch(actionsCreators.socketListDir(route)),
       createFiles: (route, files={}) => {
         for(const file of files) {
@@ -70,6 +69,11 @@ const mapDispatchToProps = (dispatch) => {
           ))
         }
       },
+      searchFile: (name) => {
+        dispatch(actionsCreators.removePath(0))
+        dispatch(actionsCreators.socketSearchFile(name))
+        dispatch(actionsCreators.hideModal())
+      },
       renameFile: (file, name) => {
         dispatch(actionsCreators.socketRenameFile(file, name))
         dispatch(actionsCreators.hideModal())