Happy Thoughts

README.md

@@ -1,13 +1,11 @@
 # Happy Thoughts
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+I have created a Twitter-like feed where a user can write a ‘happy thought’ which is then displayed along with other recent happy thoughts from an API. The thoughts are listed with the most recent at the top and older ones at the bottom, with a timestamp on when they were written. Anyone can then see the thought, click on a ‘like’ button if they like it, and see how many likes the thought has received. I had to follow a design closely. As one of my stretch goals I also added a count below the form input which updates as the user types and shows how many characters are remaining. The count goes red if the user types under five characters or over 140. 
 
 ## The problem
 
-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?
+I began by using the Example Project to help me understand how to write the code, which components I would need, and how to fetch and post the thoughts using the APIs. I also thought about which useState hooks I would need and which useEffect hook I would need to use. My first task was to fetch the recent thoughts, then create a thought using a POST request. After that I worked on the Heart (like) button. There were a lot of different elements to this week’s task and I needed help with some challenges I faced. I am pleased I managed to add a stretch goal in the end and if I had more time I would add another stretch goal, such as work on getting an error message back from the API if the message is empty, too long or too short. 
 
 ## View it live
 
-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.
+https://fiona-klacar-project-happy-thoughts.netlify.app/

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.js

@@ -1,9 +1,73 @@
-import React from 'react';
+/* eslint-disable max-len */
+import React, { useState, useEffect } from 'react';
+import { ThoughtInput } from 'components/ThoughtInput';
+import { EachThought } from 'components/EachThought';
 
 export const App = () => {
+  const [eachThought, setEachThought] = useState('');
+  // because a new thought has no value and then changes state to having a value
+
+  const [thoughtInput, setThoughtInput] = useState([]);
+  // because the Thought Input changes state when a new thought is added
+
+  const fetchThoughts = () => {
+    fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts')
+      .then((res) => res.json()) // converts the 'response' object to a JSON object
+      .then((data) => setThoughtInput(data)) // updates the state with the data from the
+    // response using the 'setThoughtInput' function
+      .catch((error) => console.error(error)) // catches errors
+      .finally(() => { console.log('fetch was successful') }) // this is where setLoading(false)); would go
+  }
+
+  useEffect(() => {
+    fetchThoughts();
+  // we want to fetch the most recent thoughts from the API
+  // every time the page is mounted/reloaded - so we use an empty array as a dependency
+  }, []);
+
+  const onEachThoughtChange = (event) => {
+    setEachThought(event.target.value)
+  }
+
+  const onFormSubmit = (event) => {
+    event.preventDefault(); // prevents from reloading entirely when user submits a thought
+
+    // Note that const onFormSubmit includes everything from line 32 to line 52.
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        message: eachThought
+      })
+    }
+
+    fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options)
+      .then((res) => res.json())
+      .then((data) => console.log(data)) // Don't put setThoughtInput as the whole thing will be replaced
+      .catch((error) => console.error(error)) // catches errors
+      .finally(() => { fetchThoughts(); setEachThought(''); }); // This collects all the updated thoughts and updated likes
+  };
+
+  // THIS IS ANOTHER WAY OF DOING IT
+  // .then((res) => res.json())
+  // .then((newThought) => {
+  //     //Now you have `newThought` which is the response from the
+  //     // API as documented at the top of this readme. You can use
+  //     // it to update the `thoughts` array:
+  // setThoughts((previousThoughts) => [newThought,...previousThoughts]) // Here is object destructuring - it adds the
+  // new thought to the array as an object and adds the previous thoughts to it after
+  // })
+
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="mainContainer">
+      <ThoughtInput
+        eachThought={eachThought}
+        onEachThoughtChange={onEachThoughtChange}
+        onFormSubmit={onFormSubmit} />
+      <EachThought thoughtInput={thoughtInput} fetchThoughts={fetchThoughts} />
     </div>
-  );
+  )
 }

