r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

fixing merge conflicts

Browse source
This commit is contained in:
Lauren McCarthy 2016-08-28 09:54:35 -04:00
commit fa77ad2edd
13 changed files with 130 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc
View file

@ -27,7 +27,7 @@
"max-len": [1, 120, 4],
},
"plugins": [
"react", "import"
"react", "jsx-a11y", "import"
],
"settings": {
"import/parser": "babel-eslint",

2
README.md
View file

@ -53,6 +53,8 @@ The p5.js Web Editor is built on a MERN stack - MongoDB, Express, React/Redux, a
This project does not use CSS Modules, but uses Sass. I like to follow [BEM rules](http://getbem.com/) for CSS naming conventions, write OOSCSS with placeholders and mixins, and follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass.
I'm using [ES6](http://es6-features.org/) and transpiling to ES5 using [Babel](https://babeljs.io/). For reference to the JavaScript style guide, see the [Airbnb Style Guide](https://github.com/airbnb/javascript), [React ESLint Plugin](https://github.com/yannickcr/eslint-plugin-react).
I'm new to using ESLint, but I decided on a configuration based on some popular React/Redux boilerplates. Open to suggestions on this. If in development, you're getting annoyed with ESLint, you can remove it from `webpack.config.dev.js` in the JavaScript loader, or disable any line from eslint by commenting at the end of the line `// eslint-disable-line`.
##Dump of links I'm saving for reference

43
client/components/Nav.js
View file

@ -59,24 +59,25 @@ function Nav(props) {
return (
<li className="nav__item">
<p className="nav__open">
<Link to="/sketches">
<Link
to="/sketches"
onClick={props.stopSketch}
>
Open
</Link>
</p>
</li>
);
}
if (!props.user.authenticated) {
return (
<li className="nav__item">
<p className="nav__open">
<a href="http://alpha.editor.p5js.org/p5/sketches">
<Link to="/p5js/sketches">
Open
</a>
</Link>
</p>
</li>
);
}
})()}
<li className="nav__item">
<p className="nav__about">
@ -87,10 +88,34 @@ function Nav(props) {
</li>
</ul>
<ul className="nav__items-right" title="user-menu">
{(() => {
if (!props.user.authenticated) {
return (
<li className="nav__item">
{props.user.authenticated && <p>Hello, {props.user.username}!</p>}
{!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}
<p>
<Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link>
</p>
</li>
);
}
return (
<li className="nav__item">
<a>Hello, {props.user.username}!</a>
<ul className="nav__dropdown">
<li>
<Link to="/sketches">
My Sketches
</Link>
</li>
<li>
<a onClick={props.logoutUser} >
Logout
</a>
</li>
</ul>
</li>
);
})()}
</ul>
</nav>
);
@ -107,7 +132,9 @@ Nav.propTypes = {
}).isRequired,
project: PropTypes.shape({
id: PropTypes.string
})
}),
logoutUser: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired
};
export default Nav;

14
client/images/file.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="12px" viewBox="0 0 7 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>"K" file icon Copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-25.000000, -103.000000)" fill="#B5B5B5">
<g id="&quot;K&quot;-file-icon-Copy-+-styles.css" transform="translate(25.000000, 94.000000)">
<path d="M0.2,9.704 L0.2,17 L6.188,17 L6.188,11.72 L4.22,9.704 L0.2,9.704 Z M1.064,10.568 L3.104,10.568 C3.5,10.568 3.776,10.832 3.776,11.12 L3.776,12.008 L4.952,12.008 C5.192,12.008 5.324,12.044 5.324,12.332 L5.324,16.136 L1.064,16.136 L1.064,10.568 Z M1.892,13.316 L4.58,13.316 L4.58,12.992 L1.892,12.992 L1.892,13.316 Z M1.892,14.276 L4.58,14.276 L4.58,13.952 L1.892,13.952 L1.892,14.276 Z M1.892,15.236 L4.58,15.236 L4.58,14.912 L1.892,14.912 L1.892,15.236 Z" id="&quot;K&quot;-file-icon-Copy"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

14
client/modules/IDE/components/EditorAccessibility.js
View file

