TOTAL DISASTER - NOT working at all - W/ - Sad Thoughts and not a single happy one /Ylva K

README.md

@@ -1,13 +1,15 @@
 # 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.
+Week 7 project with React - the task was to fetch happy thoughts from an API and showing them in a list plus have a form for new happy thoughts where people could post their happy thoughts in and make the new thoughts to also show up in the list.
 
 ## 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?
+This week started off very good but ended in a catastrophical way for me...
+With some help from a former student I managed to solve the problem and finally got my code to work - YEY! Big shoutout to Agnes Ahlman for helping me out.
+
+I had the basic functions working but then when I wanted to add more functionality it just didn't work out and the page was completely blank/white with nothing showing up.
+I've been crying, laughing and overall struggling this week but now with a working project I'm so happy and grateful.
 
 ## 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://happy-thoughts-w7-ylva-karlsson.netlify.app/

code/package.json

@@ -10,6 +10,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

code/src/App.js

@@ -1,9 +1,6 @@
 import React from 'react';
+import HappyThoughtsFeed from 'components/HappyThoughtsFeed';
 
 export const App = () => {
-  return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
-}
+  return <HappyThoughtsFeed />;
+};

code/src/components/Footer.js

@@ -0,0 +1,24 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer>
+      <div aria-hidden="true" className="contact">
+        <p>
+          CREATED BY YLVA KARLSSON
+          <br />
+          STUDENT @ TECHNIGO 2023
+        </p>
+        <button
+          type="button"
+          className="contactMe"
+          onClick={() => window.open('https://www.linkedin.com/in/ylvakarlsson87/')}>
+          Contact
+        </button>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

code/src/components/HappyThought.js

@@ -0,0 +1,45 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable padded-blocks */
+/* eslint-disable no-trailing-spaces */
+import React from 'react';
+import moment from 'moment';
+// {props.text}
+
+// const HappyThought = (props) => {
+const HappyThought = ({ thoughtId, text, hearts, timestamp, handleHearts }) => {
+
+  const heartButtonGrey = (
+    <button
+      type="submit"
+      className="heart-button grey-background"
+      onClick={() => handleHearts(thoughtId)}>
+      ❤️
+    </button>
+  );
+
+  const heartButtonPink = (
+    <button
+      type="submit"
+      className="heart-button pink-background"
+      onClick={() => handleHearts(thoughtId)}>
+      ❤️
+    </button>
+  );
+
+  return (
+    <article className="happy-thought-card">
+      <p>{text}</p>
+      <div className="card-bottom">
+        <div className="card-bottom-left">
+          {hearts !== 0 ? heartButtonPink : heartButtonGrey}
+          <span> x {hearts}</span>
+        </div>
+        <div className="card-bottom-right-timestamp">
+          <p>{moment(timestamp).startOf('hour').fromNow()}</p>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default HappyThought;

code/src/components/HappyThoughtsFeed.js

@@ -0,0 +1,108 @@
+/* eslint-disable react/jsx-closing-bracket-location */
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable brace-style */
+/* eslint-disable object-curly-newline */
+/* eslint-disable linebreak-style */
+/* eslint-disable import/no-named-as-default */
+/* eslint-disable no-trailing-spaces */
+import React, { useState, useEffect } from 'react';
+import NewHappyThought from 'components/NewHappyThought';
+import HappyThoughtsList from './HappyThoughtsList';
+import Loading from './Loading';
+import Footer from './Footer';
+
+const HappyThoughtsFeed = () => {
+  const [thoughtsList, setThoughtsList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  // const [newHappyThought, setNewHappyThought] = useState('');
+
+  const API_URL = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts';
+
+  const fetchThoughts = () => {
+    setLoading(true);
+    fetch(API_URL)
+      .then((response) => response.json())
+      .then((data) => setThoughtsList(data))
+      .catch((error) => console.log(error))
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    fetchThoughts();
+  }, []);
+
+  // const onFormSubmit = (event) => {
+  //   setNewHappyThought(event.target.value);
+  // };
+
+  // const newHappyThought = () => {
+  //   setNewHappyThought('');
+  //   setLoading(false);
+  // };
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const val = event.target['thought-input'].value;
+
+    const options = {
+      method: 'POST',
+      body: JSON.stringify({ message: val }),
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json' 
+      } 
+    };
+
+    fetch(API_URL, options)
+      .then((response) => response.json())
+      .then((data) => { setThoughtsList([data, ...thoughtsList]);
+      })
+      .catch((error) => console.log(error))
+      .finally(() => setLoading(false));
+  };
+
+  const handleHearts = (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(console.log('likes'))
+      .then((error) => console.error(error))
+      .finally(() => fetchThoughts(''));
+  };
+
+  return (
+    <main className="happy-thoughts-app">
+      <h1>Happy Thoughts!</h1>
+      <NewHappyThought
+        handleFormSubmit={onFormSubmit}
+      />
+      <HappyThoughtsList 
+        loading={loading}
+        thoughtsList={thoughtsList}
+        handleHearts={handleHearts}
+      />
+      {/* {thoughtsList.map((thought) => (
+        <HappyThought
+          key={thought._id}
+          text={thought.message}
+          hearts={thought.hearts}
+          timestamp={thought.createdAt} 
+          handleHearts={() => handleHearts(thought._id)}
+        />
+      ))} */}
+      {loading && <Loading />}
+      <div className="footer">
+        <Footer />
+      </div>
+    </main>
+  );
+};
+
+export default HappyThoughtsFeed;

