From 731a9cd58d02d91a3369eaab3e3dafc6beb66e46 Mon Sep 17 00:00:00 2001 From: Juan Carlos Farah Date: Tue, 7 May 2019 15:06:29 +0300 Subject: [PATCH] fix: make asset paths relative closes #76 --- public/app/config/channels.js | 1 + public/electron.js | 41 +++++++++++++++++++----------- src/App.js | 10 +++++++- src/App.test.js | 1 + src/actions/user/index.js | 36 +++++++++++++++++++++++--- src/components/phase/PhaseApp.js | 14 +++++++--- src/components/phase/PhaseImage.js | 14 +++++++--- src/components/phase/PhaseVideo.js | 14 +++++++--- src/components/space/SpaceGrid.js | 39 ++++++++++++++++------------ src/config/channels.js | 1 + src/config/messages.js | 3 +++ src/reducers/UserReducer.js | 12 ++++++++- src/types/user/index.js | 3 ++- 13 files changed, 142 insertions(+), 47 deletions(-) diff --git a/public/app/config/channels.js b/public/app/config/channels.js index 61485553..78ea80e3 100644 --- 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 index 13272d97..0cb287c4 100644 --- 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 index 22509a15..698eff9e 100644 --- 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 index 61753661..e0d0229d 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -10,6 +10,7 @@ describe('', () => { }, t: jest.fn(), dispatchGetGeolocation: jest.fn(), + dispatchGetUserFolder: jest.fn(), }; const component = shallow(); it('renders correctly', () => { diff --git a/src/actions/user/index.js b/src/actions/user/index.js index c248454c..4b69f1e3 100644 --- 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 index def58b9c..a18f582e 100644 --- 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 index 85a3448b..287eb1a2 100644 --- 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 (
@@ -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 index 7e6f9b6f..ec6c0451 100644 --- 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 (