Technigo · sammyolsson · Mar 23, 2023 · Mar 25, 2023 · Mar 25, 2023 · Mar 25, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # 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.
+Practice React state skills by fetching and posting data to an API.
+The task was to follow a design but I kinda failed on that part.
 
 ## 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?
+Hard to know what to put in components, had to remove/add/rearrange my code multiple times.
+CSS, JS, React, API.
 
 ## 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://phenomenal-bavarois-c771f2.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.29.3",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",

diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,7 @@
       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 Thougths React app!</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,90 @@
-import React from 'react';
+/* eslint-disable linebreak-style */
+/* eslint-disable no-underscore-dangle */
+import Footer from 'components/Footer';
+import React, { useState, useEffect } from 'react';
+import Header from './components/Header'
+import ThoughtForm from './components/ThoughtForm'
+import ThoughtList from './components/ThoughtList'
 
 export const App = () => {
+  const [thoughtList, setThoughtList] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [newThought, setNewThought] = useState('')
+
+  /* FETCHES MOST RECENT THOUGHTS */
+  const fetchThoughts = () => {
+    setLoading(true);
+    fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts')
+      .then((res) => res.json())
+      .then((data) => setThoughtList(data))
+      .catch((error) => console.error(error))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    fetchThoughts();
+  }, [])
+
+  /* WRTIES NEW TEXT-INPUT-VALUE TO SETNEWTHOUGHT */
+  const handleNewThoughtChange = (event) => {
+    setNewThought(event.target.value)
+  }
+
+  /* POSTS NEW THOUGHT AND UPDATES STATE */
+  const postNewThought = () => {
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ message: newThought })
+    };
+
+    fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options)
+      .then((res) => res.json())
+      .then((data) => {
+        setThoughtList((prevList) => [data, ...prevList]);
+      });
+  }
+
+  const handleFormSubmit = (event) => {
+    event.preventDefault();
+    postNewThought();
+    setNewThought('')
+  };
+
+  /* POSTS NEW LIKES TO API */
+  const handleLike = (_id) => {
+    fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${_id}/like`, { method: 'POST' })
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        const updateLikes = thoughtList.map((like) => {
+          if (like._id === data._id) {
+            like.hearts += 1;
+            return like;
+          } else {
+            return like;
+          }
+        });
+        setThoughtList(updateLikes)
+      })
+  }
   return (
     <div>
-      Find me in src/app.js!
+      <Header />
+      <main>
+        <ThoughtForm
+          onFormSubmit={handleFormSubmit}
+          newThought={newThought}
+          onNewThoughtChange={handleNewThoughtChange} />
+        <ThoughtList
+          loading={loading}
+          thoughtList={thoughtList}
+          handleLike={handleLike} />
+      </main>
+      <Footer />
     </div>
   );
-}
+}
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <div aria-hidden="true" className="contact">
+      <p>Happy Thoughts made by <a href="https://www.linkedin.com/in/sammy-olsson/" target="_blank" rel="noreferrer">Sammy Olsson</a>,
+          Team-🐢
+      </p>
+    </div>
+  )
+};
+
+export default Footer;
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
@@ -0,0 +1,14 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+import logo from './assets/happy-logo.png'
+
+const Header = () => {
+  return (
+    <header>
+      <div className="image-wrapper">
+        <img className="logo" src={logo} alt="logo happy thoughts" />
+      </div>
+    </header>)
+}
+
+export default Header;
diff --git a/code/src/components/ThoughtForm.js b/code/src/components/ThoughtForm.js
@@ -0,0 +1,37 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+
+const ThoughtForm = ({ newThought, onNewThoughtChange, onFormSubmit }) => {
+  const isSubmitButtonDisabled = newThought.length < 6 || newThought.length > 140;
+  /* SHOWS CHARACTER-COUNT OR A WARNING MESSAGE DEPENDING ON NUMBER OF CHARACTERS */
+  const characterWarning = () => {
+    if (newThought.length > 140) {
+      return (<p className="character-warning">Your thought can only be 140 characters long</p>)
+    } else {
+      return (<p className="character-count">{newThought.length} / 140, need atleast 6 characters.</p>)
+    }
+  }
+  return (
+    <section className="form-section">
+      <form className="form" onSubmit={onFormSubmit}>
+        <label className="label" htmlFor="thought-input">
+          What&apos;s making you happy right now?
+          <textarea
+            className="thought-input"
+            id="thought-input"
+            placeholder="Enter the happy thought here..."
+            value={newThought}
+            onChange={onNewThoughtChange} />
+        </label>
+        {characterWarning()}
+        <button
+          className="submit-button"
+          type="submit"
+          disabled={isSubmitButtonDisabled}>
+          🖤 Shoot a happy thought!
+        </button>
+      </form>
+    </section>)
+}
+
+export default ThoughtForm
diff --git a/code/src/components/ThoughtList.js b/code/src/components/ThoughtList.js
@@ -0,0 +1,43 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import { formatDistanceToNow } from 'date-fns';
+
+const ThoughtList = ({ loading, thoughtList, handleLike }) => {
+  if (loading) {
+    return <h2>Loading happy thought...</h2>
+  }
+  return (
+    <section className="thought-section">
+      {thoughtList.map((thought) => {
+        return (
+          <div key={thought._id} className="single-thought">
+            <p>{thought.message}</p>
+            <div className="thought-details">
+              <div className="likes-wrapper">
+                <button
+                  className={thought.hearts === 0 ? 'heart-button-nolikes' : 'heart-button'}
+                  type="button"
+                  onClick={() => handleLike(thought._id)}>
+                  🖤
+                </button>
+                <span>x {thought.hearts}</span>
+              </div>
+              <div className="time-wrapper">
+                <span className="time">{formatDistanceToNow(
+                  new Date(thought.createdAt),
+                  Date.now(),
+                  { addSuffix: true }
+                )}
+                </span>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+
+    </section>
+  )
+}
+
+export default ThoughtList
diff --git a/code/src/components/assets/happy-logo.png b/code/src/components/assets/happy-logo.png