diff --git a/code/.eslintrc.json b/code/.eslintrc.json index c9c0675c3..263550e9c 100644 --- a/code/.eslintrc.json +++ b/code/.eslintrc.json @@ -54,7 +54,7 @@ "import/no-unresolved": "off", "import/prefer-default-export": "off", "indent": [ - "error", + "off", 2, { "SwitchCase": 1 @@ -128,4 +128,4 @@ "react-hooks/exhaustive-deps": "warn", "semi": "off" } -} +} \ No newline at end of file diff --git a/code/package-lock.json b/code/package-lock.json index f7e97e1e9..fab8e56d2 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "babel-eslint": "^10.1.0", + "date-fns": "^2.29.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -6205,6 +6206,18 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -21996,6 +22009,11 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.29.3", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz", + "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/code/package.json b/code/package.json index 68869f589..4cbbdb2d2 100644 --- a/code/package.json +++ b/code/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "babel-eslint": "^10.1.0", + "date-fns": "^2.29.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..8281d14c1 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -1,10 +1,10 @@ - - - - - Technigo React App - + Happy thoughts + - - -
- - + - + \ No newline at end of file diff --git a/code/src/App.js b/code/src/App.js index f2007d229..493cdbc4c 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,48 @@ -import React from 'react'; +/* eslint-disable max-len */ +/* eslint-disable no-unused-vars */ +import React, { useState, useEffect } from 'react'; +import ThoughtList from 'components/ThoughtList'; +import ThoughtForm from 'components/ThoughtForm'; export const App = () => { + const [thoughts, setThoughts] = useState([]); + const [newThought, setNewThought] = useState('') + + const fetchMessage = () => { + fetch('https://project-happy-thoughts-api-eihxehjbzq-lz.a.run.app/thoughts', { + method: 'GET' + }) + .then((res) => res.json()) + .then((data) => { + setThoughts(data.response) + }).catch((error) => console.log(error)) + } + const sendMessage = (event) => { + event.preventDefault() + fetch('https://project-happy-thoughts-api-eihxehjbzq-lz.a.run.app/thoughts', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message: newThought, createdAt: Date.now() }) + }) + .then(() => setNewThought('')) + .catch((error) => console.log(error)) + } + + const sendLike = (_id) => { + fetch(`https://project-happy-thoughts-api-eihxehjbzq-lz.a.run.app/thoughts/${_id}/like`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }).catch((error) => console.log(error)) + } + + useEffect(() => { + fetchMessage(); + }); + return ( -
- Find me in src/app.js! +
+ +
); } diff --git a/code/src/bgImg.png b/code/src/bgImg.png new file mode 100644 index 000000000..372daad7c Binary files /dev/null and b/code/src/bgImg.png differ diff --git a/code/src/components/MessageCard.js b/code/src/components/MessageCard.js new file mode 100644 index 000000000..b525ebefa --- /dev/null +++ b/code/src/components/MessageCard.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { formatDistance } from 'date-fns'; + +const MessageCard = ({ item, sendLike }) => { + const sendHearts = () => { + // eslint-disable-next-line no-underscore-dangle + sendLike(item._id) + } + return ( +
+

{item.message}

+
+
+ x {item.likes} +
+

+ {formatDistance(new Date(item.createdAt), Date.now(), { addSuffix: true })} +

+
+
+ ); +} + +export default MessageCard \ No newline at end of file diff --git a/code/src/components/ThoughtForm.js b/code/src/components/ThoughtForm.js new file mode 100644 index 000000000..f0f5c8992 --- /dev/null +++ b/code/src/components/ThoughtForm.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const ThoughtForm = ({ newThought, setNewThought, onFormSubmit }) => { + return ( +
+
+

What makes you happy?

+