adding and setting up server

Author: andrewjcho84

.babelrc

@@ -7,12 +7,12 @@
       }
     ],
     "react",
-    "stage-0",
+    "stage-0"
   ],
   "plugins": ["transform-es2015-modules-commonjs"],
   "env": {
     "test": {
       "plugins": ["transform-es2015-modules-commonjs"]
     }
-}
+  }
 }

package.json

@@ -75,7 +75,8 @@
     "test:update-snap": "cross-env NODE_ENV=test jest --updateSnapshot",
     "test:clear": "cross-env NODE_ENV=test jest --clearCache",
     "linter": "eslint src",
-    "develop": "concurrently \"npm run dev\" \"npm run electron\""
+    "develop": "concurrently \"npm run dev\" \"npm run electron\"",
+    "server": "cross-env NODE_ENV=development nodemon server/server.js"
   },
   "bin": {
     "reactype": "./index.js"
@@ -121,10 +122,12 @@
     "app-root-path": "^3.0.0",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
+    "bcryptjs": "^2.4.3",
     "classnames": "^2.2.6",
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
     "concurrently": "^5.1.0",
+    "cookie-parser": "^1.4.5",
     "core-js": "^3.6.4",
     "csstype": "^2.6.9",
     "d3": "^5.9.2",
@@ -184,11 +187,15 @@
     "eslint-plugin-jest": "^21.21.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
+    "express": "^4.17.1",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.2.6",
+    "mongodb": "^3.5.9",
+    "mongoose": "^5.9.20",
     "node-sass": "^4.13.1",
+    "nodemon": "^2.0.4",
     "postcss-loader": "^2.1.6",
     "redux-mock-store": "^1.5.4",
     "sass-loader": "^7.0.3",

server/controllers/userController.js

@@ -0,0 +1 @@
+const Users = require('../models/userModels');

server/models/sessionModel.js

@@ -0,0 +1,9 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const sessionSchema = new Schema({
+  cookieId: { type: String, required: true, unique: true },
+  createdAt: { type: Date, expires: 3600, default: Date.now }
+});
+
+const Session = mongoose.model('Sessions', sessionSchema);

server/models/userModels.js

@@ -0,0 +1,45 @@
+const mongoose = require('mongoose');
+
+mongoose
+  .connect(process.env.MONGO_URI, {
+    // options for the connect method to parse the URI
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+    // sets the name of the DB that our collections are part of
+    dbName: 'ReacType'
+  })
+  .then(() => console.log('Connected to Mongo DB.'))
+  .catch(err => console.log(err));
+
+const Schema = mongoose.Schema;
+
+const userSchema = new Schema({
+  username: { type: String, required: true, unique: true },
+  password: { type: String, required: true },
+  projects: Array
+});
+
+// salt will go through 10 rounds of hashing
+const SALT_WORK_FACTOR = 10;
+const bcrypt = require('bcryptjs');
+const { session } = require('electron');
+
+// mongoose middleware that will run before the save to collection happens (user gets put into database)
+// cannot use arrow function here as context of 'this' is important
+userSchema.pre('save', function(next) {
+  // within this context, 'this' refers to the document (new user) about to be saved, in our case, it should have properties username, password, and projects array
+  bcrypt.hash(this.password, SALT_WORK_FACTOR, (err, hash) => {
+    if (err) {
+      return next({
+        log: `bcrypt password hashing error: ${err}`,
+        message: {
+          err: `bcrypt hash error: check server logs for details`
+        }
+      });
+    }
+    this.password = hash;
+    return next();
+  });
+});
+
+module.exports = mongoose.model('Users', userSchema);

server/server.js

@@ -0,0 +1,37 @@
+const express = require('express');
+const path = require('path');
+const cookieParser = require('cookie-parser');
+const app = express();
+const PORT = 8080;
+
+// handle parsing request body
+app.use(express.json());
+// cookie parser
+app.use(cookieParser());
+
+// statically serve everything in build folder
+app.use('/', express.statice(path.resolve(__dirname, '../build')));
+
+// catch-all route handler
+app.use('*', (req, res) => {
+  return res.status(404).send('Page not found');
+});
+
+// Global error handler
+app.use((err, req, res, next) => {
+  console.log('invoking global error handler');
+  const defaultErr = {
+    log: 'Express error handler caught unknown middleware',
+    status: 500,
+    message: { err: 'An error occurred' }
+  };
+
+  const errorObj = Object.assign({}, defaultErr, err);
+  console.log(errorObj.log);
+  return res.status(errorObj.status).json(errorObj.message);
+});
+
+// starts server on PORT
+app.listen(PORT, () => {
+  console.log(`Server listening on port: ${PORT}`);
+});

src/actions/actionCreators.ts

@@ -59,6 +59,7 @@ export const addComponent = ({ title }: { title: string }): Action => ({
   type: ADD_COMPONENT,
   payload: { title }
 });
+
 export const addProp = ({
   key,
   type

src/components/bottom/HtmlAttr.tsx

@@ -170,7 +170,7 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
               <p style={{ color: 'black' }}>
                 {focusChild.HTMLInfo[attr]
                   ? focusChild.HTMLInfo[attr]
-                  : ' no attribute assigned'}
+                  : 'no attribute assigned'}
               </p>
             </Paper>
           </Grid>

src/containers/RightContainer.tsx

@@ -4,24 +4,13 @@ import { compose } from 'redux';
 import { withStyles, Theme } from '@material-ui/core/styles';
 import HtmlAttr from '../components/bottom/HtmlAttr';
 import { PropsInt, ApplicationStateInt } from '../interfaces/Interfaces';
-import {
-  deleteProp,
-  addProp,
-  toggleNative,
-  changeComponentFocusChild
-} from '../actions/actionCreators';
 
-interface StateInt {
-  value: number;
-  translate: { x: number; y: number };
-}
-
-const mapDispatchToProps = (dispatch: any) => ({
-  addProp: (prop: PropInt) => dispatch(addProp(prop)),
-  deleteProp: (id: number) => dispatch(deleteProp(id)),
-  toggleNative: () => dispatch(toggleNative()),
-  toggleCodeEdit: () => dispatch(toggleCodeEdit())
-});
+// const mapDispatchToProps = (dispatch: any) => ({
+//   addProp: (prop: PropInt) => dispatch(addProp(prop)),
+//   deleteProp: (id: number) => dispatch(deleteProp(id)),
+//   toggleNative: () => dispatch(toggleNative()),
+//   toggleCodeEdit: () => dispatch(toggleCodeEdit())
+// });
 
 const mapStateToProps = (store: { workspace: ApplicationStateInt }) => ({
   focusComponent: store.workspace.focusComponent,
@@ -42,14 +31,14 @@ interface BottomTabsPropsInt extends PropsInt {
   codeReadOnly: boolean;
 }
 
-class RightContainer extends Component<BottomTabsPropsInt, StateInt> {
+class RightContainer extends Component<BottomTabsPropsInt> {
   constructor(props: BottomTabsPropsInt) {
     super(props);
   }
 
   render(): JSX.Element {
     const { classes, components, focusComponent, focusChild } = this.props;
-
+    // looks through the children of currently focused component (based on left bar) and finds the number of child html elements it has
     const htmlAttribCount = focusComponent.childrenArray.filter(
       child => child.childType === 'HTML'
     ).length;
@@ -60,16 +49,16 @@ class RightContainer extends Component<BottomTabsPropsInt, StateInt> {
         style={{
           minWidth: '400px',
           color: 'white',
-          textAlign: 'center',
-          display: 'flex',
-          flexDirection: 'column'
+          textAlign: 'center'
         }}
       >
         <h3>This is the right column everyone!</h3>
         <h4>
+          {/* mimic the bottom tab label that shows how many html elements there are */}
           HTML Element Attributes{' '}
           {htmlAttribCount ? `(${htmlAttribCount})` : ''}
         </h4>
+        {/* conditional rendering based on which component/element is currently focused */}
         {focusChild.childType === 'HTML' && <HtmlAttr />}
         {focusChild.childType !== 'HTML' && (
           <p>Please select an HTML element to view attributes</p>
@@ -79,4 +68,4 @@ class RightContainer extends Component<BottomTabsPropsInt, StateInt> {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(RightContainer);
+export default connect(mapStateToProps)(RightContainer);