updated changelog, readme, and move DEV_PORT to config.js

Author: calvincao

CHANGE_LOG.md

@@ -9,15 +9,19 @@
   - Next.js projects will generate the right code needed for exporting a Next.js application
   - Link & Image elements have been added
   - Link components are able to couple with a page to enable SSR
+  - Next Link components have a drop down menu to quickly and easily link pages
   - Current canvas can be saved as a page to be coupled with a Next.js Link element
-  - Image element can accept special attribute that allow for it to optimize performance
+  - Files are exported with the appropriate Next.js imports and structure
 - Added Redux and began migrating some state over for ease of development (debugging & readability)
 - Fixed bug causing electron to crash when closing the window rather than going to file > exit
 - Fixed bug causing app to crash when project was changed to either Next.js or Gatsby.js
 - Fixed GitHub OAuth
   - added Passport.js & Passport-Github libraries for strategies which takes care of all the credential exchanges and session information
   - linked electron front end to talk to backend to exchange credentials
 - Fixed code preview not displaying properly
+- Fixed demo render preview so that changes in the canvas appears instantly
+  - any links in the demo render preview can now be clicked on and it will take you to its related page
+- Properties of each component now persist in the customization tab
 - Fixed dark mode not syncing properly across pages
 
 **Version 11.0.0 Stretch Features:**
@@ -28,5 +32,15 @@
   - This will improve performance by reducing the amount of unneccessary re-render. The context API causes certain pieces of state to be needlessly coupled
   - Debugging is much easier by the use of Redux dev tools which allow time travel debugging
   - Code will be easier to read and thus data flow will be easier to visualize
-- Tried to implement peer to peer communication via webRTC with redux swarmlog but was not successful. Look into websockets.
+  - Don't move **everything** onto Redux. ie: Material UI uses the context API to handle theme changes
+- Enable remote work similar to vscode's live share
+  - Tried to implement peer to peer communication via webRTC with redux swarmlog but was not successful
+  - Look into using websockets
+  - Think about security. What features needs to be implemented for secure sharing?
+  - Transfer actions through websockets via Redux middleware (Thunk)?
 - Save project (state) onto local storage for guests
+- Redesign UI to be more flexible
+  - Read material ui docs for best practices.
+  - creation panel should be redesigned. Its react component structure is too fragmented.
+- Add missing Next.js features
+  - Image components need sizing & loading options to capitalize on Next.js' Image optimization

app/electron/main.js

@@ -5,6 +5,7 @@ const electron = require('electron');
 @actions: codes for Github Oauth has been commented out because of lack of functionality.
 */
 require('dotenv').config();
