Technigo · JosefinRobertsson · Mar 22, 2023 · Mar 24, 2023 · Mar 25, 2023 · Mar 25, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+A cute little project where you post happy thoughts and like other peoples' happy thoughts and everyone gets happy vibes
 
 ## 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?
+Create fetches to both post to and get data from the API. Create like button. Follow styling requests
 
 ## 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://mellow-duckanoo-8fdcc7.netlify.app/
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>Post happy thoughts!</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
+import DataList from 'components/DataList';
+import InputForm from 'components/InputForm';
 
 export const App = () => {
+  const [happyThoughtsList, setHappyThoughtsList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [newThought, setNewThought] = useState('');
+  const [charCount, setCharCount] = useState(140);
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
-}
+    <>
+      <InputForm
+        loading={loading}
+        setLoading={setLoading}
+        newThought={newThought}
+        setNewThought={setNewThought}
+        setHappyThoughtsList={setHappyThoughtsList}
+        happyThoughtsList={happyThoughtsList}
+        charCount={charCount}
+        setCharCount={setCharCount} />
+      <DataList
+        loading={loading}
+        setLoading={setLoading}
+        happyThoughtsList={happyThoughtsList}
+        setHappyThoughtsList={setHappyThoughtsList} />
+    </>
+  )
+};
diff --git a/code/src/components/DataList.js b/code/src/components/DataList.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import SingleThought from './SingleThought';
+
+const DataList = ({ loading, setLoading, happyThoughtsList, setHappyThoughtsList }) => {
+  const updateList = (thought) => {
+    setLoading(true)
+    const options = {
+      method: 'POST'
+    };
+
+    console.log('options', options);
+    // eslint-disable-next-line no-underscore-dangle
+    fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${thought._id}/like`, options)
+      .then((response) => response.json())
+      .then((updatedThought) => {
+        console.log(updatedThought);
+
+        // create a new array with the updated thought
+        const updatedThoughtsList = happyThoughtsList.map((thoughtItem) => {
+          // eslint-disable-next-line no-underscore-dangle
+          if (thoughtItem._id === updatedThought._id) {
+            return updatedThought;
+          }
+          return thoughtItem;
+        });
+
+        if (loading) {
+          return (<h2>loading in process...</h2>);
+        }
+
+        // set the updated thoughts list
+        setHappyThoughtsList(updatedThoughtsList);
+      })
+      .catch((error) => console.log(error))
+      .finally(() => {
+        setLoading(false);
+        console.log('heart count increased')
+      });
+  };
+
+  const heartCountClick = (thought) => {
+    console.log('like-click')
+    updateList(thought);
+  };
+
+  return (
+    <div className="listItems">
+      {happyThoughtsList.map((thought) => (
+        // eslint-disable-next-line no-underscore-dangle
+        <SingleThought key={thought._id} thought={thought} onHeartClick={heartCountClick} />
+      ))}
+    </div>
+  )
+};
+
+export default DataList;
diff --git a/code/src/components/InputForm.js b/code/src/components/InputForm.js
@@ -0,0 +1,87 @@
+import React, { useEffect } from 'react';
+
+const InputForm = ({
+  loading,
+  setLoading,
+  newThought,
+  setNewThought,
+  setHappyThoughtsList,
+  happyThoughtsList,
+  charCount,
+  setCharCount
+}) => {
+  const updateThoughtsList = () => {
+    setLoading(true);
+
+    fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts')
+      .then((response) => response.json())
+      .then((data) => setHappyThoughtsList(data))
+      .catch((error) => console.log(error))
+      .finally(() => {
+        console.log('it worked');
+        setLoading(false);
+        console.log('loading-Get');
+        console.log(happyThoughtsList);
+      });
+  };
+
+  const handleFormSubmit = (event) => {
+    event.preventDefault();
+    setLoading(true);
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        message: newThought
+      })
+    };
+
+    console.log('options', options);
+    fetch('https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts', options)
+      .then((response) => response.json())
+      .then((data) => {
+        setHappyThoughtsList([data, ...happyThoughtsList]);
+        console.log(data);
+      })
+      .catch((error) => console.log(error))
+      .finally(() => {
+        setLoading(false);
+        console.log(happyThoughtsList)
+        setNewThought(''); // clear textarea
+        setCharCount(140);
+      });
+  };
+
+  useEffect(() => {
+    updateThoughtsList();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleInputChange = (event) => {
+    const { value } = event.target;
+    setNewThought(value);
+    setCharCount(140 - value.length); // update character count
+  };
+
+  if (loading) {
+    return (<h2>loading in process...</h2>);
+  }
+
+  return (
+    <div className="inputForm">
+      <form onSubmit={handleFormSubmit}>
+        <h3>What&apos;s making you happy right now?</h3>
+        <textarea
+          value={newThought}
+          onChange={handleInputChange}
+          maxLength="140" />
+        <div id="counter">140/{charCount}</div>
+        <button type="submit"><span id="heart"> Send Happy Thought&nbsp;</span></button>
+      </form>
+    </div>
+  );
+};
+
+export default InputForm;
diff --git a/code/src/components/SingleThought.js b/code/src/components/SingleThought.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+let timeStamp;
+
+const SingleThought = ({ thought, onHeartClick }) => {
+  const date = new Date(thought.createdAt);
+  const timeDiff = Math.round((new Date() - date) / (1000 * 60));
+  if (timeDiff < 1) {
+    timeStamp = 'just now';
+  } else if (timeDiff < 90) {
+    timeStamp = `${timeDiff} min ago`;
+  } else {
+    const hoursDiff = Math.round(timeDiff / 60);
+    timeStamp = `${hoursDiff} hour${hoursDiff > 1 ? 's' : ''} ago`;
+  }
+  console.log('singlelistitem')
+  return (
+    <div className="singleListItem">
+      <h3 id="stretched">{thought.message}</h3>
+      <div className="buttonTimestampBox">
+        <div className="heartCounter"><button onClick={() => onHeartClick(thought)} type="button"><span id="heartButton">🧡</span></button>
+          <span> x {thought.hearts}</span>
+        </div>
+        <p className="timeStamp">{timeStamp}</p>
+      </div>
+    </div>
+  );
+};
+
+export default SingleThought;
diff --git a/code/src/index.css b/code/src/index.css
@@ -1,5 +1,8 @@
 body {
-  margin: 0;
+  margin-left:  auto;
+  margin-right: auto;
+  margin-top: 4em;
+  max-width: 600px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
@@ -11,3 +14,113 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.listItems {
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  word-wrap: break-word;
+}
+
+.singleListItem,
+.inputForm {
+  display: block;
+  border: 1px solid black;
+  box-shadow: 10px 10px 0 0 black;
+}
+
+.inputForm {
+  background-color: rgb(233, 233, 232);
+  margin-bottom: 2em;
+}
+
+h3 {
+  display: block;
+  margin-left: 5%;
+  margin-right: 5%;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+textarea {
+  margin-left: 2em;
+  margin-right: 1em;
+  width: calc(95% - 3em);
+  height: 4em;
+  caret-color: rgb(197, 62, 57);
+}
+
+button {
+margin-left: 5%;
+margin-top: 1em;
+margin-bottom: 1.5em;
+width: 45%;
+padding: 10px 10px 10px 10px;
+border-radius: 20px;
+border: none;
+background-color: rgb(252, 166, 163);
+font-weight: bold;
+font-size: medium;
+cursor: pointer;
+}
+
+button:active {
+  background-color: white;
+  border: 1px solid red;
+}
+
+button:active #heartButton {
+  filter:contrast(50%);
+}
+
+.noWrapButton {
+  white-space:nowrap;
+}
+
+#heart::before,
+#heart::after {
+  content: '🧡';
+}
+
+.buttonTimestampBox button {
+  width: 3em;
+  height: 3em;
+  border-radius: 50%;
+  margin-bottom: 16px;
+}
+
+#stretched {
+  font-size: 1.2em;
+  transform: scaleY(1.2);
+}
+
+#counter {
+  margin-left: 5%;
+}
+
+.buttonTimestampBox {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-left: 1em;
+  margin-right: 2em;
+}
+
+.heartCounter {
+  white-space: nowrap;
+  align-self: flex-end;
+}
+
+.timeStamp {
+  display: inline-block;
+ align-self: center;
+}
+
+@media screen and (max-width: 667px) {
+  .inputForm,
+  .listItems {
+    margin-left: 1em;
+    margin-right: 2em;
+  }
+}
+