rpuzonas/react-todo-example
1
0
Fork 0
Code

Initial commit

Browse Source
This commit is contained in:
Rokas Puzonas 2020-09-13 03:50:58 +03:00
commit 641a8e029f
19 changed files with 25010 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md Normal file
View File

@ -0,0 +1,2 @@
# react-todo-example
https://www.youtube.com/watch?v=sBws8MSXN7A

13699
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

36
package.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.20.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

15
public/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

BIN
public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

25
public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

32
src/App.css Normal file
View File

@ -0,0 +1,32 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.4;
}
a {
color: #333;
text-decoration: none;
}
.container {
padding: 0 1rem;
}
.btn {
display: inline-block;
border: none;
background: #555;
color: #fff;
padding: 7px 20px;
cursor: pointer;
}
.btn:hover {
background: #666;
}

64
src/App.js Normal file
View File

@ -0,0 +1,64 @@
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom"
import axios from "axios"
import Todos from "./components/Todos"
import Header from "./components/layout/Header"
import AddTodo from "./components/AddTodo"
import About from "./components/pages/About"
import './App.css';
class App extends Component {
state = {
todos: []
}
componentDidMount() {
axios.get("https://jsonplaceholder.typicode.com/todos?_limit=5")
.then(res => {
this.setState({ todos: res.data })
})
}
markComplete = (id) => {
this.setState({ todos: this.state.todos.map(todo => {
if (todo.id === id)
todo.completed = !todo.completed
return todo
})})
}
delTodo = (id) => {
this.setState({ todos: this.state.todos.filter(todo => todo.id !== id)})
}
addTodo = (title) => {
this.state.todos.push({
id: this.state.todos.length+1,
title: title,
completed: false
})
this.setState(this.state)
}
render() {
return (
<Router>
<div className="App">
<div className="container">
<Header />
<Route exact path="/" render={props => (
<React.Fragment>
<AddTodo addTodo={this.addTodo} />
<Todos todos={this.state.todos} markComplete={this.markComplete} delTodo={this.delTodo} />
</React.Fragment>
)} />
<Route path="/about" component={About} />
</div>
</div>
</Router>
);
}
}
export default App;

33
src/components/AddTodo.js Normal file
View File

@ -0,0 +1,33 @@
import React, { Component } from 'react'
export class AddTodo extends Component {
state = {
title: ""
}
onSubmit = (e) => {
e.preventDefault()
this.props.addTodo(this.state.title)
this.setState({ title: "" })
}
onChange = (e) => this.setState({ [e.target.name]: e.target.value })
render() {
return (
<form style={{display: "flex"}} onSubmit={this.onSubmit}>
<input
type="text"
name="title"
placeholder="Add Todo ..."
style={{flex: "10", padding: "5px"}}
value={this.state.title}
onChange={this.onChange}
/>
<input type="submit" value="Submit" className="btn" style={{flex: "1"}} />
</form>
)
}
}
export default AddTodo

42
src/components/TodoItem.js Normal file
View File

@ -0,0 +1,42 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export class TodoItem extends Component {
getStyle() {
return {
padding: "10px",
borderBottom: "1px #ccc dotted",
backgroundColor: "#f4f4f4",
textDecoration: this.props.todo.completed ? "line-through" : "none"
}
}
render() {
const { id, title} = this.props.todo
return (
<div style={this.getStyle()}>
<p>
<input type="checkbox" onChange={this.props.markComplete.bind(this, id)} style={{marginRight: "10px"}} />
{ title }
<button onClick={this.props.delTodo.bind(this, id)} style={btnStyle}>X</button>
</p>
</div>
)
}
}
TodoItem.propTypes = {
todo: PropTypes.object.isRequired
}
const btnStyle = {
background: "#C22",
color: "#fff",
border: 'none',
padding: "5px 8px",
borderRadius: "50%",
cursor: "pointer",
float: "right"
}
export default TodoItem

18
src/components/Todos.js Normal file
View File

@ -0,0 +1,18 @@
import React, { Component } from 'react';
import TodoItem from './TodoItem'
import PropTypes from 'prop-types'
class Todos extends Component {
render() {
return this.props.todos.map(todo => (
<TodoItem key={todo.id} todo={todo} markComplete={this.props.markComplete} delTodo={this.props.delTodo} />
))
}
}
// Prop types
Todos.propTypes = {
todos: PropTypes.array.isRequired
}
export default Todos;

25
src/components/layout/Header.js Normal file
View File

@ -0,0 +1,25 @@
import React from "react"
import { Link } from "react-router-dom"
export function Header() {
return (
<header style ={headerStyle}>
<h1>TodoList</h1>
<Link to="/" style={linkStyle}>Home</Link> | <Link to="/about" style={linkStyle}>About</Link>
</header>
)
}
const headerStyle = {
background: "#333",
color: "#fff",
textAlign: "center",
padding: "10px"
}
const linkStyle = {
color: "#fff",
textDecoration: "none"
}
export default Header

10
src/components/pages/About.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
export default function About() {
return (
<React.Fragment>
<h1>About</h1>
<p>This is the TodoList app v0.0.0. It is part of a React crash course</p>
</React.Fragment>
)
}

16
src/index.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

141
src/serviceWorker.js Normal file
View File

@ -0,0 +1,141 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then(registration => {
registration.unregister();
})
.catch(error => {
console.error(error.message);
});
}
}

10849
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff