finished react 10
This commit is contained in:
parent
8aa30868ce
commit
3995103cee
5362
react/8/pics/package-lock.json
generated
5362
react/8/pics/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.19.0",
|
"axios": "^0.19.0",
|
||||||
"eslint-plugin-import": "^2.18.2",
|
"eslint-plugin-import": "^2.18.2",
|
||||||
|
"prettier": "^1.18.2",
|
||||||
"react": "^16.9.0",
|
"react": "^16.9.0",
|
||||||
"react-dom": "^16.9.0",
|
"react-dom": "^16.9.0",
|
||||||
"react-scripts": "3.1.1"
|
"react-scripts": "3.1.1"
|
||||||
|
|
|
@ -1,27 +1,27 @@
|
||||||
import React from 'react'
|
import React from "react";
|
||||||
import SearchBar from './SearchBar'
|
import SearchBar from "./SearchBar";
|
||||||
import unsplash from '../api/unsplash'
|
import unsplash from "../api/unsplash";
|
||||||
import ImageList from './ImageList'
|
import ImageList from "./ImageList";
|
||||||
|
|
||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
state = { images: [] }
|
state = { images: [] };
|
||||||
|
|
||||||
onSearchSubmit = async term => {
|
onSearchSubmit = async term => {
|
||||||
const response = await unsplash.get('/search/photos', {
|
const response = await unsplash.get("/search/photos", {
|
||||||
params: { query: term },
|
params: { query: term }
|
||||||
})
|
});
|
||||||
|
|
||||||
this.setState({ images: response.data.results })
|
this.setState({ images: response.data.results });
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="ui container" style={{ marginTop: "10px" }}>
|
<div className="ui container" style={{ marginTop: "10px" }}>
|
||||||
<SearchBar onSubmit={this.onSearchSubmit} />
|
<SearchBar onSubmit={this.onSearchSubmit} />
|
||||||
<ImageList images={this.state.images} />
|
<ImageList images={this.state.images} />
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
@ -1,34 +1,34 @@
|
||||||
import React from 'react'
|
import React from "react";
|
||||||
|
|
||||||
class ImageCard extends React.Component {
|
class ImageCard extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props);
|
||||||
|
|
||||||
this.state = { spans: 0 }
|
this.state = { spans: 0 };
|
||||||
|
|
||||||
this.imageRef = React.createRef()
|
this.imageRef = React.createRef();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.imageRef.current.addEventListener('load', this.setSpans)
|
this.imageRef.current.addEventListener("load", this.setSpans);
|
||||||
}
|
}
|
||||||
|
|
||||||
setSpans = () => {
|
setSpans = () => {
|
||||||
const height = this.imageRef.current.clientHeight
|
const height = this.imageRef.current.clientHeight;
|
||||||
|
|
||||||
const spans = Math.ceil(height / 150 + 1)
|
const spans = Math.ceil(height / 150);
|
||||||
|
|
||||||
this.setState({ spans })
|
this.setState({ spans: spans });
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { description, urls } = this.props.image
|
const { description, urls } = this.props.image;
|
||||||
return (
|
return (
|
||||||
<div style={{ gridRowEnd: `span ${this.state.spans}` }}>
|
<div style={{ gridRowEnd: `span ${this.state.spans}` }}>
|
||||||
<img ref={this.imageRef} src={urls.regular} alt={description} />
|
<img ref={this.imageRef} src={urls.regular} alt={description} />
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ImageCard
|
export default ImageCard;
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import React from 'react'
|
import React from "react";
|
||||||
import ImageCard from './ImageCard'
|
import ImageCard from "./ImageCard";
|
||||||
import './imageList.css'
|
import "./imageList.css";
|
||||||
|
|
||||||
const ImageList = (props) => {
|
const ImageList = props => {
|
||||||
const images = props.images.map((image) => {
|
const images = props.images.map(image => {
|
||||||
return <ImageCard key={image.id} image={image} />
|
return <ImageCard key={image.id} image={image} />;
|
||||||
})
|
});
|
||||||
|
|
||||||
return <div className="image-list">{images}</div>
|
return <div className="image-list">{images}</div>;
|
||||||
}
|
};
|
||||||
|
|
||||||
export default ImageList
|
export default ImageList;
|
||||||
|
|
|
@ -1,9 +1,5 @@
|
||||||
import React from 'react';
|
import React from "react";
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from "react-dom";
|
||||||
import App from './components/App';
|
import App from "./components/App";
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<App />,
|
|
||||||
document.querySelector('#root')
|
|
||||||
);
|
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.querySelector("#root"));
|
||||||
|
|
Loading…
Reference in a new issue