diff --git a/README.md b/README.md index 9ea4e26b3..acc10324f 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,20 @@ -# Happy Thoughts +# Project Feed -Replace this readme with your own information about your project. +## View it live +https://happy-thoughtss.netlify.app/ -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +## Project Brief +practice your React state skills by fetching and posting data to an API and create a Twitter-like Feed with a twist - full of positive thoughts. -## The problem +## Project requirements -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +- [x] Your page should follow the design provided as closely as possible +- [x] You should list the most recent thoughts at the top and older thoughts at the bottom (sorted) +- [x] Your thoughts should show the content of the message and how many likes they've received +- [x] You should have a form to post new thoughts +- [x] You should implement the heart button to send likes on a thought -## View it live +## Installation -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. + npm install + npm start 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/Assets/githublogo.png b/code/public/Assets/githublogo.png new file mode 100644 index 000000000..9490ffc6d Binary files /dev/null and b/code/public/Assets/githublogo.png differ diff --git a/code/public/Assets/linkedinlogo.png b/code/public/Assets/linkedinlogo.png new file mode 100644 index 000000000..50aeee7c3 Binary files /dev/null and b/code/public/Assets/linkedinlogo.png differ diff --git a/code/public/Assets/sarabattilotti.jpeg b/code/public/Assets/sarabattilotti.jpeg new file mode 100644 index 000000000..ee4c5d29a Binary files /dev/null and b/code/public/Assets/sarabattilotti.jpeg differ diff --git a/code/src/App.css b/code/src/App.css new file mode 100644 index 000000000..8e025a9f3 --- /dev/null +++ b/code/src/App.css @@ -0,0 +1,19 @@ +.title { + color: rgb(238,174,202); + font-family: Press Start\ 2P; + font-size: 20px; + letter-spacing: .15em; + padding: 10px; + text-align: center; +} + +.backgroundBubble { + animation: 1.2s ease-in 0s 1 normal none running iAjNNh; + margin: auto; + background: rgb(238,174,202); + background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); + border-radius: 10px; + padding: 20px; + width: 60%; + box-shadow: rgba(89, 52, 96, 0.2) 0px 5px 10px 0px, rgba(135, 41, 113, 0.19) 0px 6px 20px 0px; +} \ No newline at end of file diff --git a/code/src/App.js b/code/src/App.js index f2007d229..5c3784e65 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,80 @@ -import React from 'react'; +/* eslint no-underscore-dangle: ["error", { "allow": ["_id"] }] */ + +import React, { useState, useEffect } from 'react'; +import { Post } from 'components/Post'; +import { Footer } from 'components/footer/Footer'; +import { Feed } from './components/Feed'; +import './App.css'; export const App = () => { + const [feed, setFeed] = useState([]); + const [loading, setLoading] = useState(false); + const [newPost, setNewPost] = useState(''); + + const fetchPost = () => { + fetch('https://happy-thoughts-xnbzjt5ahq-oc.a.run.app/thoughts') + .then((res) => res.json()) + .then((data) => setFeed(data.response)) + .catch((error) => console.error(error)) + .finally(() => setLoading(false)); + }; + + useEffect(() => { + setLoading(true); + fetchPost(); + }, []) + + const handleNewPost = (event) => { + setNewPost(event.target.value) + }; + + const onPostSubmit = (event) => { + event.preventDefault() + const option = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + message: newPost + }) + } + fetch('https://happy-thoughts-xnbzjt5ahq-oc.a.run.app/thoughts', option) + .then((res) => res.json().response) + .catch((error) => console.error(error)) + .then(() => fetchPost()) + .finally(() => setNewPost('')); + }; + + const onLike = (event, post) => { + event.preventDefault() + const option = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + } + } + fetch(`https://happy-thoughts-xnbzjt5ahq-oc.a.run.app/thoughts/${post._id}/like`, option) + .then((res) => res.json().response) + .catch((error) => console.error(error)) + .then(() => fetchPost()) + }; + return ( -
- Find me in src/app.js! -
+ <> +

InspireFeed

+
+ + +
+