Technigo · Vera-Sjunnesson · Mar 22, 2023 · Mar 26, 2023 · Mar 28, 2023 · Mar 28, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git 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/images/michael-dziedzic-0W4XLGITrHg-unsplash.jpeg b/code/public/images/michael-dziedzic-0W4XLGITrHg-unsplash.jpeg
diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <link rel="icon" href="https://cdn.shopify.com/s/files/1/1061/1924/products/Growing_Pink_Heart_Emoji_large.png?v=1571606066" type="image/icon type">
+    <title>Happy Thoughts Feed</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import { ThoughtFeed } from './components/ThoughtFeed';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="main-wrapper">
+      <ThoughtFeed />
     </div>
   );
 }
diff --git a/code/src/SingleThought.js b/code/src/SingleThought.js
diff --git a/code/src/components/ThoughtFeed.js b/code/src/components/ThoughtFeed.js
@@ -0,0 +1,87 @@
+/* eslint no-underscore-dangle: 0 */
+import React, { useState, useEffect } from 'react';
+import { formatDistance } from 'date-fns';
+import { ThoughtForm } from './ThoughtForm';
+
+const API = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts'
+
+export const ThoughtFeed = () => {
+  const [thoughtList, setThoughtList] = useState([])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const fetchThoughts = () => {
+    fetch(`${API}`)
+      .then((response) => response.json())
+      .then((data) => setThoughtList(data))
+      .catch((error) => console.log(error))
+      .finally(() => { setIsLoading(false) })
+  }
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetchThoughts();
+  }, []);
+
+  const handleLikes = (_id) => {
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+    fetch(`${API}/${_id}/like`, options)
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        const updatedThoughtList = thoughtList.map((thought) => {
+          if (thought._id === data._id) {
+            return {
+              ...thought, hearts: data.hearts
+            };
+          }
+          return thought;
+        });
+        setThoughtList(updatedThoughtList);
+      })
+      .catch((error) => console.error(error));
+  }
+
+  return (
+    <>
+      <section className="form-container">
+        <ThoughtForm />
+      </section>
+      <section className="feed-container">
+        {!isLoading && thoughtList.map((thought) => {
+          return (
+            <div key={thought._id} className="card">
+              <p className="happy-message">{thought.message}</p>
+              <div className="card-details">
+                <div className="heart-container">
+                  <button
+                    type="button"
+                    className={`heart-button ${thought.hearts > 0 ? 'heart-active' : ''}`}
+                    onClick={() => { handleLikes(thought._id, thought.hearts); }}>
+                    <span
+                      role="img"
+                      className="heart-icon"
+                      aria-label="Like post">
+                      ❤️
+                    </span>
+                  </button>
+                  <span className="total-hearts">x {thought.hearts}</span>
+                </div>
+                <p className="date">
+                  {formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}
+                </p>
+              </div>
+            </div>
+          )
+        })}
+      </section>
+      {isLoading && (<span className="is-loading" />)}
+    </>
+  )
+}
+
diff --git a/code/src/components/ThoughtForm.js b/code/src/components/ThoughtForm.js
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+
+export const ThoughtForm = () => {
+  const [newThought, setNewThought] = useState('');
+  const [minMaxCount, setMinMaxCount] = useState(false);
+
+  const API = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts'
+
+  const onFormSubmit = (event) => {
+    event.preventDefault()
+    if (newThought.length < 5 || newThought.length >= 141) {
+      return alert('Oh no, you have too few or too many characters! Please, try again.')
+    } else {
+      const options = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: newThought })
+      };
+      fetch(`${API}`, options)
+        .then((response) => response.json())
+        .then(() => {
+          setNewThought('');
+          window.location.reload();
+        })
+    }
+  }
+
+  const onNewThoughtChange = (event) => {
+    setNewThought(event.target.value);
+  }
+
+  useEffect(() => {
+    if (newThought.length < 5 || newThought.length >= 141) {
+      setMinMaxCount(true)
+    } else {
+      setMinMaxCount(false)
+    }
+  }, [newThought.length]);
+
+  return (
+    <form className="thoughtForm" onSubmit={onFormSubmit}>
+      <h3>What&apos;s making you happy right now?</h3>
+      <label htmlFor="thought-input">
+        <textarea
+          name="thought-input"
+          id="thought-input"
+          className={`text-input ${minMaxCount ? 'red-text' : ''}`}
+          value={newThought}
+          onChange={onNewThoughtChange}
+          placeholder="Type your happy thought..." />
+      </label>
+      <div className="form-details">
+        <p>
+          <span className={`number-count ${minMaxCount ? 'red-number' : ''}`}>
+            {newThought.length}
+          </span> / 140
+        </p>
+        <button
+          className="send-button"
+          type="submit">
+          ❤️ <span>Send Happy Thought</span> ❤️
+        </button>
+      </div>
+    </form>
+  )
+}