@ -7,18 +7,18 @@ class EditorAccessibility extends React.Component {
render() {
let messages = [];
if (this.props.lintMessages.length > 0) {
for (let i = 0; i < this.props.lintMessages.length; i++) {
this.props.lintMessages.forEach((lintMessage, i) => {
messages.push(
<li>
{this.props.lintMessages[i].severity} in line
{this.props.lintMessages[i].line} :
{this.props.lintMessages[i].message}
<li key={i}>
{lintMessage.severity} in line
{lintMessage.line} :
{lintMessage.message}
</li>
);
}
});
} else {
messages.push(
<p tabIndex="0"> There are no lint messages </p>
<li tabIndex="0" key={0}> There are no lint messages </li>
);
}
return (

10
client/modules/IDE/pages/IDEView.js
View file

@ -15,6 +15,7 @@ import * as IDEActions from '../actions/ide';
import * as ProjectActions from '../actions/project';
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
import * as PreferencesActions from '../actions/preferences';
import * as UserActions from '../../User/actions';
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
import SplitPane from 'react-split-pane';
import Overlay from '../../App/components/Overlay';
@ -30,6 +31,7 @@ class IDEView extends React.Component {
}
componentDidMount() {
this.props.stopSketch();
if (this.props.params.project_id) {
const id = this.props.params.project_id;
this.props.getProject(id);
@ -117,6 +119,8 @@ class IDEView extends React.Component {
exportProjectAsZip={this.props.exportProjectAsZip}
cloneProject={this.props.cloneProject}
project={this.props.project}
logoutUser={this.props.logoutUser}
stopSketch={this.props.stopSketch}
/>
<Toolbar
className="Toolbar"
@ -366,7 +370,8 @@ IDEView.propTypes = {
hideEditFileName: PropTypes.func.isRequired,
updateFileName: PropTypes.func.isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired
hideEditProjectName: PropTypes.func.isRequired,
logoutUser: PropTypes.func.isRequired
};
function mapStateToProps(state) {
@ -390,7 +395,8 @@ function mapDispatchToProps(dispatch) {
FileActions,
ProjectActions,
IDEActions,
PreferencesActions),
PreferencesActions,
UserActions),
dispatch);
}

13
client/modules/User/actions.js
View file

@ -56,3 +56,16 @@ export function getUser() {
});
};
}
export function logoutUser() {
return (dispatch) => {
axios.get(`${ROOT_URL}/logout`, { withCredentials: true })
.then(() => {
dispatch({
type: ActionTypes.UNAUTH_USER
});
})
.catch(response => dispatch(authError(response.data.error)));
};
}

4
client/modules/User/reducers.js
View file

@ -5,6 +5,10 @@ const user = (state = { authenticated: false }, action) => {
case ActionTypes.AUTH_USER:
return { ...action.user,
authenticated: true };
case ActionTypes.UNAUTH_USER:
return {
authenticated: false
};
case ActionTypes.AUTH_ERROR:
return {
authenticated: false

4
client/styles/base/_base.scss
View file

@ -11,6 +11,10 @@ body, input, button {
color: $light-primary-text-color;
}
body {
background-color: $light-background-color;
}
.root-app, .app {
min-height: 100%;
height: 100%;

7
client/styles/components/_console.scss
View file

@ -4,6 +4,8 @@
background: $console-light-background-color;
z-index: 1000;
overflow: hidden;
display: flex;
flex-direction: column;
& > {
position:relative;
@ -13,14 +15,17 @@
// assign styles to different types of console messages
.preview-console__log {
color: $dark-secondary-text-color;
flex: 1 0 auto;
}
.preview-console__error {
color: $console-error-color;
flex: 1 0 auto;
}
.preview-console__warn {
color: $console-warn-color;
flex: 1 0 auto;
}
}
@ -41,7 +46,7 @@
display: flex;
flex-direction: column;
overflow-y: auto;
height: #{121 / $base-font-size}rem;
flex: 1 0 0%;
}

20
client/styles/components/_nav.scss
View file

@ -1,6 +1,6 @@
.nav {
width: 100%;
padding: #{10 / $base-font-size}rem #{40 / $base-font-size}rem;
padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
padding-left: #{170 / $base-font-size}rem;
display: flex;
flex-direction: row;
@ -24,4 +24,22 @@
& + & {
margin-left: #{20 / $base-font-size}rem;
}
position: relative;
&:hover .nav__dropdown {
display: flex;
}
}
.nav__dropdown {
display: none;
position: absolute;
flex-direction: column;
background-color: $light-background-color;
padding: #{10 / $base-font-size}rem;
left: #{-10 / $base-font-size}rem;
border: 1px solid $ide-border-color;
& li + li {
margin-top: #{10 / $base-font-size}rem;
}
width: #{140 / $base-font-size}rem;
}

6
server/controllers/session.controller.js
View file

@ -30,3 +30,9 @@ export function getSession(req, res) {
}
return res.status(404).send({ message: 'Session does not exist' });
}
export function destroySession(req, res) {
req.logout();
res.json({success: true});
}

2
server/routes/session.routes.js
View file

@ -7,6 +7,8 @@ router.route('/login').post(SessionController.createSession);
router.route('/session').get(SessionController.getSession);
router.route('/logout').get(SessionController.destroySession);
export default router;
// TODO add github authentication stuff