Skip to content

Commit feae9e5

Browse files
ken-Bainsken-Bains
authored
Merge pull request #184 from oslabs-beta/master
Final ReacType v12.0
2 parents cab14bd + a63ebd1 commit feae9e5

File tree

5 files changed

+76
-84
lines changed

5 files changed

+76
-84
lines changed

‎app/src/components/ContextAPIManager/DisplayTab/DisplayContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const DisplayContainer = () => {
1717
const formattedData = contexts
1818
.map(el => {
1919
return el.components.map(component => {
20-
return [`App ${el.name} ${component}`];
20+
return [`App - ${el.name} - ${component}`];
2121
});
2222
})
2323
.flat();

‎app/src/helperFunctions/generateCode.ts

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,8 @@ const generateUnformattedCode = (
297297
state = state.substring(0, state.length - 2) + '}';
298298
return state;
299299
};
300-
// Generate import
300+
301+
// // Generate import --- FROM PREVIOUS ITERATION BEFORE 12.0, NOT WORKING -> CONSIDER DELETING
301302
let importContext = '';
302303
if (currComponent.useContext) {
303304
for (const providerId of Object.keys(currComponent.useContext)) {
@@ -339,7 +340,7 @@ const generateUnformattedCode = (
339340
const { allContext } = store.getState().contextSlice;
340341

341342
for (const context of allContext) {
342-
contextImports += `import ${context.name}Provider from '../contexts/${context.name}.js'\n\t\t`;
343+
contextImports += `import ${context.name}Provider from '../contexts/${context.name}.js'\n`;
343344
}
344345

345346
//build an object with keys representing all components, their values are arrays storing all contexts that those components are consuming
@@ -359,9 +360,9 @@ const generateUnformattedCode = (
359360

360361
if (currComponent.name === 'App') {
361362
allContext.reverse().forEach((el, i) => {
362-
let tabs = `\t\t\t`;
363+
let tabs = `\t\t`;
363364
if (i === allContext.length - 1) {
364-
tabs = `\t\t\t\t`;
365+
tabs = `\t\t\t`;
365366
}
366367
result = `${tabs.repeat(allContext.length - i)}<${
367368
el.name
@@ -379,7 +380,7 @@ const generateUnformattedCode = (
379380

380381
let importStr = '';
381382
componentContext[currComponent.name].forEach(context => {
382-
importStr += `import { ${context} } from '../contexts/${context}.js'\n\t\t`;
383+
importStr += `import { ${context} } from '../contexts/${context}.js'\n`;
383384
});
384385

385386
return importStr;
@@ -391,32 +392,30 @@ const generateUnformattedCode = (
391392

392393
let importStr = '';
393394
componentContext[currComponent.name].forEach(context => {
394-
importStr += ` const [${context}Val] = useContext(${context})\n\t\t`;
395+
importStr += ` const [${context}Val] = useContext(${context})\n`;
395396
});
396397

397398
return importStr;
398399
};
399-
return `
400-
${`import React, { useState, useEffect, useContext} from 'react';`}
401-
${`import ReactDOM from 'react-dom';`}
402-
${currComponent.name === 'App' ? contextImports : ''}
403-
${
404-
importReactRouter
405-
? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`
406-
: ``
407-
}
408-
${createContextImport()}
409-
${importsMapped}
410-
${`const ${currComponent.name} = (props) => {`}
411-
${createUseContextHook()}
412-
${` const [value, setValue] = useState("");${writeStateProps(
413-
currComponent.useStateCodes
414-
)}`}
415-
416-
return(\n${createRender()}\n\t\t\t)
417-
${`}\n`}
418-
export default ${currComponent.name}
419-
`;
400+
return `${`import React, { useState, useEffect, useContext} from 'react';`}
401+
${currComponent.name === 'App' ? contextImports : ''}
402+
${
403+
importReactRouter
404+
? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`
405+
: ``
406+
}
407+
${createContextImport()}
408+
${importsMapped}
409+
${`const ${currComponent.name} = (props) => {`}
410+
${createUseContextHook()}
411+
${` const [value, setValue] = useState("");${writeStateProps(
412+
currComponent.useStateCodes
413+
)}`}
414+
415+
return(\n${createRender()}\n\t\t\t)
416+
${`}\n`}
417+
export default ${currComponent.name}
418+
`;
420419
}
421420
//
422421
// next.js component code

‎app/src/redux/reducers/slice/contextReducer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as types from '../../constants/actionTypes';
22

33
const initialState = {
4-
//mock data for context slice commented out
4+
//dummy data for context slice commented out
55
allContext: [
66
// {
77
// name: 'FirstContext',

‎app/src/utils/createApplication.util.ts

Lines changed: 44 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@ function createIndexHtml(path, appName) {
4444
}
4545
}
4646
const filePath: string = `${dir}/index.html`;
47-
const data: string = `
48-
<!DOCTYPE html>
47+
const data: string = `<!DOCTYPE html>
4948
<html>
5049
<head>
5150
<meta charset="UTF-8" />
@@ -67,8 +66,7 @@ function createIndexHtml(path, appName) {
6766
}
6867
export const createIndexTsx = (path, appName) => {
6968
const filePath = `${path}/${appName}/src/index.tsx`;
70-
const data = `
71-
import React from 'react';
69+
const data = `import React from 'react';
7270
import ReactDOM from 'react-dom';
7371
import App from './components/App';
7472
import './default.css';
@@ -84,16 +82,15 @@ ReactDOM.render(<App />, document.getElementById('root'));
8482
};
8583
export const createDefaultCSS = (path, appName, components) => {
8684
const filePath = `${path}/${appName}/src/default.css`;
87-
let data = `
88-
#root div {
89-
box-sizing: border-box;
90-
width: 100%;
91-
border: 1px solid rgba(0,0,0,0.25);
92-
padding: 12px;
93-
text-align: center;
94-
font-family: Helvetica, Arial;
95-
}
96-
`;
85+
let data = `#root div {
86+
box-sizing: border-box;
87+
width: 100%;
88+
border: 1px solid rgba(0,0,0,0.25);
89+
padding: 12px;
90+
text-align: center;
91+
font-family: Helvetica, Arial;
92+
}
93+
`;
9794
components.forEach(comp => {
9895
data += compToCSS(comp);
9996
});
@@ -117,8 +114,7 @@ export const createPackage = (path, appName, test) => {
117114
"@types/enzyme-adapter-react-16": "^1.0.6",
118115
"ts-jest": "^27.0.5",
119116
"enzyme-to-json": "^3.6.2"`;
120-
const data = `
121-
{
117+
const data = `{
122118
"name": "reactype",
123119
"version": "1.0.0",
124120
"description": "",
@@ -186,8 +182,7 @@ export const createPackage = (path, appName, test) => {
186182
};
187183
export const createWebpack = (path, appName) => {
188184
const filePath = `${path}/${appName}/webpack.config.js`;
189-
const data = `
190-
var status = process.env.NODE_ENV; //taken from script so we don't have to flip mode when using development/production
185+
const data = `var status = process.env.NODE_ENV; //taken from script so we don't have to flip mode when using development/production
191186
var path = require('path');
192187
module.exports = {
193188
entry: './src/index.tsx',
@@ -241,8 +236,7 @@ module.exports = {
241236
};
242237
export const createBabel = (path, appName) => {
243238
const filePath = `${path}/${appName}/.babelrc`;
244-
const data = `
245-
{
239+
const data = `{
246240
"presets": ["@babel/env", "@babel/react", "@babel/typescript"]
247241
}
248242
`;
@@ -256,21 +250,20 @@ export const createBabel = (path, appName) => {
256250
};
257251
export const createTsConfig = (path, appName) => {
258252
const filePath = `${path}/${appName}/tsconfig.json`;
259-
const data = `
260-
{
261-
"compilerOptions": {
262-
"outDir": "./dist/",
263-
"sourceMap": true,
264-
"noImplicitAny": true,
265-
"module": "commonjs",
266-
"target": "es6",
267-
"jsx": "react",
268-
"lib": ["dom", "es6"],
269-
"moduleResolution": "node",
270-
"esModuleInterop": true
271-
},
272-
"include": ["./src/**/*"]
273-
}
253+
const data = `{
254+
"compilerOptions": {
255+
"outDir": "./dist/",
256+
"sourceMap": true,
257+
"noImplicitAny": true,
258+
"module": "commonjs",
259+
"target": "es6",
260+
"jsx": "react",
261+
"lib": ["dom", "es6"],
262+
"moduleResolution": "node",
263+
"esModuleInterop": true
264+
},
265+
"include": ["./src/**/*"]
266+
}
274267
`;
275268
window.api.writeFile(filePath, data, err => {
276269
if (err) {
@@ -282,8 +275,7 @@ export const createTsConfig = (path, appName) => {
282275
};
283276
export const createTsLint = (path, appName) => {
284277
const filePath = `${path}/${appName}/tslint.json`;
285-
const data = `
286-
{
278+
const data = `{
287279
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
288280
"tslint.autoFixOnSave": true,
289281
"linterOptions": {
@@ -312,8 +304,7 @@ export const createTsLint = (path, appName) => {
312304
};
313305
export const createServer = (path, appName) => {
314306
const filePath = `${path}/${appName}/server/server.js`;
315-
const data = `
316-
const express = require('express');
307+
const data = `const express = require('express');
317308
const path = require('path');
318309
const app = express();
319310
app.get('/testDev', (req, res) => {
@@ -349,23 +340,22 @@ export const createContext = (path, appName) => {
349340
cached[ele.key] = ele.value;
350341
}
351342
const filePath = `${path}/${appName}/src/contexts/${context.name}.js`;
352-
const data = `
353-
import {createContext, useState} from 'react'
354-
export const ${context.name} = createContext();
343+
const data = `import {createContext, useState} from 'react'
344+
export const ${context.name} = createContext();
355345
356-
const ${context.name}Provider = (props) => {
357-
const [${context.name}State] = useState(
358-
${JSON.stringify(cached)}
359-
)
360-
}
346+
const ${context.name}Provider = (props) => {
347+
const [${context.name}State] = useState(
348+
${JSON.stringify(cached)}
349+
)
350+
}
361351
362-
return (
363-
<${context.name}.Provider value={${context.name}State}>
364-
{props.children}
365-
</${context.name}.Provider>
366-
);
367-
export default ${context.name}Provider
368-
`;
352+
return (
353+
<${context.name}.Provider value={${context.name}State}>
354+
{props.children}
355+
</${context.name}.Provider>
356+
);
357+
export default ${context.name}Provider
358+
`;
369359
window.api.writeFileSync(filePath, data, err => {
370360
if (err) {
371361
console.log('server file error:', err.message);

‎app/src/utils/createFiles.util.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ const createFiles = (
2626
const newPromise = new Promise((resolve, reject) => {
2727
window.api.writeFileSync(
2828
`${dir}/${component.name}.tsx`,
29-
window.api.formatCode(component.code),
29+
30+
//this formatCodefunction has asynchronous issue
31+
// window.api.formatCode(component.code),
32+
component.code,
3033
(err: any) => {
3134
if (err) return reject(err.message);
3235
return resolve(path);

0 commit comments

Comments
 (0)