Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Converted App.js from class based component to functional component #158

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Converted App.js from class based component to functional component #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8229269
Converted App.js from class based component to functional component
arunmishra2000 Aug 18, 2021
8851c0e
Converted App.js from class based component to functional component
arunmishra2000 Aug 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
182 changes: 108 additions & 74 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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`
Expand Down Expand Up @@ -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,
});
Comment on lines +79 to 90
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be better if we just destructure the user info and use it to set the current user . use const instead of var or let

Copy link

@alaahatem alaahatem Nov 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

 try {
      const info = localStorage.getItem("userInfo");
      if (info) {
        const {userId , token) = 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,
          token
        });

Expand All @@ -101,59 +94,100 @@ class App extends React.Component {
} catch {
console.log("Cannot find info from localStorage");
}
}

onMenuToggle() {
const overlay = this.state.overlay;
this.setState({
overlay: !overlay,
});
}

render() {
return (
<div>
<MainContainer>
<NavigationBar onMenuToggle={this.onMenuToggle} menuToggled={this.state.overlay} />
<PageContainer>
<Sidebar overlay={this.state.overlay} />
{this.state.overlay && <Overlay onClick={this.onMenuToggle} />}
<Page>
<Route render={({ location }) => {
return <TransitionGroup>
<Transition
key={location.key}
timeout={300}
classNames="page-fade"
>
<div>
<Switch location={location}>
<Route exact path="/" component={this.props.currentUser ? HomepageLoggedIn : HomePage} />

<Route exact path="/signin" component={() => <Redirect to="/login" />} />
<Route exact path="/login" component={() => <SignInAndSignUpPage inputBox={<SignIn />} />} />
<Route exact path="/signup" component={() => <SignInAndSignUpPage inputBox={<SignUp />} />} />

<Route exact path="/communities" component={CommunitiesPage} />
<Route exact path="/community/new" component={CreateCommunityPage} />
<Route exact path="/community/:uuid" component={CommunityPage} />

<Route exact path="/user/:uuid" component={UserPage} />
<Route exact path="/house/:uuid" component={HousePage} />

<Route path="*" component={NotFoundPage} />
</Switch>
</div>
</Transition>
</TransitionGroup>
}} />
</Page>
</PageContainer>
</MainContainer>
</div>
);
}
}
};
loadUserInfo();
const onMenuToggle = () => {
setOverlay(!overlay);
};
Comment on lines +99 to +101
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change this to
const onMenuToggle = () => setOverlay(!overlay);


return (
<div>
<MainContainer>
<NavigationBar onMenuToggle={onMenuToggle} menuToggled={overlay} />
<PageContainer>
<Sidebar overlay={overlay} />
{overlay && <Overlay onClick={onMenuToggle} />}
<Page>
<Route
render={({ location }) => {
return (
<TransitionGroup>
<Transition
key={location.key}
timeout={300}
className="page-fade"
>
<div>
<Switch location={location}>
<Route
exact
path="/"
component={
props.currentUser ? HomepageLoggedIn : HomePage
}
/>

<Route
exact
path="/signin"
component={() => <Redirect to="/login" />}
/>
<Route
exact
path="/login"
component={() => (
<SignInAndSignUpPage inputBox={<SignIn />} />
)}
/>
<Route
exact
path="/signup"
component={() => (
<SignInAndSignUpPage inputBox={<SignUp />} />
)}
/>

<Route
exact
path="/communities"
component={CommunitiesPage}
/>
<Route
exact
path="/community/new"
component={CreateCommunityPage}
/>
<Route
exact
path="/community/:uuid"
component={CommunityPage}
/>

<Route
exact
path="/user/:uuid"
component={UserPage}
/>
<Route
exact
path="/house/:uuid"
component={HousePage}
/>

<Route path="*" component={NotFoundPage} />
</Switch>
</div>
</Transition>
</TransitionGroup>
);
}}
/>
</Page>
</PageContainer>
</MainContainer>
</div>
);
};

const mapDispatchToProps = (dispatch) => ({
setCurrentUser: (user) => dispatch(setCurrentUser(user)),
Expand Down