From f075ada52bf7c2c6f9ce2c596c0d96301e495df8 Mon Sep 17 00:00:00 2001 From: ronit-mukherjee Date: Fri, 1 May 2020 06:20:38 +0530 Subject: [PATCH 1/3] Package.json file updated for package name and author details --- package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 25b7559..130ff06 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,10 @@ { - "name": "react-calculate-loan-eligibility", + "name": "ilive4coding-react-playlist", + "author": { + "name": "Ronit Mukherjee", + "email": "connect.ronit@gmail.com", + "url": "https://www.youtube.com/watch?v=V6iCEC-FQas&list=PLZjjdd9-SJS18Awh12gvGd9WErraVp93X" + }, "version": "0.1.0", "private": true, "dependencies": { From 188846b1a2850f1e5964b47343fa300d30beb619 Mon Sep 17 00:00:00 2001 From: ronit-mukherjee Date: Fri, 1 May 2020 10:31:52 +0530 Subject: [PATCH 2/3] ZY4ej1DViYI | initial commit --- src/App.js | 25 +++--- src/ViewModes.js | 47 ++++++++++- yarn.lock | 214 ++--------------------------------------------- 3 files changed, 67 insertions(+), 219 deletions(-) diff --git a/src/App.js b/src/App.js index 139dc4e..dc070cf 100644 --- a/src/App.js +++ b/src/App.js @@ -6,20 +6,21 @@ import ViewModes from "./ViewModes"; class App extends React.PureComponent { state = { viewMode: "add", - //dataList: [], + dataList: [], }; - dataList = React.createRef(); + //dataList = React.createRef(); setViewMode(viewMode) { this.setState({ viewMode }); } + setViewMode = this.setViewMode.bind(this); addData(data) { - this.dataList.current = [...this.dataList.current, data]; - // this.setState((state) => ({ - // dataList: [...state.dataList, data], - // })); + //this.dataList.current = [...this.dataList.current, data]; + this.setState((state) => ({ + dataList: [...state.dataList, data], + })); } addData = this.addData.bind(this); @@ -35,8 +36,12 @@ class App extends React.PureComponent {
+ {/* */}
@@ -44,8 +49,8 @@ class App extends React.PureComponent { {this.state.viewMode === "add" ? ( ) : ( - // - + + // )}
@@ -55,7 +60,7 @@ class App extends React.PureComponent { componentDidMount() { console.log("App Mounted"); - this.dataList.current = []; + //this.dataList.current = []; } componentDidUpdate() { console.log("App Re-Rendered/Updated"); diff --git a/src/ViewModes.js b/src/ViewModes.js index b84b76a..0d93c6f 100644 --- a/src/ViewModes.js +++ b/src/ViewModes.js @@ -1,6 +1,6 @@ -import React, { useEffect } from "react"; +import React, { useEffect, memo } from "react"; -const ViewModes = ({ viewMode = "", onSetViewMode }) => { +const ViewModesFunc = ({ viewMode = "", onSetViewMode }) => { useEffect(() => { console.log("ViewModes Mounted"); }, []); @@ -31,4 +31,45 @@ const ViewModes = ({ viewMode = "", onSetViewMode }) => { ); }; -export default ViewModes; +// class ViewModes extends React.PureComponent { +// render() { +// return ( +//
+// +// +//
+// ); +// } + +// componentDidMount() { +// console.log("ViewModes mounted"); +// } + +// componentDidUpdate() { +// console.log(this.props.viewMode); +// console.log("ViewModes updated"); +// } + +// componentWillUnmount() { +// console.log("ViewModes unmounted"); +// } +// } + +//export default ViewModesFunc; +export default memo(ViewModesFunc); diff --git a/yarn.lock b/yarn.lock index e342e48..6c355d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1192,7 +1192,7 @@ "@babel/helper-plugin-utils" "^7.8.3" "@babel/plugin-transform-typescript" "^7.9.0" -"@babel/runtime-corejs3@^7.7.4", "@babel/runtime-corejs3@^7.8.3": +"@babel/runtime-corejs3@^7.8.3": version "7.9.2" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.2.tgz#26fe4aa77e9f1ecef9b776559bbb8e84d34284b7" integrity sha512-HHxmgxbIzOfFlZ+tdeRKtaxWOMUoCG5Mu3wKeUmOxjYrwb3AAHgnmtCUbPPK11/raIWLIBK250t8E2BPO0p7jA== @@ -1214,7 +1214,7 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.5.1", "@babel/runtime@^7.7.4", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.8.4": version "7.9.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== @@ -1485,16 +1485,6 @@ "@types/istanbul-reports" "^1.1.1" "@types/yargs" "^13.0.0" -"@jest/types@^25.4.0": - version "25.4.0" - resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.4.0.tgz#5afeb8f7e1cba153a28e5ac3c9fe3eede7206d59" - integrity sha512-XBeaWNzw2PPnGW5aXvZt3+VO60M+34RY3XDsCK5tW7kyj3RK0XClRutCfjqcBuaR2aBQTbluEDME9b5MB9UAPw== - dependencies: - "@types/istanbul-lib-coverage" "^2.0.0" - "@types/istanbul-reports" "^1.1.1" - "@types/yargs" "^15.0.0" - chalk "^3.0.0" - "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -1508,11 +1498,6 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== -"@sheerun/mutationobserver-shim@^0.3.2": - version "0.3.3" - resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25" - integrity sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw== - "@svgr/babel-plugin-add-jsx-attribute@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1" @@ -1616,48 +1601,6 @@ "@svgr/plugin-svgo" "^4.3.1" loader-utils "^1.2.3" -"@testing-library/dom@^6.15.0": - version "6.16.0" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.16.0.tgz#04ada27ed74ad4c0f0d984a1245bb29b1fd90ba9" - integrity sha512-lBD88ssxqEfz0wFL6MeUyyWZfV/2cjEZZV3YRpb2IoJRej/4f1jB0TzqIOznTpfR1r34CNesrubxwIlAQ8zgPA== - dependencies: - "@babel/runtime" "^7.8.4" - "@sheerun/mutationobserver-shim" "^0.3.2" - "@types/testing-library__dom" "^6.12.1" - aria-query "^4.0.2" - dom-accessibility-api "^0.3.0" - pretty-format "^25.1.0" - wait-for-expect "^3.0.2" - -"@testing-library/jest-dom@^4.2.4": - version "4.2.4" - resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz#00dfa0cbdd837d9a3c2a7f3f0a248ea6e7b89742" - integrity sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg== - dependencies: - "@babel/runtime" "^7.5.1" - chalk "^2.4.1" - css "^2.2.3" - css.escape "^1.5.1" - jest-diff "^24.0.0" - jest-matcher-utils "^24.0.0" - lodash "^4.17.11" - pretty-format "^24.0.0" - redent "^3.0.0" - -"@testing-library/react@^9.3.2": - version "9.5.0" - resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.5.0.tgz#71531655a7890b61e77a1b39452fbedf0472ca5e" - integrity sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg== - dependencies: - "@babel/runtime" "^7.8.4" - "@testing-library/dom" "^6.15.0" - "@types/testing-library__react" "^9.1.2" - -"@testing-library/user-event@^7.1.2": - version "7.2.1" - resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c" - integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA== - "@types/babel__core@^7.1.0": version "7.1.4" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.4.tgz#5c5569cc40e5f2737dfc00692f5444e871e4a234" @@ -1691,11 +1634,6 @@ dependencies: "@babel/types" "^7.3.0" -"@types/color-name@^1.1.1": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" - integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== - "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" @@ -1755,59 +1693,16 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== -"@types/prop-types@*": - version "15.7.3" - resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" - integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== - "@types/q@^1.5.1": version "1.5.2" resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw== -"@types/react-dom@*": - version "16.9.7" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.7.tgz#60844d48ce252d7b2dccf0c7bb937130e27c0cd2" - integrity sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA== - dependencies: - "@types/react" "*" - -"@types/react@*": - version "16.9.34" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349" - integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow== - dependencies: - "@types/prop-types" "*" - csstype "^2.2.0" - "@types/stack-utils@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== -"@types/testing-library__dom@*": - version "7.0.2" - resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-7.0.2.tgz#2906f8a0dce58b0746c6ab606f786bd06fe6940e" - integrity sha512-8yu1gSwUEAwzg2OlPNbGq+ixhmSviGurBu1+ivxRKq1eRcwdjkmlwtPvr9VhuxTq2fNHBWN2po6Iem3Xt5A6rg== - dependencies: - pretty-format "^25.1.0" - -"@types/testing-library__dom@^6.12.1": - version "6.14.0" - resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz#1aede831cb4ed4a398448df5a2c54b54a365644e" - integrity sha512-sMl7OSv0AvMOqn1UJ6j1unPMIHRXen0Ita1ujnMX912rrOcawe4f7wu0Zt9GIQhBhJvH2BaibqFgQ3lP+Pj2hA== - dependencies: - pretty-format "^24.3.0" - -"@types/testing-library__react@^9.1.2": - version "9.1.3" - resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.3.tgz#35eca61cc6ea923543796f16034882a1603d7302" - integrity sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w== - dependencies: - "@types/react-dom" "*" - "@types/testing-library__dom" "*" - pretty-format "^25.1.0" - "@types/yargs-parser@*": version "15.0.0" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d" @@ -1820,13 +1715,6 @@ dependencies: "@types/yargs-parser" "*" -"@types/yargs@^15.0.0": - version "15.0.4" - resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299" - integrity sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg== - dependencies: - "@types/yargs-parser" "*" - "@typescript-eslint/eslint-plugin@^2.10.0": version "2.19.2" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.19.2.tgz#e279aaae5d5c1f2547b4cff99204e1250bc7a058" @@ -2185,14 +2073,6 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1: dependencies: color-convert "^1.9.0" -ansi-styles@^4.0.0, ansi-styles@^4.1.0: - version "4.2.1" - resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359" - integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA== - dependencies: - "@types/color-name" "^1.1.1" - color-convert "^2.0.1" - anymatch@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb" @@ -2229,14 +2109,6 @@ aria-query@^3.0.0: ast-types-flow "0.0.7" commander "^2.11.0" -aria-query@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.0.2.tgz#250687b4ccde1ab86d127da0432ae3552fc7b145" - integrity sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w== - dependencies: - "@babel/runtime" "^7.7.4" - "@babel/runtime-corejs3" "^7.7.4" - arity-n@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745" @@ -3018,14 +2890,6 @@ chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4" - integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg== - dependencies: - ansi-styles "^4.1.0" - supports-color "^7.1.0" - chardet@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" @@ -3196,19 +3060,12 @@ color-convert@^1.9.0, color-convert@^1.9.1: dependencies: color-name "1.1.3" -color-convert@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" - integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== - dependencies: - color-name "~1.1.4" - color-name@1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@^1.0.0, color-name@~1.1.4: +color-name@^1.0.0: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== @@ -3597,12 +3454,7 @@ css-what@^3.2.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1" integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw== -css.escape@^1.5.1: - version "1.5.1" - resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" - integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s= - -css@^2.0.0, css@^2.2.3: +css@^2.0.0: version "2.2.4" resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw== @@ -3714,11 +3566,6 @@ cssstyle@^1.0.0, cssstyle@^1.1.1: dependencies: cssom "0.3.x" -csstype@^2.2.0: - version "2.6.10" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" - integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== - cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" @@ -3956,11 +3803,6 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -dom-accessibility-api@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz#511e5993dd673b97c87ea47dba0e3892f7e0c983" - integrity sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA== - dom-converter@^0.2: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -6008,7 +5850,7 @@ jest-config@^24.9.0: pretty-format "^24.9.0" realpath-native "^1.1.0" -jest-diff@^24.0.0, jest-diff@^24.9.0: +jest-diff@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da" integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ== @@ -6125,7 +5967,7 @@ jest-leak-detector@^24.9.0: jest-get-type "^24.9.0" pretty-format "^24.9.0" -jest-matcher-utils@^24.0.0, jest-matcher-utils@^24.9.0: +jest-matcher-utils@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073" integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA== @@ -6941,11 +6783,6 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== -min-indent@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256" - integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY= - mini-css-extract-plugin@0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e" @@ -8557,7 +8394,7 @@ pretty-error@^2.1.1: renderkid "^2.0.1" utila "~0.4" -pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0: +pretty-format@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9" integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA== @@ -8567,16 +8404,6 @@ pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0: ansi-styles "^3.2.0" react-is "^16.8.4" -pretty-format@^25.1.0: - version "25.4.0" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.4.0.tgz#c58801bb5c4926ff4a677fe43f9b8b99812c7830" - integrity sha512-PI/2dpGjXK5HyXexLPZU/jw5T9Q6S1YVXxxVxco+LIqzUFHXIbKZKdUVt7GcX7QUCr31+3fzhi4gN4/wUYPVxQ== - dependencies: - "@jest/types" "^25.4.0" - ansi-regex "^5.0.0" - ansi-styles "^4.0.0" - react-is "^16.12.0" - private@^0.1.6, private@^0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -8828,11 +8655,6 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== -react-is@^16.12.0: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" - integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== - react-is@^16.8.1, react-is@^16.8.4: version "16.12.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" @@ -8993,14 +8815,6 @@ recursive-readdir@2.2.2: dependencies: minimatch "3.0.4" -redent@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" - integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== - dependencies: - indent-string "^4.0.0" - strip-indent "^3.0.0" - regenerate-unicode-properties@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e" @@ -10080,13 +9894,6 @@ strip-eof@^1.0.0: resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8= -strip-indent@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" - integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== - dependencies: - min-indent "^1.0.0" - strip-json-comments@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7" @@ -10128,7 +9935,7 @@ supports-color@^6.1.0: dependencies: has-flag "^3.0.0" -supports-color@^7.0.0, supports-color@^7.1.0: +supports-color@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1" integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== @@ -10658,11 +10465,6 @@ w3c-xmlserializer@^1.1.2: webidl-conversions "^4.0.2" xml-name-validator "^3.0.0" -wait-for-expect@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463" - integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag== - walker@^1.0.7, walker@~1.0.5: version "1.0.7" resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb" From 907e4446fb9532a74a7c1bff6b166920af5b5108 Mon Sep 17 00:00:00 2001 From: ronit-mukherjee Date: Mon, 4 May 2020 10:37:38 +0530 Subject: [PATCH 3/3] ylRBcmVG1aE | Initial Commit --- src/AddData.js | 102 ----------------------------- src/App.js | 125 +++++++++++++++++++----------------- src/ClassBasedCounter.js | 52 +++++++++++++++ src/FunctionBasedCounter.js | 40 ++++++++++++ src/ViewData.js | 46 ------------- src/ViewModes.js | 75 ---------------------- src/models/Data.js | 13 ---- 7 files changed, 157 insertions(+), 296 deletions(-) delete mode 100644 src/AddData.js create mode 100644 src/ClassBasedCounter.js create mode 100644 src/FunctionBasedCounter.js delete mode 100644 src/ViewData.js delete mode 100644 src/ViewModes.js delete mode 100644 src/models/Data.js diff --git a/src/AddData.js b/src/AddData.js deleted file mode 100644 index 2548d1e..0000000 --- a/src/AddData.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useRef, useState, useEffect } from "react"; - -const AddData = ({ onAddData = () => null }) => { - const nameRef = useRef(); - const emailRef = useRef(); - const phoneRef = useRef(); - - const [dataAddSuccess, setDataAddSuccess] = useState(false); - - useEffect(() => { - console.log("AddData Mounted"); - }, []); - useEffect(() => { - console.log("AddData Re-Rendered/Updated"); - }); - - const onFormSubmit = (e) => { - e.preventDefault(); - - const name = nameRef.current.value; - const email = emailRef.current.value; - const phone = phoneRef.current.value; - - if (name && email && phone) { - const data = { name, email, phone }; - - onAddData(data); - - setDataAddSuccess(true); - - nameRef.current.value = ""; - emailRef.current.value = ""; - phoneRef.current.value = ""; - nameRef.current.focus(); - - setTimeout(() => { - setDataAddSuccess(false); - }, 3000); - } - }; - - return ( -
-
-

Add Data

-
-
- {dataAddSuccess && ( -
- Data Added Successfully -
- )} -
-
- - -
-
- - -
-
- - -
-
-
- -
-
-
-
-
-
-
- ); -}; - -export default AddData; diff --git a/src/App.js b/src/App.js index dc070cf..2f733e2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,70 +1,75 @@ -import React from "react"; -import AddData from "./AddData"; -import ViewData from "./ViewData"; -import ViewModes from "./ViewModes"; +import React, { useState, useRef } from "react"; +import ClassBasedCounter from "./ClassBasedCounter"; +import FunctionBasedCounter from "./FunctionBasedCounter"; -class App extends React.PureComponent { - state = { - viewMode: "add", - dataList: [], - }; +const App = () => { + const [currentLoadedComponent, setCurrentLoadedComponent] = useState(0); + const [counterStartingPoint, setCounterStartingPoint] = useState(1); + const counterSPIRef = useRef(); - //dataList = React.createRef(); - - setViewMode(viewMode) { - this.setState({ viewMode }); - } - setViewMode = this.setViewMode.bind(this); - - addData(data) { - //this.dataList.current = [...this.dataList.current, data]; - this.setState((state) => ({ - dataList: [...state.dataList, data], - })); - } - addData = this.addData.bind(this); - - render() { - return ( -
-
-
-

Use React Ref Differently

-
-
-
-
- +

Understanding useEffect() in Depth

+
+
+
+ - {/* */} +
+ +
-
-
- {this.state.viewMode === "add" ? ( - - ) : ( - - // - )} +
+
+
+
+ +
- ); - } - - componentDidMount() { - console.log("App Mounted"); - //this.dataList.current = []; - } - componentDidUpdate() { - console.log("App Re-Rendered/Updated"); - } -} +
+
+ {currentLoadedComponent === 1 && ( + + )} + {currentLoadedComponent === 2 && ( + + )} +
+
+
+ ); +}; export default App; diff --git a/src/ClassBasedCounter.js b/src/ClassBasedCounter.js new file mode 100644 index 0000000..3a74f13 --- /dev/null +++ b/src/ClassBasedCounter.js @@ -0,0 +1,52 @@ +import React from "react"; + +class ClassBasedCounter extends React.PureComponent { + state = { + counter: parseInt(this.props.startsAt), + }; + + intervalRef = React.createRef(); + + componentDidMount() { + this.intervalRef = setInterval(() => { + this.setState((state) => ({ counter: state.counter + 1 })); + }, 1000); + } + + componentDidUpdate(prevProps) { + if (prevProps.startsAt !== this.props.startsAt) { + //Clear old interval + clearInterval(this.intervalRef); + + this.setState({ counter: parseInt(this.props.startsAt) }); + + this.intervalRef = setInterval(() => { + this.setState((state) => ({ counter: state.counter + 1 })); + }, 1000); + } + } + + componentWillUnmount() { + //Clear interval + clearInterval(this.intervalRef); + } + + render() { + return ( +
+

Class Based Counter

+

+ Counter Starts From {this.props.startsAt} +

+

+ {this.state.counter} +

+
+ ); + } +} + +export default ClassBasedCounter; diff --git a/src/FunctionBasedCounter.js b/src/FunctionBasedCounter.js new file mode 100644 index 0000000..67d3a33 --- /dev/null +++ b/src/FunctionBasedCounter.js @@ -0,0 +1,40 @@ +import React, { memo, useState, useEffect } from "react"; + +let FunctionBasedCounter = ({ startsAt = 1 }) => { + const [counter, setCounter] = useState(startsAt); + + /* useEffect(() => { + setInterval(() => { + setCounter((counter) => parseInt(counter) + 1); + }, 1000); + }, [startsAt]); */ + + useEffect(() => { + if (counter !== startsAt) { + setCounter(startsAt); + } + + const intervalId = setInterval(() => { + setCounter((counter) => parseInt(counter) + 1); + }, 1000); + + return () => clearInterval(intervalId); + }, [startsAt]); + + return ( +
+

Function Based Counter

+

Counter Starts From {startsAt}

+

+ {counter} +

+
+ ); +}; + +FunctionBasedCounter = memo(FunctionBasedCounter); + +export default FunctionBasedCounter; diff --git a/src/ViewData.js b/src/ViewData.js deleted file mode 100644 index 7ce2556..0000000 --- a/src/ViewData.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useEffect } from "react"; - -const ViewData = ({ data }) => { - useEffect(() => { - console.log("ViewData Mounted"); - }, []); - useEffect(() => { - console.log("ViewData Re-Rendered/Updated"); - }); - - return ( -
-
-

View Data

-
-
- - - - - - - - - - - {data.map((d, index) => { - return ( - - - - - - - ); - })} - -
#NameEmailPhone
{index + 1}{d.name}{d.email}{d.phone}
-
-
-
-
- ); -}; - -export default ViewData; diff --git a/src/ViewModes.js b/src/ViewModes.js deleted file mode 100644 index 0d93c6f..0000000 --- a/src/ViewModes.js +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useEffect, memo } from "react"; - -const ViewModesFunc = ({ viewMode = "", onSetViewMode }) => { - useEffect(() => { - console.log("ViewModes Mounted"); - }, []); - useEffect(() => { - console.log("ViewModes Updated/Re-Rendered"); - }); - return ( -
- - -
- ); -}; - -// class ViewModes extends React.PureComponent { -// render() { -// return ( -//
-// -// -//
-// ); -// } - -// componentDidMount() { -// console.log("ViewModes mounted"); -// } - -// componentDidUpdate() { -// console.log(this.props.viewMode); -// console.log("ViewModes updated"); -// } - -// componentWillUnmount() { -// console.log("ViewModes unmounted"); -// } -// } - -//export default ViewModesFunc; -export default memo(ViewModesFunc); diff --git a/src/models/Data.js b/src/models/Data.js deleted file mode 100644 index dac0d1f..0000000 --- a/src/models/Data.js +++ /dev/null @@ -1,13 +0,0 @@ -class Data { - name = ""; - email = ""; - phone = ""; - - constructor(name, email, phone) { - this.name = name; - this.email = email; - this.phone = phone; - } -} - -export default Data;