finished react 10

react/8/pics/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "eslint-plugin-import": "^2.18.2",
+    "prettier": "^1.18.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.1"

react/8/pics/src/components/App.js

@@ -1,27 +1,27 @@
-import React from 'react'
-import SearchBar from './SearchBar'
-import unsplash from '../api/unsplash'
-import ImageList from './ImageList'
+import React from "react";
+import SearchBar from "./SearchBar";
+import unsplash from "../api/unsplash";
+import ImageList from "./ImageList";
 
 class App extends React.Component {
-    state = { images: [] }
+  state = { images: [] };
 
-    onSearchSubmit = async term => {
-        const response = await unsplash.get('/search/photos', {
-            params: { query: term },
-        })
+  onSearchSubmit = async term => {
+    const response = await unsplash.get("/search/photos", {
+      params: { query: term }
+    });
 
-        this.setState({ images: response.data.results })
-    }
+    this.setState({ images: response.data.results });
+  };
 
-    render() {
-        return (
-            <div className="ui container" style={{ marginTop: "10px" }}>
-                <SearchBar onSubmit={this.onSearchSubmit} />
-                <ImageList images={this.state.images} />
-            </div>
-        )
-    }
+  render() {
+    return (
+      <div className="ui container" style={{ marginTop: "10px" }}>
+        <SearchBar onSubmit={this.onSearchSubmit} />
+        <ImageList images={this.state.images} />
+      </div>
+    );
+  }
 }
 
-export default App;
+export default App;

react/8/pics/src/components/ImageCard.js

@@ -1,34 +1,34 @@
-import React from 'react'
+import React from "react";
 
 class ImageCard extends React.Component {
-    constructor(props) {
-        super(props)
+  constructor(props) {
+    super(props);
 
-        this.state = { spans: 0 }
+    this.state = { spans: 0 };
 
-        this.imageRef = React.createRef()
-    }
+    this.imageRef = React.createRef();
+  }
 
-    componentDidMount() {
-        this.imageRef.current.addEventListener('load', this.setSpans)
-    }
+  componentDidMount() {
+    this.imageRef.current.addEventListener("load", this.setSpans);
+  }
 
-    setSpans = () => {
-        const height = this.imageRef.current.clientHeight
+  setSpans = () => {
+    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() {
-        const { description, urls } = this.props.image
-        return (
-            <div style={{ gridRowEnd: `span ${this.state.spans}` }}>
-                <img ref={this.imageRef} src={urls.regular} alt={description} />
-            </div>
-        )
-    }
+  render() {
+    const { description, urls } = this.props.image;
+    return (
+      <div style={{ gridRowEnd: `span ${this.state.spans}` }}>
+        <img ref={this.imageRef} src={urls.regular} alt={description} />
+      </div>
+    );
+  }
 }
 
-export default ImageCard
+export default ImageCard;

react/8/pics/src/components/ImageList.js

@@ -1,13 +1,13 @@
-import React from 'react'
-import ImageCard from './ImageCard'
-import './imageList.css'
+import React from "react";
+import ImageCard from "./ImageCard";
+import "./imageList.css";
 
-const ImageList = (props) => {
-    const images = props.images.map((image) => {
-        return <ImageCard key={image.id} image={image} />
-    })
+const ImageList = props => {
+  const images = props.images.map(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;

react/8/pics/src/index.js

@@ -1,9 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
-
-ReactDOM.render(
-    <App />,
-    document.querySelector('#root')
-);
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
 
+ReactDOM.render(<App />, document.querySelector("#root"));