Sara Week 7

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 

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",

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;
+}

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 (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+      <h1 className="title"> InspireFeed </h1>
+      <div className="backgroundBubble">
+        <Post
+          newPost={newPost}
+          onNewPostChange={handleNewPost}
+          onPostSubmit={onPostSubmit} />
+        <Feed
+          loading={loading}
+          feed={feed}
+          setFeed={setFeed}
+          onLike={onLike} />
+      </div>
+      <Footer />
+    </>
   );
 }

code/src/components/Feed.css

@@ -0,0 +1,61 @@
+.feed {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.singlePost {
+    place-self: center;
+    display: flex;
+    flex-direction: column;
+    font-family: Cutive Mono;
+    font-size: 15px;
+    width: 80%;
+    max-height: 200px;
+    background-color: white;
+    padding: 10px;
+    margin-bottom: 2%;
+    resize: none;
+    border: 1px solid black;
+    box-shadow: 5px 5px 0px 0px black;
+
+}
+
+.singlePost.fade-in {
+    opacity: 0;
+    animation: fade-in 0.9s ease forwards;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .singlePostFooter {
+    margin-left: 0;
+    margin-right: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .singlePost button {
+    border: none;
+    width: fit-content;
+    background-color: transparent;
+    padding: 10px 10px 10px 10px;
+    border-radius: 100%;
+  }
+
+  .singlePost button:hover {
+    background-color: rgb(255, 234, 234);
+    cursor: pointer;
+}
+
+.singlePost p {
+    color: black;
+}

code/src/components/Feed.js

@@ -0,0 +1,33 @@
+/* eslint no-underscore-dangle: ["error", { "allow": ["_id"] }] */
+
+import React from 'react';
+import { formatDistance } from 'date-fns';
+import './Feed.css';
+
+export const Feed = ({ loading, feed, onLike }) => {
+  if (loading) {
+    return (
+      <div> Loading in progress </div>
+    );
+  } else {
+    return (
+      <section className="feed">
+        {feed.map((post) => {
+          return (
+            <div className="singlePost" key={post._id}>
+              <h4> {post.message}</h4>
+              <div className="singlePostFooter">
+                <p className="singlePostFooterLeft">
+                  <button type="button" onClick={(event) => onLike(event, post)}> ❤️ </button>
+                 x {post.hearts}
+                </p>
+                <p className="singlePostFooterRight">
+                  {formatDistance(new Date(post.createdAt), Date.now(), { addSuffix: true })}
+                </p>
+              </div>
+            </div>)
+        })}
+      </section>
+    );
+  }
+}

code/src/components/Post.css

@@ -0,0 +1,70 @@
+.newPost {
+    display: flex;
+    flex-direction: column;
+}
+
+.newPost h2 {
+    text-align: left;
+    margin-left: 10%;
+    text-decoration: none;
+    color: white;
+    font-weight: lighter;
+    font-family: Cutive Mono;
+    font-size: 20px;
+}
+
+textarea {
+    place-self: center;
+    display: flex;
+      font-family: Cutive Mono;
+      font-size: 15px;
+      width: 80%;
+      height: 100px;
+      background-color: rgb(255, 240, 242);
+      padding: 10px;
+      resize: none;
+      border: 1px solid black;
+      background-color: rgb(255, 246, 246);
+      box-shadow: 5px 5px 0px 0px black;
+      margin-bottom: 5px;
+    }
+
+    textarea:focus {
+      outline: none;
+    }
+
+.postBottom {
+    margin-top: 2%;
+    margin-left: 10%;
+    margin-bottom: 10%;
+    font-family: Cutive Mono;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+.postBottom button {
+    display: flex;
+    font-family: Cutive Mono;
+    background: rgb(238,174,202);
+    border: 0px;
+    border-radius: 10px;
+    color: white;
+    font-size: 15px;
+    padding: 5px 15px 5px 15px;
+    width: fit-content;
+    cursor: pointer;
+}
+
+.postBottom button:hover {
+    background-color: rgb(255, 234, 234);
+    cursor: pointer;
+}
+
+.postLength {
+    margin-right: 10%;
+    font-family: Cutive Mono;
+    font-size: 10px;
+    align-self: flex-end;
+}

code/src/components/Post.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import './Post.css';
+
+export const Post = ({ newPost, onNewPostChange, onPostSubmit }) => {
+  return (
+    <form className="newPost" onSubmit={onPostSubmit}>
+      <h2>
+        Positive vibes
+      </h2>
+      <textarea
+        className="text"
+        placeholder="Dear diary..."
+        maxLength="140"
+        value={newPost}
+        onChange={onNewPostChange} />
+      <div className="postBottom">
+        <button
+          type="submit"
+          disabled={newPost.length < 5 || newPost.length > 140}>
+        Share
+        </button>
+        <div className="postLength">
+          <p>{newPost.length} / 140</p>
+        </div>
+      </div>
+    </form>
+  );
+}