fix: make asset paths relative

closes #76
graasp · May 7, 2019 · 731a9cd · 731a9cd
1 parent c639528
commit 731a9cd
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 47 deletions.
diff --git a/public/app/config/channels.js b/public/app/config/channels.js
@@ -17,4 +17,5 @@ module.exports = {
   RESPOND_LOAD_SPACE_PROMPT_CHANNEL: 'prompt:space:load:response',
   RESPOND_EXPORT_SPACE_PROMPT_CHANNEL: 'prompt:space:export:respond',
   RESPOND_DELETE_SPACE_PROMPT_CHANNEL: 'prompt:space:delete:respond',
+  GET_USER_FOLDER_CHANNEL: 'user:folder:get',
 };
diff --git a/public/electron.js b/public/electron.js
@@ -52,6 +52,7 @@ const {
   SHOW_LOAD_SPACE_PROMPT_CHANNEL,
   RESPOND_LOAD_SPACE_PROMPT_CHANNEL,
   SAVE_SPACE_CHANNEL,
+  GET_USER_FOLDER_CHANNEL,
 } = require('./app/config/channels');
 const {
   ERROR_SPACE_ALREADY_AVAILABLE,
@@ -273,7 +274,7 @@ app.on('ready', async () => {
 
       const { phases, image } = spaceToSave;
 
-      const spacePath = `${VAR_FOLDER}/${id}`;
+      const spacePath = id;
 
       // todo: follow new format
       // if there is a background/thumbnail image, save it
@@ -292,18 +293,18 @@ app.on('ready', async () => {
             const hash = generateHash({ url });
             const imageFileName = `${hash}.${ext}`;
             const imagePath = `${spacePath}/${imageFileName}`;
+            const absoluteSpacePath = `${VAR_FOLDER}/${spacePath}`;
+            const absoluteImagePath = `${VAR_FOLDER}/${imagePath}`;
             // eslint-disable-next-line no-await-in-loop
-            const imageAvailable = await isFileAvailable(imagePath);
-            if (imageAvailable) {
-              spaceToSave.image[key] = imagePath;
-            } else {
+            const imageAvailable = await isFileAvailable(absoluteImagePath);
+            if (!imageAvailable) {
               // eslint-disable-next-line no-await-in-loop
-              const imageDl = await download(mainWindow, url, {
-                directory: spacePath,
+              await download(mainWindow, url, {
+                directory: absoluteSpacePath,
                 filename: imageFileName,
               });
-              spaceToSave.image[key] = imageDl.getSavePath();
             }
+            spaceToSave.image[key] = imagePath;
           }
         }
       }
@@ -325,22 +326,22 @@ app.on('ready', async () => {
             const ext = getExtension(resource);
             const fileName = `${hash}.${ext}`;
             const filePath = `${spacePath}/${fileName}`;
+            const absoluteSpacePath = `${VAR_FOLDER}/${spacePath}`;
+            const absoluteFilePath = `${VAR_FOLDER}/${filePath}`;
             phase.items[i].hash = hash;
 
             // eslint-disable-next-line no-await-in-loop
-            const fileAvailable = await isFileAvailable(filePath);
+            const fileAvailable = await isFileAvailable(absoluteFilePath);
 
             // if the file is available, point this resource to its path
-            if (fileAvailable) {
-              phase.items[i].asset = filePath;
-            } else {
+            if (!fileAvailable) {
               // eslint-disable-next-line no-await-in-loop
-              const dl = await download(mainWindow, url, {
-                directory: spacePath,
+              await download(mainWindow, url, {
+                directory: absoluteSpacePath,
                 filename: fileName,
               });
-              phase.items[i].asset = dl.getSavePath();
             }
+            phase.items[i].asset = filePath;
           }
         }
       }
@@ -557,6 +558,16 @@ app.on('ready', async () => {
       mainWindow.webContents.send(RESPOND_DELETE_SPACE_PROMPT_CHANNEL, respond);
     });
   });
+
+  // called when getting user folder
+  ipcMain.on(GET_USER_FOLDER_CHANNEL, () => {
+    try {
+      mainWindow.webContents.send(GET_USER_FOLDER_CHANNEL, VAR_FOLDER);
+    } catch (e) {
+      logger.error(e);
+      mainWindow.webContents.send(GET_USER_FOLDER_CHANNEL, ERROR_GENERAL);
+    }
+  });
 });
 
 app.on('window-all-closed', () => {

diff --git a/src/App.js b/src/App.js
@@ -18,7 +18,7 @@ import {
   VISIT_PATH,
   LOAD_SPACE_PATH,
 } from './config/paths';
-import { getGeolocation } from './actions/user';
+import { getGeolocation, getUserFolder } from './actions/user';
 
 const theme = createMuiTheme({
   typography: {
@@ -38,8 +38,15 @@ export class App extends Component {
 
   static propTypes = {
     dispatchGetGeolocation: PropTypes.func.isRequired,
+    dispatchGetUserFolder: PropTypes.func.isRequired,
   };
 
+  constructor(props) {
+    super(props);
+    const { dispatchGetUserFolder } = this.props;
+    dispatchGetUserFolder();
+  }
+
   componentDidMount() {
     const { dispatchGetGeolocation } = this.props;
     dispatchGetGeolocation();
@@ -85,6 +92,7 @@ export class App extends Component {
 
 const mapDispatchToProps = {
   dispatchGetGeolocation: getGeolocation,
+  dispatchGetUserFolder: getUserFolder,
 };
 
 export default connect(

diff --git a/src/App.test.js b/src/App.test.js
@@ -10,6 +10,7 @@ describe('<App />', () => {
     },
     t: jest.fn(),
     dispatchGetGeolocation: jest.fn(),
+    dispatchGetUserFolder: jest.fn(),
   };
   const component = shallow(<App {...props} />);
   it('renders correctly', () => {

diff --git a/src/actions/user/index.js b/src/actions/user/index.js
@@ -1,10 +1,20 @@
 import { toastr } from 'react-redux-toastr';
 import { getCurrentPosition } from '../../utils/geolocation';
-import { GET_GEOLOCATION_SUCCEEDED } from '../../types';
+import {
+  GET_GEOLOCATION_SUCCEEDED,
+  GET_USER_FOLDER_SUCCEEDED,
+  FLAG_GETTING_USER_FOLDER,
+} from '../../types';
 import {
   ERROR_GETTING_GEOLOCATION,
+  ERROR_GETTING_USER_FOLDER,
   ERROR_MESSAGE_HEADER,
 } from '../../config/messages';
+import { GET_USER_FOLDER_CHANNEL } from '../../config/channels';
+import { createFlag } from '../common';
+import { ERROR_GENERAL } from '../../config/errors';
+
+const flagGettingUserFolder = createFlag(FLAG_GETTING_USER_FOLDER);
 
 const getGeolocation = async () => async dispatch => {
   // only fetch location if online
@@ -34,7 +44,25 @@ const getGeolocation = async () => async dispatch => {
   }
 };
 
-export {
-  // eslint-disable-next-line import/prefer-default-export
-  getGeolocation,
+const getUserFolder = async () => dispatch => {
+  try {
+    dispatch(flagGettingUserFolder(true));
+    window.ipcRenderer.send(GET_USER_FOLDER_CHANNEL);
+    window.ipcRenderer.once(GET_USER_FOLDER_CHANNEL, (event, folder) => {
+      if (folder === ERROR_GENERAL) {
+        toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_USER_FOLDER);
+      } else {
+        dispatch({
+          type: GET_USER_FOLDER_SUCCEEDED,
+          payload: folder,
+        });
+      }
+      dispatch(flagGettingUserFolder(false));
+    });
+  } catch (e) {
+    console.error(e);
+    toastr.error(ERROR_MESSAGE_HEADER, ERROR_GETTING_USER_FOLDER);
+  }
 };
+
+export { getUserFolder, getGeolocation };
diff --git a/src/components/phase/PhaseApp.js b/src/components/phase/PhaseApp.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import './PhaseApp.css';
 
-const PhaseApp = ({ url, asset, name }) => {
+const PhaseApp = ({ url, asset, name, folder }) => {
   let uri = url;
   if (asset) {
-    uri = `file://${asset}`;
+    uri = `file://${folder}/${asset}`;
   }
   return (
     // state = {
@@ -58,6 +59,7 @@ PhaseApp.propTypes = {
   url: PropTypes.string,
   asset: PropTypes.string,
   name: PropTypes.string,
+  folder: PropTypes.string.isRequired,
 };
 
 PhaseApp.defaultProps = {
@@ -66,4 +68,10 @@ PhaseApp.defaultProps = {
   name: 'Image',
 };
 
-export default PhaseApp;
+const mapStateToProps = ({ User }) => ({
+  folder: User.getIn(['current', 'folder']),
+});
+
+const ConnectedComponent = connect(mapStateToProps)(PhaseApp);
+
+export default ConnectedComponent;
diff --git a/src/components/phase/PhaseImage.js b/src/components/phase/PhaseImage.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import './PhaseImage.css';
 
-const PhaseImage = ({ url, asset, name }) => {
+const PhaseImage = ({ url, asset, name, folder }) => {
   let uri = url;
   if (asset) {
-    uri = `file://${asset}`;
+    uri = `file://${folder}/${asset}`;
   }
   return (
     <div className="ImageDiv">
@@ -18,6 +19,7 @@ PhaseImage.propTypes = {
   url: PropTypes.string,
   asset: PropTypes.string,
   name: PropTypes.string,
+  folder: PropTypes.string.isRequired,
 };
 
 PhaseImage.defaultProps = {
@@ -26,4 +28,10 @@ PhaseImage.defaultProps = {
   name: 'Image',
 };
 
-export default PhaseImage;
+const mapStateToProps = ({ User }) => ({
+  folder: User.getIn(['current', 'folder']),
+});
+
+const ConnectedComponent = connect(mapStateToProps)(PhaseImage);
+
+export default ConnectedComponent;
diff --git a/src/components/phase/PhaseVideo.js b/src/components/phase/PhaseVideo.js
@@ -1,12 +1,13 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import './PhaseVideo.css';
 
-const PhaseVideo = ({ url, asset, name, mimeType }) => {
+const PhaseVideo = ({ url, asset, name, mimeType, folder }) => {
   let uri = url;
   if (asset) {
-    uri = `file://${asset}`;
+    uri = `file://${folder}/${asset}`;
   }
   return (
     <video title={name} className="Video" controls>
@@ -20,6 +21,7 @@ PhaseVideo.propTypes = {
   asset: PropTypes.string,
   name: PropTypes.string,
   mimeType: PropTypes.string,
+  folder: PropTypes.string.isRequired,
 };
 
 PhaseVideo.defaultProps = {
@@ -29,4 +31,10 @@ PhaseVideo.defaultProps = {
   mimeType: 'video/mp4',
 };
 
-export default PhaseVideo;
+const mapStateToProps = ({ User }) => ({
+  folder: User.getIn(['current', 'folder']),
+});
+
+const ConnectedComponent = connect(mapStateToProps)(PhaseVideo);
+
+export default ConnectedComponent;
diff --git a/src/components/space/SpaceGrid.js b/src/components/space/SpaceGrid.js
@@ -13,6 +13,16 @@ import { clearSpace } from '../../actions';
 import DefaultThumbnail from '../../data/graasp.jpg';
 
 class SpaceGrid extends Component {
+  static propTypes = {
+    folder: PropTypes.string.isRequired,
+    classes: PropTypes.shape({ appBar: PropTypes.string.isRequired })
+      .isRequired,
+    spaces: PropTypes.instanceOf(Set).isRequired,
+    history: PropTypes.shape({ length: PropTypes.number.isRequired })
+      .isRequired,
+    dispatchClearSpace: PropTypes.func.isRequired,
+  };
+
   componentDidMount() {
     const { dispatchClearSpace } = this.props;
     dispatchClearSpace();
@@ -22,6 +32,7 @@ class SpaceGrid extends Component {
   // the image from url if provided if not provided then pass
   // the default background image
   generateThumbnail = ({ image }) => {
+    const { folder } = this.props;
     const {
       backgroundUrl,
       thumbnailUrl,
@@ -31,10 +42,10 @@ class SpaceGrid extends Component {
 
     // prioritise assets
     if (thumbnailAsset) {
-      return `file://${thumbnailAsset}`;
+      return `file://${folder}/${thumbnailAsset}`;
     }
     if (backgroundAsset) {
-      return `file://${backgroundAsset}`;
+      return `file://${folder}/${backgroundAsset}`;
     }
 
     // fallback on urls
@@ -51,6 +62,7 @@ class SpaceGrid extends Component {
 
   render() {
     const { spaces, classes, history } = this.props;
+
     const MediaCards = spaces.map(space => {
       const { id, name, image = {}, text } = space;
       const { replace } = history;
@@ -96,22 +108,17 @@ class SpaceGrid extends Component {
   }
 }
 
+const mapStateToProps = ({ User }) => ({
+  folder: User.getIn(['current', 'folder']),
+});
+
 const mapDispatchToProps = {
   dispatchClearSpace: clearSpace,
 };
 
-SpaceGrid.propTypes = {
-  classes: PropTypes.shape({ appBar: PropTypes.string.isRequired }).isRequired,
-  spaces: PropTypes.instanceOf(Set).isRequired,
-  history: PropTypes.shape({ length: PropTypes.number.isRequired }).isRequired,
-  dispatchClearSpace: PropTypes.func.isRequired,
-};
+const ConnectedComponent = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SpaceGrid);
 
-export default withRouter(
-  withStyles({})(
-    connect(
-      null,
-      mapDispatchToProps
-    )(SpaceGrid)
-  )
-);
+export default withRouter(withStyles({})(ConnectedComponent));
diff --git a/src/config/channels.js b/src/config/channels.js
@@ -17,4 +17,5 @@ module.exports = {
   RESPOND_LOAD_SPACE_PROMPT_CHANNEL: 'prompt:space:load:response',
   RESPOND_EXPORT_SPACE_PROMPT_CHANNEL: 'prompt:space:export:respond',
   RESPOND_DELETE_SPACE_PROMPT_CHANNEL: 'prompt:space:delete:respond',
+  GET_USER_FOLDER_CHANNEL: 'user:folder:get',
 };
diff --git a/src/config/messages.js b/src/config/messages.js
@@ -24,6 +24,8 @@ const ERROR_GETTING_GEOLOCATION =
   'There was an error getting your current location';
 const ERROR_GETTING_SPACES_NEARBY =
   'There was an error getting the spaces nearby';
+const ERROR_GETTING_USER_FOLDER =
+  'There was an error getting your user folder.';
 
 module.exports = {
   ERROR_DOWNLOADING_MESSAGE,
@@ -45,4 +47,5 @@ module.exports = {
   ERROR_LOADING_MESSAGE,
   ERROR_GETTING_GEOLOCATION,
   ERROR_GETTING_SPACES_NEARBY,
+  ERROR_GETTING_USER_FOLDER,
 };