Skip to content

Commit 97058f7

Browse files
kiranlmkiranlm
committed
code optimizations
1 parent c9a31c1 commit 97058f7

File tree

4 files changed

+85
-88
lines changed

4 files changed

+85
-88
lines changed

‎src/components/Launch/Filter/index.js‎

Lines changed: 78 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,104 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3+
import { YEARS } from "../../../constants";
34

45
const Filter = ({ filters, setFilters }) => (
5-
<div className="filter">
6-
<div className="filterWrapper">
7-
<h3>Filters</h3>
8-
<div className="filterLabel">Launch Year</div>
9-
<hr />
10-
<div className="filters">
11-
{Array(15)
12-
.fill()
13-
.map((_, i) => (
14-
<button
6+
<div className="filter">
7+
<div className="filterWrapper">
8+
<h3>Filters</h3>
9+
<div className="filterLabel">Launch Year</div>
10+
<hr />
11+
<div className="filters">
12+
{YEARS
13+
.map((item, i) => (
14+
<button
1515
type="button"
16-
onClick={() => {
17-
setFilters({ ...filters, ...{ launch_year: 2006 + i } });
18-
}}
19-
aria-label={(2006 + i).toString()}
20-
className={`filterItem ${
21-
parseInt(filters.launch_year) === 2006 + i ? "selected" : ""
16+
onClick={() => {
17+
setFilters({ ...filters, ...{ launch_year: item } });
18+
}}
19+
aria-label={(item).toString()}
20+
className={`filterItem ${parseInt(filters.launch_year) === item ? "selected" : ""
2221
}`}
23-
key={`year-${i}`}>
24-
{2006 + i}
25-
</button>
26-
))}
27-
</div>
22+
key={`year-${i}`}>
23+
{item}
24+
</button>
25+
))}
2826
</div>
29-
<div className="filterWrapper">
30-
<div className="filterLabel">Successful Launch</div>
31-
<hr />
32-
<div className="filters">
33-
<button
27+
</div>
28+
<div className="filterWrapper">
29+
<div className="filterLabel">Successful Launch</div>
30+
<hr />
31+
<div className="filters">
32+
<button
3433
type="button"
35-
className={`filterItem ${
36-
filters.launch_success === "true" || filters.launch_success === true
37-
? "selected"
38-
: ""
34+
className={`filterItem ${filters.launch_success === "true" || filters.launch_success === true
35+
? "selected"
36+
: ""
3937
}`}
40-
aria-label="launch-true"
41-
onClick={() => {
42-
setFilters({ ...filters, ...{ launch_success: true } });
43-
}}>
44-
True
38+
aria-label="launch-true"
39+
onClick={() => {
40+
setFilters({ ...filters, ...{ launch_success: true } });
41+
}}>
42+
True
4543
</button>
46-
<button
44+
<button
4745
type="button"
48-
className={`filterItem ${
49-
filters.launch_success === false ||
50-
filters.launch_success === "false"
51-
? "selected"
52-
: ""
46+
className={`filterItem ${filters.launch_success === false ||
47+
filters.launch_success === "false"
48+
? "selected"
49+
: ""
5350
}`}
54-
aria-label="launch-false"
55-
onClick={() => {
56-
setFilters({ ...filters, ...{ launch_success: false } });
57-
}}>
58-
False
51+
aria-label="launch-false"
52+
onClick={() => {
53+
setFilters({ ...filters, ...{ launch_success: false } });
54+
}}>
55+
False
5956
</button>
60-
</div>
6157
</div>
62-
<div className="filterWrapper">
63-
<div className="filterLabel">Successful Landing</div>
64-
<hr />
65-
<div className="filters">
66-
<button
58+
</div>
59+
<div className="filterWrapper">
60+
<div className="filterLabel">Successful Landing</div>
61+
<hr />
62+
<div className="filters">
63+
<button
6764
type="button"
68-
className={`filterItem ${
69-
filters.land_success === "true" || filters.land_success === true
70-
? "selected"
71-
: ""
65+
className={`filterItem ${filters.land_success === "true" || filters.land_success === true
66+
? "selected"
67+
: ""
7268
}`}
73-
aria-label="land-true"
74-
onClick={() => {
75-
setFilters({ ...filters, ...{ land_success: true } });
76-
}}>
77-
True
69+
aria-label="land-true"
70+
onClick={() => {
71+
setFilters({ ...filters, ...{ land_success: true } });
72+
}}>
73+
True
7874
</button>
79-
<button
75+
<button
8076
type="button"
81-
className={`filterItem ${
82-
filters.land_success === false || filters.land_success === "false"
83-
? "selected"
84-
: ""
77+
className={`filterItem ${filters.land_success === false || filters.land_success === "false"
78+
? "selected"
79+
: ""
8580
}`}
86-
aria-label="land-false"
87-
onClick={() => {
88-
setFilters({ ...filters, ...{ land_success: false } });
89-
}}>
90-
False
81+
aria-label="land-false"
82+
onClick={() => {
83+
setFilters({ ...filters, ...{ land_success: false } });
84+
}}>
85+
False
9186
</button>
92-
</div>
93-
<div className="filterReset">
94-
<button
87+
</div>
88+
<div className="filterReset">
89+
<button
9590
type="button"
96-
className="filterItem"
97-
aria-label="reset"
98-
onClick={() => {
99-
setFilters({ limit: 100 });
100-
}}>
101-
Reset
91+
className="filterItem"
92+
aria-label="reset"
93+
onClick={() => {
94+
setFilters({ limit: 100 });
95+
}}>
96+
Reset
10297
</button>
103-
</div>
10498
</div>
10599
</div>
106-
);
100+
</div>
101+
);
107102

108103
Filter.propTypes = {
109104
filters: PropTypes.shape({
@@ -112,7 +107,7 @@ Filter.propTypes = {
112107
PropTypes.string,
113108
PropTypes.bool,
114109
]),
115-
launch_success:PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
110+
launch_success: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
116111
limit: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
117112
}),
118113
setFilters: PropTypes.func,

‎src/components/Launch/Mission/LazyImage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect, useRef } from "react";
22
import PropTypes from "prop-types";
3+
import { PLACEHOLDER_IMAGE } from "../../../constants";
34

45
/**
56
* Component for image lazy loading
@@ -10,7 +11,6 @@ import PropTypes from "prop-types";
1011
* @returns {HTMLElement} | image tag with loaded image src
1112
*/
1213
function LazyImage({ src, alt }) {
13-
const placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAACqCAQAAACXfxwJAAAA6klEQVR42u3QQQEAAAQEMNe/rAaU4LdFWHqKY5EqVapUpEqVilSpUpEqVSpSpUpFqlSpSJUqFalSpSJVqlSkSpUqFalSpSJVqlSkSpWKVKlSkSpVKlKlSkWqVKlIlSoVqVKlSkWqVKlIlSoVqVKlIlWqVKRKlYpUqVKRKlUqUqVKRapUqVKRKlUqUqVKRapUqUiVKhWpUqUiVapUpEqVilSpUpEqVapUqVKlSkWqVKlIlSoVqVKlIlWqVKRKlYpUqVKRKlUqUqVKRapUqVKRKlUqUqVKRapUqUiVKhWpUqUiVapUpEqVitRfC5uXSXCNJu7OAAAAAElFTkSuQmCC";
1414
const [loaded, setLoaded] = useState(false);
1515
const imgRef = useRef();
1616
useEffect(() => {
@@ -21,7 +21,7 @@ function LazyImage({ src, alt }) {
2121
return (
2222
<img
2323
loading="lazy"
24-
src={!loaded ? placeholder : src}
24+
src={!loaded ? PLACEHOLDER_IMAGE : src}
2525
alt={alt}
2626
ref={imgRef}
2727
onLoad={() => setLoaded(true)}

‎src/constants.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/services/api.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// Base url
22
import fetch from "node-fetch"
3-
4-
const url = "https://api.spacexdata.com/v3/launches";
3+
import { API_URL } from "../constants";
54

65
/**
76
* SpaceX detail API call using fetch
@@ -12,6 +11,6 @@ const url = "https://api.spacexdata.com/v3/launches";
1211
*/
1312
export function getSpacexData(query) {
1413
return fetch(
15-
`${url}${query.trim() !== "" ? query : ""}`
14+
`${API_URL}${query.trim() !== "" ? query : ""}`
1615
).then((response) => response.json());
1716
}

0 commit comments

Comments
 (0)