+const { DEV_PORT } = require('../../config');
 const path = require('path');
 const {
   app,
@@ -213,7 +214,7 @@ app.on('web-contents-created', (event, contents) => {
     const validOrigins = [
       selfHost,
       'https://reactype-caret.herokuapp.com',
-      `http://localhost:${process.env.DEV_PORT}`,
+      `http://localhost:${DEV_PORT}`,
       'https://reactype.herokuapp.com',
       'https://github.com',
       'https://nextjs.org',
@@ -237,7 +238,7 @@ app.on('web-contents-created', (event, contents) => {
     const validOrigins = [
       selfHost,
       'https://reactype-caret.herokuapp.com',
-      `http://localhost:${process.env.DEV_PORT}`,
+      `http://localhost:${DEV_PORT}`,
       'https://reactype.herokuapp.com',
       'https://github.com',
       'https://nextjs.org',
@@ -280,7 +281,7 @@ app.on('web-contents-created', (event, contents) => {
     const validOrigins = [
       selfHost,
       'https://reactype-caret.herokuapp.com',
-      `http://localhost:${process.env.DEV_PORT}`,
+      `http://localhost:${DEV_PORT}`,
       'https://reactype.herokuapp.com',
       'https://nextjs.org',
       'https://developer.mozilla.org',
@@ -345,7 +346,7 @@ ipcMain.on('choose_app_dir', event => {
 // define serverURL for cookie and auth purposes based on environment
 let serverUrl = 'https://reactype-caret.herokuapp.com';
 if (isDev) {
-  serverUrl = `http://localhost:${process.env.DEV_PORT}`;
+  serverUrl = `http://localhost:${DEV_PORT}`;
 }
 
 // // for github oauth login in production, since cookies are not accessible through document.cookie on local filesystem, we need electron to grab the cookie that is set from oauth, this listens for an set cookie event from the renderer process then sends back the cookie
@@ -375,8 +376,7 @@ ipcMain.on('delete_cookie', event => {
 
 // opens new window for github oauth when button on sign in page is clicked
 ipcMain.on('github', event => {
-  console.log('inside main.js in electron');
-  const githubURL = `http://localhost:${process.env.DEV_PORT}/auth/github`;
+  const githubURL = `http://localhost:${DEV_PORT}/auth/github`;
   const options = {
     client_id: process.env.GITHUB_ID,
     client_secret: process.env.GITHUB_SECRET,
@@ -403,7 +403,7 @@ ipcMain.on('github', event => {
     const raw_code = /code=([^&]\*)/.exec(url) || null;
     const code = raw_code && raw_code.length > 1 ? raw_code[1] : null;
     const error = /\?error=(.+)\$/.exec(url);
-    
+
     if (code || error) {
       // Close the browser if code found or error
       authWindow.destroy();
@@ -442,9 +442,7 @@ ipcMain.on('github', event => {
     if (isDev) {
       redirectUrl = 'http://localhost:8080/';
     }
-    console.log(callbackUrl === redirectUrl);
-    console.log('callbackUrl', callbackUrl);
-    console.log('redirectUrl', redirectUrl);
+
     if (callbackUrl === redirectUrl) {
       dialog.showMessageBox({
         type: 'info',

app/src/components/login/SignIn.tsx

@@ -175,7 +175,6 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>
     ) => {
       e.preventDefault();
-        console.log('window api', window.api);
         window.api.github();
         props.history.push('/');
     }

app/src/components/main/AddLink.tsx

@@ -14,6 +14,7 @@ function AddLink({ id, onClickHandler, linkDisplayed }) {
   const [state, dispatch] = useContext(StateContext);
   const [link, setLink] = useState('')
 
+  //this function allows the link to be functional when it's nested
   function deepIterate(arr) {
     const output = [];
     for(let i = 0; i < arr.length; i++) {

app/src/containers/CustomizationPanel.tsx

@@ -61,7 +61,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     currFocus?.attributes?.compLink && setCompLink(currFocus.attributes.compLink);
   }, [state]);
 
-  //Miko -- save properties of nested div
+  //this function allows properties to persist and appear in nested divs
   function deepIterate(arr) {
     const output = [];
     for(let i = 0; i < arr.length; i++) {

app/src/helperFunctions/auth.ts

@@ -1,8 +1,9 @@
 const fetch = require('node-fetch');
 const isDev = process.env.NODE_ENV === 'development';
+const {DEV_PORT} = require('../../../config');
 let serverURL = 'https://reactype-caret.herokuapp.com';
 if (isDev) {
-  serverURL = `http://localhost:${process.env.DEV_PORT}`;
+  serverURL = `http://localhost:${DEV_PORT}`;
 }
 export const sessionIsCreated = (
   username: string,

app/src/helperFunctions/projectGetSaveDel.ts

@@ -1,7 +1,8 @@
 const isDev = process.env.NODE_ENV === 'development';
+const {DEV_PORT} = require('../../../config');
 let serverURL = 'https://reactype-caret.herokuapp.com';
 if (isDev) {
-  serverURL = `http://localhost:${process.env.DEV_PORT}`;
+  serverURL = `http://localhost:${DEV_PORT}`;
 }
 export const getProjects = (): Promise<any> => {
   let userId = window.localStorage.getItem('ssid');

server/README.md

@@ -15,6 +15,8 @@
 
 Redeployment should also be done with only the server subtree and not the entire repo. See this <a href="https://medium.com/@shalandy/deploy-git-subdirectory-to-heroku-ea05e95fce1f">article</a> about deploying just a subdirectory.
 
-If `npm` is your package manager, you just need to run the script `npm run dev` and it will start the server on `http://localhost:${process.env.DEV_PORT}` for your development environment.
+If `npm` is your package manager, you just need to run the script `npm run dev` and it will start the server on `http://localhost:${DEV_PORT}` for your development environment.
+DEV_PORT can be defined in the config.js file on the root directory.
+You will also need to define your server address(MONGO_DB_DEV), github OAuth ID (GITHUB_ID) & Secret (GITHUB_SECRET) in a dotenv file in the root directory as well.
 
 Endpoint testing is currently integrated with Jest and Supertest as well and can be run by `npm run test` or `npm run test:watch` for watch mode.

server/models/reactypeModels.js

@@ -11,9 +11,9 @@
 const mongoose = require('mongoose');
 const bcrypt = require('bcryptjs');
 require('dotenv').config();
-const mongoURI = process.env.MONGO_DB_NEW;
+const mongoURI = process.env.MONGO_DB_DEV;
 const URI =
-  process.env.NODE_ENV === 'production' ? mongoURI : process.env.MONGO_DB_NEW;
+  process.env.NODE_ENV === 'production' ? mongoURI : process.env.MONGO_DB_DEV;
 
 const SALT_WORK_FACTOR = 10;
 // connect to mongo db

server/server.js

@@ -3,6 +3,7 @@ const express = require('express');
 const cookieParser = require('cookie-parser');
 const passport = require('passport');
 const GitHubStrategy = require('passport-github2').Strategy;
+const { DEV_PORT } = require('../config');
 
 const path = require('path');
 const cors = require('cors');
@@ -13,7 +14,7 @@ const projectController = require('./controllers/projectController');
 
 const app = express();
 
-const PORT = process.env.PORT || process.env.DEV_PORT;
+const PORT = process.env.PORT || DEV_PORT;
 const isDev = process.env.NODE_ENV === 'development';
 const isProd = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test';
@@ -45,7 +46,9 @@ passport.use(
     {
       clientID: process.env.GITHUB_ID,
       clientSecret: process.env.GITHUB_SECRET,
-      callbackURL: `http://localhost:${process.env.DEV_PORT}/github/callback`
+      callbackURL: isDev
+        ? `http://localhost:${DEV_PORT}/github/callback`
+        : `https://reactype-caret.herokuapp.com/github/callback`
     },
     function(accessToken, refreshToken, profile, done) {
       console.log(profile);

webpack.development.js

@@ -4,6 +4,7 @@ const merge = require('webpack-merge');
 const base = require('./webpack.config');
 const path = require('path');
 const nonce = require('./app/src/utils/createNonce')();
+const {DEV_PORT} = require('./config');
 
 // merges webpack.config.js with development specific configs
 module.exports = merge(base, {
@@ -22,10 +23,10 @@ module.exports = merge(base, {
     },
     proxy: {
       '/demoRender': {
-        target: `http://localhost:${process.env.DEV_PORT}/`
+        target: `http://localhost:${DEV_PORT}/`
       },
       '/user-styles': {
-        target: `http://localhost:${process.env.DEV_PORT}/`
+        target: `http://localhost:${DEV_PORT}/`
       }
     }
   },