- Board
+ // display errors - used provided css
+
+ {errorMessage && (
+
+
{errorMessage}
+
+ )}
+ {createCards()}
+
- )
+ );
};
-Board.propTypes = {
+Board.propTypes = {
+url: PropTypes.string.isRequired,
+boardName: PropTypes.string.isRequired,
};
export default Board;
diff --git a/src/components/Card.js b/src/components/Card.js
index 51a33966..b232cab6 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,19 +1,44 @@
-import React, { Component } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
import emoji from 'emoji-dictionary';
import './Card.css';
-const Card = () => {
+const Card = (props) => {
+
+ const getEmoji = () => {
+ if (props.emoji){
+ return emoji.getUnicode(props.emoji);
+ } else {
+ return "";
+ }
+ }
+
return (
)
}
Card.propTypes = {
-
+ id: PropTypes.number,
+ text: PropTypes.string,
+ emoji: PropTypes.string,
+ onDeleteClick: PropTypes.func.isRequired,
};
export default Card;
diff --git a/src/components/Card.test.js b/src/components/Card.test.js
new file mode 100644
index 00000000..d1bf2def
--- /dev/null
+++ b/src/components/Card.test.js
@@ -0,0 +1,19 @@
+// src/components/test/Card.test.js
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import Card from './Card';
+
+describe('Card', () => {
+ test('that it matches the existing snapshot', () => {
+ // Arrange-Act
+ const { asFragment } = render(
+
{ }}
+ />
+ );
+
+ // Assert
+ expect(asFragment()).toMatchSnapshot();
+ cleanup();
+ });
+});
\ No newline at end of file
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..19cfdcf8 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -1,6 +1,68 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import emoji from 'emoji-dictionary';
import './NewCardForm.css';
const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+const NewCardForm = (props) => {
+
+ const [formText, setFormText] = useState("");
+ const [formEmoji, setFormEmoji] = useState("");
+
+ const onTextChange = (event) => {
+ setFormText( event.target.value);
+ };
+
+ const onEmojiChange = (event) => {
+ setFormEmoji( event.target.value);
+ };
+
+ const onSubmit = (event) => {
+ event.preventDefault();
+ props.onFormSubmit(formText, formEmoji);
+ setFormText("");
+ setFormEmoji("");
+
+ };
+
+ return (
+
+ );
+}
+
+NewCardForm.propTypes = {
+ onFormSubmit: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
index e69de29b..6b0f0a60 100644
--- a/src/components/NewCardForm.test.js
+++ b/src/components/NewCardForm.test.js
@@ -0,0 +1,19 @@
+// src/components/test/NewCardForm.test.js
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import NewCardForm from './NewCardForm';
+
+describe('NewCardForm', () => {
+ test('that it matches the existing snapshot', () => {
+ // Arrange-Act
+ const { asFragment } = render(
+ { }}
+ />
+ );
+
+ // Assert
+ expect(asFragment()).toMatchSnapshot();
+ cleanup();
+ });
+});
\ No newline at end of file
diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap
new file mode 100644
index 00000000..2adce5df
--- /dev/null
+++ b/src/components/__snapshots__/Card.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches the existing snapshot 1`] = `
+
+
+
+`;
diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap
new file mode 100644
index 00000000..bd994c0a
--- /dev/null
+++ b/src/components/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches the existing snapshot 1`] = `
+
+
+
+`;
diff --git a/src/data/card-data.json b/src/data/card-data.json
index 1f9793ec..de3889c7 100644
--- a/src/data/card-data.json
+++ b/src/data/card-data.json
@@ -6,15 +6,17 @@
},
{
"text": "",
- "Emoji": "heart_eyes"
+ "emoji": "heart_eyes"
},
{
"text": "REST is part of work"
},
{
- "text": "Take a nap"
+ "text": "Take a nap",
+ "emoji": "monkey"
},
{
+ "text": "I'm thirsty!",
"emoji": "beer"
}
]