Exercise solutions

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

src/exercise1/Exercise1.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import CoffeeCard from './CoffeeCard';
 
 export default class Exercise1 extends React.Component {
     render() {
@@ -12,6 +13,10 @@ export default class Exercise1 extends React.Component {
                     <li>Render this component four times in <code>Exercise1.js</code> (one for each coffee drink).</li>
                     <li>Pass in the correct props.</li>
                 </ol>
+                <CoffeeCard drinkName="americano" price={4} />
+                <CoffeeCard drinkName="latte" price={4} />
+                <CoffeeCard drinkName="espresso" price={4} />
+                <CoffeeCard drinkName="mocha" price={4} />
             </div>
         )
     }

src/exercise1/Exercise1.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import Exercise1 from './Exercise1';
+import CoffeeCard from './CoffeeCard';
 
 describe('Exercise1', () => {
     const wrapper = shallow(<Exercise1 />);
@@ -17,4 +18,13 @@ describe('Exercise1', () => {
 
         expect(drinkNames).toEqual(['americano', 'espresso', 'latte', 'mocha'])
     });
-});
+});
+
+describe('CoffeeCard', () => {
+    it('should render', () => {
+        const component = shallow(
+            <CoffeeCard drinkName="mocha" price={4} />
+        );
+        expect(component).toMatchSnapshot();
+    });
+});

src/exercise1/__snapshots__/Exercise1.test.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoffeeCard should render 1`] = `
+<div
+  className="CoffeeCard"
+>
+  <img
+    alt="mocha"
+    className="CoffeeCard__image"
+    src="https://upload.wikimedia.org/wikipedia/commons/7/79/Mocha.jpg"
+  />
+  <h3
+    className="CoffeeCard__title"
+  >
+    Mocha
+  </h3>
+  <p
+    className="CoffeeCard__description"
+  >
+    Cost: $
+    4.00
+  </p>
+</div>
+`;

src/exercise2/Exercise2.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Orchid from './Orchid';
 
 export default class Exercise2 extends React.Component {
     render() {
@@ -13,6 +14,7 @@ export default class Exercise2 extends React.Component {
                     <li>Add the prop <code>borderColor</code> to the <code>Orchid</code> component and give the image a border with the color provided.</li>
                     <li>Import and render the <code>Orchid</code> component in <code>Exercise2.js</code> and provide it a <code>borderColor</code></li>
                 </ol>
+                <Orchid borderColor="purple" />
             </div>
         )
     }

src/exercise2/Orchid.js

@@ -1,3 +1,26 @@
-// Here's a URL to get you started
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
+// Here's a URL to get you started
 const orchidImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/d/df/Orchid_high_resolution.jpg';
+
+export default class Orchid extends Component {
+    static propTypes = {
+        borderColor: PropTypes.string
+    }
+
+    render() {
+        const { borderColor } = this.props;
+
+        return (
+            <img
+                style={{
+                    border: `5px solid ${borderColor || ''}`,
+                    width: '500px'
+                }}
+                src={orchidImageUrl}
+                alt="An orchid"
+            />
+        );
+    }
+}

src/exercise3/Exercise3.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import InfoCard from './InfoCard';
 
 export default class Exercise3 extends React.Component {
     render() {
@@ -26,6 +27,9 @@ export default class Exercise3 extends React.Component {
                     <li>When passing <code>children</code> into the component, the component should display the info icon next to the children.</li>
                     <li>Import and render the <code>InfoCard</code> in <code>Exercise3.js</code></li>
                 </ol>
+                <InfoCard>
+                    Here is some info
+                </InfoCard>
             </div>
         )
     }

src/exercise3/InfoCard.css

@@ -0,0 +1,3 @@
+.InfoCard__contents {
+    margin-left: 5px;
+}

src/exercise3/InfoCard.js

@@ -1 +1,17 @@
 // You're on your own
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+
+import './InfoCard.css';
+
+export default class InfoCard extends Component {
+    render() {
+        return (
+            <div>
+                <FontAwesomeIcon icon={faInfoCircle} />
+                <span className="InfoCard__contents">{this.props.children}</span>
+            </div>
+        );
+    }
+}

src/exercise5/Dropdown.js

@@ -7,13 +7,27 @@ export default class Dropdown extends React.Component {
         header: PropTypes.any.isRequired
     }
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            isOpen: false
+        };
+    }
+
+    toggleDropdown = () => {
+        this.setState({
+            isOpen: !this.state.isOpen
+        });
+    }
+
     render() {
         const { header, children } = this.props;
+        const { isOpen } = this.state;
 
         return (
             <div className="Dropdown">
-                <div className="Dropdown__header">{header}</div>
-                <div className="Dropdown__content">{children}</div>
+                <div className="Dropdown__header" onClick={this.toggleDropdown}>{header}</div>
+                {isOpen && <div className="Dropdown__content">{children}</div>}
             </div>
         )
     }

src/exercise5/Exercise5.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Dropdown from './Dropdown';
 
 export default class Exercise5 extends React.Component {
     render() {
@@ -14,6 +15,11 @@ export default class Exercise5 extends React.Component {
                     <li>Add a click handler called <code>toggleDropdown</code> that makes the content hide/show on click.</li>
                     <li>Ensure that the corresponding tests pass.</li>
                 </ol>
+                <Dropdown
+                    header="Click me!"
+                >
+                    This should appear once the dropdown is enabled
+                </Dropdown>
             </div>
         )
     }