Skip to content

Commit 3ae7532

Browse files
amanjagdevamanjagdev
committed
updated with routing changes and done bug fixes
1 parent 26aed21 commit 3ae7532

File tree

4 files changed

+37
-23
lines changed

4 files changed

+37
-23
lines changed

Diff for: ‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
1111
"react-scripts": "3.4.1",
12-
"recoil": "^0.0.10"
12+
"recoil": "^0.0.10",
13+
"shortid": "^2.2.15"
1314
},
1415
"scripts": {
1516
"start": "react-scripts start",

Diff for: ‎src/components/Settings.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import shortid from 'shortid';
23
import { useRecoilState, useRecoilValue } from 'recoil'
34

45
import createAppHelper from '../helpers/createAppHelper'
@@ -18,11 +19,12 @@ const Settings = () => {
1819
const [script, setScript] = useState(null);
1920

2021
const handleCreateApp = () => {
21-
createAppHelper({ environment, route, components, projectName });
22+
const fileName = shortid.generate();
23+
createAppHelper({ environment, route, components, projectName,fileName });
2224
if (buildTool === "yarn") {
23-
setScript(`yarn create react-app ${projectName} && yarn add ${dependencies} && node createMyApp.js`);
25+
setScript(`yarn create react-app ${projectName} && cd ${projectName} && yarn add ${dependencies} && cd .. && node ${fileName}.js`);
2426
} else {
25-
setScript(`npx create-react-app ${projectName} && npm install ${dependencies} && node createMyApp.js`);
27+
setScript(`npx create-react-app ${projectName} && cd ${projectName} && npm install ${dependencies} && cd .. && node ${fileName}.js`);
2628
}
2729
}
2830

Diff for: ‎src/helpers/createAppHelper.js

+18-19
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
const downloadNodeFile = (MainFile) => {
1+
const downloadNodeFile = (MainFile,thisFileName) => {
22
const element = document.createElement("a");
33
const file = new Blob([MainFile], { type: 'text/plain' });
44
element.href = URL.createObjectURL(file);
5-
element.download = "createMyApp.js";
5+
element.download = `${thisFileName}.js`;
66
document.body.appendChild(element);
77
element.click();
88
}
99

10-
const createAppHelper = ({ route, components, projectName }) => {
10+
const createAppHelper = ({ fileName, route, components, projectName }) => {
1111
let MainFile = "const fs = require('fs');fs.mkdirSync('" + projectName + "/src/components');fs.mkdirSync('" + projectName + "/src/pages');";
12-
1312
let componentsToWrite = [];
1413
let pagesToWrite = [];
1514

@@ -19,51 +18,51 @@ const createAppHelper = ({ route, components, projectName }) => {
1918
if (comp.type === "FunctionalArrow") {
2019
componentsToWrite.push({
2120
name: comp.name,
22-
data: `import React from 'react';\\n\\nconst ${comp.name} = () => {\\n return (\\n <div>\\n ${comp.name} Component\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
21+
data: `import React from 'react';\\n\\nconst ${comp.name} = () => {\\n return (\\n <div>\\n <h1>${comp.name} Component</h1>\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
2322
})
2423
//Functional Component
2524
} else if (comp.type === "Functional") {
2625
componentsToWrite.push({
2726
name: comp.name,
28-
data: `import React from 'react';\\n\\nfunction ${comp.name}() {\\n return (\\n <div>\\n ${comp.name} Component\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
27+
data: `import React from 'react';\\n\\nfunction ${comp.name}() {\\n return (\\n <div>\\n <h1>${comp.name} Component</h1>\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
2928
})
3029
//Class State Ful Component
3130
} else if (comp.type === "ClassStateFul") {
3231
componentsToWrite.push({
3332
name: comp.name,
34-
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {};\\n }\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name}</h1>\\n </div>\\n );\\n }\\n}`
33+
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {};\\n }\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name} Component</h1>\\n </div>\\n );\\n }\\n}`
3534
})
3635
//Class State Less Component
3736
} else if (comp.type === "ClassStateLess") {
3837
componentsToWrite.push({
3938
name: comp.name,
40-
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name}</h1>\\n </div>\\n );\\n }\\n}`
39+
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name} Component</h1>\\n </div>\\n );\\n }\\n}`
4140
})
4241
}
4342
} else {
4443
//Functional Arrow Component
4544
if (comp.type === "FunctionalArrow") {
4645
pagesToWrite.push({
4746
name: comp.name,
48-
data: `import React from 'react';\\n\\nconst ${comp.name} = () => {\\n return (\\n <div>\\n ${comp.name} Component\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
47+
data: `import React from 'react';\\n\\nconst ${comp.name} = () => {\\n return (\\n <div>\\n <h1>${comp.name} Page</h1>\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
4948
})
5049
//Functional Component
5150
} else if (comp.type === "Functional") {
5251
pagesToWrite.push({
5352
name: comp.name,
54-
data: `import React from 'react';\\n\\nfunction ${comp.name}() {\\n return (\\n <div>\\n ${comp.name} Component\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
53+
data: `import React from 'react';\\n\\nfunction ${comp.name}() {\\n return (\\n <div>\\n <h1>${comp.name} Page</h1>\\n </div>\\n )\\n}\\n\\nexport default ${comp.name};`
5554
})
5655
//Class State Ful Component
5756
} else if (comp.type === "ClassStateFul") {
5857
pagesToWrite.push({
5958
name: comp.name,
60-
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {};\\n }\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name}</h1>\\n </div>\\n );\\n }\\n}`
59+
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {};\\n }\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name} Page</h1>\\n </div>\\n );\\n }\\n}`
6160
})
6261
//Class State Less Component
6362
} else if (comp.type === "ClassStateLess") {
6463
pagesToWrite.push({
6564
name: comp.name,
66-
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name}</h1>\\n </div>\\n );\\n }\\n}`
65+
data: `import React from 'react';\\n\\nexport default class ${comp.name} extends React.Component {\\n\\n render() {\\n return (\\n <div>\\n <h1>${comp.name} Page</h1>\\n </div>\\n );\\n }\\n}`
6766
})
6867
}
6968
}
@@ -79,7 +78,7 @@ const createAppHelper = ({ route, components, projectName }) => {
7978
//Adding Routes to App.js
8079
let AppJsContent = `import React from 'react';\\nimport './App.css';\\n\\n`;
8180
if (route.enabled) {
82-
AppJsContent += "import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\\n\\n"
81+
AppJsContent += `import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\\n\\nimport ${route.navigation} from './components/${route.navigation}\\n`
8382
}
8483
components.forEach(comp => {
8584
if (comp.page) {
@@ -94,7 +93,7 @@ const createAppHelper = ({ route, components, projectName }) => {
9493
}
9594
})
9695
} else {
97-
AppJsContent += ` <Router>\\n <Switch>\\n`;
96+
AppJsContent += ` <Router>\\n <${route.navigation} />\\n <Switch>\\n`;
9897
components.forEach(comp => {
9998
if (comp.page) {
10099
AppJsContent += ` <Route path='/${comp.name}' exact component={${comp.name}} />\\n`
@@ -116,13 +115,13 @@ const createAppHelper = ({ route, components, projectName }) => {
116115

117116
//Checking for navigationComponentType
118117
if (navComponent.type === "FunctionalArrow") {
119-
NavigationFile += `import React from 'react';\\nimport { Link } from 'react-roter-dom';\\n\\nconst ${route.navigation} = () => {\\n return (\\n <div>\\n`;
118+
NavigationFile += `import React from 'react';\\nimport { Link } from 'react-router-dom';\\n\\nconst ${route.navigation} = () => {\\n return (\\n <div>\\n`;
120119
} else if (navComponent.type === "ClassStateLess") {
121-
NavigationFile += `\\nimport React from 'react';\\nimport { Link } from 'react-roter-dom';\\n\\nexport default class ${route.navigation} extends React.Component {\\n\\n render() {\\n return (\\n <div>\\n`;
120+
NavigationFile += `\\nimport React from 'react';\\nimport { Link } from 'react-router-dom';\\n\\nexport default class ${route.navigation} extends React.Component {\\n\\n render() {\\n return (\\n <div>\\n`;
122121
} else if (navComponent.type === "ClassStateFul") {
123-
NavigationFile += `import React from 'react';\\nimport { Link } from 'react-roter-dom';\\n\\nexport default class Namefsf extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {};\\n }\\n\\n render() {\\n return (\\n <div>\\n`
122+
NavigationFile += `import React from 'react';\\nimport { Link } from 'react-router-dom';\\n\\nexport default class Namefsf extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {};\\n }\\n\\n render() {\\n return (\\n <div>\\n`
124123
} else {
125-
NavigationFile += `import React from 'react';\\nimport { Link } from 'react-roter-dom';\\n\\nfunction ${route.navigation} (){\\n return (\\n <div>\\n`;
124+
NavigationFile += `import React from 'react';\\nimport { Link } from 'react-router-dom';\\n\\nfunction ${route.navigation} (){\\n return (\\n <div>\\n`;
126125
}
127126

128127
//common route insertion
@@ -144,7 +143,7 @@ const createAppHelper = ({ route, components, projectName }) => {
144143
}
145144

146145
// console.log(MainFile)
147-
downloadNodeFile(MainFile)
146+
downloadNodeFile(MainFile,fileName)
148147
};
149148

150149
export default createAppHelper;

Diff for: ‎yarn.lock

+12
Original file line numberDiff line numberDiff line change
@@ -6886,6 +6886,11 @@ nan@^2.12.1:
68866886
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
68876887
integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
68886888

6889+
nanoid@^2.1.0:
6890+
version "2.1.11"
6891+
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
6892+
integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
6893+
68896894
nanomatch@^1.2.9:
68906895
version "1.2.13"
68916896
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -9354,6 +9359,13 @@ shellwords@^0.1.1:
93549359
resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
93559360
integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
93569361

9362+
shortid@^2.2.15:
9363+
version "2.2.15"
9364+
resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
9365+
integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
9366+
dependencies:
9367+
nanoid "^2.1.0"
9368+
93579369
side-channel@^1.0.2:
93589370
version "1.0.2"
93599371
resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"

0 commit comments

Comments
 (0)