Skip to content

Commit c5a4623

Browse files
barbarbar338barbarbar338
committed
🔥 Feature Page
1 parent 568ccd4 commit c5a4623

File tree

6 files changed

+134
-7
lines changed

6 files changed

+134
-7
lines changed

‎src/App.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
import { Component } from "react";
22
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
33
import { ToastContainer } from "react-toastify";
4-
4+
import FEATURES from "./features";
55
import Landing from "./pages/Landing";
66
import Features from "./pages/Features";
7+
import Feature from "./pages/Feature";
78
import NotFound from "./pages/NotFound";
89

910
export default class App extends Component {
10-
state = {};
11+
handleFeatureRedirects() {
12+
return FEATURES.map((featureData, i) => {
13+
return (
14+
<Route key={i} path={featureData.path}>
15+
<Feature {...featureData} />
16+
</Route>
17+
);
18+
});
19+
}
1120
render() {
1221
return (
1322
<div id="app">
@@ -30,6 +39,7 @@ export default class App extends Component {
3039
<Route path="/features">
3140
<Features />
3241
</Route>
42+
{this.handleFeatureRedirects()}
3343
<Route path="*">
3444
<NotFound />
3545
</Route>

‎src/components/Feature/Banner.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function Banner({ title }) {
2+
return (
3+
<section className="text-center mg-auto pd-1-5">
4+
<h1>Feature:</h1>
5+
<p className="lead">{title}</p>
6+
</section>
7+
);
8+
}

‎src/components/Layout.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import FEATURES from "../features";
77
export default class Layout extends Component {
88
handleFeatures() {
99
const features = [];
10-
FEATURES.forEach((featureData) => {
10+
FEATURES.forEach((featureData, i) => {
1111
features.push(
12-
<Link className="dropdown-item" to={featureData.path}>
12+
<Link key={i} className="dropdown-item" to={featureData.path}>
1313
{featureData.title}
1414
</Link>,
1515
);

‎src/features.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const FEATURES = [
106106
{
107107
title: "Get Clan Data",
108108
query: `utils/clan?${defaultClanID}`,
109-
path: "/get-ranked-2v2-data",
109+
path: "/get-clan-data",
110110
},
111111
];
112112

‎src/pages/Feature.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { Component } from "react";
2+
import { toast } from "react-toastify";
3+
import Layout from "../components/Layout";
4+
import Banner from "../components/Feature/Banner";
5+
import CONFIG from "../config";
6+
7+
export default class Landing extends Component {
8+
state = {
9+
meta: {
10+
title: `Brawlhalla Open API - ${this.props.title}`,
11+
description: `${this.props.title}`,
12+
},
13+
query: this.props.query,
14+
response: JSON.stringify(
15+
{
16+
foo: "bar",
17+
},
18+
null,
19+
4,
20+
),
21+
};
22+
handleQueryChange = (e) => {
23+
this.setState({
24+
query: e.target.value,
25+
});
26+
};
27+
handleButtonClick = async (e) => {
28+
if (!this.state.query || this.state.query.length < 1)
29+
return this.createErrorToast("Specify a request query");
30+
const request = await fetch(`${CONFIG.API_URL}${this.state.query}`);
31+
const response = await request.json();
32+
if (!request.ok) return this.createErrorToast(response.message);
33+
this.setState({
34+
response: JSON.stringify(response, null, 4),
35+
});
36+
this.createSuccessToast(this.state.query);
37+
};
38+
createErrorToast(str) {
39+
return toast.error(`⛔ ${str}`, {
40+
position: "bottom-right",
41+
autoClose: 5000,
42+
hideProgressBar: false,
43+
closeOnClick: true,
44+
pauseOnHover: true,
45+
draggable: true,
46+
progress: undefined,
47+
});
48+
}
49+
createSuccessToast(str) {
50+
return toast.success(`✅ ${str}`, {
51+
position: "bottom-right",
52+
autoClose: 5000,
53+
hideProgressBar: false,
54+
closeOnClick: true,
55+
pauseOnHover: true,
56+
draggable: true,
57+
progress: undefined,
58+
});
59+
}
60+
render() {
61+
return (
62+
<Layout meta={this.state.meta}>
63+
<div className="container">
64+
<Banner title={this.props.title} />
65+
<hr />
66+
<section className="pd-1-5">
67+
<div className="row">
68+
<div className="col-sm-6">
69+
<h3>Request Input</h3>
70+
<div className="input-group">
71+
<div className="input-group-prepend">
72+
<span className="input-group-text">
73+
api/
74+
</span>
75+
</div>
76+
<input
77+
type="text"
78+
placeholder="Route"
79+
defaultValue={this.state.query}
80+
className="form-control"
81+
onChange={this.handleQueryChange}
82+
/>
83+
<div className="input-group-append">
84+
<button
85+
className="btn btn-outline-secondary"
86+
onClick={this.handleButtonClick}
87+
>
88+
Make Request
89+
</button>
90+
</div>
91+
</div>
92+
</div>
93+
<div className="col-sm-6">
94+
<h3>Response</h3>
95+
<textarea
96+
rows="10"
97+
className="form-control rounded-0"
98+
value={this.state.response}
99+
readOnly
100+
/>
101+
</div>
102+
</div>
103+
</section>
104+
</div>
105+
</Layout>
106+
);
107+
}
108+
}

‎src/pages/Features.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,16 @@ export default class Landing extends Component {
1212
},
1313
};
1414
handleFeatures() {
15-
return FEATURES.map((featureItemData) => {
16-
return <FeatureItem {...featureItemData} />;
15+
return FEATURES.map((featureItemData, i) => {
16+
return <FeatureItem key={i} {...featureItemData} />;
1717
});
1818
}
1919
render() {
2020
return (
2121
<Layout meta={this.state.meta}>
2222
<div className="container">
2323
<Banner />
24+
<hr />
2425
<section className="pd-1-5">
2526
<div className="row">{this.handleFeatures()}</div>
2627
</section>

0 commit comments

Comments
 (0)