From 04079bca0867080facf1a92f557e914b501b553b Mon Sep 17 00:00:00 2001
From: Jonash189 <jonas.hellstrom89@gmail.com>
Date: Wed, 23 Oct 2024 12:23:35 +0200
Subject: [PATCH 1/7]  Creating first component HappyToughts were i will store
 everyting.

---
 src/App.jsx                      | 5 ++++-
 src/components/HappyThoughts.jsx | 8 ++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/components/HappyThoughts.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 1091d431..176283ed 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,3 +1,6 @@
+import React from "react";
+
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return <div>hejhej</div>;
 };
diff --git a/src/components/HappyThoughts.jsx b/src/components/HappyThoughts.jsx
new file mode 100644
index 00000000..6ce947c7
--- /dev/null
+++ b/src/components/HappyThoughts.jsx
@@ -0,0 +1,8 @@
+
+import React from "react";
+
+export const HappyThoughts = () => {
+    const [thoughts, setThoughts] = useState([])
+    const [newthoughts, setNewThoughts] = useState("")
+
+}
\ No newline at end of file

From 9765b2c639e3f697540a3e9729f80d48d80abc43 Mon Sep 17 00:00:00 2001
From: Jonash189 <jonas.hellstrom89@gmail.com>
Date: Wed, 23 Oct 2024 15:21:24 +0200
Subject: [PATCH 2/7]  Creating ThoughtForm component.

---
 src/App.jsx                      | 16 +++++++++----
 src/components/HappyThoughts.jsx | 24 +++++++++++++++----
 src/components/ThoughtForm.jsx   | 40 ++++++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ThoughtForm.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 176283ed..3199cbde 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,12 @@
-import React from "react";
+import React from 'react';
+import { HappyThoughts } from './components/HappyThoughts';
+import { ThoughtForm } from './components/ThoughtForm';
 
