Technigo · SandraMadeleine · Jun 25, 2023 · Jun 25, 2023 · Jun 25, 2023 · Jun 25, 2023
diff --git a/README.md b/README.md
@@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t
 
 ## 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://happythoughts-project.netlify.app/
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.30.0",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",

diff --git a/code/public/icons8-heart.png b/code/public/icons8-heart.png
diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,9 @@
       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>
+    <title>Happy Thoughts Project</title>
+    <link rel="icon" type="image/png" size="32x32" href="./icons8-heart.png">
+    <!-- <a target="_blank" href="https://icons8.com/icon/64452/heart">Heart</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a> -->
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,12 @@
 import React from 'react';
+import Header from './components/Header';
+import Main from './components/Main';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+      <Header />
+      <Main />
+    </>
   );
-}
+};
diff --git a/code/src/components/Form.js b/code/src/components/Form.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Form = ({ onFormSubmit, newThought, onNewThoughtChange }) => {
+  const isSubmitButtonDisabled = newThought.length < 3 || newThought.length > 140;
+
+  return (
+    <form className="form" onSubmit={onFormSubmit}>
+      <label htmlFor="thought-input">
+          Tell us what makes you happy!
+        <textarea
+          className="thought-input"
+          id="thought-input"
+          value={newThought}
+          onChange={onNewThoughtChange}
+          rows="4"
+          cols="30"
+          placeholder="Share your happy thought here" />
+      </label>
+      <div className="thought-length">
+        <span>{newThought.length}/140 </span>
+        {newThought.length > 140 && <span>Your thought is too long!</span>}
+      </div>
+      <button className="send-button" type="submit" disabled={isSubmitButtonDisabled}>
+        <span className="button-text">❤️ Send Your Happy Thought ❤️</span>
+      </button>
+    </form>
+  );
+};
+
+export default Form;
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Header = () => {
+  return (
+    <h1>
+            HAPPY THOUGHTS!
+    </h1>
+  )
+};
+
+export default Header;
diff --git a/code/src/components/Item.js b/code/src/components/Item.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { formatDistanceToNow } from 'date-fns';
+
+const Item = ({ thoughtId, message, likes, creationDate, handleLikes }) => {
+  const creationDateObject = new Date(creationDate);
+  const formattedCreationDate = formatDistanceToNow(creationDateObject, { addSuffix: true });
+
+  const buttonGrey = (
+    <button
+      type="button"
+      className="heart-button grey"
+      onClick={() => handleLikes(thoughtId)}>
+      ❤️
+    </button>
+  );
+
+  const buttonPink = (
+    <button
+      type="button"
+      className="heart-button pink"
+      onClick={() => handleLikes(thoughtId)}>
+      ❤️
+    </button>
+  );
+
+  return (
+    <article className="card">
+      <p>{message}</p>
+      <div className="card-bottom">
+        <div className="card-bottom-left">
+          {likes !== 0 ? buttonPink : buttonGrey}
+          <span> x {likes}</span>
+        </div>
+        <div className="card-bottom-right">
+          <p>{formattedCreationDate}</p>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default Item;
diff --git a/code/src/components/List.js b/code/src/components/List.js
@@ -0,0 +1,21 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import Item from './Item';
+
+const List = ({ thoughtList, handleLikes }) => {
+  return (
+    <section className="list">
+      {thoughtList.map((thought) => (
+        <Item
+          key={thought._id}
+          thoughtId={thought._id}
+          message={thought.message}
+          likes={thought.hearts}
+          creationDate={thought.createdAt}
+          handleLikes={handleLikes} />
+      ))}
+    </section>
+  );
+};
+
+export default List;
diff --git a/code/src/components/Main.js b/code/src/components/Main.js
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+
+import Form from './Form';
+import List from './List';
+
+const Main = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [thoughtList, setThoughtList] = useState([]);
+  const [newThought, setNewThought] = useState('');
+
+  // get list of posts
+  const API_URL = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts';
+
+  const fetchMessages = () => {
+    setIsLoading(true);
+    fetch(API_URL)
+      .then((res) => res.json())
+      .then((data) => setThoughtList(data))
+      .catch((error) => console.error(error))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(() => {
+    fetchMessages();
+  }, []);
+
+  const handleNewThoughtChange = (event) => {
+    setNewThought(event.target.value);
+  };
+
+  // eslint-disable-next-line no-unused-vars
+  const postNewThought = () => {
+    setNewThought('');
+    setIsLoading(false);
+  };
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ message: newThought })
+    };
+
+    fetch(API_URL, options)
+      .then((res) => res.json())
+      .then(() => fetchMessages())
+      .then(() => setNewThought(''));
+  };
+
+  const handleLikes = (id) => {
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    };
+    fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${id}/like`, options)
+      .then((res) => res.json())
+      .then((error) => console.error(error))
+      .finally(() => fetchMessages(''));
+  };
+
+  return (
+    <main className="happy-page">
+      <Form
+        newThought={newThought}
+        onNewThoughtChange={handleNewThoughtChange}
+        onFormSubmit={onFormSubmit} />
+      <List isLoading={isLoading} thoughtList={thoughtList} handleLikes={handleLikes} />
+    </main>
+  );
+};
+
+export default Main;