From 82292691806ee943b7dee26ffae2e672692b451c Mon Sep 17 00:00:00 2001 From: arunmishra2000 Date: Wed, 18 Aug 2021 23:21:44 +0530 Subject: [PATCH 1/2] Converted App.js from class based component to functional component --- package-lock.json | 88 +++++++++++++ package.json | 1 + src/App.js | 314 +++++++++++++++++++++++++++++++++++----------- 3 files changed, 331 insertions(+), 72 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7cc502c..f3ba486 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2833,11 +2833,21 @@ "@types/react": "*" } }, + "@types/source-list-map": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", + "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==" + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==" }, + "@types/tapable": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", + "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==" + }, "@types/testing-library__jest-dom": { "version": "5.9.2", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.2.tgz", @@ -2846,11 +2856,77 @@ "@types/jest": "*" } }, + "@types/uglify-js": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz", + "integrity": "sha512-O3MmRAk6ZuAKa9CHgg0Pr0+lUOqoMLpc9AS4R8ano2auvsg7IE8syF3Xh/NPr26TWklxYcqoEEFdzLLs1fV9PQ==", + "requires": { + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "@types/warning": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" }, + "@types/webpack": { + "version": "4.41.30", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz", + "integrity": "sha512-GUHyY+pfuQ6haAfzu4S14F+R5iGRwN6b2FRNJY7U0NilmFAqbsOfK6j1HwuLBAqwRIT+pVdNDJGJ6e8rpp0KHA==", + "requires": { + "@types/node": "*", + "@types/tapable": "^1", + "@types/uglify-js": "*", + "@types/webpack-sources": "*", + "anymatch": "^3.0.0", + "source-map": "^0.6.0" + }, + "dependencies": { + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, + "@types/webpack-sources": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz", + "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==", + "requires": { + "@types/node": "*", + "@types/source-list-map": "*", + "source-map": "^0.7.3" + }, + "dependencies": { + "source-map": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", + "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==" + } + } + }, "@types/yargs": { "version": "13.0.10", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.10.tgz", @@ -4928,6 +5004,18 @@ "parse-json": "^4.0.0" } }, + "craco": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/craco/-/craco-0.0.3.tgz", + "integrity": "sha512-eeibbwJm1CTf/j3xvNgNmsRS7abegp4Cfm5qtn5nE9/0JjZRas+FHj8IlT8FMFWR0XOyZFGcWZgzaTU19DNGoQ==", + "requires": { + "@babel/core": "^7.6.0", + "@craco/craco": "^5.5.0", + "@types/babel__core": "^7.1.3", + "@types/webpack": "^4.39.2", + "webpack": "^4.41.0" + } + }, "create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", diff --git a/package.json b/package.json index d7b8c74..6f9a469 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@wojtekmaj/react-daterange-picker": "^3.0.1", "axios": "^0.20.0", "bootstrap": "^4.5.2", + "craco": "0.0.3", "polished": "^3.6.6", "react": "^16.13.1", "react-bootstrap": "^1.3.0", diff --git a/src/App.js b/src/App.js index e59f5bf..8c553dd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { Switch, Route, Redirect } from "react-router-dom"; import { connect } from "react-redux"; @@ -17,12 +17,15 @@ import HousePage from "./pages/house/house.component"; import UserPage from "./pages/users/users.component"; import NavigationBar from "./components/navigation-bar/NavigationBar"; import Sidebar from "./components/sidebar/Sidebar"; -import NotFoundPage from './pages/not-found/not-found.component'; +import NotFoundPage from "./pages/not-found/not-found.component"; import { setCurrentUser } from "./redux/user/user.actions"; import SignIn from "./pages/sign-in-and-sign-up/SignIn"; import SignUp from "./pages/sign-in-and-sign-up/SignUp"; -import { CSSTransition, TransitionGroup as ReactTransitionGroup } from "react-transition-group"; +import { + CSSTransition, + TransitionGroup as ReactTransitionGroup, +} from "react-transition-group"; import HomepageLoggedIn from "./pages/homepage/HomepageLoggedIn"; const MainContainer = styled.div` @@ -61,37 +64,27 @@ const Transition = styled(CSSTransition)` } &.page-fade-enter.page-fade-enter-active { - opacity: 1; - transition: opacity 300ms ease-in; + opacity: 1; + transition: opacity 300ms ease-in; } &.page-fade-exit { - display: none; + display: none; } `; -class App extends React.Component { - constructor(props) { - super(props); +const App = (props) => { + const [overlay, setOverlay] = useState(false); - this.loadUserInfo(); - - this.onMenuToggle = this.onMenuToggle.bind(this); - - this.state = { - overlay: false, - }; - } - - loadUserInfo() { + const loadUserInfo = () => { // Get user details from localStorage and save to react store try { - var info = localStorage.getItem("userInfo"); + let info = localStorage.getItem("userInfo"); if (info) { let userInfo = JSON.parse(info); console.log("Loaded UserId from storage : " + userInfo.userId); console.log("Loaded token from storage : " + userInfo.token); - this.props.setCurrentUser({ + props.setCurrentUser({ userId: userInfo.userId, token: userInfo.token, }); @@ -101,59 +94,236 @@ class App extends React.Component { } catch { console.log("Cannot find info from localStorage"); } - } + }; + loadUserInfo(); + const onMenuToggle = () => { + setOverlay(!overlay); + }; - onMenuToggle() { - const overlay = this.state.overlay; - this.setState({ - overlay: !overlay, - }); - } + return ( +
+ + + + + {overlay && } + + { + return ( + + +
+ + - render() { - return ( -
- - - - - {this.state.overlay && } - - { - return - -
- - - - } /> - } />} /> - } />} /> - - - - - - - - - - -
- - - }} /> - - - -
- ); - } -} + } + /> + ( + } /> + )} + /> + ( + } /> + )} + /> + + + + + + + + + + +
+ + + ); + }} + /> + + + +
+ ); +}; + +// class App extends React.Component { +// constructor(props) { +// super(props); + +// this.loadUserInfo(); + +// this.onMenuToggle = this.onMenuToggle.bind(this); + +// this.state = { +// overlay: false, +// }; +// } + +// loadUserInfo() { +// // Get user details from localStorage and save to react store +// try { +// var info = localStorage.getItem("userInfo"); +// if (info) { +// let userInfo = JSON.parse(info); +// console.log("Loaded UserId from storage : " + userInfo.userId); +// console.log("Loaded token from storage : " + userInfo.token); +// this.props.setCurrentUser({ +// userId: userInfo.userId, +// token: userInfo.token, +// }); +// } else { +// console.log("user info not found"); +// } +// } catch { +// console.log("Cannot find info from localStorage"); +// } +// } + +// onMenuToggle() { +// const overlay = this.state.overlay; +// this.setState({ +// overlay: !overlay, +// }); +// } + +// render() { +// return ( +//
+// +// +// +// +// {this.state.overlay && } +// +// { +// return ( +// +// +//
+// +// + +// } +// /> +// ( +// } /> +// )} +// /> +// ( +// } /> +// )} +// /> + +// +// +// + +// +// + +// +// +//
+// +// +// ); +// }} +// /> +// +// +// +//
+// ); +// } +// } const mapDispatchToProps = (dispatch) => ({ setCurrentUser: (user) => dispatch(setCurrentUser(user)), From 8851c0e8a58f8418145f5e5adc0a33c8e04d8fa4 Mon Sep 17 00:00:00 2001 From: arunmishra2000 Date: Wed, 18 Aug 2021 23:29:39 +0530 Subject: [PATCH 2/2] Converted App.js from class based component to functional component --- src/App.js | 136 ----------------------------------------------------- 1 file changed, 136 deletions(-) diff --git a/src/App.js b/src/App.js index 8c553dd..568e93c 100644 --- a/src/App.js +++ b/src/App.js @@ -189,142 +189,6 @@ const App = (props) => { ); }; -// class App extends React.Component { -// constructor(props) { -// super(props); - -// this.loadUserInfo(); - -// this.onMenuToggle = this.onMenuToggle.bind(this); - -// this.state = { -// overlay: false, -// }; -// } - -// loadUserInfo() { -// // Get user details from localStorage and save to react store -// try { -// var info = localStorage.getItem("userInfo"); -// if (info) { -// let userInfo = JSON.parse(info); -// console.log("Loaded UserId from storage : " + userInfo.userId); -// console.log("Loaded token from storage : " + userInfo.token); -// this.props.setCurrentUser({ -// userId: userInfo.userId, -// token: userInfo.token, -// }); -// } else { -// console.log("user info not found"); -// } -// } catch { -// console.log("Cannot find info from localStorage"); -// } -// } - -// onMenuToggle() { -// const overlay = this.state.overlay; -// this.setState({ -// overlay: !overlay, -// }); -// } - -// render() { -// return ( -//
-// -// -// -// -// {this.state.overlay && } -// -// { -// return ( -// -// -//
-// -// - -// } -// /> -// ( -// } /> -// )} -// /> -// ( -// } /> -// )} -// /> - -// -// -// - -// -// - -// -// -//
-// -// -// ); -// }} -// /> -// -// -// -//
-// ); -// } -// } - const mapDispatchToProps = (dispatch) => ({ setCurrentUser: (user) => dispatch(setCurrentUser(user)), });