-
-export const App = () => {
-  return <div>hejhej</div>;
-};
+const App = () => {
+  return (
+    <div>
+      <h1>Välkommen till Happy Thoughts!</h1>
+      < HappyThoughts />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/HappyThoughts.jsx b/src/components/HappyThoughts.jsx
index 6ce947c7..f5ed6c33 100644
--- a/src/components/HappyThoughts.jsx
+++ b/src/components/HappyThoughts.jsx
@@ -1,8 +1,24 @@
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 export const HappyThoughts = () => {
-    const [thoughts, setThoughts] = useState([])
-    const [newthoughts, setNewThoughts] = useState("")
+  const [thoughts, setThoughts] = useState([]);
 
-}
\ No newline at end of file
+  useEffect(() => {
+    fetch('https://project-happy-thoughts-api-j0eg.onrender.com/thoughts')
+      .then(res => res.json())
+      .then(data => {
+        console.log(data); // Logga den faktiska datan
+      })
+      .catch(error => {
+        console.error('Fel vid hämtning av tankar:', error); // Logga eventuella fel
+      });
+  }, []); // Se till att denna rad är korrekt
+
+  return (
+    <div>
+      <h1>Happy Thoughts</h1>
+      {/* Här kan du rendera tankarna om du vill */}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ThoughtForm.jsx b/src/components/ThoughtForm.jsx
new file mode 100644
index 00000000..9c432379
--- /dev/null
+++ b/src/components/ThoughtForm.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { ThoughtForm } from './components/ThoughtForm';
+
+export const HappyThoughtForm = () => {
+  onFormSubmit,
+    newThought,
+    oneNewThoughtChange,
+
+}) => {
+
+  const disableSubmit = newThought.length < 6 || newThought.length > 140;
+
+  return (
+
+    <form className="form-container" onSubmit={onFormSubmit}>
+      <label>
+        <h3> "what makes you happy.."
+
+
+          <textarea
+            className="thought-input"
+            value={newThought}
+            onChange={oneNewThoughtChange}
+            placeholder="Write something here"
+            required
+          />
+      </label>
+
+      <button
+        type="submit"
+        className="submit-thought"
+        aria-label="button for submit thought"
+        disabled={disableSubmit}
+        required
+      >
+        ❤️ Send Happy Thought ❤️
+      </button>
+    </form>
+  );
+};

From 92a83da2e12b16dd1d0115f06c5915d0798ab913 Mon Sep 17 00:00:00 2001
From: Jonash189 <jonas.hellstrom89@gmail.com>
Date: Wed, 23 Oct 2024 16:12:44 +0200
Subject: [PATCH 3/7]  Adding ThoughtLikes component and budilding the function
 to like.

---
 src/App.jsx                      |  2 +-
 src/components/HappyThoughts.jsx |  1 +
 src/components/ThoughtForm.jsx   |  2 +-
 src/components/ThoughtLikes      | 37 ++++++++++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ThoughtLikes

diff --git a/src/App.jsx b/src/App.jsx
index 3199cbde..166b4646 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { HappyThoughts } from './components/HappyThoughts';
-import { ThoughtForm } from './components/ThoughtForm';
+
 
 const App = () => {
   return (
diff --git a/src/components/HappyThoughts.jsx b/src/components/HappyThoughts.jsx
index f5ed6c33..6aa79730 100644
--- a/src/components/HappyThoughts.jsx
+++ b/src/components/HappyThoughts.jsx
@@ -1,5 +1,6 @@
 
 import React, { useState, useEffect } from "react";
+import { ThoughtForm } from './ThoughtForm';
 
 export const HappyThoughts = () => {
   const [thoughts, setThoughts] = useState([]);
diff --git a/src/components/ThoughtForm.jsx b/src/components/ThoughtForm.jsx
index 9c432379..46dcb688 100644
--- a/src/components/ThoughtForm.jsx
+++ b/src/components/ThoughtForm.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ThoughtForm } from './components/ThoughtForm';
+
 
 export const HappyThoughtForm = () => {
   onFormSubmit,
diff --git a/src/components/ThoughtLikes b/src/components/ThoughtLikes
new file mode 100644
index 00000000..06359a74
--- /dev/null
+++ b/src/components/ThoughtLikes
@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+const ThoughtLikes = ({ id, heart }) => {
+  const [likes, setLikes] = useState(heart)
+
+  const handelLikes = () => {
+    fetch('//happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/THOUGHT_ID/like'
+      , {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+)
+  }.then(res => res.json())
+    .then() => {
+  setLikes(likes + 1)
+)
+}
+.catch ((error) => {
+  console.error("Error:", error)
+})
+
+return (
+  <div className= "likes" >
+  <button
+      onClick={ handleLike }
+aria - label="Like-button"
+className = { likes === 0 ? "heart-button" : "liked-button"}
+type = "button"
+  >
+      ❤️
+</button>
+  < p > x { likes } </p>
+    </div>
+)
+}
+

From 6d053129b037066bb6f9fa386660a5d6cf3beeba Mon Sep 17 00:00:00 2001
From: Jonash189 <jonas.hellstrom89@gmail.com>
Date: Thu, 24 Oct 2024 10:56:27 +0200
Subject: [PATCH 4/7]  Creating HappyToughts component and making it the main
 component where I collecting all the code from the diffrent components.

---
 package.json                     |  1 +
 src/App.jsx                      |  5 ++-
 src/components/HappyThoughts.jsx | 67 +++++++++++++++++++++++++++-----
 src/components/Header.jsx        |  8 ++++
 src/components/ThoughtForm.jsx   | 27 +++++--------
 src/components/ThoughtLikes      | 37 ------------------
 src/components/ThoughtLikes.jsx  | 36 +++++++++++++++++
 src/components/ThoughtList.jsx   | 22 +++++++++++
 8 files changed, 137 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Header.jsx
 delete mode 100644 src/components/ThoughtLikes
 create mode 100644 src/components/ThoughtLikes.jsx
 create mode 100644 src/components/ThoughtList.jsx

diff --git a/package.json b/package.json
index 74245b0c..7bef2983 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/App.jsx b/src/App.jsx
index 166b4646..45043813 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,9 @@
-import React from 'react';
 import { HappyThoughts } from './components/HappyThoughts';
 
 
-const App = () => {
+
+
+export const App = () => {
   return (
     <div>
       <h1>Välkommen till Happy Thoughts!</h1>
diff --git a/src/components/HappyThoughts.jsx b/src/components/HappyThoughts.jsx
index 6aa79730..806f8f36 100644
--- a/src/components/HappyThoughts.jsx
+++ b/src/components/HappyThoughts.jsx
@@ -1,25 +1,74 @@
 
-import React, { useState, useEffect } from "react";
-import { ThoughtForm } from './ThoughtForm';
+import { Header } from "./Header"
+import { useState, useEffect } from "react"
+import { ThoughtForm } from "./ThoughtForm"
+import { ThoughtList } from "./ThoughtList"
+
 
 export const HappyThoughts = () => {
   const [thoughts, setThoughts] = useState([]);
+  const [newThought, setNewThought] = useState("")
 
   useEffect(() => {
-    fetch('https://project-happy-thoughts-api-j0eg.onrender.com/thoughts')
+    fetch("https://project-happy-thoughts-api-j0eg.onrender.com/thoughts")
       .then(res => res.json())
-      .then(data => {
-        console.log(data); // Logga den faktiska datan
+      .then((json) => {
+        setThoughts(json.response)
       })
       .catch(error => {
         console.error('Fel vid hämtning av tankar:', error); // Logga eventuella fel
       });
   }, []); // Se till att denna rad är korrekt
 
+  const handleNewThought = (event) => {
+    setNewThought(event.target.value)
+  }
+
+  //Function to POST new Happy Thoughts
+  const onFormSubmit = (event) => {
+    event.preventDefault()
+
+
+    const PostOptions = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        message: newThought,
+      }),
+    }
+
+    fetch(
+      "https://project-happy-thoughts-api-j0eg.onrender.com/thoughts",
+      PostOptions
+    )
+      .then((res) => res.json())
+      .then((newThought) => {
+        setThoughts((previousThoughts) => [
+          newThought.response,
+          ...previousThoughts,
+        ])
+        setNewThought("")
+      })
+      .catch((error) => {
+        console.error("Error posting Happy Thought:", error)
+      })
+  }
+
   return (
     <div>
-      <h1>Happy Thoughts</h1>
-      {/* Här kan du rendera tankarna om du vill */}
+      <Header />
+      <main className="main-wrapper">
+        <div className="main-content">
+          <ThoughtForm
+            newThought={newThought}
+            onNewThoughtChange={handleNewThought}
+            onFormSubmit={onFormSubmit}
+          />
+          <ThoughtList thoughts={thoughts} />
+        </div>
+      </main>
     </div>
-  );
-};
\ No newline at end of file
+  )
+}
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 00000000..c564e2b6
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,8 @@
+export const Header = () => {
+    return (
+        <div className="header">
+            <h1>Project Happy Thoughts</h1>
+            <h2>by Jonas</h2>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ThoughtForm.jsx b/src/components/ThoughtForm.jsx
index 46dcb688..2b681896 100644
--- a/src/components/ThoughtForm.jsx
+++ b/src/components/ThoughtForm.jsx
@@ -1,29 +1,21 @@
 import React from "react";
 
 
-export const HappyThoughtForm = () => {
-  onFormSubmit,
-    newThought,
-    oneNewThoughtChange,
-
-}) => {
+export const ThoughtForm = ({ onFormSubmit, newThought, onNewThoughtChange }) => {
 
   const disableSubmit = newThought.length < 6 || newThought.length > 140;
 
   return (
-
     <form className="form-container" onSubmit={onFormSubmit}>
       <label>
-        <h3> "what makes you happy.."
-
-
-          <textarea
-            className="thought-input"
-            value={newThought}
-            onChange={oneNewThoughtChange}
-            placeholder="Write something here"
-            required
-          />
+        <h3>What makes you happy..</h3>
+        <textarea
+          className="thought-input"
+          value={newThought}
+          onChange={onNewThoughtChange}
+          placeholder="Write something here"
+          required
+        />
       </label>
 
       <button
@@ -31,7 +23,6 @@ export const HappyThoughtForm = () => {
         className="submit-thought"
         aria-label="button for submit thought"
         disabled={disableSubmit}
-        required
       >
         ❤️ Send Happy Thought ❤️
       </button>
diff --git a/src/components/ThoughtLikes b/src/components/ThoughtLikes
deleted file mode 100644
index 06359a74..00000000
--- a/src/components/ThoughtLikes
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useState } from "react";
-
-const ThoughtLikes = ({ id, heart }) => {
-  const [likes, setLikes] = useState(heart)
-
-  const handelLikes = () => {
-    fetch('//happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/THOUGHT_ID/like'
-      , {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-)
-  }.then(res => res.json())
-    .then() => {
-  setLikes(likes + 1)
-)
-}
-.catch ((error) => {
-  console.error("Error:", error)
-})
-
-return (
-  <div className= "likes" >
-  <button
-      onClick={ handleLike }
-aria - label="Like-button"
-className = { likes === 0 ? "heart-button" : "liked-button"}
-type = "button"
-  >
-      ❤️
-</button>
-  < p > x { likes } </p>
-    </div>
-)
-}
-
diff --git a/src/components/ThoughtLikes.jsx b/src/components/ThoughtLikes.jsx
new file mode 100644
index 00000000..ad4e812b
--- /dev/null
+++ b/src/components/ThoughtLikes.jsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+export const ThoughtLikes = ({ id, heart }) => {
+  const [likes, setLikes] = useState(heart);
+
+  const handleLikes = () => {
+    fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${id}/like`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((res) => res.json())
+      .then(() => {
+        setLikes(likes + 1);
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  return (
+    <div className="likes" >
+      <button
+        onClick={handleLikes}
+        aria-label="Like-button"
+        className={likes === 0 ? "heart-button" : "liked-button"
+        }
+        type="button"
+      >
+        ❤️
+      </button>
+      < p > Likes: {likes} </p>
+    </div >
+  );
+};
diff --git a/src/components/ThoughtList.jsx b/src/components/ThoughtList.jsx
new file mode 100644
index 00000000..aa2c66ad
--- /dev/null
+++ b/src/components/ThoughtList.jsx
@@ -0,0 +1,22 @@
+import { formatDistanceToNow } from 'date-fns';
+import { ThoughtLikes } from "./ThoughtLikes.jsx";
+
+export const ThoughtList = ({ thoughts }) => {
+  return (
+    <section className="thought-section">
+      {thoughts.map((thought) => (
+        <div className="thought-wrapper" key={thought._id}>
+          <div className="input-message">{thought.message}</div>
+          <div className="info-wrapper">
+            <ThoughtLikes id={thought._id} hearts={thought.hearts} />
+            <div className="time">
+              {formatDistanceToNow(new Date(thought.createdAt), {
+                addSuffix: true,
+              })}
+            </div>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+};

From 6be38c130dd93a033540af073bb874834c407979 Mon Sep 17 00:00:00 2001
From: Jonash189 <jonas.hellstrom89@gmail.com>
Date: Fri, 25 Oct 2024 10:33:21 +0200
Subject: [PATCH 5/7]  Creating varible savedLikes so I can store the likes and
 return the previous likes.

---
 src/App.jsx                     |   2 +-
 src/components/ThoughtForm.jsx  |   2 +-
 src/components/ThoughtLikes.jsx |  31 +++--
 src/index.css                   | 196 ++++++++++++++++++++++++++++++++
 4 files changed, 220 insertions(+), 11 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 45043813..4ba573c5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,7 +6,7 @@ import { HappyThoughts } from './components/HappyThoughts';
 export const App = () => {
   return (
     <div>
-      <h1>Välkommen till Happy Thoughts!</h1>
+
       < HappyThoughts />
     </div>
   );
diff --git a/src/components/ThoughtForm.jsx b/src/components/ThoughtForm.jsx
index 2b681896..982d0c13 100644
--- a/src/components/ThoughtForm.jsx
+++ b/src/components/ThoughtForm.jsx
@@ -3,7 +3,7 @@ import React from "react";
 
 export const ThoughtForm = ({ onFormSubmit, newThought, onNewThoughtChange }) => {
 
-  const disableSubmit = newThought.length < 6 || newThought.length > 140;
+  const disableSubmit = newThought.length < 5 || newThought.length > 140;
 
   return (
     <form className="form-container" onSubmit={onFormSubmit}>
diff --git a/src/components/ThoughtLikes.jsx b/src/components/ThoughtLikes.jsx
index ad4e812b..918c7b84 100644
--- a/src/components/ThoughtLikes.jsx
+++ b/src/components/ThoughtLikes.jsx
@@ -1,7 +1,16 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export const ThoughtLikes = ({ id, heart }) => {
-  const [likes, setLikes] = useState(heart);
+  const [likes, setLikes] = useState(() => {
+    // Hämta likes från localStorage eller använd det initiala värdet
+    const savedLikes = localStorage.getItem(`likes-${id}`);
+    return savedLikes !== null ? Number(savedLikes) : Number(heart) || 0;
+  });
+
+  useEffect(() => {
+    // Spara likes till localStorage varje gång de ändras
+    localStorage.setItem(`likes-${id}`, likes);
+  }, [likes, id]); // Lägg till id i beroenden
 
   const handleLikes = () => {
     fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${id}/like`, {
@@ -10,9 +19,14 @@ export const ThoughtLikes = ({ id, heart }) => {
         'Content-Type': 'application/json',
       },
     })
-      .then((res) => res.json())
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return res.json();
+      })
       .then(() => {
-        setLikes(likes + 1);
+        setLikes((prevLikes) => prevLikes + 1);
       })
       .catch((error) => {
         console.error("Error:", error);
@@ -20,17 +34,16 @@ export const ThoughtLikes = ({ id, heart }) => {
   };
 
   return (
-    <div className="likes" >
+    <div className="likes">
       <button
         onClick={handleLikes}
         aria-label="Like-button"
-        className={likes === 0 ? "heart-button" : "liked-button"
-        }
+        className={likes === 0 ? "heart-button" : "liked-button"}
         type="button"
       >
         ❤️
       </button>
-      < p > Likes: {likes} </p>
-    </div >
+      <p>x {likes}</p>
+    </div>
   );
 };
diff --git a/src/index.css b/src/index.css
index 4558f538..ece7d9e4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,199 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.main-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+
+}
+
+
+
+.form-container {
+  background-color: rgb(170, 164, 164);
+  margin-bottom: 2rem;
+  width: 500px;
+  padding: 12px;
+  background-color: #ebebeb;
+  border: 1px solid rgb(105, 105, 105);
+  box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px;
+  margin-bottom: 2rem;
+  padding: 12px;
+
+}
+
+h3 {
+  text-align: center;
+}
+
+
+
+.thought-input {
+  width: 100%;
+  height: 80px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: 2px solid #d6d6d6;
+  border-radius: 2px;
+  background-color: #fff;
+  font-size: 16px;
+  resize: none;
+
+}
+
+
+.submit-thought {
+  border-radius: 26px;
+  border: none;
+  background-color: #ffadad;
+  color: #000;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 8px 0 5px;
+  padding: 10px 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+
+}
+
+
+.thought-section {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2rem;
+  */ */ width: 500px;
+
+}
+
+
+.thought-wrapper {
+
+  padding: 16px;
+  border: 1px solid rgb(105, 105, 105);
+  box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+
+
+.heart-button {
+  border-radius: 60%;
+  border: none;
+  padding: 16px;
+  cursor: pointer;
+  background-color: #eaeaea;
+}
+
+.heart-button:hover {
+  background-color: #ffadad;
+}
+
+.liked-button {
+  border-radius: 60%;
+  border: none;
+  padding: 16px;
+  cursor: pointer;
+  background-color: #ffadad;
+}
+
+.likes {
+  display: flex;
+  align-items: center;
+  color: rgb(105, 105, 105);
+}
+
+.likes>* {
+  margin-right: 5px;
+}
+
+.time {
+  color: rgb(105, 105, 105);
+  font-size: 16px;
+  padding-bottom: 1rem;
+}
+
+
+.info-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+/* .main-content {
+  width: 80%;
+} */
+
+/* 
+.likes {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
+button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
+
+
+
+.thought-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
+
+.input-message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
+.info-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
+.time {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+}
+
+
+
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+} */
+*/
\ No newline at end of file

From 7462e049e4cf8d5fea52c4707c01e35096db3c20 Mon Sep 17 00:00:00 2001
From: Jonash189 <jonas.hellstrom89@gmail.com>
Date: Fri, 25 Oct 2024 15:22:27 +0200
Subject: [PATCH 6/7] Adding CSS.

---
 src/components/ThoughtLikes.jsx |   4 +-
 src/index.css                   | 143 ++++++++------------------------
 2 files changed, 36 insertions(+), 111 deletions(-)

diff --git a/src/components/ThoughtLikes.jsx b/src/components/ThoughtLikes.jsx
index 918c7b84..2f9a7b2f 100644
--- a/src/components/ThoughtLikes.jsx
+++ b/src/components/ThoughtLikes.jsx
@@ -2,15 +2,13 @@ import { useState, useEffect } from "react";
 
 export const ThoughtLikes = ({ id, heart }) => {
   const [likes, setLikes] = useState(() => {
-    // Hämta likes från localStorage eller använd det initiala värdet
     const savedLikes = localStorage.getItem(`likes-${id}`);
     return savedLikes !== null ? Number(savedLikes) : Number(heart) || 0;
   });
 
   useEffect(() => {
-    // Spara likes till localStorage varje gång de ändras
     localStorage.setItem(`likes-${id}`, likes);
-  }, [likes, id]); // Lägg till id i beroenden
+  }, [likes, id]);
 
   const handleLikes = () => {
     fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${id}/like`, {
diff --git a/src/index.css b/src/index.css
index ece7d9e4..95e15071 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,9 +7,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 .header {
@@ -17,53 +18,49 @@ code {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 1rem;
 
 }
 
 .main-wrapper {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
-  height: 100%;
-
 
 }
 
-
-
-.form-container {
-  background-color: rgb(170, 164, 164);
-  margin-bottom: 2rem;
-  width: 500px;
-  padding: 12px;
+.form-container,
+.thought-wrapper {
   background-color: #ebebeb;
   border: 1px solid rgb(105, 105, 105);
   box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px;
-  margin-bottom: 2rem;
-  padding: 12px;
+  margin: 13px 0 13px 8px;
+  padding: 1rem;
+  max-width: 600px;
+  width: 90%;
 
 }
 
 h3 {
   text-align: center;
+
 }
 
 
 
+
+
 .thought-input {
   width: 100%;
   height: 80px;
   padding: 12px 20px;
-  box-sizing: border-box;
   border: 2px solid #d6d6d6;
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #fff;
   font-size: 16px;
   resize: none;
-
 }
 
-
 .submit-thought {
   border-radius: 26px;
   border: none;
@@ -73,56 +70,30 @@ h3 {
   font-weight: 600;
   margin: 8px 0 5px;
   padding: 10px 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
   cursor: pointer;
+  width: 100%;
 
 }
 
-
 .thought-section {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 2rem;
-  */ */ width: 500px;
-
-}
-
-
-.thought-wrapper {
-
-  padding: 16px;
-  border: 1px solid rgb(105, 105, 105);
-  box-shadow: rgb(0, 0, 0) 8px 8px 0px 0px;
+  padding: 0px;
   display: flex;
   flex-direction: column;
   margin-bottom: 2rem;
 }
 
-
-.heart-button {
-  border-radius: 60%;
+.heart-button,
+.liked-button {
+  border-radius: 50%;
   border: none;
   padding: 16px;
   cursor: pointer;
-  background-color: #eaeaea;
 }
 
 .heart-button:hover {
   background-color: #ffadad;
 }
 
-.liked-button {
-  border-radius: 60%;
-  border: none;
-  padding: 16px;
-  cursor: pointer;
-  background-color: #ffadad;
-}
-
 .likes {
   display: flex;
   align-items: center;
@@ -135,75 +106,31 @@ h3 {
 
 .time {
   color: rgb(105, 105, 105);
-  font-size: 16px;
+  font-size: 14px;
   padding-bottom: 1rem;
 }
 
-
 .info-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
 }
 
-/* .main-content {
-  width: 80%;
-} */
-
-/* 
-.likes {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-}
-
-button {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-}
-
-
-
-
-.thought-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-}
-
 
-.input-message {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+@media (max-width: 600px) {
+  .main-wrapper {
+    padding: 0.5rem;
 
-}
-
-.info-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  }
 
-}
+  h1 {
+    text-align: center;
+    padding-bottom: 2px;
+  }
 
-.time {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-}
-
-
-
-
-.main-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  .form-container,
+  .thought-wrapper {
+    width: 95%;
 
-} */
-*/
\ No newline at end of file
+  }
+}
\ No newline at end of file

From 5c147228d8461b4826fbe0bfe529ef72a3eda472 Mon Sep 17 00:00:00 2001
From: Jonash189 <jonas.hellstrom89@gmail.com>
Date: Mon, 28 Oct 2024 12:20:07 +0100
Subject: [PATCH 7/7]  Cleaning up the code.

---
 src/components/HappyThoughts.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/HappyThoughts.jsx b/src/components/HappyThoughts.jsx
index 806f8f36..3a55daf0 100644
--- a/src/components/HappyThoughts.jsx
+++ b/src/components/HappyThoughts.jsx
@@ -16,9 +16,9 @@ export const HappyThoughts = () => {
         setThoughts(json.response)
       })
       .catch(error => {
-        console.error('Fel vid hämtning av tankar:', error); // Logga eventuella fel
+        console.error('Fel vid hämtning av tankar:', error);
       });
-  }, []); // Se till att denna rad är korrekt
+  }, []);
 
   const handleNewThought = (event) => {
     setNewThought(event.target.value)