ReacType 12.0 with Context Manager Feature

CHANGE_LOG.md

@@ -3,6 +3,17 @@
   <h1 align="center">ReacType Change Log</h1>
 </p>
 
+**Version 12.0.0 Changes**
+
+-Context Visualizer: You can now visually see what component is consuming which context. As you click on the interactive tree, the component assigned to the context will be revealed.
+-React 18: Updated to React 18
+-Export Feature: Created an exportable context file, integrated with original codebase.
+Ready to go code: Added boilerplate codes to components based on which contexts they are consuming.
+
+**A note to future contributors**
+
+Attempted to implement Facebook and Google OAuth via passport but as of Electron’s current version, neither of them not compatible with electron.
+
 **Version 11.0.0 Changes:**
 
 - Added Next.js functionality

README.md

@@ -30,6 +30,9 @@ How to use
 - **Start a project (only after registration)**: Registered users can create a new project and select whether they want their project to be a Next.js, Gatsby.js, or classic React project. Also, registered users can save projects to return to them at a later time.
 - **Add Components**: Create components on the right panel. Components can be associated with a route, or they can be used within other components.
 - **Delete Components**: Delete components after focusing on them in the right panel. Be careful when deleting components: Upon deletion, all instances of the component will be removed within the application/project.
+- **Context Visualizer**: You can now visually see what component is consuming which context. As you click on the interactive tree, the component assigned to the context will be revealed.
+- **Context Code Preview**: Once contexts have been assigned to the desired components, click ‘Export’ to incorporate context into your existing codebase so you can save it as a file.
+- **Ready to go code**: Added boilerplate codes to components based on which contexts they are consuming.
 - **Add Custom Elements**: Create custom elements or add provided HTML elements into the application. Once the project is exported, the HTML tags generated in the code preview will function as expected. You can specify functionality for custom elements in the code preview. The tutorial on HTML Elements explains more on how to do this.
 - **Delete Custom HTML Elements**: Delete custom HTML elements by clicking on the ‘X’ button adjacent to the element. Be careful when deleting custom elements: All instances of the element will be deleted within the application/project.
 - **Create Instances on the Canvas**: Each component has its own canvas. Add an element to a component by dragging it onto the canvas. Div components are arbitrarily nestable and useful for complex layouts. Next.js and Gatsby.js projects have Link components to enable client-side navigation to other routes.
