;
20 | else
21 | return (
22 |
23 | {loadStatus ? (
24 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/AppContainer.jsx:
--------------------------------------------------------------------------------
1 | import LandingPage from './LandingPage.jsx';
2 | import RenderedPage from './RenderedPage.jsx';
3 | import React from 'react';
4 | import { useState } from 'react';
5 |
6 | // Houses the future conditional rendering
7 | // If file has not been imported, landing page should display
8 | // If file has been imported, rendered page should display
9 |
10 | export default function AppContainer() {
11 | const [loadStatus, useLoadStatus] = useState(true);
12 | const [filesArr, useFilesArr] = useState([]);
13 |
14 | return (
15 |
16 | {/*
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/Blurb.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function Blurb() {
4 | return (
5 |
6 |
About
7 |
8 |
Far-Left:
9 |
10 | {' '}
11 | Select one of your individual components listed to the side. This
12 | will allow you to view it individually outside of your total app.
13 |
14 |
15 |
Top-Left:
16 |
17 | {' '}
18 | The rendered component of your choosing, regardless of state or
19 | props. Some rendered components will also carry with them
20 | functionality.
21 |
22 |
23 |
Bottom-Left:
24 |
25 | {' '}
26 | A full rendition of your total application so that you can inspect
27 | your progress macroscopically.
28 |
29 |
30 |
Bottom-Right:
31 |
32 | {' '}
33 | Component Fiber-Tree of you application, displaying each of your
34 | components and where they appear in reference to the total project.
35 | Click the Render button to see your tree update.
36 |
37 |
38 |
39 |
122 |
Component Tree
123 |
124 | {
143 | findFrameNodes();
144 | props.onClick();
145 | }}
146 | >
147 | Refresh Tree
148 |
149 |
150 |
10 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Egg.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function Egg() {
4 | return Hi Nate
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/File.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function File(props) {
4 | return (
5 | props.renderFile(props.name)}
6 | className="FileExplorerButton"
7 | >{props.name}
8 | );
9 | }
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // Will eventually house header info
4 | // Need to add img, how to get img working in webpack?
5 |
6 | export default function Header() {
7 | return (
8 |
9 |
Reactron
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/IndividualComponent.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function IndividualComponent() {
4 | return (
5 |
6 |
Individual Component
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/LandingPage.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // import logo from '../../assets/logo.png';
3 | import { useState } from 'react';
4 | import filesysHelpers from '../../filesysHelpers.js';
5 | import axios from 'axios';
6 | import NavBarContainer from './NavBar/NavBarContainer';
7 | import PreviousFiles from './NavBar/PreviousFiles';
8 | import Header from './Header.jsx';
9 |
10 | // Will house the landing page / initial render page
11 | // Will import files from here
12 | export default function LandingPage(props) {
13 |
14 | const [staticFile, useStaticFile] = useState();
15 |
16 | const [components, useComponents] = useState();
17 |
18 | // opens file picker for style sheet
19 | const staticOnClick = async () => {
20 | const fileHandle = window.showOpenFilePicker();
21 | // native operation to file handle object
22 | fileHandle
23 | // gets single file, getFile is native operation
24 | .then((data) => data[0].getFile())
25 | // grabs the contents
26 | .then((res) => res.text())
27 | .then((data) => {
28 | // sends to the backend for upload
29 | axios.post('/fs/stylesheet', { item: data });
30 | // the hook to set static file
31 | useStaticFile(data);
32 | });
33 | };
34 |
35 | // opens window for component file picker
36 | const componentOnClick = async () => {
37 | // declare file handle constant for directory picker to grab the folder of components
38 | const fileHandle = await window.showDirectoryPicker();
39 | // declare results constant that receives data from the filesystem helper directory logger that turns the directory into a usable object
40 | const result = await filesysHelpers.directoryLogger(fileHandle);
41 | // the useComponents hook to set components
42 | useComponents(result);
43 | };
44 |
45 |
46 | // sends the file names and contents to the backend to be uploaded
47 | const submitDirs = async (e) => {
48 | // prevents default activity of event
49 | e.preventDefault();
50 | // gets the project name from the input box
51 | const projName = e.target[0].value;
52 |
53 | // organizing the files for the backend, found in filesysHelpers.js file
54 | filesysHelpers
55 | // recursively generates an array of all the component files
56 | .fileDisplay(components, 'componentFiles')
57 | .then(async (data) => {
58 | // declare temporary Array and name Arrays
59 | const tempArr = [];
60 | const nameArr = [];
61 | // iterates through the data
62 | data.forEach(async (elem) => {
63 | // this is the array of file names
64 | nameArr.push(elem.getFile().then((res) => res.name));
65 | // this is the array of file contents
66 | tempArr.push(elem.getFile().then((res) => res.text()));
67 | });
68 | // returns an array of fufilled promises
69 | const fileContents = await Promise.all(tempArr);
70 | const nameContents = await Promise.all(nameArr);
71 |
72 | // declares an empty result array
73 | const resultArr = [];
74 |
75 |
76 | for (let i = 0; i < fileContents.length; i += 1) {
77 | // when user authentication is implemeneted, file name needs to be updated:
78 | // 'username'/'projectname'/'filename'
79 | resultArr.push({
80 | name: nameContents[i],
81 | contents: fileContents[i],
82 | });
83 | }
84 |
85 | props.useFilesArr(resultArr);
86 | props.useProjName(projName);
87 |
88 | axios.post('/fs/upload', {
89 | files: resultArr,
90 | username: props.username,
91 | project: projName,
92 | style: staticFile,
93 | });
94 |
95 | props.useLoadStatus(true); //calls useloadStatus to change state to true
96 | });
97 | };
98 |
99 | return (
100 |
101 |
107 |
108 |
109 |
110 |
111 | Select a Previous Project from the Side
112 | index.js file that connects to an{' '}
121 | App.jsx component. Please upload your index.js, App.jsx, and
122 | any other component files in one directory under the Component
123 | Directory below. */}
124 |
125 |
126 |
127 |
128 | StaticDirectory
129 | Example
130 | or
132 |
136 |
137 |
Upload Styling
138 |
139 | Select File
140 |
141 |
{staticFile ? `The file has been uploaded` : ''}
142 |
143 |
144 |
145 | Component Directory
146 | Example
147 |
152 |
Upload Components
153 |
154 | Select Folder
155 |
156 |
157 | {components
158 | ? `The ${
159 | components[Object.keys(components)[0]].handle.name
160 | } directory has been uploaded`
161 | : ''}
162 |
163 |
164 | {staticFile && components ? (
165 |
166 |
167 | Your files have been successfully uploaded. Give your project a name
168 | and hit the next button for Reactron to begin the rendering process.
169 |
170 |
182 |
183 | ) : (
184 | ''
185 | )}
186 |
187 |
31 | {props.username !== 'demo' ? (
32 | props.useLoadStatus(false)}
35 | >
36 | Back
37 |
38 | ) : (
39 | ''
40 | )}
41 |
42 |
Files Uploaded
44 | {props.files ? returnArr() : ''}
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/NavBar/NavBarContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Profile from './Profile';
3 | import FileExplorer from './FileExplorer';
4 | import Signout from './Signout';
5 | import PreviousFiles from './PreviousFiles';
6 |
7 | export default function NavBarContainer(props) {
8 | return (
9 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/NavBar/NavBarContainerRendered.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Profile from './Profile';
3 | import FileExplorer from './FileExplorer';
4 | import Signout from './Signout';
5 |
6 | export default function NavBarContainer(props) {
7 | return (
8 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/NavBar/PreviousFiles.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import axios from 'axios';
3 |
4 | export default class PreviousFiles extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {
8 | prevFiles: [],
9 | };
10 | this.handlePrevious = this.handlePrevious.bind(this);
11 | }
12 |
13 | handlePrevious(name) {
14 | axios
15 | .post('/fs/prevupload', {
16 | projName: name,
17 | username: this.props.username,
18 | })
19 | .then((res) => {
20 | this.props.useLoadStatus(true);
21 | this.props.useFilesArr(res.data);
22 | this.props.useProjName(name);
23 | });
24 | }
25 |
26 | componentDidMount() {
27 | axios
28 | .post('/fs/prevprojs', { username: this.props.username })
29 | .then((res) => this.setState({ prevFiles: res.data }));
30 | }
31 |
32 | render() {
33 | const returnArr = [];
34 | for (let i = 0; i < this.state.prevFiles.length; i += 1) {
35 | returnArr.push(
36 | this.handlePrevious(this.state.prevFiles[i])}
39 | >
40 | {this.state.prevFiles[i]}
41 |
42 | );
43 | }
44 | return (
45 |
46 |
Previous Projects
47 |
6 |
{props.username}
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/NavBar/Signout.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function Signout() {
4 | return (
5 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/ReactArch.md:
--------------------------------------------------------------------------------
1 | Current React component architecture
2 |
3 | - App
4 | - Splash Page
5 | - Log In
6 | - Oauth
7 | - LandingPage
8 | - LandingPage (if file not imported)
9 | - RenderedPage (if file imported)
10 | - Header
11 | - If Full App View:
12 | - ComponentTree
13 | - Visualizer
14 | - StateContainer
15 | - StateItem
16 | - RenderedContainer
17 | - ReactComponent
18 | - If Indv Component View:
19 | - FileList
20 | - File
21 | - IndividualComponent
22 |
--------------------------------------------------------------------------------
/src/components/ReactComponent.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import axios from 'axios';
3 |
4 | // export default function ReactComponent() {
5 | // useEffect(() => {
6 |
7 | // }, []);
8 |
9 | // }
10 |
11 | export default class ReactComponent extends React.Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | component: [],
16 | };
17 | }
18 |
19 | componentDidMount() {
20 | const arr = [
21 | ,
22 | ];
23 | this.setState({ component: arr });
24 | }
25 |
26 | render() {
27 | const arr = [];
28 | for (let i = 0; i < this.state.component.length; i += 1) {
29 | arr.push(this.state.component[i]);
30 | }
31 | return {arr}
;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/RenderedContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactComponent from './ReactComponent.jsx';
3 |
4 | export default function RenderedContainer() {
5 | return (
6 |
7 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/RenderedPage.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Header from './Header.jsx';
3 | import NavBarContainerRendered from './NavBar/NavBarContainerRendered';
4 | import DashBoard from './DashBoard';
5 |
6 | // Page that will show once directory has been imported
7 | export default function RenderedPage(props) {
8 | const [refresh, setRefresh] = useState(0);
9 |
10 | const refreshTree = () => {
11 | setRefresh(refresh + 1)
12 | };
13 |
14 | return (
15 |
16 |
17 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/StateContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import StateItem from './StateItem.jsx';
3 |
4 | // conditional rendering based on how many state items
5 |
6 | export default function StateContainer() {
7 | return (
8 |
9 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/StateItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function StateItem() {
4 | return State / Prop
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/Visualizer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import StateContainer from './StateContainer.jsx';
3 | import RenderedContainer from './RenderedContainer.jsx';
4 |
5 | // shows the selected React Component and it's props / state / methods
6 |
7 | export default function Visualizer() {
8 | return (
9 |
10 |
Application
11 | {/*
8 |
12 |
17 |
18 |
66 |
75 | App
76 |
77 |
78 |
82 |
91 | Game
92 |
93 |
94 |
98 |
107 | Board
108 |
109 |
110 |
114 |
123 | Square
124 |
125 |
126 |
130 |
139 | Square
140 |
141 |
142 |
146 |
155 | Square
156 |
157 |
158 |
162 |
171 | Square
172 |
173 |
174 |
178 |
187 | Square
188 |
189 |
190 |
194 |
203 | Square
204 |
205 |
206 |
210 |
219 | Square
220 |
221 |
222 |
226 |
235 | Square
236 |
237 |
238 |
242 |
251 | Square
252 |
253 |
254 |
255 |
256 |
257 |
8 |
11 |
12 | Reactron
13 |
14 |
15 |
18 |
19 | In order for Reactron to process your application files correctly, please follow these instructions.
20 |
25 | index.js
26 |
27 | file that connects to an
28 |
29 |
30 | App.jsx
31 |
32 | component. Please upload your index.js, App.jsx, and any other component files in one directory under the Component Directory below.
33 |
34 |
35 |
38 |
39 |
40 | StaticDirectory
41 |
42 |
45 | Example
46 |
47 |
52 | or
53 |
54 |
59 |
60 |
63 |
64 |
65 | Component Directory
66 |
67 |
70 | Example
71 |
72 |
81 |
82 |
85 |
86 | Static Files
87 |
88 |
89 | Please upload your static directory here.
90 |
91 |
92 |
93 |
94 |
99 | Select File Here
100 |
101 |
102 |
105 |
106 | Component Files
107 |
108 |
109 | Please upload your component files here.
110 |
111 |
112 |
113 |
114 |
119 | Select File Here
120 |
121 |
122 |
123 |
8 |
11 |
12 | Reactron
13 |
14 |
15 |
18 |
21 |
24 |
29 |
30 |
78 |
87 | App
88 |
89 |
90 |
94 |
103 | Game
104 |
105 |
106 |
110 |
119 | Board
120 |
121 |
122 |
126 |
135 | Square
136 |
137 |
138 |
142 |
151 | Square
152 |
153 |
154 |
158 |
167 | Square
168 |
169 |
170 |
174 |
183 | Square
184 |
185 |
186 |
190 |
199 | Square
200 |
201 |
202 |
206 |
215 | Square
216 |
217 |
218 |
222 |
231 | Square
232 |
233 |
234 |
238 |
247 | Square
248 |
249 |
250 |
254 |
263 | Square
264 |
265 |
266 |
267 |
268 |
269 |
270 |
285 |
286 |
8 | Back To Splash Page
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/login/Demo.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import React from 'react';
3 |
4 | export default function Demo(props) {
5 | const demoFiles = [
6 | {
7 | name: 'Task.js',
8 | contents:
9 | "import React from 'react';\nexport default function Task(props) {\n return (\n \n
{props.value || 'Default Task Value'} \n props.completeTask(props.ID)}>Complete \n props.deleteTask(props.ID)}>Remove \n \n );\n}\n",
10 | },
11 | {
12 | name: 'index.js',
13 | contents:
14 | "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(To-Do ;\n}\n",
20 | },
21 | {
22 | name: 'Body.js',
23 | contents:
24 | "import React from 'react';\nimport Task from './Task';\nimport Completed from './Completed';\n\nexport default class Body extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n inProgress: [],\n complete: [],\n };\n this.handleSubmit = this.handleSubmit.bind(this);\n this.completeTask = this.completeTask.bind(this);\n this.deleteTask = this.deleteTask.bind(this);\n }\n\n handleSubmit(e) {\n e.preventDefault();\n const tempTaskList = this.state.inProgress;\n tempTaskList.push(e.target[0].value);\n this.setState({ inProgress: tempTaskList });\n console.log(this.state.inProgress);\n }\n\n completeTask(id) {\n const inProgressTemp = this.state.inProgress;\n const completeTemp = this.state.complete;\n completeTemp.push(inProgressTemp[id]);\n inProgressTemp.splice(id, 1);\n this.setState({ inProgress: inProgressTemp });\n this.setState({ complete: completeTemp });\n }\n\n deleteTask(id) {\n const inProgressTemp = this.state.inProgress;\n inProgressTemp.splice(id, 1);\n this.setState({ inProgress: inProgressTemp });\n }\n\n render() {\n const inProgressTasks = [];\n for (let i = 0; i < this.state.inProgress.length; i += 1) {\n inProgressTasks.push(\n \n \n
Tasks in Progress \n Add a task! }\n Tasks Completed \n Complete a task! }\n \n );\n }\n}\n",
25 | },
26 | {
27 | name: 'Completed.js',
28 | contents:
29 | "import React from 'react';\nexport default function Completed(props) {\n return (\n \n
{props.value || 'Default Task Value'} \n \n );\n}\n",
30 | },
31 | {
32 | name: 'App.js',
33 | contents:
34 | "import Header from './Header';\nimport Body from './Body';\nimport React from 'react';\n\nfunction App() {\n return (\n \n \n
\n \n );\n}\n\nexport default App;\n",
35 | },
36 | ];
37 | const handleDemo = () => {
38 | axios.get('/fs/demo');
39 | props.useProjName('demo')
40 | props.useFilesArr(demoFiles);
41 | props.useUsername('demo');
42 | };
43 | return (
44 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/login/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function Login() {
4 | return (
5 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/login/LoginContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function LoginContainer() {
4 | return (
5 |
6 |
7 |
8 | )
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/login/LoginPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Login from './Login';
3 | import Logo from './Logo';
4 | import Demo from './Demo';
5 | // import BackToSplash from './BackToSplash';
6 | import LoginContainer from './LoginContainer';
7 | // import NavBarContainer from '../NavBar/NavBarContainer'
8 |
9 | export default function LoginPage(props) {
10 | return (
11 |
12 |
13 |
17 | {/*
20 |
7 |
8 |
32 |
Meet the Reactron Team
33 |
34 |
72 |
15 |
17 |
32 | {/*
33 |
*/}
34 |
{props.name}
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/tsx_components/HeadNode.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function HeadNode() {
4 | return Head Node
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/tsx_components/Header.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // Will eventually house header info
4 | // Need to add img, how to get img working in webpack?
5 |
6 | export default function Header() {
7 | return (
8 |
10 |
Reactron
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/tsx_components/LandingPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useState } from 'react';
3 | import filesysHelpers from '../../filesysHelpers.js';
4 | import axios from 'axios';
5 |
6 | // Will house the landing page / initial render page
7 | // Will import files from here
8 |
9 | export default function LandingPage(props) {
10 | const [staticFile, useStaticFile] = useState();
11 |
12 | const [components, useComponents] = useState();
13 |
14 | const staticOnClick = async () => {
15 | const fileHandle = window.showOpenFilePicker();
16 | fileHandle
17 | .then((data) => data[0].getFile())
18 | .then((res) => res.text())
19 | .then((data) => {
20 | axios.post('/fs/stylesheet', { item: data });
21 | useStaticFile(fileHandle);
22 | });
23 | };
24 |
25 | const componentOnClick = async () => {
26 | const fileHandle = await window.showDirectoryPicker();
27 | const result = await filesysHelpers.directoryLogger(fileHandle);
28 | useComponents(result);
29 | };
30 |
31 | const submitDirs = async () => {
32 | filesysHelpers
33 | .fileDisplay(components, 'componentFiles')
34 | .then(async (data) => {
35 | const tempArr = [];
36 | const nameArr = [];
37 | data.forEach(async (elem) => {
38 | nameArr.push(elem.getFile().then((res) => res.name));
39 | tempArr.push(elem.getFile().then((res) => res.text()));
40 | });
41 | const fileContents = await Promise.all(tempArr);
42 | const nameContents = await Promise.all(nameArr);
43 |
44 | const resultArr = [];
45 |
46 | for (let i = 0; i < fileContents.length; i += 1) {
47 | // when user authentication is implemeneted, file name needs to be updated:
48 | // 'username'/'projectname'/'filename'
49 | resultArr.push({
50 | name: nameContents[i],
51 | contents: fileContents[i],
52 | });
53 | }
54 |
55 | props.useFilesArr(resultArr);
56 |
57 | axios.post('/fs/upload', {
58 | files: resultArr,
59 | username: 'sample',
60 | project: 'sampleApp',
61 | });
62 | });
63 | props.useLoadStatus(true); //calls useloadStatus to change state to true
64 | };
65 |
66 | return (
67 |
68 |
69 |
Reactron
70 |
71 |
72 |
73 | In order for Reactron to process your application files correctly,
74 | please follow these instructions. index.js file that connects to an{' '}
78 | App.jsx component. Please upload your index.js, App.jsx, and
79 | any other component files in one directory under the Component
80 | Directory below.
81 |
82 |
83 |
84 |
85 | StaticDirectory
86 | Example
87 | or
89 |
93 |
94 |
95 |
96 | Component Directory
97 | Example
98 |
103 |
104 |
105 |
Static Files
106 |
Please upload your static directory here.
107 |
{staticFile ? `The directory has been uploaded` : ''}
108 |
109 | Select File Here
110 |
111 |
112 |
113 |
Component Files
114 |
Please upload your component files here.
115 |
116 | {components
117 | ? `The ${
118 | components[Object.keys(components)[0]].handle.name
119 | } directory has been uploaded`
120 | : ''}
121 |
122 |
123 | Select File Here
124 |
125 |
126 | {staticFile && components ? (
127 |
128 |
129 | Your files have been successfully uploaded. Hit the next button for
130 | Reactron to begin the rendering process.
131 |
133 | Next
134 |
135 |
136 |
137 | ) : (
138 | ''
139 | )}
140 |
17 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/tsx_components/Node.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/reactron/ce10991e644e05d3e5600e424d9df437b2aa648b/src/tsx_components/Node.tsx
--------------------------------------------------------------------------------
/src/types/AllTypes.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'react-tree-graph';
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "typeRoots": ["./src/types"],
4 | "target": "es5",
5 | "lib": [
6 | "dom",
7 | "dom.iterable",
8 | "esnext"
9 | ],
10 | "allowJs": true,
11 | "skipLibCheck": true,
12 | "esModuleInterop": true,
13 | "allowSyntheticDefaultImports": true,
14 | "strict": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "noFallthroughCasesInSwitch": true,
17 | "module": "esnext",
18 | "moduleResolution": "node",
19 | "resolveJsonModule": true,
20 | "isolatedModules": true,
21 | "noEmit": true,
22 | "jsx": "react-jsx"
23 | },
24 | "include": [
25 | "src"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/userInfo/demo/demo/App.js:
--------------------------------------------------------------------------------
1 | import Header from './Header';
2 | import Body from './Body';
3 | import React from 'react';
4 |
5 | function App() {
6 | return (
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/userInfo/demo/demo/Body.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Task from './Task';
3 | import Completed from './Completed';
4 |
5 | export default class Body extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | inProgress: [],
10 | complete: [],
11 | };
12 | this.handleSubmit = this.handleSubmit.bind(this);
13 | this.completeTask = this.completeTask.bind(this);
14 | this.deleteTask = this.deleteTask.bind(this);
15 | }
16 |
17 | handleSubmit(e) {
18 | e.preventDefault();
19 | const tempTaskList = this.state.inProgress;
20 | tempTaskList.push(e.target[0].value);
21 | this.setState({ inProgress: tempTaskList });
22 | console.log(this.state.inProgress);
23 | }
24 |
25 | completeTask(id) {
26 | const inProgressTemp = this.state.inProgress;
27 | const completeTemp = this.state.complete;
28 | completeTemp.push(inProgressTemp[id]);
29 | inProgressTemp.splice(id, 1);
30 | this.setState({ inProgress: inProgressTemp });
31 | this.setState({ complete: completeTemp });
32 | }
33 |
34 | deleteTask(id) {
35 | const inProgressTemp = this.state.inProgress;
36 | inProgressTemp.splice(id, 1);
37 | this.setState({ inProgress: inProgressTemp });
38 | }
39 |
40 | render() {
41 | const inProgressTasks = [];
42 | for (let i = 0; i < this.state.inProgress.length; i += 1) {
43 | inProgressTasks.push(
44 |
58 |
62 |
Tasks in Progress
64 | Tasks Completed
68 |
5 |
{props.value}
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/userInfo/demo/demo/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function Header() {
4 | return To-Do ;
5 | }
6 |
--------------------------------------------------------------------------------
/userInfo/demo/demo/Task.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | export default function Task(props) {
3 | return (
4 |
5 |
{props.value}
6 | props.completeTask(props.ID)}>Complete
7 | props.deleteTask(props.ID)}>Remove
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/userInfo/demo/demo/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(Document
8 | Hello
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/userInfo/individualComponent/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'; import ReactDOM from 'react-dom'; import Completed from '../demo/demo/Completed.js'; ReactDOM.render(Document
7 | Hi this is rendering on localhost 5000
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/userInfo/webpack.user.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | //Reactron App webpack builder
4 | module.exports = {
5 | mode: 'development',
6 | target: 'node',
7 | resolve: {
8 | fallback: {
9 | fs: false,
10 | },
11 | },
12 | module: {
13 | rules: [
14 | {
15 | test: /\.jsx?/,
16 | exclude: /node_modules/,
17 | use: {
18 | loader: 'babel-loader',
19 | options: {
20 | presets: ['@babel/preset-env', '@babel/preset-react'],
21 | },
22 | },
23 | },
24 | {
25 | test: /\.(sa|sc|c)ss$/,
26 | use: ['style-loader', 'css-loader', 'sass-loader'],
27 | },
28 | ],
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const BUILD_DIR = path.resolve(__dirname, 'public/build');
3 | const APP_DIR = path.resolve(__dirname, './src');
4 |
5 | //Reactron App webpack builder
6 | module.exports = {
7 | mode: 'development',
8 | entry: {
9 | main: APP_DIR + '/index.js',
10 | },
11 | output: {
12 | filename: 'bundle.js',
13 | path: BUILD_DIR,
14 | },
15 | target: 'node',
16 | resolve: {
17 | fallback: {
18 | fs: false,
19 | },
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.jsx?/,
25 | exclude: /node_modules/,
26 | use: {
27 | loader: 'babel-loader',
28 | options: {
29 | presets: ['@babel/preset-env', '@babel/preset-react'],
30 | },
31 | },
32 | },
33 | {
34 | test: /\.(sa|sc|c)ss$/,
35 | use: ['style-loader', 'css-loader', 'sass-loader'],
36 | },
37 | {
38 | test: /\.(png|jpe?g|gif)$/i,
39 | use: [
40 | {
41 | loader: 'url-loader',
42 | },
43 | ],
44 | },
45 | ],
46 | },
47 | };
48 |
--------------------------------------------------------------------------------
/wiki.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/reactron/ce10991e644e05d3e5600e424d9df437b2aa648b/wiki.png
--------------------------------------------------------------------------------
5 |