Merge pull request #10 from tsully/reusable

New canvas rendering logic and useReducer for state management

Author: andrewjcho84

src/HTMLTypes.ts

@@ -0,0 +1,95 @@
+import { HTMLType } from './interfaces/InterfacesNew';
+
+import ImageIcon from '@material-ui/icons/Image';
+import ParagraphIcon from '@material-ui/icons/LocalParking';
+import FormIcon from '@material-ui/icons/Description';
+import HeaderIcon from '@material-ui/icons/TextFormat';
+import ButtonIcon from '@material-ui/icons/EditAttributes';
+import LinkIcon from '@material-ui/icons/Link';
+import ListIcon from '@material-ui/icons/List';
+
+const HTMLTypes: HTMLType[] = [
+  {
+    id: 1,
+    tag: 'img',
+    name: 'Image',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: ImageIcon
+  },
+  {
+    id: 2,
+    tag: 'form',
+    name: 'Form',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: FormIcon
+  },
+  {
+    id: 3,
+    tag: 'li',
+    name: 'List',
+    style: { color: 'purple' },
+    placeHolderShort: 'This is a list',
+    placeHolderLong: '',
+    icon: ListIcon
+  },
+  {
+    id: 4,
+    tag: 'button',
+    name: 'Button',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: ButtonIcon
+  },
+  {
+    id: 6,
+    tag: 'a',
+    name: 'Link',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: LinkIcon
+  },
+  {
+    id: 8,
+    tag: 'p',
+    name: 'Paragraph',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: ParagraphIcon
+  },
+  {
+    id: 9,
+    tag: 'h1',
+    name: 'Header 1',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: HeaderIcon
+  },
+  {
+    id: 10,
+    tag: 'h2',
+    name: 'Header 2',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: HeaderIcon
+  },
+  {
+    id: 11,
+    tag: 'div',
+    name: 'Div',
+    style: {},
+    placeHolderShort: '',
+    placeHolderLong: '',
+    icon: HeaderIcon
+  }
+];
+
+export default HTMLTypes;

src/components/AppNew.tsx

@@ -1,15 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useReducer } from 'react';
 import '../public/styles/style.css';
 import '../public/styles/styleNew.css';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import AppContainer from '../containers/AppContainer';
 import { initialState, stateContext } from '../context/context';
-// import { Context } from '../interfaces/InterfacesNew';
+import reducer from '../reducers/componentReducerNew';
+// import { Context, State } from '../interfaces/InterfacesNew';
 
 // Intermediary component to wrap main App component with higher order provider components
 export const App = (): JSX.Element => {
-  const [context, setContext] = useState(initialState);
+  // const [context, setContext] = useState(initialState);
+  const [state, dispatch] = useReducer(reducer, initialState);
   return (
     <div className="app">
       <DndProvider backend={HTML5Backend}>
@@ -18,7 +20,7 @@ export const App = (): JSX.Element => {
         >
           ReacType
         </header>
-        <stateContext.Provider value={[context, setContext]}>
+        <stateContext.Provider value={[state, dispatch]}>
           <AppContainer />
         </stateContext.Provider>
       </DndProvider>

src/components/left/ComponentPanelItemNew.tsx

@@ -4,15 +4,19 @@ import Grid from '@material-ui/core/Grid';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 
-const ComponentPanelItem: React.FC<{name: String, id: Number, root: Boolean, focusClick: any}> = ({name, id, root, focusClick}) => {
+const ComponentPanelItem: React.FC<{
+  name: String;
+  id: Number;
+  root: Boolean;
+  focusClick: any;
+}> = ({ name, id, root, focusClick }) => {
   // useDrag hook allows components in left panel to be drag source
   const [{ isDragging }, drag] = useDrag({
     item: {
       type: ItemTypes.INSTANCE,
       newInstance: true,
-      category: 'Component',
-      name,
-      id
+      instanceType: 'Component',
+      instanceId: id
     },
     canDrag: !root,
     collect: (monitor: any) => ({
@@ -31,15 +35,17 @@ const ComponentPanelItem: React.FC<{name: String, id: Number, root: Boolean, foc
         // minWidth: '340px',
         height: '80px',
         marginBottom: '15px',
-        border: root ? '2px dotted rgba(255,255,255, 0.45)' : '2px solid rgba(255,255,255, 1)',
-        borderRadius: root ? '' : '8px',
+        border: root
+          ? '2px dotted rgba(255,255,255, 0.45)'
+          : '2px solid rgba(255,255,255, 1)',
+        borderRadius: root ? '' : '8px'
       }}
     >
-
-      <div className="compPanelItem" onClick={focusClick}> 
-        <h3>{id} {name}</h3>
+      <div className="compPanelItem" onClick={focusClick}>
+        <h3>
+          {id} {name}
+        </h3>
       </div>
-      
     </Grid>
   );
 };