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

adjustment: refactor AppJs to Hooks #58

Merged
merged 3 commits into from
Mar 5, 2022
Merged

adjustment: refactor AppJs to Hooks #58

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82ef8fd
adjustment: refactor AppJs to Hooks
fajar13k Mar 5, 2022
337e202
fix: set user without having to wrap inside another object
fajar13k Mar 5, 2022
8f8c17c
fix: revert package-lock, props to use direct setState from Hooks dir…
fajar13k Mar 5, 2022
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
172 changes: 65 additions & 107 deletions client/src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from "react";
import React, { Component, useEffect, useState } from "react";
import { navigate, Router } from "@reach/router";
import NotFound from "./pages/NotFound.js";
import Home from "./pages/Home.js";
Expand All @@ -21,118 +21,78 @@ import { Layout } from "antd";
import "antd/dist/antd.css";
const { Footer } = Layout;

class App extends Component {
constructor(props) {
super(props);
this.state = { user: {}, loginAttention: false };
}
export default function App() {
const [user, setUser] = useState({});
const [loginAttention, setLoginAttention] = useState(false);

componentDidMount() {
useEffect(() => {
get("/api/whoami").then((res) => {
this.setState({ user: res });
setUser(res);
});
}
}, []);

updateUser = (user) => {
this.setState({ user });
};
/*
Each route for a tourney can optionally specify a year
if a year is not specified, it will default to the most recent iteration
of the tourney.

setLoginAttention = (value) => {
this.setState({ loginAttention: value });
};
TourneyRouteWrapper transforms the 'tourney' prop to include the year of the tourney
e.g. /2019/igts -> props.tourney === "igts_2019"
*/
return (
<>
<Layout>
<Navbar attention={loginAttention} user={user} setUser={setUser} />
<Router primary={false}>
<Home path="/" />
<Archives path="/archives" />
<Staff path="/staff" />
<PoolHelper path="/pool-helper" />

<TourneyRouteWrapper
user={user}
setUser={setUser}
setLoginAttention={setLoginAttention}
path="/:tourney/home"
PageComponent={TourneyHome}
/>
<TourneyRouteWrapper
user={user}
setUser={setUser}
setLoginAttention={setLoginAttention}
path="/:year/:tourney/home"
PageComponent={TourneyHome}
/>

render() {
/*
Each route for a tourney can optionally specify a year
if a year is not specified, it will default to the most recent iteration
of the tourney.
<TourneyRouteWrapper user={user} path="/:tourney/staff" PageComponent={TourneyStaff} />
<TourneyRouteWrapper
user={user}
path="/:year/:tourney/staff"
PageComponent={TourneyStaff}
/>

TourneyRouteWrapper transforms the 'tourney' prop to include the year of the tourney
e.g. /2019/igts -> props.tourney === "igts_2019"
*/
return (
<>
<Layout>
<Navbar
attention={this.state.loginAttention}
user={this.state.user}
updateUser={this.updateUser}
<TourneyRouteWrapper path="/:tourney/rules" PageComponent={Rules} />
<TourneyRouteWrapper path="/:year/:tourney/rules" PageComponent={Rules} />

<TourneyRouteWrapper user={user} path="/:tourney/pools" PageComponent={Mappools} />
<TourneyRouteWrapper user={user} path="/:year/:tourney/pools" PageComponent={Mappools} />

<TourneyRouteWrapper user={user} path="/:tourney/players" PageComponent={Players} />
<TourneyRouteWrapper user={user} path="/:year/:tourney/players" PageComponent={Players} />

<TourneyRouteWrapper user={user} path="/:tourney/schedule" PageComponent={Schedule} />
<TourneyRouteWrapper
user={user}
path="/:year/:tourney/schedule"
PageComponent={Schedule}
/>
<Router primary={false}>
<Home path="/" />
<Archives path="/archives" />
<Staff path="/staff" />
<PoolHelper path="/pool-helper" />

<TourneyRouteWrapper
setLoginAttention={this.setLoginAttention}
user={this.state.user}
path="/:tourney/home"
updateUser={this.updateUser}
PageComponent={TourneyHome}
/>
<TourneyRouteWrapper
setLoginAttention={this.setLoginAttention}
user={this.state.user}
path="/:year/:tourney/home"
updateUser={this.updateUser}
PageComponent={TourneyHome}
/>

<TourneyRouteWrapper
user={this.state.user}
path="/:tourney/staff"
PageComponent={TourneyStaff}
/>
<TourneyRouteWrapper
user={this.state.user}
path="/:year/:tourney/staff"
PageComponent={TourneyStaff}
/>

<TourneyRouteWrapper path="/:tourney/rules" PageComponent={Rules} />
<TourneyRouteWrapper path="/:year/:tourney/rules" PageComponent={Rules} />

<TourneyRouteWrapper
user={this.state.user}
path="/:tourney/pools"
PageComponent={Mappools}
/>
<TourneyRouteWrapper
user={this.state.user}
path="/:year/:tourney/pools"
PageComponent={Mappools}
/>

<TourneyRouteWrapper
user={this.state.user}
path="/:tourney/players"
PageComponent={Players}
/>
<TourneyRouteWrapper
user={this.state.user}
path="/:year/:tourney/players"
PageComponent={Players}
/>

<TourneyRouteWrapper
user={this.state.user}
path="/:tourney/schedule"
PageComponent={Schedule}
/>
<TourneyRouteWrapper
user={this.state.user}
path="/:year/:tourney/schedule"
PageComponent={Schedule}
/>

<NotFound default />
</Router>
<Footer></Footer>
</Layout>
</>
);
}

<NotFound default />
</Router>
<Footer></Footer>
</Layout>
</>
);
}

function TourneyRouteWrapper(props) {
Expand All @@ -144,5 +104,3 @@ function TourneyRouteWrapper(props) {

return <PageComponent {...props} tourney={`${tourney}_${_year}`} />;
}

export default App;