Merge pull request #11 from oslabs-beta/liam/codepreview

Added code preview functionality

Author: dentonwong

app/src/components/bottom/CodePreview.tsx

@@ -87,6 +87,7 @@ const CodePreview: React.FC<{
     <div
       ref={wrapper}
       style={{
+        top: '1vw',
         height: '100%',
         maxWidth: '100%',
         justifyContent: 'center'

app/src/components/main/Canvas.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import { Component, DragItem } from '../../interfaces/Interfaces';
@@ -9,7 +9,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
   changeFocus,
   addChild,
-  snapShotAction
+  snapShotAction,
+  toggleCodePreview
 } from '../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../redux/store';
 
@@ -18,7 +19,7 @@ function Canvas(props): JSX.Element {
     (store: RootState) => ({
       state: store.appState,
       contextParam: store.contextSlice,
-      isDarkMode: store.darkMode.isDarkMode
+      isDarkMode: store.darkMode.isDarkMode, 
     })
   );
   const dispatch = useDispatch();
@@ -150,15 +151,15 @@ function Canvas(props): JSX.Element {
     currentComponent.style
   );
   return (
-    <div
-      className={'componentContainer'}
-      ref={drop}
-      data-testid="drop"
-      style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
-      onClick={onClickHandler}
-    >
-      {renderChildren(currentComponent.children)}
-    </div>
+      <div
+        className={'componentContainer'}
+        ref={drop} 
+        data-testid="drop"
+        style={!isDarkMode ? canvasStyle : darkCombinedCanvasStyle}
+        onClick={onClickHandler}
+      >
+        {renderChildren(currentComponent.children)}
+      </div>
   );
 }
 

app/src/components/main/CanvasContainer.tsx

@@ -1,19 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Canvas from './Canvas';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
+import CodePreview from '../bottom/CodePreview';
+import { toggleCodePreview } from '../../redux/reducers/slice/appStateSlice';
+import { Button } from '@mui/material';
 
 // The CanvasContainer sets the boundaries on the width/height of the canvas
 function CanvasContainer(props): JSX.Element {
+  const [theme, setTheme] = useState('solarized_light'); // theme for ACE editor, taken from BottomTabs
+  const { state } = useSelector(
+    (store: RootState) => ({
+      state: store.appState,
+    })
+  );
+  const dispatch = useDispatch();
+
+  // onClickCodePreview swaps the rendered component from the canvas to the code preview editor
+  const onClickCodePreview = () => {
+    dispatch(toggleCodePreview());
+    console.log(state.codePreview);
+  }
+
   const canvasContainerStyle = {
     width: '100%',
     backgroundColor: 'lightgrey',
     border: '2px Solid grey',
     overflow: 'auto',
   };
 
+  const codePreviewStyle = {
+    position: 'absolute',
+    width: 'max-content',
+    height: 'max-content',
+    bottom: '100px', 
+    right: '51vw', 
+    textAlign: 'center',
+    color: '#ffffff', 
+    backgroundColor: '#151515'
+  } as const;
+
   return (
     <div style={canvasContainerStyle}>
-      
-      <Canvas isThemeLight={props.isThemeLight}/>
+      {state.codePreview && <CodePreview theme={theme} setTheme={setTheme}/>}
+      {!state.codePreview && <Canvas isThemeLight={props.isThemeLight}/>}
+      <Button
+        style={codePreviewStyle}
+        onClick={onClickCodePreview}
+      >
+        Code Preview
+      </Button>
     </div>
   );
 }

app/src/interfaces/Interfaces.ts

@@ -15,7 +15,8 @@ export interface State {
   nextChildId: number;
   HTMLTypes: HTMLType[];
   tailwind: boolean;
-  stylesheet: string
+  stylesheet: string;
+  codePreview: boolean;
 }
 
 export interface ChildElement {

app/src/redux/reducers/slice/appStateSlice.ts

@@ -39,7 +39,8 @@ export const initialState: State = {
   nextTopSeparatorId: 1000,
   HTMLTypes: HTMLTypes, // left as is for now
   tailwind: false,
-  stylesheet: ''
+  stylesheet: '', 
+  codePreview: false, 
 };
 
 let separator = initialState.HTMLTypes[1];
@@ -1261,6 +1262,11 @@ const appStateSlice = createSlice({
     },
     updateStylesheet: (state, action) => {
       state.stylesheet = action.payload;
+    },
+
+    // toggles the active code preview editor for conditional rendering
+    toggleCodePreview: (state) => {
+      state.codePreview = !state.codePreview;
     }
   }
 });
@@ -1301,7 +1307,8 @@ export const {
   //configToggle,
   snapShotAction,
   allCooperativeState,
-  updateStylesheet
+  updateStylesheet, 
+  toggleCodePreview
 } = appStateSlice.actions;
 
 // Exports so we can combine in rootReducer