Merge pull request #16 from oslabs-beta/ronak/css

Ronak/css

Author: jakepino

package-lock.json

@@ -9,6 +9,10 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        margin: 0;
+        border: 0.3rem solid transparent;
+        border-image: linear-gradient(45deg, #971afa, #3bbde8);
+        border-image-slice: 1;
       }
 
       h3 {
@@ -30,22 +34,23 @@
         width: auto;
       }
 
-      .loader {
+      /* .loader {
         border: 5px solid #971afa;
         border-radius: 50%;
         border-top: 5px solid #272727;
         width: 40px;
         height: 40px;
         -webkit-animation: spin 1s linear infinite;
-        /* Safari */
+         Safari
         animation: spin 1s linear infinite;
         margin: auto;
         left: 0;
         right: 0;
         top: 0px;
         bottom: 0;
         position: fixed;
-      }
+        border: 0.2rem solid #971afa;
+      } */
 
       /* Safari */
       @-webkit-keyframes spin {

src/assets/splash.html

@@ -6,7 +6,7 @@ import CodePreview from './CodePreview';
 import '../stylesheets/BodyContainer.css';
 import { DragDropContext } from 'react-beautiful-dnd';
 import { useDispatch, useSelector } from 'react-redux';
-import { addComponent, combineComponents, refreshCode, reorderComponent } from '../redux/canvasSlice';
+import { addComponent, combineComponents, refreshCode, reorderComponent, saveComponentCode } from '../redux/canvasSlice';
 // import ExportModal from './ExportModal';
 
 const Body = () => {
@@ -36,6 +36,7 @@ const Body = () => {
       dispatch(reorderComponent(dragItem));
       dispatch(refreshCode());
     }
+    dispatch(saveComponentCode());
   }
 
   // const show = useSelector((state) => state.nav.showModal);

src/components/Body.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import Editor from '@monaco-editor/react';
 import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { updateCss } from '../redux/canvasSlice';
 
 const CSSCodeEditor = () => {
   const theme = useSelector((state) => state.theme.currTheme);
   const cssCode = useSelector((state) => state.canvas.cssCode);
+  const dispatch = useDispatch();
 
-  const onChange = (newValue) => console.log('cssEditorCode after edits: ', newValue);
+  const onChange = (newValue) =>{
+    console.log('cssEditorCode after edits: ', newValue);
+    dispatch(updateCss(newValue));
+  }
 
   console.log('code in CSSCodeEditor: ', cssCode);
 

src/components/CSSCodeEditor.jsx

@@ -2,17 +2,21 @@ import React from 'react';
 import DeleteCanvasItem from './DeleteCanvasItem';
 import '../stylesheets/Canvas.css';
 import { useDispatch, useSelector } from 'react-redux';
-import { renderComponentCode, saveComponentCode } from '../redux/canvasSlice';
+import { renderComponentCode, saveComponentCode, setCurrentFile } from '../redux/canvasSlice';
 
 const CanvasItem = (props) => {
   const dispatch = useDispatch();
-  let currentFile = useSelector((state) => state.canvas.currentFile);
-  const currentCode = useSelector((state) => state.canvas.code);
+  // let currentFile = useSelector((state) => state.canvas.currentFile);
+  const custom = useSelector((state) => state.canvas.customComponents);
 
   function onClick(e) {
     const name = e.target.innerText + '.jsx';
-    dispatch(saveComponentCode({ currentCode, currentFile }));
-    dispatch(renderComponentCode({ name }));
+    // dispatch(saveComponentCode({ currentCode, currentFile }));
+    if (custom.includes(e.target.innerText)) {
+      dispatch(saveComponentCode());
+      dispatch(setCurrentFile(name));
+      dispatch(renderComponentCode({ name }));
+    }
   }
 
   return (
@@ -26,8 +30,10 @@ const CanvasItem = (props) => {
         id={props.ind + '-' + props.name}
         onClick={onClick}
       >
-        <div className='w-1/3 text-center max-w-7xl'>
-          <p key={props.ind} id='canvas-item-label'>{props.name}</p>
+        <div className='text-center max-w-7xl'>
+          <p key={props.ind} id='canvas-item-label'>
+            {props.name}
+          </p>
         </div>
 
         <div className='flex justify-center items-center absolute top-0 right-0 col-span-1'>

src/components/CanvasItem.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { createComponent, refreshCode } from '../redux/canvasSlice';
+import { createComponent, refreshCode, saveComponentCode } from '../redux/canvasSlice';
 import '../stylesheets/CompCreator.css';
 
 const CompCreator = () => {
@@ -15,6 +15,7 @@ const CompCreator = () => {
     if (!custom.includes(text)) {
       dispatch(createComponent({ text }));
       dispatch(refreshCode());
+      dispatch(saveComponentCode());
     } else {
       alert('Component with that name already exists');
     }

src/components/CompCreator.jsx

@@ -25,11 +25,12 @@ import "./styles.css";
 var mountNode = document.getElementById("root");
 ReactDOM.render(<App />, mountNode);`;
 
-  const tags = snapshot.tags.map(ele => {
+  const appFile = snapshot.files[0];
+  const tags = appFile.fileTags.map((ele) => {
     return ele.slice(1);
   });
 
-  const templateAppJS = `${snapshot.imports}import { hot } from 'react-hot-loader/root';
+  const templateAppJS = `${appFile.fileImports.join('')}import { hot } from 'react-hot-loader/root';
 
 const App = () => {
   return (
@@ -43,33 +44,6 @@ const App = () => {
 
 export default hot(App);`;
 
-  const templateCSS = `html {
-  box-sizing: border-box;
-  height: 100%;
-}
-body { 
-  margin: 0;
-  padding-top: 20%;
-  overflow: hidden;
-  background-color: #272727;
-  font-family: "Helvetica Neue";
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-}
-h1 {
-  color: white;
-  font-size: 3rem;
-}
-p {
-  color: white;
-  font-size: 1.5rem;
-}
-.default-spans {
-  color: #4338ca;
-}`;
-
   const templatePackage = `{
 "name": "exported-project",
 "version": "1.0.0",
@@ -223,7 +197,7 @@ module.exports = config;`;
   ]
 }`;
 
-  const path = df();
+  const path = df(); //module to find download folder
   const name = 'Exported_Project_' + Math.floor(Math.random() * 100).toString();
 
   //iterate through files array, create file for each, fill with its code key
@@ -235,10 +209,12 @@ module.exports = config;`;
     fse.outputFile(path + `/${name}/src/${curr.name}`, curr.fileCode);
   }
 
+  const css = snapshot.cssCode;
+
   fse.outputFile(path + `/${name}/dist/index.html`, templateHTML);
   fse.outputFile(path + `/${name}/src/index.js`, templateIndexJS);
   fse.outputFile(path + `/${name}/src/App.js`, templateAppJS);
-  fse.outputFile(path + `/${name}/src/styles.css`, templateCSS);
+  fse.outputFile(path + `/${name}/src/styles.css`, css);
   fse.outputFile(path + `/${name}/.gitignore`, templateGitIgnore);
   fse.outputFile(path + `/${name}/package.json`, templatePackage);
   fse.outputFile(path + `/${name}/README.md`, templateReadMe);

src/components/ExportApp.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Editor, { monaco, loader } from '@monaco-editor/react';
-import { renderComponentCode, saveComponentCode } from '../redux/canvasSlice';
+import { renderComponentCode, saveComponentCode, updateJs } from '../redux/canvasSlice';
 import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 const path = require('path');
 
@@ -23,8 +24,14 @@ loader.config({
 const JSCodeEditor = () => {
   const theme = useSelector((state) => state.theme.currTheme);
   const code = useSelector((state) => state.canvas.code);
-
-  const onChange = (newValue) => console.log('updatedValue:', newValue);
+  const dispatch = useDispatch();
+
+  const onChange = (newValue) => {
+    console.log('updatedValue:', newValue);
+    dispatch(updateJs(newValue));
+    dispatch(saveComponentCode());
+  }
+    
   console.log('code in JSCodeEditor: ', code);
 
   return (

src/components/JSCodeEditor.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import '../stylesheets/Navigation.css';
-import { toggleLeftPanel, saveComponentCode } from '../redux/navigationSlice';
-import { clearProject } from '../redux/canvasSlice';
+import { toggleLeftPanel } from '../redux/navigationSlice';
+import { clearProject, saveComponentCode } from '../redux/canvasSlice';
 import { useSelector, useDispatch } from 'react-redux';
 import exportApp from './ExportApp';
 import { FaPencilRuler, FaFolderOpen, FaSave, FaDownload, FaTrash, FaRegWindowRestore } from 'react-icons/fa';
@@ -28,6 +28,10 @@ const Navigation = () => {
     if (confirm('Are you sure you want to clear project?')) dispatch(clearProject());
   };
 
+  const exportClick = () => {
+    exportApp(snapshot);
+  }
+
   // component code should save before exporting
   // let currentFile = useSelector((state) => state.canvas.currentFile);
   // const currentCode = useSelector((state) => state.canvas.code);

src/components/Navigation.jsx

@@ -58,7 +58,7 @@ const initialState = {
       fileCode: '',
       fileTags: [],
       fileImports: [],
-      fileComponents: [], 
+      fileComponents: [],
     },
   ],
   currentFile: 'App.js',
@@ -69,12 +69,10 @@ export const canvasSlice = createSlice({
   initialState,
   reducers: {
     addComponent: (state, action) => {
-      
       state.components.splice(action.payload.destination.index, 0, action.payload.draggableId);
       state.tags.splice(action.payload.destination.index, 0, '\n\t\t\t' + state.codeList[action.payload.draggableId]);
     },
     deleteComponent: (state, action) => {
-      
       if (confirm(`Delete this component?\n${action.payload.name + ' in position ' + action.payload.index}`)) {
         state.components.splice(action.payload.index, 1);
         state.tags.splice(action.payload.index, 1);
@@ -90,7 +88,6 @@ export const canvasSlice = createSlice({
       }
     },
     reorderComponent: (state, action) => {
-      
       const [item] = state.components.splice(action.payload.source.index, 1);
       state.components.splice(action.payload.destination.index, 0, item);
       const [tag] = state.tags.splice(action.payload.source.index, 1);
@@ -179,6 +176,12 @@ export const canvasSlice = createSlice({
         }
       });
     },
+    updateCss: (state, action) => {
+      state.cssCode = action.payload;
+    },
+    updateJs: (state, action) => {
+      state.code = action.payload;
+    },
   },
 });
 
@@ -194,6 +197,8 @@ export const {
   renderComponentCode,
   saveComponentCode,
   setCurrentFile,
+  updateCss,
+  updateJs,
 } = canvasSlice.actions;
 
 export default canvasSlice.reducer;