code/src/components/HappyThoughtsList.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import HappyThought from './HappyThought';
+
+const HappyThoughtsList = ({ thoughtsList, handleHearts }) => {
+  return (
+    <section className="happy-thoughts-list">
+      {thoughtsList.map((thought) => (
+        <HappyThought
+          key={thought._id}
+          thoughtId={thought._id}
+          text={thought.message}
+          hearts={thought.hearts}
+          timestamp={thought.createdAt}
+          handleHearts={() => handleHearts(thought._id)} />
+      ))}
+    </section>
+  );
+};
+
+export default HappyThoughtsList;

code/src/components/Loading.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <div className="loading-overlay">
+      <div className="loading-spinner" />
+    </div>
+  );
+};
+
+export default Loading;

code/src/components/NewHappyThought.js

@@ -0,0 +1,50 @@
+/* eslint-disable max-len */
+/* eslint-disable linebreak-style */
+/* eslint-disable padded-blocks */
+/* eslint-disable no-trailing-spaces */
+import React, { useState } from 'react';
+import JSConfetti from 'js-confetti';
+
+const NewHappyThought = ({ handleFormSubmit }) => {
+  const [newThought, setNewThought] = useState('');
+  const jsConfetti = new JSConfetti();
+  const isSubmitButtonDisabled = newThought.length < 5 || newThought.length > 140;
+
+  return (
+    <form
+      className="new-happy-thought-form-wrapper"
+      onSubmit={handleFormSubmit}>
+      <label htmlFor="thought-input">
+            What makes you happy right now?
+        <textarea
+          className="thought-input"
+          id="thought-input"
+          onChange={(e) => setNewThought(e.target.value)}
+          rows="4"
+          cols="30"
+          placeholder="Write your happy thought here (at least 5 characters and up to 140 characters)" />
+      </label>
+      <div className="thought-length">
+        <span>{newThought.length}/140</span>
+        {newThought.length > 140 && <span>Sorry it`&apos;`s too long, please keep within the maximum of 140 characters!</span>}
+      </div>
+      <button
+        className="send-new-thought-button"
+        type="submit"
+        disabled={isSubmitButtonDisabled}
+        onClick={() => {
+          (jsConfetti.addConfetti({
+            confettiRadius: 8,
+            confettiNumber: 500,
+            confettiColors: [
+              '#d44e62', '#fcfee1', '#eebed9', '#b4c8b7', '#fb91c6', '#a0bbd0'
+            ]
+          }))
+        }}>
+        <span className="button-text">❤️ Share Happy Thought ❤️</span>
+      </button>
+    </form>
+  );
+};
+
+export default NewHappyThought;