diff --git a/client/modules/App/components/Overlay.js b/client/modules/App/components/Overlay.js
new file mode 100644
index 00000000..31a451c4
--- /dev/null
+++ b/client/modules/App/components/Overlay.js
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+function Overlay(props) {
+ return (
+
+ );
+}
+
+Overlay.propTypes = {
+ children: PropTypes.object
+};
+
+export default Overlay;
diff --git a/client/modules/IDE/actions/projects.js b/client/modules/IDE/actions/projects.js
new file mode 100644
index 00000000..d1898d77
--- /dev/null
+++ b/client/modules/IDE/actions/projects.js
@@ -0,0 +1,25 @@
+import * as ActionTypes from '../../../constants';
+import { browserHistory } from 'react-router';
+import axios from 'axios';
+
+const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+
+export function getProjects() {
+ return (dispatch) => {
+ axios.get(`${ROOT_URL}/projects`, { withCredentials: true })
+ .then(response => {
+ dispatch({
+ type: ActionTypes.SET_PROJECTS,
+ projects: response.data
+ });
+ })
+ .catch(response => dispatch({
+ type: ActionTypes.ERROR,
+ error: response.data
+ }));
+ };
+}
+
+export function closeSketchList() {
+ browserHistory.push('/');
+}
diff --git a/client/modules/IDE/components/SketchList.js b/client/modules/IDE/components/SketchList.js
new file mode 100644
index 00000000..718a1849
--- /dev/null
+++ b/client/modules/IDE/components/SketchList.js
@@ -0,0 +1,68 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import moment from 'moment';
+import { Link } from 'react-router';
+import * as SketchActions from '../actions/projects';
+import * as ProjectActions from '../actions/project';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+
+class SketchList extends React.Component {
+ componentDidMount() {
+ this.props.getProjects();
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+ Name |
+ Created |
+ Last Updated |
+
+
+
+ {this.props.sketches.map(sketch =>
+
+ {sketch.name} |
+ {moment(sketch.createdAt).format('MMM D, YYYY')} |
+ {moment(sketch.updatedAt).format('MMM D, YYYY')} |
+
+ )}
+
+
+
+
+ );
+ }
+}
+
+SketchList.propTypes = {
+ user: PropTypes.object.isRequired,
+ getProjects: PropTypes.func.isRequired,
+ sketches: PropTypes.array.isRequired,
+ closeSketchList: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+ return {
+ user: state.user,
+ sketches: state.sketches
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return bindActionCreators(Object.assign({}, SketchActions, ProjectActions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SketchList);
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 4da5c9b1..034c797b 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -16,9 +16,12 @@ import * as EditorAccessibilityActions from '../actions/editorAccessibility';
import * as PreferencesActions from '../actions/preferences';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
import SplitPane from 'react-split-pane';
+import Overlay from '../../App/components/Overlay';
+import SketchList from '../components/SketchList';
class IDEView extends React.Component {
constructor(props) {
+ console.log(props);
super(props);
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
@@ -50,6 +53,10 @@ class IDEView extends React.Component {
if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20;
}
+
+ if (nextProps.params.project_id && !this.props.params.project_id) {
+ this.props.getProject(nextProps.params.project_id);
+ }
}
componentDidUpdate(prevProps) {
@@ -227,6 +234,15 @@ class IDEView extends React.Component {
}
return '';
})()}
+ {(() => { // eslint-disable-line
+ if (this.props.location.pathname === '/sketches') {
+ return (
+
+
+
+ );
+ }
+ })()}
);
@@ -237,6 +253,9 @@ IDEView.propTypes = {
params: PropTypes.shape({
project_id: PropTypes.string
}),
+ location: PropTypes.shape({
+ pathname: PropTypes.string
+ }),
getProject: PropTypes.func.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool.isRequired,
diff --git a/client/modules/IDE/reducers/projects.js b/client/modules/IDE/reducers/projects.js
new file mode 100644
index 00000000..b973bccc
--- /dev/null
+++ b/client/modules/IDE/reducers/projects.js
@@ -0,0 +1,12 @@
+import * as ActionTypes from '../../../constants';
+
+const sketches = (state = [], action) => {
+ switch (action.type) {
+ case ActionTypes.SET_PROJECTS:
+ return action.projects;
+ default:
+ return state;
+ }
+};
+
+export default sketches;
diff --git a/client/routes.js b/client/routes.js
index e071eb7f..356a27da 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -4,7 +4,7 @@ import App from './modules/App/App';
import IDEView from './modules/IDE/pages/IDEView';
import LoginView from './modules/User/pages/LoginView';
import SignupView from './modules/User/pages/SignupView';
-import SketchListView from './modules/Sketch/pages/SketchListView';
+// import SketchListView from './modules/Sketch/pages/SketchListView';
import { getUser } from './modules/User/actions';
const checkAuth = (store) => {
@@ -18,7 +18,7 @@ const routes = (store) =>
-
+
);
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
new file mode 100644
index 00000000..3ece1be1
--- /dev/null
+++ b/client/styles/components/_overlay.scss
@@ -0,0 +1,17 @@
+.overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 9999;
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+.overlay-content {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 1658855f..4780b12a 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -1,10 +1,25 @@
+.sketch-list__header {
+ display: flex;
+ justify-content: space-between;
+ padding: #{20 / $base-font-size}rem;
+}
+
+.sketches-table-container {
+ flex: 1 0 0%;
+ overflow-y: scroll;
+}
+
.sketches-table {
width: 100%;
padding: #{10 / $base-font-size}rem 0;
- padding-left: #{170 / $base-font-size}rem;
+ padding-left: #{20 / $base-font-size}rem;
height: 100%;
}
.sketches-table__row {
margin: #{10 / $base-font-size}rem;
+}
+
+.sketch-list__exit-button {
+ @extend %icon;
}
\ No newline at end of file
diff --git a/client/styles/layout/_sketch-list.scss b/client/styles/layout/_sketch-list.scss
index 0784629c..7587262d 100644
--- a/client/styles/layout/_sketch-list.scss
+++ b/client/styles/layout/_sketch-list.scss
@@ -1,11 +1,8 @@
.sketch-list {
+ @extend %modal;
display: flex;
flex-wrap: wrap;
- height: 100%;
flex-flow: column;
+ width: #{1000 / $base-font-size}rem;
+ height: #{700 / $base-font-size}rem;
}
-
-.sketches-table-container {
- flex: 1 0 0%;
- overflow-y: scroll;
-}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 7a565c25..3b3a79a3 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -20,6 +20,7 @@
@import 'components/modal';
@import 'components/console';
@import 'components/resizer';
+@import 'components/overlay';
@import 'layout/ide';
@import 'layout/sketch-list';