Merge pull request #18 from oslabs-beta/combineReduxStores

combined redux store, fixed visual bugs, & updated readme

Author: kchender

CHANGE_LOG.md

@@ -0,0 +1,32 @@
+<p align="center">
+  <img width="100" src="https://i.imgur.com/Yn70tqI.png">
+  <h1 align="center">ReacType Change Log</h1>
+</p>
+
+**Version 11.0.0 Changes:**
+
+- Added Next.js functionality
+  - 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
+  - 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
+- 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 dark mode not syncing properly across pages
+
+**Version 11.0.0 Stretch Features:**
+
+- Move more state away from the react hook & context API and into the Redux store
+  - This will be very time consuming but will make implementing new features much easier
+  - Highly suggest you read Redux documentation on best practices before diving into this
+  - 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.
+- Save project (state) onto local storage for guests

README.md

@@ -1,11 +1,11 @@
 <p align="center">
-  <img width="50" src="https://i.imgur.com/Yn70tqI.png">
+  <img width="100" src="https://i.imgur.com/Yn70tqI.png">
   <h1 align="center">ReacType </h1>
 </p>
 
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
 ![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)
-![Version 10.0.0]
+![Version 11.0.0]
 
 **ReacType** is a rapid prototyping tool for developers employing **React** component architecture alongside the comprehensive type-checking of **TypeScript**.
 In other words, **you can draw prototypes and export React / TypeScript code!**
