From 3609e747a693050b0a4655e87aec19108dd83486 Mon Sep 17 00:00:00 2001 From: delila Date: Wed, 20 May 2020 17:45:12 +0800 Subject: [PATCH] git push --- package.json | 3 +- src/App.css | 38 ++++++++++ src/App.js | 77 ++++++++++++++++++++ src/App.test.js | 9 +++ src/components/counter.jsx | 104 ++++++++++++++++++++++++++ src/components/counters.jsx | 64 ++++++++++++++++ src/components/navbar.jsx | 32 ++++++++ src/index.css | 13 ++++ src/index.js | 19 ++++- src/logo.svg | 7 ++ src/serviceWorker.js | 141 ++++++++++++++++++++++++++++++++++++ src/setupTests.js | 5 ++ 12 files changed, 508 insertions(+), 4 deletions(-) create mode 100644 src/App.css create mode 100644 src/App.js create mode 100644 src/App.test.js create mode 100644 src/components/counter.jsx create mode 100644 src/components/counters.jsx create mode 100644 src/components/navbar.jsx create mode 100644 src/index.css create mode 100644 src/logo.svg create mode 100644 src/serviceWorker.js create mode 100644 src/setupTests.js diff --git a/package.json b/package.json index 8f2867f7..8a574d25 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { - "name": "react-app", + "name": "counter-app", "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", + "bootstrap": "^4.5.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" diff --git a/src/App.css b/src/App.css new file mode 100644 index 00000000..74b5e053 --- /dev/null +++ b/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 00000000..3afb1ad4 --- /dev/null +++ b/src/App.js @@ -0,0 +1,77 @@ +import React, { Component } from "react"; +import NavBar from "./components/navbar"; +import Counters from "./components/counters"; +import "./App.css"; +import Counter from "./components/counter"; +import { render } from "@testing-library/react"; + +class App extends Component { + state = { + counters: [ + { id: 1, value: 4 }, + { id: 2, value: 0 }, + { id: 3, value: 0 }, + { id: 4, value: 0 }, + ], + }; + + constructor(props) { + super(props); + console.log("APP-constructor", this.props); + // this.state = this.props.something; + } + + componentDidMount() { + console.log("APP-Mounted"); + } + + handleIncrement = (counter) => { + const counters = [...this.state.counters]; + const index = counters.indexOf(counter); + counters[index] = { ...counter }; + counters[index].value++; + this.setState({ counters }); + // console.log(this.state.counters[index]); + }; + + handleDelete = (counterId) => { + // console.log("Event handler called! ", counterId); + const counters = this.state.counters.filter((c) => c.id !== counterId); + // this.setState({ counters: counters }); + this.setState({ counters }); + }; + + handleReset = () => { + const counters = this.state.counters.map((c) => { + c.value = 0; + return c; + }); + this.setState({ counters }); + }; + + render() { + console.log("APP-rendered"); + + return ( + + { + return c.value > 0; + }).length + } + /> +
+ +
+ + ); + } +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 00000000..4db7ebc2 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/components/counter.jsx b/src/components/counter.jsx new file mode 100644 index 00000000..00f78503 --- /dev/null +++ b/src/components/counter.jsx @@ -0,0 +1,104 @@ +import React, { Component } from "react"; + +class Counter extends Component { + // state = { + // // count: this.props.value, + // value: this.props.counter.value, //props is read-only + // // imageUrl: + // // "https://i.pinimg.com/564x/06/f9/57/06f957389f1b933d835fa2d271af4b1e.jpg", + // tags: ["tag1", "tag2", "tag3"], + // }; + + componentDidUpdate(prevProps, prevState) { + console.log("prevProps", prevProps); + console.log("prevState", prevState); + if (prevProps.counter.value !== this.props.counter.value) { + // Ajax call and get new data from the server + } + } + + componentWillMount() { + console.log("counter - unmount"); + } + + styles = { + fontSize: 10, + fontWeight: "bold", + }; + + // constructor() { + // super(); + // this.handleIncrement = this.handleIncrement.bind(this); + // } + + // Event handler: Use arrow function instead of constructor + // handleIncrement = (product) => { + // console.log(product); + // this.setState({ count: this.props.counter.count + 1 }); + // // obj.method(); + // // function(); + // }; + // handleIncrement = () => { + // this.setState({ value: this.props.counter.value + 1 }); + // // obj.method(); + // // function(); + // }; + + // doHandleIncrement = () => { + // this.handleIncrement({ id: 1 }); + // }; + + render() { + // let classes = this.getBadgeClasses(); + // console.log("props", this.props); + console.log("Counter - rendered"); + return ( +
+ {/*

{this.props.id}

*/} + {/* */} + {/* {this.formatCount()} */} + {this.formatCount()} + + + {/* {this.props.counter.tags.length === 0 && "Please create a new tag! "} + {this.renderTags()} */} +
+ ); + } + + renderTags() { + if (this.props.counter.tags.length === 0) return

There are no tags!

; + return ( + + ); + } + + getBadgeClasses() { + let classes = "badge m-2 badge-"; + classes += this.props.counter.value === 0 ? "warning" : "primary"; + return classes; + } + + formatCount() { + const { value } = this.props.counter; + // const x =

Zero

; + // return value === 0 ? x : value; + return value === 0 ? "Zero" : value; + } +} + +export default Counter; diff --git a/src/components/counters.jsx b/src/components/counters.jsx new file mode 100644 index 00000000..8b08023b --- /dev/null +++ b/src/components/counters.jsx @@ -0,0 +1,64 @@ +import React, { Component } from "react"; +import Counter from "./counter"; + +class Counters extends Component { + // state = { + // counters: [ + // { id: 1, value: 4 }, + // { id: 2, value: 0 }, + // { id: 3, value: 0 }, + // { id: 4, value: 0 }, + // ], + // }; + + // handleIncrement = (counter) => { + // const counters = [...this.state.counters]; + // const index = counters.indexOf(counter); + // counters[index] = { ...counter }; + // counters[index].value++; + // this.setState({ counters }); + // // console.log(this.state.counters[index]); + // }; + + // handleDelete = (counterId) => { + // // console.log("Event handler called! ", counterId); + // const counters = this.state.counters.filter((c) => c.id !== counterId); + // // this.setState({ counters: counters }); + // this.setState({ counters }); + // }; + + // handleReset = () => { + // const counters = this.state.counters.map((c) => { + // c.value = 0; + // return c; + // }); + // this.setState({ counters }); + // }; + + render() { + console.log("Counters - rendered"); + const { onReset, onDelete, onIncrement } = this.props; // Obj Destructuring + return ( + +
+ + {this.props.counters.map((counter) => ( + + {/*

counter # {counter.id}

*/} + + ))} +
+ ); + } +} + +export default Counters; diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx new file mode 100644 index 00000000..64f62a5b --- /dev/null +++ b/src/components/navbar.jsx @@ -0,0 +1,32 @@ +import React, { Component } from "react"; +// Stateless functional component (sfc) +const NavBar = ({ totalCounters }) => { + console.log("NavBar - randered"); // lifecycle hook only worked in Class, not function + return ( + + ); +}; + +// class NavBar extends Component { +// render() { +// return ( +// +// ); +// } +// } + +export default NavBar; diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..ec2585e8 --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.js b/src/index.js index eb2e3b58..2aea4dfd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,19 @@ import React from "react"; import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; +import "bootstrap/dist/css/bootstrap.css"; +import Counters from "./components/counters"; -const element =

Hello world!

; -console.log(element); -ReactDOM.render(element, document.getElementById("root")); +ReactDOM.render( + + + , + 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(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 00000000..6b60c104 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/serviceWorker.js b/src/serviceWorker.js new file mode 100644 index 00000000..b04b771a --- /dev/null +++ b/src/serviceWorker.js @@ -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); + }); + } +} diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 00000000..74b1a275 --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect';