From 6dcbae0f5d5499362514f9d85f5aaf55b9a14186 Mon Sep 17 00:00:00 2001 From: aldeez988 Date: Thu, 9 May 2019 13:43:38 +0100 Subject: [PATCH] Elamin-react-quiz --- src/Question1-Header.js | 3 +-- src/Question2-LionsExhibit.js | 9 ++++++- src/Question3-TigersExhibit.js | 6 ++--- src/Question4-MonkeysExhibit.js | 24 ++++++++++--------- src/Question5-AnimalSpotter.js | 8 ++++--- src/Question6-ImageGallery.js | 16 ++++++++++--- src/Question7-WindowSize.js | 4 ++++ src/__tests__/Question2-LionsExhibit.test.js | 2 +- src/__tests__/Question3-TigersExhibit.test.js | 2 +- .../Question4-MonkeysExhibit.test.js | 2 +- src/__tests__/Question5-AnimalSpotter.test.js | 2 +- src/__tests__/Question6-ImageGallery.test.js | 2 +- src/__tests__/Question7-WindowSize.test.js | 2 +- 13 files changed, 53 insertions(+), 29 deletions(-) diff --git a/src/Question1-Header.js b/src/Question1-Header.js index 1527b3b..44addfb 100644 --- a/src/Question1-Header.js +++ b/src/Question1-Header.js @@ -1,5 +1,4 @@ -/* DELETE THIS LINE AND WRITE THE ANSWER TO QUESTION 1 HERE */ - +import React from 'react'; /* * ============= Question 1 ============= * diff --git a/src/Question2-LionsExhibit.js b/src/Question2-LionsExhibit.js index b31af8c..a02b503 100644 --- a/src/Question2-LionsExhibit.js +++ b/src/Question2-LionsExhibit.js @@ -10,6 +10,13 @@ import React from "react"; -const LionsExhibit = () => null; +const LionsExhibit = () => { + return ( +
+

Lions

+

The mane is the most recognisable feature of the species

+
+ ); +}; export default LionsExhibit; diff --git a/src/Question3-TigersExhibit.js b/src/Question3-TigersExhibit.js index ccfd252..c632fb2 100644 --- a/src/Question3-TigersExhibit.js +++ b/src/Question3-TigersExhibit.js @@ -18,12 +18,12 @@ import React from "react"; -function TigersExhibit() { +function TigersExhibit(props) { return (

Tigers

-

There are ... tigers in the world

- +

There are {props.population} tigers in the world

+
); } diff --git a/src/Question4-MonkeysExhibit.js b/src/Question4-MonkeysExhibit.js index bfefca0..ef5d24b 100644 --- a/src/Question4-MonkeysExhibit.js +++ b/src/Question4-MonkeysExhibit.js @@ -5,18 +5,20 @@ */ import React from "react"; +class MonkeysExhibit extends React.Component { -function MonkeysExhibit(props) { - return ( -
-

Latin name: {props.latinName}

- -
- ); + render() { + return ( +
+

Latin name: {this.props.latinName}

+ +
+ ); + } } export default MonkeysExhibit; diff --git a/src/Question5-AnimalSpotter.js b/src/Question5-AnimalSpotter.js index b7136a2..d57e37d 100644 --- a/src/Question5-AnimalSpotter.js +++ b/src/Question5-AnimalSpotter.js @@ -13,9 +13,11 @@ import React, { Component } from "react"; class AnimalSpotter extends Component { constructor(props) { super(props); - this.state = {}; + this.state = { animalSpotted: 0 }; } - + spotAnimal = () => { + this.setState({ animalSpotted: ++this.state.animalSpotted }) + }; render() { return (
@@ -28,7 +30,7 @@ class AnimalSpotter extends Component { function CounterButton(props) { return ( - ); diff --git a/src/Question6-ImageGallery.js b/src/Question6-ImageGallery.js index aac6043..b128e86 100644 --- a/src/Question6-ImageGallery.js +++ b/src/Question6-ImageGallery.js @@ -17,13 +17,23 @@ class ImageGallery extends Component { imgSrc: null }; } - + componentDidMount() { + this.fetchData(); + } fetchData = () => { - fetch().then(res => res.json()); + fetch("https://auspicious-baritone.glitch.me/gorilla") + .then(res => res.json()) + .then(src => { + this.setState({ imgSrc: src }) + }); }; render() { - return An animal; + if (this.state.imgSrc) { + return An animal; + } else { + return

Image is loading....

+ } } } diff --git a/src/Question7-WindowSize.js b/src/Question7-WindowSize.js index e4266bb..04a8556 100644 --- a/src/Question7-WindowSize.js +++ b/src/Question7-WindowSize.js @@ -28,6 +28,10 @@ export class WindowSize extends Component { window.addEventListener("resize", this.handleWindowResize); } + componentWillUnmount() { + window.removeEventListener('resize', this.handleWindowResize); + } + handleWindowResize = () => { console.log("Window was resized!", window.innerWidth); this.setState({ windowWidth: window.innerWidth }); diff --git a/src/__tests__/Question2-LionsExhibit.test.js b/src/__tests__/Question2-LionsExhibit.test.js index d20d3fa..3489767 100644 --- a/src/__tests__/Question2-LionsExhibit.test.js +++ b/src/__tests__/Question2-LionsExhibit.test.js @@ -3,7 +3,7 @@ import { mount } from "enzyme"; import LionsExhibit from "../Question2-LionsExhibit"; -describe.skip("Question 2 - LionsExhibit", () => { +describe("Question 2 - LionsExhibit", () => { it("renders an article with the class 'lions'", () => { const component = mount(); expect(component.find("article.lions")).toHaveLength(1); diff --git a/src/__tests__/Question3-TigersExhibit.test.js b/src/__tests__/Question3-TigersExhibit.test.js index b0030b0..e42157d 100644 --- a/src/__tests__/Question3-TigersExhibit.test.js +++ b/src/__tests__/Question3-TigersExhibit.test.js @@ -3,7 +3,7 @@ import { mount } from "enzyme"; import TigersExhibit from "../Question3-TigersExhibit"; -describe.skip("Question 3 - TigersExhibit", () => { +describe("Question 3 - TigersExhibit", () => { it("renders the population count", () => { const component = mount( { +describe("Question 4 - MonkeysExhibit", () => { it("continues to render", () => { const component = mount( { +describe("Question 5 - AnimalSpotter", () => { it("shows an initial count", () => { const component = mount(); expect(component.find(".animal-spotter p").text()).toBe( diff --git a/src/__tests__/Question6-ImageGallery.test.js b/src/__tests__/Question6-ImageGallery.test.js index f59e306..52087e6 100644 --- a/src/__tests__/Question6-ImageGallery.test.js +++ b/src/__tests__/Question6-ImageGallery.test.js @@ -3,7 +3,7 @@ import { mount } from "enzyme"; import ImageGallery from "../Question6-ImageGallery"; -describe.skip("Question 6 - ImageGallery", () => { +describe("Question 6 - ImageGallery", () => { let deferred; beforeEach(() => { diff --git a/src/__tests__/Question7-WindowSize.test.js b/src/__tests__/Question7-WindowSize.test.js index da33a58..ae9513c 100644 --- a/src/__tests__/Question7-WindowSize.test.js +++ b/src/__tests__/Question7-WindowSize.test.js @@ -3,7 +3,7 @@ import { mount } from "enzyme"; import WindowSize from "../Question7-WindowSize"; -describe.skip("Question 7 - WindowSize", () => { +describe("Question 7 - WindowSize", () => { beforeEach(() => { window.removeEventListener = jest.fn(); });