@@ -16,7 +16,7 @@ Download for [MacOS](https://github.com/team-reactype/ReacType/releases), [Windo
 
 - **Mac users**: After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet.
 
-- **Windows users**: Install the application by running ReacType Setup 10.0.0.exe.
+- **Windows users**: Install the application by running ReacType Setup 11.0.0.exe.
 
 - **Linux users**: Run the application as a super user in order to read and write files.
 
@@ -49,7 +49,7 @@ How to use
 - **Like**: Like other people's templates by clicking on the thumbs up icon.
 - **Comment**: Comment on other templates by typing in the input field and clicking the comment icon.
 - **Download**: Save any public template by clicking the download icon to save a copy as your own.
-- **Publish**: Publish any template to the Public Dashboard for other users to download, like, or comment on.  Click again to unpublish projects.
+- **Publish**: Publish any template to the Public Dashboard for other users to download, like, or comment on. Click again to unpublish projects.
 - **Sort By**: Click the 'Sort By' button to choose different metrics to sort the Public Dashboard by.
 - **Form Nesting**: Nesting within form tags is now fully functional
 - **Added Undo and Redo functionality**
@@ -60,31 +60,36 @@ How to use
 - Modernized and cleaner UI, including enhanced dark mode
 - Tutorial has been updated to reflect other modifications
 
+**New with version 11.0.0:**
 
- **New with version 10.0.0:**
-- **Live Code Preview**: See your code preview update in real time as you build. React hooks are enabled for application lifecycle management. Dynamically render functional components using a live code editor. User's can hook event listeners to components and see them render in real time.
+- **Enhanced Next.js Functionality**: Create a Next.js application in Reactype! Take advantage of server side rendering and static site generation by using the new improved Next.js link and image components. Simply drag and drop a Link element onto the canvas which can be coupled with a page to support SSR or optimize performance by using Next.js' Image component to enable on-demand image resizing. After you're done, export your project as a Next.js application written in Typescript!
+- **More Dark Mode**: Cleaned up the dark mode UI and added it to all areas of the application including the sign in and sign up page.
+- **Various Performance Enhancements**: Improved performance by reducing unnecessary re-rendering due to needlessly coupled state hooks
+- **And more:** See CHANGE_LOG.md for more details on what was changed from the previous version as well as plans for upcoming features!
 
 ### Keyboard Shortcuts
 
 **Mac**:
- - Export Project: Command + e
- - Undo: Command + z
- - Redo: Command + Shift + z
- - Save Project As: Command + s
- - Save Project: Command + shift + s
- - Delete HTML Tag on Canvas: Backspace
- - Delete Project: Command + Backspace
- - Open Project: Command + o
+
+- Export Project: Command + e
+- Undo: Command + z
+- Redo: Command + Shift + z
+- Save Project As: Command + s
+- Save Project: Command + shift + s
+- Delete HTML Tag on Canvas: Backspace
+- Delete Project: Command + Backspace
+- Open Project: Command + o
 
 **Windows**:
- - Export Project: Control + e
- - Undo: Control + z
- - Redo: Control + Shift + z
- - Save Project As: Control + s
- - Save Project: Control + shift + s
- - Delete HTML Tag on Canvas: Backspace
- - Delete Project: Control + Backspace
- - Open Project: Control + o
+
+- Export Project: Control + e
+- Undo: Control + z
+- Redo: Control + Shift + z
+- Save Project As: Control + s
+- Save Project: Control + shift + s
+- Delete HTML Tag on Canvas: Backspace
+- Delete Project: Control + Backspace
+- Open Project: Control + o
 
 #### Contributors
 
@@ -106,6 +111,8 @@ How to use
 
 [Bryan Chau](https://www.linkedin.com/in/chaubryan1/) [@bchauu](https://github.com/bchauu)
 
+[Calvin Cao](http://www.linkedin.com/in/calvincao9/) [@calvincao](https://github.com/calvincao)
+
 [Charles Finocchiaro](https://www.linkedin.com/in/charles-finocchiaro-62440040/) [@null267](https://github.com/null267)
 
 [Chelsey Fewer](https://www.linkedin.com/in/chelsey-fewer/) [@chelseyeslehc](https://github.com/chelseyeslehc)
@@ -128,6 +135,8 @@ How to use
 
 [Eliot Nguyen](https://linkedin.com/in/ibeeliot) [@ibeeliot](https://github.com/ibeeliot)
 
+[Evan Crews](http://www.linkedin.com/in/<ADD_LINKEDIN_USERNAME>/) [@Evan-Crews](https://github.com/Evan-Crews)
+
 [Fredo Chen](https://www.linkedin.com/in/fredochen/) [@fredosauce](https://github.com/fredosauce)
 
 [Jonathan Calvo Ramirez](https://www.linkedin.com/in/jonathan-calvo/) [@jonocr](https://github.com/jonocr)
@@ -142,10 +151,14 @@ How to use
 
 [Khuong Nguyen](https://www.linkedin.com/in/khuong-nguyen/) [@khuongdn16](https://github.com/khuongdn16)
 
+[Katrina Henderson](https://www.linkedin.com/in/katrinahenderson/) [@kchender](https://github.com/kchender)
+
 [Linh Tran](https://www.linkedin.com/in/linhtran51/) [@Linhatran](https://github.com/Linhatran)
 
 [Luke Madden](https://www.linkedin.com/in/lukemadden/) [@lukemadden](https://github.com/lukemadden)
 
+[Michael Ng](https://www.linkedin.com/in/<ADD_USERNAME>/) [@MikoGome](https://github.com/MikoGome)
+
 [Miles Wright](https://www.linkedin.com/in/miles-m-wright) [@Miles818](https://github.com/Miles818)
 
 [Mitchel Severe](https://www.linkedin.com/in/misevere/) [@mitchelsevere](https://github.com/mitchelsevere)
@@ -184,6 +197,8 @@ How to use
 
 [William Yoon](https://www.linkedin.com/in/williamdyoon/) [@williamdyoon](https://github.com/williamdyoon)
 
+[Yuanji Huang](https://www.linkedin.com/in/yuanjihuang/) [@kr1spybacon](https://github.com/kr1spybacon)
+
 ## To Run Your Own Version
 
 - **Fork** and **Clone** Repository.

app/src/components/bottom/BottomTabs.tsx

@@ -89,9 +89,9 @@ const BottomTabs = (props): JSX.Element => {
               value={state.projectType}
               onChange={handleProjectChange}
             >
-              <MenuItem value={'Classic React'}>Classic React</MenuItem>
-              <MenuItem value={'Gatsby.js'}>Gatsby.js</MenuItem>
-              <MenuItem value={'Next.js'}>Next.js</MenuItem>
+              <MenuItem style={{ color: 'black' }} value={'Classic React'}>Classic React</MenuItem>
+              <MenuItem style={{ color: 'black' }} value={'Gatsby.js'}>Gatsby.js</MenuItem>
+              <MenuItem style={{ color: 'black' }} value={'Next.js'}>Next.js</MenuItem>
             </Select>
           </FormControl>
         </div>

app/src/components/bottom/CodePreview.tsx

@@ -14,7 +14,8 @@ import useResizeObserver from '../../tree/useResizeObserver';
 import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
 import { fetchPlugin } from '../../plugins/fetch-plugin';
 import * as esbuild from 'esbuild-wasm';
-import { store } from './../../index';
+import store from '../../redux/store';
+// import { store } from './../../index';
 const CodePreview: React.FC<{
   theme: string | null;
   setTheme: any | null;
@@ -57,7 +58,7 @@ const CodePreview: React.FC<{
   useEffect(() => {
 
  setInput(currentComponent.code);
-  store.dispatch({type: "INPUT", payload: currentComponent.code});
+  store.dispatch({type: "CODE_PREVIEW_INPUT", payload: currentComponent.code});
   }, [state.components])
 
   /**
@@ -66,7 +67,7 @@ const CodePreview: React.FC<{
  */
   const handleChange = async (data) => {
     setInput(data);
-    store.dispatch({type: "INPUT", payload: data});
+    store.dispatch({type: "CODE_PREVIEW_INPUT", payload: data});
     if(!ref.current) {
       return;
     }
@@ -85,7 +86,7 @@ const CodePreview: React.FC<{
         global: 'window'
       }
     })
-     store.dispatch({type: "SAVE", payload: result.outputFiles[0].text});
+     store.dispatch({type: "CODE_PREVIEW_SAVE", payload: result.outputFiles[0].text});
   }
 
   return (
@@ -106,7 +107,7 @@ const CodePreview: React.FC<{
         value={input}
         name="Code_div"
         readOnly={false}
-        fontSize={16}
+        fontSize={18}
         tabSize={2}
       />
 

app/src/index.js

@@ -7,9 +7,9 @@ import {
 } from 'react-router-dom';
 import 'babel-polyfill';
 import React from 'react';
-import reduxStore from './redux/store';
+import store from './redux/store';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+// import { createStore } from 'redux';
 import ReactDOM from 'react-dom';
 import Cookies from 'js-cookie';
 import App from './components/App.tsx';
@@ -24,22 +24,22 @@ const client = new ApolloClient({
   uri: 'https://reactype-caret.herokuapp.com/graphql',
   cache: new InMemoryCache()
 });
-const initialState = { code: ``, input: `` };
-const rootReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case 'SAVE':
-      return { ...state, code: action.payload };
-    case 'INPUT':
-      return { ...state, input: action.payload };
-    default:
-      return state;
-  }
-};
+// const initialState = { code: ``, input: `` };
+// const rootReducer = (state = initialState, action) => {
+//   switch (action.type) {
+//     case 'SAVE':
+//       return { ...state, code: action.payload };
+//     case 'INPUT':
+//       return { ...state, input: action.payload };
+//     default:
+//       return state;
+//   }
+// };
 
-export const store = createStore(
-  rootReducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
+// export const store = createStore(
+//   rootReducer,
+//   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+// );
 
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
@@ -56,7 +56,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <Provider store={reduxStore}>
+    <Provider store={store}>
       <Router>
         <Switch>
           <Route exact path="/login" component={SignIn} />

app/src/redux/constants/actionTypes.js

@@ -1,2 +1,4 @@
 // save all action as constants here
 export const DARK_MODE_TOGGLE = 'DARK_MODE_TOGGLE';
+export const CODE_PREVIEW_SAVE = 'CODE_PREVIEW_SAVE';
+export const CODE_PREVIEW_INPUT = 'CODE_PREVIEW_INPUT';

app/src/redux/reducers/rootReducer.js

@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 
 import darkModeReducer from './slice/darkModeSlice';
+import codePreviewReducer from './slice/codePreviewSlice';
 
 const rootReducer = combineReducers({
-  darkModeSlice: darkModeReducer
+  darkModeSlice: darkModeReducer,
+  codePreviewSlice: codePreviewReducer
   // add the rest of your slice imports here
 });
 

app/src/redux/reducers/slice/codePreviewSlice.js

@@ -0,0 +1,25 @@
+import * as types from '../../constants/actionTypes';
+
+const initialState = {
+  code: ``,
+  input: ``
+};
+
+const codePreviewReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case types.CODE_PREVIEW_SAVE:
+      return {
+        ...state,
+        code: action.payload
+      };
+    case types.CODE_PREVIEW_INPUT:
+      return {
+        ...state,
+        input: action.payload
+      };
+    default:
+      return state;
+  }
+};
+
+export default codePreviewReducer;