Skip to content

Commit 46c38aa

Browse files
hb99960hb99960
committed
refractor : code clean up
1 parent 3d7ecf8 commit 46c38aa

File tree

6 files changed

+125
-146
lines changed

6 files changed

+125
-146
lines changed

‎src/App.js

+15-22
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ function App() {
1212

1313
const sortedData = newData.dates.sort((a, b) => new Date(a.date) - new Date(b.date));
1414

15-
// processing here
1615
console.log("Data in handle data change : ", newData);
1716
const dates = sortedData.map(item => item.date);
1817
const numAsteroids = sortedData.map(item => item.num_asteroids);
@@ -22,14 +21,8 @@ function App() {
2221
const closestAsteroid = newData.closest_asteroid.name;
2322
const closestAsteroidDistance = newData.closest_asteroid.distance;
2423
const averageDiameter = newData.average_diameter;
25-
26-
// console.log("Total asteroids :", totalAsteroid);
27-
// // Set the processed data
28-
// // setData({ dates, numAsteroids, totalAsteroid, maxVelocityAsteroid, closestAsteroidDistance });
29-
// // setData(newData);
30-
setData({dates, numAsteroids,totalAsteroid, maxVelocityAsteroid, maxVelocity, closestAsteroid, closestAsteroidDistance, averageDiameter});
24+
setData({ dates, numAsteroids, totalAsteroid, maxVelocityAsteroid, maxVelocity, closestAsteroid, closestAsteroidDistance, averageDiameter });
3125
}
32-
3326

3427
return (
3528
<>
@@ -44,21 +37,21 @@ function App() {
4437
navItem3Field4="Learning Links"
4538
navBtn1="Search"
4639
></NavBar>
47-
48-
<div className="container my-3">
49-
<SideBar onDataChange={handleDataChange}/>
5040

51-
<div className="container">
52-
<LineChart
53-
dates={data.dates}
54-
numAsteroids={data.numAsteroids}
55-
totalAsteroid={data.totalAsteroid}
56-
maxVelocityAsteroid={data.maxVelocityAsteroid}
57-
maxVelocity={data.maxVelocity}
58-
closestAsteroid={data.closestAsteroid}
59-
closestAsteroidDistance={data.closestAsteroidDistance}
60-
averageDiameter={data.averageDiameter}></LineChart>
61-
</div>
41+
<div className="container my-3">
42+
<SideBar onDataChange={handleDataChange} />
43+
44+
<div className="container">
45+
<LineChart
46+
dates={data.dates}
47+
numAsteroids={data.numAsteroids}
48+
totalAsteroid={data.totalAsteroid}
49+
maxVelocityAsteroid={data.maxVelocityAsteroid}
50+
maxVelocity={data.maxVelocity}
51+
closestAsteroid={data.closestAsteroid}
52+
closestAsteroidDistance={data.closestAsteroidDistance}
53+
averageDiameter={data.averageDiameter}></LineChart>
54+
</div>
6255
</div>
6356
</>
6457
);

‎src/components/LineChart.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,8 @@ import { Chart as ChartJS } from "chart.js/auto";
44

55
export default class LineChart extends Component {
66
render() {
7-
// const {labels, labelsData } = this.props;
8-
// const { dates, numAsteroids, totalAsteroids, maxVelocityAsteroid, closestAsteroidDistance } = this.props;
97
const { dates, numAsteroids, totalAsteroid, maxVelocityAsteroid, maxVelocity, closestAsteroid, closestAsteroidDistance, averageDiameter } = this.props;
10-
console.log("In Line Chart dates : ",dates);
11-
console.log("In Line Chart numAsteroids : ",numAsteroids);
12-
console.log("In Line Chart totalAsteroids : ",totalAsteroid);
13-
console.log("In Line Chart maxVelocityAsteroid : ",maxVelocityAsteroid);
14-
console.log("In Line Chart closestAsteroidDistance : ",closestAsteroidDistance);
15-
console.log("In Line Chart averageDiameter : ",averageDiameter);
8+
169
return (
1710
<div style={{ width: "100%", height: "400px" }}>
1811
Asteroid Data
@@ -29,7 +22,8 @@ export default class LineChart extends Component {
2922
},
3023
],
3124
}}
32-
></Line>
25+
>
26+
</Line>
3327
<ol className="list-group list-group-numbered">
3428
<li className="list-group-item d-flex justify-content-between align-items-start">
3529
<div className="ms-2 me-auto">
@@ -40,7 +34,7 @@ export default class LineChart extends Component {
4034
<li className="list-group-item d-flex justify-content-between align-items-start">
4135
<div className="ms-2 me-auto">
4236
<div className="fw-bold">Closest Asteroid</div>
43-
37+
4438
</div>
4539
{closestAsteroid}{closestAsteroidDistance} km
4640
</li>

‎src/components/NavBar.js

+90-90
Original file line numberDiff line numberDiff line change
@@ -4,108 +4,108 @@ import PropTypes from 'prop-types'
44
export default function NavBar(props) {
55
return (
66
<nav className="navbar navbar-expand-lg bg-body-tertiary">
7-
<div className="container-fluid">
8-
<a className="navbar-brand" href="/">
9-
{props.title}
10-
</a>
11-
<button
12-
className="navbar-toggler"
13-
type="button"
14-
data-bs-toggle="collapse"
15-
data-bs-target="#navbarSupportedContent"
16-
aria-controls="navbarSupportedContent"
17-
aria-expanded="false"
18-
aria-label="Toggle navigation"
19-
>
20-
<span className="navbar-toggler-icon"></span>
21-
</button>
22-
<div className="collapse navbar-collapse" id="navbarSupportedContent">
23-
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
24-
<li className="nav-item">
25-
<a className="nav-link active" aria-current="page" href="/">
26-
{props.navItem1}
27-
</a>
28-
</li>
29-
<li className="nav-item">
30-
<a className="nav-link" href="/">
7+
<div className="container-fluid">
8+
<a className="navbar-brand" href="/">
9+
{props.title}
10+
</a>
11+
<button
12+
className="navbar-toggler"
13+
type="button"
14+
data-bs-toggle="collapse"
15+
data-bs-target="#navbarSupportedContent"
16+
aria-controls="navbarSupportedContent"
17+
aria-expanded="false"
18+
aria-label="Toggle navigation"
19+
>
20+
<span className="navbar-toggler-icon"></span>
21+
</button>
22+
<div className="collapse navbar-collapse" id="navbarSupportedContent">
23+
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
24+
<li className="nav-item">
25+
<a className="nav-link active" aria-current="page" href="/">
26+
{props.navItem1}
27+
</a>
28+
</li>
29+
<li className="nav-item">
30+
<a className="nav-link" href="/">
3131
{props.navItem2}
32-
</a>
33-
</li>
34-
<li className="nav-item dropdown">
35-
<a
36-
className="nav-link dropdown-toggle"
37-
href="/"
38-
role="button"
39-
data-bs-toggle="dropdown"
40-
aria-expanded="false"
41-
>
42-
{props.navItem3}
43-
</a>
44-
<ul className="dropdown-menu">
45-
<li>
46-
<a className="dropdown-item" href="/">
47-
{props.navItem3Field1}
48-
</a>
49-
</li>
50-
<li>
51-
<a className="dropdown-item" href="/">
32+
</a>
33+
</li>
34+
<li className="nav-item dropdown">
35+
<a
36+
className="nav-link dropdown-toggle"
37+
href="/"
38+
role="button"
39+
data-bs-toggle="dropdown"
40+
aria-expanded="false"
41+
>
42+
{props.navItem3}
43+
</a>
44+
<ul className="dropdown-menu">
45+
<li>
46+
<a className="dropdown-item" href="/">
47+
{props.navItem3Field1}
48+
</a>
49+
</li>
50+
<li>
51+
<a className="dropdown-item" href="/">
5252
{props.navItem3Field2}
53-
</a>
54-
</li>
55-
<li>
56-
<a className="dropdown-item" href="/">
53+
</a>
54+
</li>
55+
<li>
56+
<a className="dropdown-item" href="/">
5757
{props.navItem3Field3}
58-
</a>
59-
</li>
60-
<li>
61-
<hr className="dropdown-divider" />
62-
</li>
63-
<li>
64-
<a className="dropdown-item" href="/">
58+
</a>
59+
</li>
60+
<li>
61+
<hr className="dropdown-divider" />
62+
</li>
63+
<li>
64+
<a className="dropdown-item" href="/">
6565
{props.navItem3Field4}
66-
</a>
67-
</li>
68-
</ul>
69-
</li>
70-
</ul>
71-
<form className="d-flex" role="search">
72-
<input
73-
className="form-control me-2"
74-
type={props.navBtn1}
75-
placeholder={props.navBtn1}
76-
aria-label={props.navBtn1}
77-
/>
78-
<button className="btn btn-outline-success" type="submit">
66+
</a>
67+
</li>
68+
</ul>
69+
</li>
70+
</ul>
71+
<form className="d-flex" role="search">
72+
<input
73+
className="form-control me-2"
74+
type={props.navBtn1}
75+
placeholder={props.navBtn1}
76+
aria-label={props.navBtn1}
77+
/>
78+
<button className="btn btn-outline-success" type="submit">
7979
{props.navBtn1}
80-
</button>
81-
</form>
82-
</div>
80+
</button>
81+
</form>
8382
</div>
84-
</nav>
83+
</div>
84+
</nav>
8585

8686
)
8787
}
8888

8989
NavBar.prototype = {
90-
title: PropTypes.string.isRequired,
91-
navItem1: PropTypes.string.isRequired,
92-
navItem2: PropTypes.string.isRequired,
93-
navItem3: PropTypes.string.isRequired,
94-
navItem3Field1: PropTypes.string.isRequired,
95-
navItem3Field2: PropTypes.string.isRequired,
96-
navItem3Field3: PropTypes.string.isRequired,
97-
navItem3Field4: PropTypes.string.isRequired,
98-
navBtn1: PropTypes.string.isRequired
90+
title: PropTypes.string.isRequired,
91+
navItem1: PropTypes.string.isRequired,
92+
navItem2: PropTypes.string.isRequired,
93+
navItem3: PropTypes.string.isRequired,
94+
navItem3Field1: PropTypes.string.isRequired,
95+
navItem3Field2: PropTypes.string.isRequired,
96+
navItem3Field3: PropTypes.string.isRequired,
97+
navItem3Field4: PropTypes.string.isRequired,
98+
navBtn1: PropTypes.string.isRequired
9999
}
100100

101101
NavBar.defaultProps = {
102-
title: 'Company name',
103-
navItem1: 'Item 1',
104-
navItem2: 'Item 2',
105-
navItem3: 'Item 3',
106-
navItem3Field1: 'Field 1',
107-
navItem3Field2: 'Field 1',
108-
navItem3Field3: 'Field 1',
109-
navItem3Field4: 'Field 1',
110-
navBtn1: 'Button 1'
102+
title: 'Company name',
103+
navItem1: 'Item 1',
104+
navItem2: 'Item 2',
105+
navItem3: 'Item 3',
106+
navItem3Field1: 'Field 1',
107+
navItem3Field2: 'Field 1',
108+
navItem3Field3: 'Field 1',
109+
navItem3Field4: 'Field 1',
110+
navBtn1: 'Button 1'
111111
}

‎src/components/SideBar.js

+16-17
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Modal } from "react-bootstrap";
55

66
export default function SideBar({ onDataChange }) {
77

8-
8+
99
const [startDate, setStartDate] = useState("");
1010
const [endDate, setEndDate] = useState("");
1111
const [showModal, setShowModal] = useState(false);
@@ -15,16 +15,16 @@ export default function SideBar({ onDataChange }) {
1515

1616
const start = new Date(startDate);
1717
const end = new Date(endDate);
18-
const dateDiff = (end - start) / (1000 * 60 * 60 * 24); // Difference in days
18+
const dateDiff = (end - start) / (1000 * 60 * 60 * 24);
1919

2020
if (dateDiff > 7) {
21-
setShowModal(true); // Show modal if date range is more than 7 days
21+
setShowModal(true);
2222
return;
2323
}
2424

25-
26-
console.log("Date Button is clicked!!");
27-
// Prepare the data to send
25+
26+
27+
2828
const formData = new FormData();
2929
formData.append("start_date", startDate);
3030
formData.append("end_date", endDate);
@@ -44,32 +44,31 @@ export default function SideBar({ onDataChange }) {
4444
}
4545
});
4646

47-
// Handle the response
48-
// console.log("Response from php", response);
49-
console.log("Endpoint :");
50-
const result = await response.json(); // Assuming index.php sends back a response
51-
console.log("Formatted JSON Response : ", JSON.stringify(result, null, 2)); // Display the result (for testing purposes)
52-
// onDataChange(JSON.stringify(result, null, 2))
47+
48+
49+
const result = await response.json();
50+
51+
5352
onDataChange(result);
5453
} catch (error) {
55-
console.error("Error fetching asteroid data:", error);
54+
5655
} finally {
57-
56+
5857
}
5958

6059
};
6160

