Fixes and Enhancements

gok/gok.controller.js

@@ -155,6 +155,35 @@ let getFileData = (req, res) => {
         });
 }
 
+let getFileMetaData = (cleanedResults) => {
+    let defer = q.defer();
+
+    let allSearchedFileList = cleanedResults.map(file => {
+        let pathtoEachFile = path.join(file.path, file.name);
+        return getFileInfo(pathtoEachFile)
+            .then((stats) => {
+                return {
+                    pathtoEachFile,
+                    isDirectory : stats.isDirectory,
+                    size : stats.size,
+                    uploadedOn : stats.birthtime.toLocaleDateString('en-IN')
+                }
+            })
+            .catch((error) => {
+                throw error;
+            });
+    })
+
+    q.all(allSearchedFileList)
+        .then((detailedFileList) => {
+            defer.resolve(detailedFileList);
+        })
+        .catch((error) => {
+            defer.reject(error);
+        });
+    return defer.promise;
+}
+
 let performSearch = (req, res) => {
     let response = {
         success : false,
@@ -199,8 +228,11 @@ let performSearch = (req, res) => {
             // To show only folder specific files
             // .filter(item => item.path.startsWith(req.query.path));
 
-            response = { ...response, success : true, data : cleanedResults, message : 'Search hits retrieved.' };
-            res.status(200).json(response);
+            getFileMetaData(cleanedResults)
+                .then((detailedFileList) => {
+                    response = { ...response, success : true, data : detailedFileList, message : 'Search hits retrieved.' };
+                    res.status(200).json(response);
+                })
         })
         .catch((error) => {
             response = { ...response, message : error };

gok/gok.middleware.js

@@ -144,6 +144,8 @@ const saveTelemetryData = (req, res, next) => {
 	let telemetryData = { ...telemetryStructure };
 	let uaspec = _getUaspecObject(req.headers);
 
+	req.query.path = decodeURIComponent(req.query.path);
+
 	/*
 	* Populating event-specific telemetry data
 	*/

ui/src/App.js

@@ -62,7 +62,7 @@ class App extends Component {
 
         axios.get(`${BASE_URL}/file/search`, { params })
             .then((response) => {
-                let searchHits = response.data.data.map(item => ({ name : path.join(item.path, item.name), isDirectory : false }));
+                let searchHits = response.data.data.map(item => ({ name : item.pathtoEachFile, isDirectory : item.isDirectory, size : item.size, uploadedOn: item.uploadedOn }));
 
                 this.setState({ ...this.state, fileList : searchHits });
             })
@@ -93,13 +93,14 @@ class App extends Component {
                         />
                     </Grid.Column>
 
-                    <Grid.Column mobile={16} computer={13} style={{ overflowY : 'scroll'}}>
+                    <Grid.Column mobile={16} computer={13} style={{ overflowY : 'scroll' }}>
                         <ContentArea
                             fileList={this.state.fileList}
                             basePath={this.props.root}
                             currentPath={this.state.currentPath}
                             setPath={this.setPath}
-                            handleModalOpen={this.handleModalOpen}/>
+                            handleModalOpen={this.handleModalOpen}
+                        />
                     </Grid.Column>
                 </Grid.Row>
             </Grid>

ui/src/components/ContentArea.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Icon, Card, Divider, Header, Modal } from 'semantic-ui-react';
+import { Segment, Icon, Card, Divider, Header, Modal } from 'semantic-ui-react';
 
 import PDFViewer from 'mgr-pdf-viewer-react';
 
@@ -33,6 +33,20 @@ const mapIcon = {
     'dir'   : ['folder outline', 'yellow']
 }
 
+const AudioPlayer = (props) => {
+    return (
+        <Segment color='violet' padded='very' style={{marginTop: '10%'}}>
+            <Header as='h1'>{path.basename(props.name)}</Header>
+            <audio
+                controls
+                autoPlay
+                src={props.src}
+                type="audio/mpeg"
+            />
+        </Segment>
+    )
+}
+
 const VideoPlayer = (props) => {
     return (
         <video
@@ -68,15 +82,21 @@ class ContentArea extends Component {
     }
 
     getFileViewer = () => {
-        const url = `${BASE_URL}/file?path=${this.state.fileToBeViewed}&timestamp=${new Date()}`
+        const encodedFileName = encodeURIComponent(this.state.fileToBeViewed);
+        const url = `${BASE_URL}/file?path=${encodedFileName}&timestamp=${new Date()}`
 
         let fileViewer = undefined;
+
         let extension = path.extname(this.state.fileToBeViewed);
 
         // TODO create a map for file type
 
         switch(extension) {
             case '.mp3':
+                fileViewer = (
+                    <AudioPlayer src={url} name={this.state.fileToBeViewed}/>
+                );
+                break;
             case '.wav':
             case '.mp4':
                 fileViewer = (

ui/src/components/NavigationBar.js

@@ -22,12 +22,17 @@ class NavigationBar extends Component {
     //     this.setState({ ...this.state, inputIcon : this.state.inputIcon === 'search' ? 'close' : 'search' }, callback);
     // }
 
-    handleKeyPress = e => e.key === 'Enter' && this.handleSearchClick();
+    handleKeyUp = e => e.keyCode === 13 && this.handleSearchClick();
 
     handleSearchClick = (e) => {
         // this.toggleInputIcon(() => {
             // if(this.state.inputIcon === 'close') {
+            if (this.state.searchText.length !== 0) {
                 this.props.onSearchClick(e, this.state.searchText);
+            }
+            else {
+                alert("Please enter the search box");
+            }
         //     } else {
         //         this.props.setPath();
         //     }
@@ -36,7 +41,9 @@ class NavigationBar extends Component {
 
     handleInputTextChange = e => this.setState({ searchText : e.target.value });
 
-    handleHomeClick = e => this.props.setPath(this.props.basePath);
+    handleHomeClick = (e) => {
+        this.props.setPath(this.props.basePath);
+    }
 
     handleBackClick = (e) => {
         let newPath = path.join(this.props.currentPath, '../');
@@ -53,18 +60,18 @@ class NavigationBar extends Component {
                         <Button
                             fluid
                             primary
-                            icon={<Icon size='large' name='arrow up'/>}
-                            onClick={this.handleBackClick}
-                            disabled={this.atHome()}
+                            icon={<Icon size='large' name='home'/>}
+                            onClick={this.handleHomeClick}
                         />
                     </Grid.Column>
 
                     <Grid.Column mobile={4} tablet={2} computer={1}>
                         <Button
                             fluid
                             primary
-                            icon={<Icon size='large' name='home'/>}
-                            onClick={this.handleHomeClick}
+                            icon={<Icon size='large' name='arrow up'/>}
+                            onClick={this.handleBackClick}
+                            disabled={this.atHome()}
                         />
                     </Grid.Column>
 
@@ -74,7 +81,7 @@ class NavigationBar extends Component {
                         </Segment>
                     </Grid.Column>
 
-                    <Grid.Column mobile={8} tablet={4} computer={5} onKeyPress={this.handleKeyPress}>
+                    <Grid.Column mobile={8} tablet={4} computer={5} onKeyUp={this.handleKeyUp}>
                         <Input
                             action={{ icon : 'search', size : 'big', color : 'blue', onClick : this.handleSearchClick }}
                             placeholder='Search...'