nextjs functionality adapted for new project structure

Author: fredosauce

app/src/components/left/ComponentPanel.tsx

@@ -14,18 +14,19 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   inputField: {
-    
+    marginTop: '15px'
   },
   inputWrapper: {
-    height: '110px',
+    height: '115px',
     textAlign: 'center',
     display: 'flex',
     justifyContent: 'center',
-    paddingLeft: '35px'
+    paddingLeft: '35px',
+    marginBottom: '15px'
   },
   panelWrapper: {
-    marginTop: '35px',
-    width: '100%'
+    width: '100%',
+    marginTop: '15px',
   },
   panelWrapperList: {
     maxHeight: '675px',

app/src/containers/LeftContainer.tsx

@@ -56,7 +56,8 @@ const LeftContainer = (): JSX.Element => {
     'Export components with application files',
     'Export project as Next.js application'
   ];
-  const [genOption, setGenOption] = useState(1);
+  // const [genOption, setGenOption] = useState(1);
+  let genOption = 0;
   // state to keep track of whether there should be a modal
   const [modal, setModal] = useState(null);
 
@@ -116,20 +117,27 @@ const LeftContainer = (): JSX.Element => {
         ))}
       </List>
     );
-    const chooseAppDir = () => window.api.chooseAppDir();
+    // const chooseAppDir = () => {
+    //   console.log('CALLED CHOOSE APP DIR: ', genOption);
+    //   window.api.chooseAppDir();
+    // };
+    
     // helper function called by showGenerateAppModal
     // this function will prompt the user to choose an app directory once they've chosen their export option
     const chooseGenOptions = (genOpt: number) => {
       // set export option: 0 --> export only components, 1 --> export full project
-      console.log('in chooseGenOptions');
-      setGenOption(genOpt);
-      console.log('Gen option is ', genOpt);
+      
+      // setGenOption(genOpt);
+      genOption = genOpt;
+      console.log('CALLED CHOOSE GEN OPTION: ', genOption);
       // closeModal
       // exportProject('/Users', 'NEW PROJECT', genOpt, state.components, state.rootComponents);
       // closeModal();
       // Choose app dir
       // window.api.chooseAppDir;
-      chooseAppDir();
+      
+      window.api.chooseAppDir();
+      
       // closeModal
 
       closeModal();
@@ -139,7 +147,7 @@ const LeftContainer = (): JSX.Element => {
     // when a directory is chosen, the callback will export the project to the chosen folder
     // Note: this listener is imported from the main process via preload.js
     window.api.appDirChosen(path => {
-      console.log('App dir chosen : ', path);
+      console.log('CALLED APPDIRCHOSEN: ', genOption);
       exportProject(path, 'NEW PROJECT', genOption, state.components, state.rootComponents);
     });
 

app/src/helperFunctions/generateNextCode.ts

@@ -116,13 +116,14 @@ const generateUnformattedCode = (comps: Component[], componentId: number, rootCo
 
 // formats code with prettier linter
 const formatCode = (code: string) => {
-  return format(code, {
-    singleQuote: true,
-    trailingComma: 'es5',
-    bracketSpacing: true,
-    jsxBracketSameLine: true,
-    parser: 'babel'
-  });
+  return window.api.formatCode(code);
+  // return format(code, {
+  //   singleQuote: true,
+  //   trailingComma: 'es5',
+  //   bracketSpacing: true,
+  //   jsxBracketSameLine: true,
+  //   parser: 'babel'
+  // });
 };
 
 // generate code based on component heirarchy and then return the rendered code

app/src/utils/createNextApp.util.ts

@@ -1,4 +1,4 @@
-import fs from 'fs';
+// import fs from 'fs';
 import createNextFiles from './createNextFiles.util';
 import { Component } from '../interfaces/InterfacesNew';
 
@@ -47,7 +47,7 @@ export const createPackage = (path, appName) => {
   }
 }  
   `;
-  fs.writeFile(filePath, data, err => {
+  window.api.writeFile(filePath, data, err => {
     if (err) {
       console.log('package.json error:', err.message);
     } else {
@@ -59,7 +59,7 @@ export const createPackage = (path, appName) => {
 export const createTsConfig = (path, appName) => {
   const filePath = `${path}/${appName}/tsconfig.json`;
   //running 'next dev' will autopopulate this with default values
-  fs.writeFile(filePath, '', err => {
+  window.api.writeFile(filePath, '', err => {
     if (err) {
       console.log('TSConfig error:', err.message);
     } else {
@@ -84,7 +84,7 @@ export const createDefaultCSS = (path, appName, components) => {
   components.forEach(comp => {
     data += compToCSS(comp);
   })
-  fs.writeFile(filePath, data, err => {
+  window.api.writeFile(filePath, data, err => {
     if (err) {
       console.log('global.css error:', err.message);
     } else {
@@ -98,12 +98,12 @@ export const initFolders = (path:string, appName: string) => {
   let dirPages;
   let dirComponents;
   dir = `${dir}/${appName}`;
-  if(!fs.existsSync(dir)){
-    fs.mkdirSync(dir);
+  if(!window.api.existsSync(dir)){
+    window.api.mkdirSync(dir);
     dirPages = `${dir}/pages`;
-    fs.mkdirSync(dirPages);
+    window.api.mkdirSync(dirPages);
     dirComponents = `${dir}/components`;
-    fs.mkdirSync(dirComponents);
+    window.api.mkdirSync(dirComponents);
   }
 }
 
@@ -125,7 +125,7 @@ export const createBaseTsx = (path, appName) => {
   
   export default Base;
   `;
-  fs.writeFile(filePath, data, err => {
+  window.api.writeFile(filePath, data, err => {
     if (err) {
       console.log('_app.tsx error:', err.message);
     } else {

app/src/utils/createNextFiles.util.ts

@@ -32,7 +32,7 @@ const createNextFiles = (
       fileName = `${dir}/components/${component.name}.tsx`
     }
     const newPromise = new Promise((resolve, reject) => {
-      fs.writeFileSync(
+      window.api.writeFileSync(
         fileName,
         code,
         (err: any) => {

app/src/utils/exportProject.util.ts

@@ -11,14 +11,17 @@ const exportProject = (
   rootComponents: number[]
 ) => {
   if (genOption === 1) {
+    console.log('in exportProject, genOption 1')
     createApplicationUtil({ path, appName, components })
       .then(() => {
         console.log('CreateApplicationUtil has finished');
       })
       .catch(err => console.log(err));
   } else if (genOption === 0) {
+    console.log('in exportProject, genOption 0')
     createFiles(components, path, appName, false);
   } else if (genOption === 2) {
+    console.log('in exportProject, genOption 2')
     createNextApp({ path, appName, components, rootComponents})
     .then(() => {
       console.log('CreateNextApp has finished');