Merge pull request #3 from oslabs-beta/frontEnd

Merge FrontEnd with Master

Author: slhoehn

app/src/components/bottom/BottomTabs.tsx

@@ -25,6 +25,8 @@ const BottomTabs = () => {
 
   // breaks if handleChange is commented out
   const handleChange = (event: React.ChangeEvent, value: number) => {
+    // console.log('value', value)
+    // console.log('setTab', setTab)
     setTab(value);
   };
  // Allows users to toggle project between "next.js" and "Classic React"
@@ -34,6 +36,7 @@ const BottomTabs = () => {
     dispatch({ type: 'CHANGE PROJECT TYPE', payload: { projectType } });
   };
   const { components, HTMLTypes } = state;
+  // console.log('components', components)
 
   const changeTheme = e => {
     setTheme(e.target.value);

app/src/components/bottom/CodePreview.tsx

@@ -16,7 +16,9 @@ const CodePreview: React.FC<{
   setTheme: any | null;
   }> = ({ theme, setTheme }) => {
   const wrapper = useRef();
+  // console.log('wrapper', wrapper)
   const dimensions = useResizeObserver(wrapper);
+  // console.log('dimensions', dimensions)
   const { width, height } =
     dimensions || 0;
 
@@ -25,7 +27,7 @@ const CodePreview: React.FC<{
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
-
+console.log('currentComp in CodePreview', currentComponent)
   const handleCodeSnipChange = val => {
     currentComponent.code = val;
   };

app/src/components/left/HTMLPanel.tsx

@@ -184,7 +184,7 @@ const HTMLPanel = (props): JSX.Element => {
                 type="text"
                 name="Tag"
                 value={tag}
-                autocomplete="off"
+                autoComplete="off"
                 onChange={handleTagChange}
                 className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
                 style={{ marginBottom: '10px' }}
@@ -206,7 +206,7 @@ const HTMLPanel = (props): JSX.Element => {
               name="Tag Name"
               value={name}
               onChange={handleNameChange}
-              autocomplete="off"
+              autoComplete="off"
               className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
             />
 

app/src/components/main/Canvas.tsx

@@ -12,7 +12,8 @@ function Canvas() {
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
-  
+  // console.log('currentComponent', currentComponent)
+
   // changes focus of the canvas to a new component / child
   const changeFocus = (componentId: number, childId: number | null) => {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
@@ -31,6 +32,7 @@ function Canvas() {
       if (didDrop) {
         return;
       }
+      console.log('item', item)
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance) {
         dispatch({
@@ -47,6 +49,7 @@ function Canvas() {
         dispatch({
           type: 'CHANGE POSITION',
           payload: {
+            // name: item.name,
             currentChildId: item.childId,
             newParentChildId: null
           }

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -12,11 +12,13 @@ function DirectChildHTMLNestable({
   type,
   typeId,
   style,
-  children
+  children,
+  name,
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
-
+  // console.log('name', name)
+  // console.log('children', children)
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
   const HTMLType: HTMLType = state.HTMLTypes.find(
@@ -31,7 +33,8 @@ function DirectChildHTMLNestable({
       newInstance: false,
       childId: childId,
       instanceType: type,
-      instanceTypeId: typeId
+      instanceTypeId: typeId,
+      name: name //added code <--
     },
     canDrag: HTMLType.id !== 1000, // dragging not permitted if element is separator
     collect: (monitor: any) => {
@@ -58,7 +61,7 @@ function DirectChildHTMLNestable({
           payload: {
             type: item.instanceType,
             typeId: item.instanceTypeId,
-            childId: childId
+            childId: childId,
           }
         });
       }
@@ -68,7 +71,7 @@ function DirectChildHTMLNestable({
           type: 'CHANGE POSITION',
           payload: {
             currentChildId: item.childId,
-            newParentChildId: childId
+            newParentChildId: childId,
           }
         });
       }
@@ -111,6 +114,7 @@ function DirectChildHTMLNestable({
   drag(drop(ref));
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={ref}>
+      {HTMLType.placeHolderShort}
       {renderChildren(children)}
     </div>
   );

app/src/context/initialState.ts

@@ -8,7 +8,7 @@ const initialState: State = {
   components: [
     {
       id: 1,
-      name: 'index',
+      name: 'App',
       style: {},
       code: '<div>Drag in a component or HTML element into the canvas!</div>',
       children: [],

app/src/helperFunctions/generateCode.ts

@@ -34,6 +34,7 @@ const generateUnformattedCode = (
     // declare an array of enriched children
 
     const enrichedChildren = currentComponent.children.map((elem: any) => {
+      //enrichedChildren is iterating through the children array
       const child = { ...elem };
 
       // check if child is a component
@@ -52,7 +53,8 @@ const generateUnformattedCode = (
         child['tag'] = referencedHTML.tag;
         if (
           referencedHTML.tag === 'div' ||
-          referencedHTML.tag === 'separator'
+          referencedHTML.tag === 'separator' || 
+          referencedHTML.tag === 'form'
         ) {
           child.children = getEnrichedChildren(child);
         }
@@ -95,9 +97,9 @@ const generateUnformattedCode = (
               child.tag
             }>`;
           } else if (child.tag === 'form') {
-            return `<${child.tag}${formatStyles(child.style)}>FORM</${
-              child.tag
-            }>`;
+            return `<${child.tag}${formatStyles(
+              child.style
+              )}>${writeNestedElements(child.children)}</${child.tag}>`;
           } else if (child.tag === 'p') {
             return `<${child.tag}${formatStyles(
               child.style

app/src/helperFunctions/renderChildren.tsx

@@ -30,8 +30,8 @@ const renderChildren = (children: ChildElement[]) => {
         />
       );
     }
-    // child is a non-nestable type of HTML element (everything except for divs)
-    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000) {
+    // child is a non-nestable type of HTML element (everything except for divs and forms)
+    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2) {
       return (
         <DirectChildHTML
           childId={childId}
@@ -43,8 +43,8 @@ const renderChildren = (children: ChildElement[]) => {
         />
       );
     }
-    // child is a nestable type of HTML element (divs)
-    else if (type === 'HTML Element' && typeId === 11) {
+    // child is a nestable type of HTML element (divs and forms)
+    else if (type === 'HTML Element' && (typeId === 11 || typeId === 2)) {
       return (
         <DirectChildHTMLNestable
           childId={childId}

app/src/tree/useResizeObserver.js

@@ -1,14 +1,14 @@
-import { useEffect, useState } from "react";
-import ResizeObserver from "resize-observer-polyfill";
+import { useEffect, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 
-const useResizeObserver = ref => {
+const useResizeObserver = (ref) => {
   const [dimensions, setDimensions] = useState(null);
   useEffect(() => {
     // the element being observed (div with green border)
     const observeTarget = ref.current;
-    const resizeObserver = new ResizeObserver(entries => {
-        entries.forEach(entry => {
-          // contentRect is an object containing the dimensions of the observed element
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        // contentRect is an object containing the dimensions of the observed element
         setDimensions(entry.contentRect);
       });
     });

package.json

@@ -10,21 +10,26 @@
     "Adam Singer",
     "Alex Wolinsky",
     "Andrew Cho",
+    "Anthony Torrero",
     "Brian Han",
     "Charles Finocchiaro",
     "Chelsey Fewer",
     "Christian Padilla",
     "Diego Vazquez",
+    "Edward Park",
+    "Elena Conn",
     "Eliot Nguyen",
     "Fredo Chen",
     "Jesse Zuniga",
     "Jin Soo Lim",
     "Julie Wu",
+    "Khuong Nguyen",
     "Linh Tran",
     "Luke Madden",
     "Mitchel Severe",
     "Natalie Vick",
     "Sean Sadykoff",
+    "Shana Hoehn",
     "Shlomo Porges",
     "Stormi Hashimoto",
     "Sophia Huttner",