code/src/components/EachThought.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import { formatDistance } from 'date-fns';
+import { Hearts } from './Hearts';
+
+export const EachThought = ({ thoughtInput, fetchThoughts }) => {
+  return thoughtInput.map((thought) => {
+    // eslint-disable-next-line no-underscore-dangle
+    return (
+      <div className="eachThought" key={thought._id}>
+        <p>{thought.message}</p>
+        <div className="eachThoughtLower">
+          <Hearts
+            thought={thought}
+            fetchThoughts={fetchThoughts} />
+          <p className="timeStamp date">{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p>
+        </div>
+      </div>
+    )
+  });
+}

code/src/components/Hearts.js

@@ -0,0 +1,28 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+
+export const Hearts = ({ thought, fetchThoughts }) => {
+  const onHeartCountIncreaseButtonClick = () => {
+    const options = {
+      method: 'POST'
+    }
+    console.log('options', options)
+
+    fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${thought._id}/like`, options)
+      .then((res) => res.json())
+      .then((data) => console.log(data))
+      .catch((error) => console.log(error))
+      .finally(() => fetchThoughts())
+    console.log('heart count increase')
+  }
+
+  return (
+    // eslint-disable-next-line react/jsx-no-comment-textnodes
+    <div>
+      <div className="heartsSection">
+        <button className="heartButton" onClick={onHeartCountIncreaseButtonClick} type="button">❤️</button>
+        <p className="heartCount">x <span className="heartCountNumber">{thought.hearts}</span></p>
+      </div>
+    </div>
+  )
+}

code/src/components/ThoughtInput.js

@@ -0,0 +1,25 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const ThoughtInput = ({ eachThought, onEachThoughtChange, onFormSubmit }) => {
+  return (
+    <form className="thoughtInput" onSubmit={onFormSubmit}>
+      <h1>What&apos;s making you happy right now?</h1>
+      <textarea
+        value={eachThought}
+        onChange={onEachThoughtChange}
+        placeholder="React is making me happy!" />
+      <div className="characterCount">{eachThought.length < 5 || eachThought.length > 140 ? (
+        <p className="redText">{eachThought.length}/140</p>
+      ) : (
+        <p className="normalText">{eachThought.length}/140</p>
+      )}
+      </div>
+      <button className="submitButton" type="submit">
+        <span role="img" aria-label="heart">❤️ </span>
+        <span className="submitButtonText">Send happy thought!</span>
+        <span role="img" aria-label="heart"> ❤️</span>
+      </button>
+    </form>
+  )
+}

code/src/index.css

@@ -11,3 +11,121 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.mainContainer {
+  display: flex;
+  flex-direction: column;
+  max-height: fit-content;
+  width: 100vw;  
+  flex-wrap: wrap;
+  align-content: center;
+  padding-top: 30px;
+}
+
+h1 {
+  font-size: 15px;
+}
+
+/* THOUGHT INPUT */
+
+.thoughtInput {
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+  margin-bottom: 20px;
+  border-style: solid;
+  box-shadow: 5px 5px black;
+  padding: 20px 20px;
+  background-color: rgba(234, 229, 229, 0.899); font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  monospace;
+}
+
+.submitButtonText {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.submitButton {
+  border-radius: 50px;
+  border-style: hidden;
+  height: 40px;
+  width: 50%;
+  min-width: fit-content;
+  background-color: rgb(237, 164, 175);
+  margin-top: -10px;
+}
+
+.characterCount {
+ display: flex;
+ align-self: flex-end;
+ font-size: 14px;
+}
+
+.redText {
+  color: red;
+}
+
+.normalText {
+  color: rgb(97, 92, 92);
+}
+
+/* EACH THOUGHT */
+
+.eachThought {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 20px;
+  border-style: solid;
+  box-shadow: 5px 5px black;
+  margin: 20px 0px;
+  max-width: 600px;
+}
+
+.eachThought p {
+  font-size: 18px;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+.eachThoughtLower {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.timeStamp {
+  color:rgba(162, 157, 157, 0.899);
+}
+
+.timeStamp.date {
+  font-size: 15px;
+}
+
+/* HEARTS */
+
+.heartsSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.heartsSection p {
+  color:  rgba(105, 102, 102, 0.899);
+}
+
+.heartButton {
+  border-radius: 50px;
+  width: 45px;
+  height: 45px;
+  border-style: hidden;
+}
+
+.heartCount {
+  font-size: 15px !important;
+}
+
+.heartCountNumber {
+  font-size: 15px;
+}