combine project view and ide view

This commit is contained in:
catarak 2016-06-20 13:29:32 -04:00
parent c25d669fe9
commit 719042e41b
9 changed files with 176 additions and 13 deletions

View file

@ -43,5 +43,18 @@ export function updateProject(req, res) {
}
export function getProject(req, res) {
Project.findById(req.params.project_id, function(err, project) {
if (err) {
return res.status(404).send({message: 'Project with that id does not exist'});
}
return res.json({
id: project._id,
name: project.name,
file: {
name: project.file.name,
content: project.file.conent
}
});
})
}

View file

@ -6,9 +6,17 @@ import Preferences from '../../components/Preferences/Preferences'
import Nav from '../../components/Nav/Nav'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as FileActions from '../../redux/actions'
import * as IndexActions from '../../redux/actions'
import * as ProjectActions from '../../redux/actions/project'
class IDEView extends React.Component {
componentDidMount() {
if (this.props.params.project_id) {
const id = this.props.params.project_id
this.props.getProject(id);
}
}
render() {
return (
<div className="ide">
@ -57,7 +65,7 @@ function mapStateToProps(state) {
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(FileActions, dispatch);
return bindActionCreators(Object.assign({}, IndexActions, ProjectActions), dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(IDEView);

View file

@ -0,0 +1,40 @@
import React from 'react'
import * as ProjectActions from '../../redux/actions/project'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
class ProjectView extends React.Component {
render() {
return (
<div className="project">
<h1>{this.props.project.name}</h1>
<p>
{this.props.file.content}
</p>
</div>
);
}
componentDidMount() {
const id = this.props.params.project_id
this.props.getProject(id);
}
}
function mapStateToProps(state) {
return {
file: state.file,
ide: state.ide,
user: state.user,
project: state.project
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ProjectActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(ProjectView);

View file

@ -1,15 +1,7 @@
import * as ActionTypes from '../constants/constants';
import axios from 'axios'
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api/' : '/api';
export function updateFile(name, content) {
return {
type: ActionTypes.CHANGE_SELECTED_FILE,
name: name,
content: content
}
}
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
export function toggleSketch() {
return {

View file

@ -0,0 +1,95 @@
import * as ActionTypes from '../constants/constants'
import axios from 'axios'
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
export function updateFile(name, content) {
return {
type: ActionTypes.CHANGE_SELECTED_FILE,
name: name,
content: content
}
}
export function getProject(id) {
return function(dispatch) {
axios.get(`${ROOT_URL}/projects/${id}`, {withCredentials: true})
.then(response => {
browserHistory.push(`/projects/${id}`);
dispatch({
type: ActionTypes.SET_PROJECT_NAME,
project: response.data
})
})
.catch(response => dispatch({
type: ActionTypes.ERROR
}));
}
}
export function setProjectName(event) {
var name = event.target.textContent;
return {
type: ActionTypes.SET_PROJECT_NAME,
name: name
}
}
export function saveProject() {
return function(dispatch, getState) {
var state = getState();
var formParams = Object.assign({}, state.project);
formParams.file = state.file;
if (state.id) {
axios.put(`${ROOT_URL}/projects/${state.id}`, formParams, {withCredentials: true})
.then(response => {
dispatch({
type: ActionTYpes.PROJECT_SAVE_SUCCESS
})
.catch(response => dispatch({
type: ActionTypes.PROJECT_SAVE_FAIL
}));
})
}
else {
axios.post(`${ROOT_URL}/projects`, formParams, {withCredentials: true})
.then(response => {
browserHistory.push('/' + response.data.id);
dispatch({
type: ActionTypes.NEW_PROJECT,
name: response.data.name,
id: response.data.id,
file: {
name: response.data.file.name,
content: response.data.file.content
}
});
})
.catch(response => dispatch({
type: ActionTypes.PROJECT_SAVE_FAIL
}));
}
}
}
export function createProject() {
return function(dispatch) {
axios.post(`${ROOT_URL}/projects`, {}, {withCredentials: true})
.then(response => {
dispatch({
type: ActionTypes.NEW_PROJECT,
name: response.data.name,
id: response.data.id,
file: {
name: response.data.file.name,
content: response.data.file.content
}
});
browserHistory.push('/' + response.data.id);
})
.catch(response => dispatch({
type: ActionTypes.PROJECT_SAVE_FAIL
}));
}
}

View file

@ -3,7 +3,7 @@ import { browserHistory } from 'react-router'
import axios from 'axios'
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api/' : '/api';
const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
export function signUpUser(formValues) {
return function(dispatch) {

View file

@ -20,3 +20,7 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
export const NEW_PROJECT = 'NEW_PROJECT';
export const SET_PROJECT = 'SET_PROJECT';
//eventually, handle errors more specifically and better
export const ERROR = 'ERROR';

View file

@ -15,6 +15,15 @@ const project = (state = initialState, action) => {
id: action.id,
name: action.name
}
case ActionTypes.SET_PROJECT:
return {
id: action.project.id,
name: action.project.name,
file: {
name: action.project.file.name,
content: action.project.file.content
}
}
default:
return state;
}

View file

@ -4,6 +4,7 @@ import App from './containers/App'
import IDEView from './containers/IDEView/IDEView'
import LoginView from './containers/LoginView/LoginView'
import SignupView from './containers/SignupView/SignupView'
import ProjectView from './containers/ProjectView/ProjectView'
import { getUser } from './redux/actions/user';
const routes = (store) => {
@ -12,6 +13,7 @@ const routes = (store) => {
<IndexRoute component={IDEView} onEnter={checkAuth(store)}/>
<Route path="/login" component={LoginView}/>
<Route path="/signup" component={SignupView}/>
<Route path="/projects/:project_id" component={IDEView}/>
</Route>
);
}