6261
const handleStartDateChange = (e) => {
6362
const selectedStartDate = new Date(e.target.value);
6463
const formattedStartDate = selectedStartDate.toISOString().slice(0, 10);
65-
console.log(formattedStartDate);
64+
6665
setStartDate(formattedStartDate);
6766
}
6867

6968
const handleEndDateChange = (e) => {
7069
const selectedEndDate = new Date(e.target.value);
7170
const formattedEndDate = selectedEndDate.toISOString().slice(0, 10);
72-
console.log(formattedEndDate)
71+
7372
setEndDate(formattedEndDate);
7473
}
7574

@@ -118,7 +117,7 @@ export default function SideBar({ onDataChange }) {
118117
</Modal>
119118
)}
120119

121-
120+
122121
</div>
123122
);
124123
}

‎src/index.js

-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,4 @@ root.render(
1111
</React.StrictMode>
1212
);
1313

14-
// If you want to start measuring performance in your app, pass a function
15-
// to log results (for example: reportWebVitals(console.log))
16-
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
1714
reportWebVitals();

‎src/setupTests.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1 @@
1-
// jest-dom adds custom jest matchers for asserting on DOM nodes.
2-
// allows you to do things like:
3-
// expect(element).toHaveTextContent(/react/i)
4-
// learn more: https://github.com/testing-library/jest-dom
51
import '@testing-library/jest-dom';

0 commit comments

Comments
 (0)