-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathApp.js
More file actions
101 lines (94 loc) · 2.34 KB
/
Copy pathApp.js
File metadata and controls
101 lines (94 loc) · 2.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React from "react";
import "./styles/main.scss";
import "./styles/fonts/css/font-awesome.min.css";
import Nav from "./components/Nav-component";
import Header from "./components/Header";
import Card from "./components/Card";
import data from "./components/data";
import Projects from "./components/Projects";
import Contributor from "./components/Contributor";
import Footer from "./components/Footer";
class App extends React.Component {
state = {
repositories: [],
raw: [],
searchBar: "",
};
handleChange = (event) => {
const { name, value, type, checked } = event.target;
type === "checkbox"
? this.setState({
[name]: checked,
})
: this.setState({
[name]: value,
});
this.handleSearch();
};
handleSearch = (event) => {
fetch("https://api.github.com/orgs/1xcode/repos?per_page=100")
.then((data) => data.json())
.then((res) => {
this.setState({
raw: res,
});
});
let resp = [];
for (const repo of this.state.raw) {
if (this.state.searchBar !== "") {
if (repo.name.includes(this.state.searchBar)) {
resp = [...resp, repo];
}
}
}
// console.log(resp)
this.setState({
repositories: resp,
});
};
componentDidMount() {
fetch("https://api.github.com/orgs/1xcode/repos?per_page=100")
.then((data) => data.json())
.then((res) => {
this.setState({
repositories: res,
raw: res,
});
});
}
render() {
const cardlist = data.map((data) => (
<Card
key={data.id}
img={data.img}
title={data.title}
description={data.description}
url={data.url}
website={data.website}
/>
));
return (
<div className="App">
<Nav />
<Header />
<div className="band-container" data-layout="3-up">
{cardlist}
</div>
<Projects
data={
this.state.searchBar !== ""
? this.state.repositories
: this.state.raw
}
repo={this.state.repositories}
value={this.state.searchBar}
handleChange={this.handleChange}
handleSearch={this.handleSearch}
/>
<Contributor />
<Footer />
</div>
);
}
}
export default App;