├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
└── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── Components
├── AddProject.js
├── ProjectItem.js
├── Projects.js
├── TodoItem.js
└── Todos.js
├── index.css
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # testing
7 | coverage
8 |
9 | # production
10 | build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This project goes with the [ReactJS Crash Course](https://www.youtube.com/watch?v=A71aqufiNtQ) YouTube video
2 |
3 | ## ReactJS Project Manager
4 |
5 | Very simple project manager interface using React
6 |
7 | ```sh
8 | $ npm install
9 | ```
10 |
11 | ```sh
12 | $ npm start
13 | ```
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "projectmanager",
3 | "version": "0.1.0",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.7.0"
7 | },
8 | "dependencies": {
9 | "jquery": "^3.1.1",
10 | "react": "^15.3.2",
11 | "react-dom": "^15.3.2",
12 | "uuid": "^2.0.3"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test --env=jsdom",
18 | "eject": "react-scripts eject"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/projectmanager/aa29f3edf54c9e0de9bd56d821d1c2e788fcee37/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Project Manager
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/projectmanager/aa29f3edf54c9e0de9bd56d821d1c2e788fcee37/src/App.css
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import uuid from 'uuid';
3 | import $ from 'jquery';
4 | import Projects from './Components/Projects';
5 | import AddProject from './Components/AddProject';
6 | import Todos from './Components/Todos';
7 | import './App.css';
8 |
9 | class App extends Component {
10 | constructor(){
11 | super();
12 | this.state = {
13 | projects: [],
14 | todos:[]
15 | }
16 | }
17 |
18 | getTodos(){
19 | $.ajax({
20 | url: 'https://jsonplaceholder.typicode.com/todos',
21 | dataType:'json',
22 | cache: false,
23 | success: function(data){
24 | this.setState({todos: data}, function(){
25 | console.log(this.state);
26 | });
27 | }.bind(this),
28 | error: function(xhr, status, err){
29 | console.log(err);
30 | }
31 | });
32 | }
33 |
34 | getProjects(){
35 | this.setState({projects: [
36 | {
37 | id:uuid.v4(),
38 | title: 'Business Website',
39 | category: 'Web Deisgn'
40 | },
41 | {
42 | id:uuid.v4(),
43 | title: 'Social App',
44 | category: 'Mobile Development'
45 | },
46 | {
47 | id:uuid.v4(),
48 | title: 'Ecommerce Shopping Cart',
49 | category: 'Web Development'
50 | }
51 | ]});
52 | }
53 |
54 | componentWillMount(){
55 | this.getProjects();
56 | this.getTodos();
57 | }
58 |
59 | componentDidMount(){
60 | this.getTodos();
61 | }
62 |
63 | handleAddProject(project){
64 | let projects = this.state.projects;
65 | projects.push(project);
66 | this.setState({projects:projects});
67 | }
68 |
69 | handleDeleteProject(id){
70 | let projects = this.state.projects;
71 | let index = projects.findIndex(x => x.id === id);
72 | projects.splice(index, 1);
73 | this.setState({projects:projects});
74 | }
75 |
76 | render() {
77 | return (
78 |
84 | );
85 | }
86 | }
87 |
88 | export default App;
89 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | });
9 |
--------------------------------------------------------------------------------
/src/Components/AddProject.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import uuid from 'uuid';
3 |
4 | class AddProject extends Component {
5 | constructor(){
6 | super();
7 | this.state = {
8 | newProject:{}
9 | }
10 | }
11 |
12 | static defaultProps = {
13 | categories: ['Web Design', 'Web Development', 'Mobile Development']
14 | }
15 |
16 | handleSubmit(e){
17 | if(this.refs.title.value === ''){
18 | alert('Title is required');
19 | } else {
20 | this.setState({newProject:{
21 | id: uuid.v4(),
22 | title: this.refs.title.value,
23 | category: this.refs.category.value
24 | }}, function(){
25 | //console.log(this.state);
26 | this.props.addProject(this.state.newProject);
27 | });
28 | }
29 | e.preventDefault();
30 | }
31 |
32 | render() {
33 | let categoryOptions = this.props.categories.map(category => {
34 | return
35 | });
36 | return (
37 |
38 |
Add Project
39 |
54 |
21 |
Latest Projects
22 | {projectItems}
23 |
24 | );
25 | }
26 | }
27 |
28 | Projects.propTypes = {
29 | projects: React.PropTypes.array,
30 | onDelete: React.PropTypes.func
31 | }
32 |
33 | export default Projects;
34 |
--------------------------------------------------------------------------------
/src/Components/TodoItem.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class TodoItem extends Component {
4 | render() {
5 | return (
6 |
7 | {this.props.todo.title}
8 |
9 | );
10 | }
11 | }
12 |
13 | TodoItem.propTypes = {
14 | todo: React.PropTypes.object
15 | }
16 |
17 | export default TodoItem;
18 |
--------------------------------------------------------------------------------
/src/Components/Todos.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import TodoItem from './TodoItem';
3 |
4 | class Todos extends Component {
5 | render() {
6 | let todoItems;
7 | if(this.props.todos){
8 | todoItems = this.props.todos.map(todo => {
9 | //console.log(project);
10 | return (
11 |
12 | );
13 | });
14 | }
15 | return (
16 |
17 |
Todo List
18 | {todoItems}
19 |
20 | );
21 | }
22 | }
23 |
24 | Todos.propTypes = {
25 | todos: React.PropTypes.array
26 | }
27 |
28 | export default Todos;
29 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 | ,
7 | document.getElementById('root')
8 | );
9 |
--------------------------------------------------------------------------------