p5.js-web-editor/client/modules/IDE/actions/project.js

219 lines
6.2 KiB
JavaScript
Raw Normal View History

2016-06-22 21:58:23 +02:00
import * as ActionTypes from '../../../constants';
2016-06-24 00:29:55 +02:00
import { browserHistory } from 'react-router';
import axios from 'axios';
2016-07-15 19:11:50 +02:00
import JSZip from 'jszip';
2016-07-20 21:33:37 +02:00
import JSZipUtils from 'jszip-utils';
2016-07-15 19:11:50 +02:00
import { saveAs } from 'file-saver';
2016-07-20 06:51:27 +02:00
import { getBlobUrl } from './files';
import { showToast, setToastText } from './toast';
import { setUnsavedChanges } from './ide';
2016-06-20 19:29:32 +02:00
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
2016-07-20 00:26:46 +02:00
export function getProjectBlobUrls() {
return (dispatch, getState) => {
const state = getState();
state.files.forEach(file => {
if (file.url) {
2016-07-20 06:51:27 +02:00
getBlobUrl(file)(dispatch);
2016-07-20 00:26:46 +02:00
}
});
};
}
2016-06-20 19:29:32 +02:00
export function getProject(id) {
2016-07-20 00:26:46 +02:00
return (dispatch, getState) => {
2016-06-24 00:29:55 +02:00
axios.get(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
.then(response => {
2016-08-18 00:13:17 +02:00
// browserHistory.push(`/projects/${id}`);
2016-06-24 00:29:55 +02:00
dispatch({
2016-06-29 01:35:56 +02:00
type: ActionTypes.SET_PROJECT,
2016-06-29 18:52:16 +02:00
project: response.data,
2016-07-08 20:57:22 +02:00
files: response.data.files,
2016-07-15 17:54:47 +02:00
owner: response.data.user
2016-06-24 00:29:55 +02:00
});
2016-07-20 00:26:46 +02:00
getProjectBlobUrls()(dispatch, getState);
dispatch(setUnsavedChanges(false));
2016-06-24 00:29:55 +02:00
})
.catch(response => dispatch({
type: ActionTypes.ERROR,
error: response.data
}));
};
2016-06-20 19:29:32 +02:00
}
export function setProjectName(name) {
2016-06-24 00:29:55 +02:00
return {
type: ActionTypes.SET_PROJECT_NAME,
name
};
2016-06-20 19:29:32 +02:00
}
2016-09-08 04:20:42 +02:00
export function saveProject(autosave) {
2016-06-24 00:29:55 +02:00
return (dispatch, getState) => {
const state = getState();
if (state.user.id && state.project.owner && state.project.owner.id !== state.user.id) {
return;
}
2016-06-24 00:29:55 +02:00
const formParams = Object.assign({}, state.project);
2016-07-08 20:57:22 +02:00
formParams.files = [...state.files];
2016-06-29 01:35:56 +02:00
if (state.project.id) {
axios.put(`${ROOT_URL}/projects/${state.project.id}`, formParams, { withCredentials: true })
2016-06-24 00:29:55 +02:00
.then(() => {
dispatch(setUnsavedChanges(false));
2016-06-24 00:29:55 +02:00
dispatch({
type: ActionTypes.PROJECT_SAVE_SUCCESS
2016-06-29 01:35:56 +02:00
});
2016-09-08 04:20:42 +02:00
if (!autosave) {
dispatch(showToast());
dispatch(setToastText('Project saved.'));
}
2016-06-29 01:35:56 +02:00
})
.catch((response) => dispatch({
type: ActionTypes.PROJECT_SAVE_FAIL,
error: response.data
}));
2016-06-24 00:29:55 +02:00
} else {
axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
.then(response => {
dispatch(setUnsavedChanges(false));
2016-06-24 00:29:55 +02:00
browserHistory.push(`/projects/${response.data.id}`);
dispatch({
type: ActionTypes.NEW_PROJECT,
name: response.data.name,
id: response.data.id,
2016-07-15 17:54:47 +02:00
owner: response.data.user,
files: response.data.files
2016-06-24 00:29:55 +02:00
});
2016-09-08 04:20:42 +02:00
if (!autosave) {
dispatch(showToast());
dispatch(setToastText('Project saved.'));
}
2016-06-24 00:29:55 +02:00
})
.catch(response => dispatch({
type: ActionTypes.PROJECT_SAVE_FAIL,
error: response.data
}));
}
};
2016-06-20 19:29:32 +02:00
}
2016-09-08 04:20:42 +02:00
export function autosaveProject() {
return (dispatch, getState) => {
saveProject(true)(dispatch, getState);
};
}
2016-06-20 19:29:32 +02:00
export function createProject() {
2016-06-24 00:29:55 +02:00
return (dispatch) => {
axios.post(`${ROOT_URL}/projects`, {}, { withCredentials: true })
.then(response => {
browserHistory.push(`/projects/${response.data.id}`);
dispatch({
type: ActionTypes.NEW_PROJECT,
name: response.data.name,
id: response.data.id,
2016-07-15 17:54:47 +02:00
owner: response.data.user,
files: response.data.files
2016-06-24 00:29:55 +02:00
});
dispatch(setUnsavedChanges(false));
2016-06-24 00:29:55 +02:00
})
.catch(response => dispatch({
type: ActionTypes.PROJECT_SAVE_FAIL,
error: response.data
}));
};
}
2016-07-15 19:11:50 +02:00
2016-09-03 02:40:18 +02:00
function buildZip(state) {
const zip = new JSZip();
const rootFile = state.files.find(file => file.name === 'root');
const numFiles = state.files.filter(file => file.fileType !== 'folder').length;
const files = state.files;
const projectName = state.project.name;
let numCompletedFiles = 0;
function addFileToZip(file, path) {
if (file.fileType === 'folder') {
const newPath = file.name === 'root' ? path : `${path}${file.name}/`;
file.children.forEach(fileId => {
const childFile = files.find(f => f.id === fileId);
(() => {
addFileToZip(childFile, newPath);
})();
});
} else {
2016-07-20 21:33:37 +02:00
if (file.url) {
JSZipUtils.getBinaryContent(file.url, (err, data) => {
2016-09-03 02:40:18 +02:00
zip.file(`${path}${file.name}`, data, { binary: true });
numCompletedFiles += 1;
if (numCompletedFiles === numFiles) {
zip.generateAsync({ type: 'blob' }).then((content) => {
saveAs(content, `${projectName}.zip`);
});
}
2016-07-20 21:33:37 +02:00
});
} else {
2016-09-03 02:40:18 +02:00
zip.file(`${path}${file.name}`, file.content);
numCompletedFiles += 1;
if (numCompletedFiles === numFiles) {
zip.generateAsync({ type: 'blob' }).then((content) => {
saveAs(content, `${projectName}.zip`);
});
}
2016-07-20 21:33:37 +02:00
}
2016-09-03 02:40:18 +02:00
}
}
addFileToZip(rootFile, '/');
}
export function exportProjectAsZip() {
return (dispatch, getState) => {
const state = getState();
buildZip(state);
2016-07-15 19:11:50 +02:00
};
}
export function newProject() {
browserHistory.push('/');
return {
type: ActionTypes.RESET_PROJECT
};
}
2016-07-15 19:36:33 +02:00
export function cloneProject() {
return (dispatch, getState) => {
const state = getState();
const formParams = Object.assign({}, { name: state.project.name }, { files: state.files });
axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
.then(response => {
browserHistory.push(`/projects/${response.data.id}`);
dispatch({
type: ActionTypes.NEW_PROJECT,
name: response.data.name,
id: response.data.id,
owner: response.data.user,
selectedFile: response.data.selectedFile,
files: response.data.files
});
})
.catch(response => dispatch({
type: ActionTypes.PROJECT_SAVE_FAIL,
error: response.data
}));
};
}
export function showEditProjectName() {
return {
type: ActionTypes.SHOW_EDIT_PROJECT_NAME
};
}
export function hideEditProjectName() {
return {
type: ActionTypes.HIDE_EDIT_PROJECT_NAME
};
}