@@ -107,6 +110,8 @@ How to use
 
 [Anthony Torrero](https://www.linkedin.com/in/anthony-torrero-4b8798159/) [@Anthonytorrero](https://github.com/Anthonytorrero)
 
+[Bianca Picasso](linkedin.com/in/bianca-picasso) [@BiancaPicasso](https://github.com/BiancaPicasso)
+
 [Brian Han](https://www.linkedin.com/in/brianjisoohan/) [@brianjshan](https://github.com/brianjshan)
 
 [Bryan Chau](https://www.linkedin.com/in/chaubryan1/) [@bchauu](https://github.com/bchauu)
@@ -139,6 +144,8 @@ How to use
 
 [Fredo Chen](https://www.linkedin.com/in/fredochen/) [@fredosauce](https://github.com/fredosauce)
 
+[Huy Pham](linkedin.com/in/huypham048) [@huypham048](https://github.com/huypham048)
+
 [Jonathan Calvo Ramirez](https://www.linkedin.com/in/jonathan-calvo/) [@jonocr](https://github.com/jonocr)
 
 [Jesse Zuniga](https://linkedin.com/in/jesse-zuniga) [@jzuniga206](https://github.com/jzuniga206)
@@ -149,6 +156,8 @@ How to use
 
 [Katrina Henderson](https://www.linkedin.com/in/katrinahenderson/) [@kchender](https://github.com/kchender)
 
+[Ken Bains](linkedin.com/in/ken-bains) [@ken-Bains](https://github.com/ken-Bains)
+
 [Kevin Park](https://www.linkedin.com/in/xkevinpark/) [@xkevinpark](https://github.com/xkevinpark)
 
 [Khuong Nguyen](https://www.linkedin.com/in/khuong-nguyen/) [@khuongdn16](https://github.com/khuongdn16)
@@ -171,6 +180,8 @@ How to use
 
 [Ron Fu](https://www.linkedin.com/in/ronfu)[@rfvisuals](https://github.com/rfvisuals)
 
+[Salvatore Saluga](linkedin.com/in/salvatore-saluga) [@SalSaluga](https://github.com/SalSaluga)
+
 [Sean Sadykoff](https://www.linkedin.com/in/sean-sadykoff/) [@sean1292](https://github.com/sean1292)
 
 [Shana Hoehn](https://www.linkedin.com/in/shana-hoehn-70297b169/) [@slhoehn](https://github.com/slhoehn)

__tests__/contextReducer.test.js

@@ -0,0 +1,165 @@
+import subject from '../app/src/redux/reducers/slice/contextReducer';
+
+describe('Context Reducer', () => {
+  let state;
+
+  beforeEach(() => {
+    state = {
+      allContext: []
+    };
+  });
+
+  describe('default state', () => {
+    it('should return a default state when given an undefined input', () => {
+      expect(subject(undefined, { type: undefined })).toEqual(state);
+    });
+  });
+
+  describe('unrecognized action types', () => {
+    it('should return the original state without any duplication', () => {
+      expect(subject(state, { type: 'REMOVE_STATE' })).toBe(state);
+    });
+  });
+
+  describe('ADD_CONTEXT', () => {
+    const action = {
+      type: 'ADD_CONTEXT',
+      payload: {
+        name: 'Theme Context'
+      }
+    };
+
+    it('adds a context', () => {
+      const { allContext } = subject(state, action);
+      expect(allContext[0]).toEqual({
+        name: 'Theme Context',
+        values: [],
+        components: []
+      });
+    });
+
+    it('returns a state object not strictly equal to the original', () => {
+      const newState = subject(state, action);
+      expect(newState).not.toBe(state);
+    });
+
+    it('should immutably update the nested state object', () => {
+      const { allContext } = subject(state, action);
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+
+  describe('ADD_CONTEXT_VALUES', () => {
+    beforeEach(() => {
+      state = {
+        allContext: [
+          {
+            name: 'Theme Context',
+            values: [],
+            components: []
+          }
+        ]
+      };
+    });
+
+    const action = {
+      type: 'ADD_CONTEXT_VALUES',
+      payload: {
+        name: 'Theme Context',
+        inputKey: 'Theme Color',
+        inputValue: 'Dark'
+      }
+    };
+
+    it('adds a key-value pair to values array of the specified context', () => {
+      const { allContext } = subject(state, action);
+      expect(allContext[0].values.length).toEqual(1);
+      expect(allContext[0].values[0].key).toEqual('Theme Color');
+      expect(allContext[0].values[0].value).toEqual('Dark');
+    });
+
+    it('includes an allContext not strictly equal to the original', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+
+  describe('DELETE CONTEXT', () => {
+    let action;
+    beforeEach(() => {
+      state = {
+        allContext: [
+          {
+            name: 'Theme Context',
+            values: [],
+            components: []
+          },
+          {
+            name: 'To be deleted',
+            values: [],
+            components: []
+          }
+        ]
+      };
+
+      action = {
+        type: 'DELETE_CONTEXT',
+        payload: {
+          name: 'Theme Context'
+        }
+      };
+    });
+
+    it('removes specified context from the state', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext.length).toEqual(1);
+    });
+
+    it('includes an allContext not strictly equal to the original', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+
+  describe('ADD_COMPONENT_TO_CONTEXT', () => {
+    beforeEach(() => {
+      state = {
+        allContext: [
+          {
+            name: 'Theme Context',
+            values: [],
+            components: []
+          }
+        ]
+      };
+    });
+
+    const action = {
+      type: 'ADD_COMPONENT_TO_CONTEXT',
+      payload: {
+        context: {
+          name: 'Theme Context'
+        },
+        component: {
+          name: 'Main Component'
+        }
+      }
+    };
+
+    it('adds a new component to the specified context', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext[0].components.length).toEqual(1);
+      expect(allContext[0].components[0]).toEqual('Main Component');
+    });
+
+    it('includes an allContext not strictly equal to the original', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+});

__tests__/contextReducer.test.ts

@@ -0,0 +1,165 @@
+import subject from '../app/src/redux/reducers/slice/contextReducer';
+
+describe('Context Reducer', () => {
+  let state;
+
+  beforeEach(() => {
+    state = {
+      allContext: []
+    };
+  });
+
+  describe('default state', () => {
+    it('should return a default state when given an undefined input', () => {
+      expect(subject(undefined, { type: undefined })).toEqual(state);
+    });
+  });
+
+  describe('unrecognized action types', () => {
+    it('should return the original state without any duplication', () => {
+      expect(subject(state, { type: 'REMOVE_STATE' })).toBe(state);
+    });
+  });
+
+  describe('ADD_CONTEXT', () => {
+    const action = {
+      type: 'ADD_CONTEXT',
+      payload: {
+        name: 'Theme Context'
+      }
+    };
+
+    it('adds a context', () => {
+      const { allContext } = subject(state, action);
+      expect(allContext[0]).toEqual({
+        name: 'Theme Context',
+        values: [],
+        components: []
+      });
+    });
+
+    it('returns a state object not strictly equal to the original', () => {
+      const newState = subject(state, action);
+      expect(newState).not.toBe(state);
+    });
+
+    it('should immutably update the nested state object', () => {
+      const { allContext } = subject(state, action);
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+
+  describe('ADD_CONTEXT_VALUES', () => {
+    beforeEach(() => {
+      state = {
+        allContext: [
+          {
+            name: 'Theme Context',
+            values: [],
+            components: []
+          }
+        ]
+      };
+    });
+
+    const action = {
+      type: 'ADD_CONTEXT_VALUES',
+      payload: {
+        name: 'Theme Context',
+        inputKey: 'Theme Color',
+        inputValue: 'Dark'
+      }
+    };
+
+    it('adds a key-value pair to values array of the specified context', () => {
+      const { allContext } = subject(state, action);
+      expect(allContext[0].values.length).toEqual(1);
+      expect(allContext[0].values[0].key).toEqual('Theme Color');
+      expect(allContext[0].values[0].value).toEqual('Dark');
+    });
+
+    it('includes an allContext not strictly equal to the original', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+
+  describe('DELETE CONTEXT', () => {
+    let action;
+    beforeEach(() => {
+      state = {
+        allContext: [
+          {
+            name: 'Theme Context',
+            values: [],
+            components: []
+          },
+          {
+            name: 'To be deleted',
+            values: [],
+            components: []
+          }
+        ]
+      };
+
+      action = {
+        type: 'DELETE_CONTEXT',
+        payload: {
+          name: 'Theme Context'
+        }
+      };
+    });
+
+    it('removes specified context from the state', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext.length).toEqual(1);
+    });
+
+    it('includes an allContext not strictly equal to the original', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+
+  describe('ADD_COMPONENT_TO_CONTEXT', () => {
+    beforeEach(() => {
+      state = {
+        allContext: [
+          {
+            name: 'Theme Context',
+            values: [],
+            components: []
+          }
+        ]
+      };
+    });
+
+    const action = {
+      type: 'ADD_COMPONENT_TO_CONTEXT',
+      payload: {
+        context: {
+          name: 'Theme Context'
+        },
+        component: {
+          name: 'Main Component'
+        }
+      }
+    };
+
+    it('adds a new component to the specified context', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext[0].components.length).toEqual(1);
+      expect(allContext[0].components[0]).toEqual('Main Component');
+    });
+
+    it('includes an allContext not strictly equal to the original', () => {
+      const { allContext } = subject(state, action);
+
+      expect(allContext).not.toBe(state.allContext);
+    });
+  });
+});