Technigo · AjmalZ · Mar 23, 2023 · Mar 26, 2023 · Mar 26, 2023 · Mar 26, 2023
diff --git a/code/.eslintrc.json b/code/.eslintrc.json
@@ -54,7 +54,7 @@
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
     "indent": [
-      "error",
+      "off",
       2,
       {
         "SwitchCase": 1
@@ -128,4 +128,4 @@
     "react-hooks/exhaustive-deps": "warn",
     "semi": "off"
   }
-}
+}
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
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -13,13 +13,13 @@
       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>
-  </head>
+  <title>Happy thoughts</title>
+</head>
 
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -29,6 +29,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
+</body>
 
-</html>
+</html>
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,48 @@
-import React from 'react';
+/* eslint-disable max-len */
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect } from 'react';
+import ThoughtList from 'components/ThoughtList';
+import ThoughtForm from 'components/ThoughtForm';
 
 export const App = () => {
+  const [thoughts, setThoughts] = useState([]);
+  const [newThought, setNewThought] = useState('')
+
+  const fetchMessage = () => {
+    fetch('https://project-happy-thoughts-api-eihxehjbzq-lz.a.run.app/thoughts', {
+      method: 'GET'
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        setThoughts(data.response)
+      }).catch((error) => console.log(error))
+  }
+  const sendMessage = (event) => {
+    event.preventDefault()
+    fetch('https://project-happy-thoughts-api-eihxehjbzq-lz.a.run.app/thoughts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ message: newThought, createdAt: Date.now() })
+    })
+      .then(() => setNewThought(''))
+      .catch((error) => console.log(error))
+  }
+
+  const sendLike = (_id) => {
+    fetch(`https://project-happy-thoughts-api-eihxehjbzq-lz.a.run.app/thoughts/${_id}/like`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    }).catch((error) => console.log(error))
+  }
+
+  useEffect(() => {
+    fetchMessage();
+  });
+
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="content">
+      <ThoughtForm newThought={newThought} setNewThought={setNewThought} onFormSubmit={sendMessage} />
+      <ThoughtList thoughts={thoughts} sendLike={sendLike} />
     </div>
   );
 }
diff --git a/code/src/bgImg.png b/code/src/bgImg.png
diff --git a/code/src/components/MessageCard.js b/code/src/components/MessageCard.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { formatDistance } from 'date-fns';
+
+const MessageCard = ({ item, sendLike }) => {
+    const sendHearts = () => {
+        // eslint-disable-next-line no-underscore-dangle
+        sendLike(item._id)
+    }
+    return (
+        <div className="messageCard">
+            <p>{item.message}</p>
+            <div className="heartRow">
+                <div className="heartBtnSection">
+                    <button className="heartBtn" type="button" onClick={sendHearts}> ❤️ </button>  x   {item.likes}
+                </div>
+                <p className="timeStamp">
+                    {formatDistance(new Date(item.createdAt), Date.now(), { addSuffix: true })}
+                </p>
+            </div>
+        </div>
+    );
+}
+
+export default MessageCard
diff --git a/code/src/components/ThoughtForm.js b/code/src/components/ThoughtForm.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const ThoughtForm = ({ newThought, setNewThought, onFormSubmit }) => {
+    return (
+        <div className="textBox">
+            <form className="textArea" onSubmit={onFormSubmit}>
+                <h1>What makes you happy?</h1>
+                <textarea value={newThought} onChange={(event) => setNewThought(event.target.value)} className="inputField" type="text" placeholder="Share some happy toughts..." cols="50" rows="5" />
+                <button className="sendBtn" type="submit">❤️Send happy toughts❤️</button>
+            </form>
+        </div>
+    )
+}
+
+export default ThoughtForm
diff --git a/code/src/components/ThoughtList.js b/code/src/components/ThoughtList.js
@@ -0,0 +1,15 @@
+/* eslint-disable max-len */
+/* eslint-disable indent */
+import React from 'react';
+import MessageCard from './MessageCard';
+
+const ThoughtList = ({ thoughts, sendLike }) => {
+    return (
+        <div className="messageList">
+            {thoughts.map((item) => <MessageCard item={item} sendLike={sendLike} />)}
+        </div>
+    )
+}
+
+export default ThoughtList
+
diff --git a/code/src/index.css b/code/src/index.css
@@ -1,13 +1,108 @@
+@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: 'VT323', monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.textArea {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: #dae0e6;
+  width: 467px;
+  box-shadow: 5px 10px;
+}
+
+.textBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 40px;
+}
+
+.inputField {
+  resize: none;
+  outline: none;
+  border: 1px solid;
+  padding: 10px;
+  background: aliceblue;
+  width: 390px;
+  font-size: 16px;
+  font-family: 'VT323', monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
+.messageCard {
+  border: 1px solid;
+  padding: 10px;
+  box-shadow: 5px 10px;
+  background: aliceblue;
+  width: 445px;
+}
+
+.messageList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 25px;
+  overflow-wrap: break-word;
+  margin-bottom: 100px;
+}
+
+.sendBtn {
+  margin: 15px;
+  font-family: 'VT323', monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  border-radius: 10px;
+  height: 40px;
+  width: 180px;
+  font-size: 15px;
+}
+
+.sendBtn:hover {
+  background-color: rgba(255, 173, 173, 255);
+}
+
+.timeStamp {
+  text-align: end;
+}
+
+.heartRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.heartBtn {
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(234, 234, 234, 255);
+}
+
+.heartBtn:hover {
+  background-color: rgba(255, 173, 173, 255);
+}
+
+.heartBtn:active {
+  background: rgba(255, 173, 173, 255);
+}
+
+.heartBtn:focus {
+  background: rgba(255, 173, 173, 255);
+}
diff --git a/code/src/index.js b/code/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
+import './responsive.css'
 import { App } from './App';
 
 const container = document.getElementById('root');

diff --git a/code/src/responsive.css b/code/src/responsive.css
@@ -0,0 +1,52 @@
+@media screen and (max-width: 800px) {
+
+    /*Mobile*/
+    .messageCard {
+        width: 80%;
+        margin-bottom: 25px;
+    }
+
+    .textBox {
+        scale: 80%;
+    }
+
+    .inputField {
+        scale: 90%;
+    }
+
+    .heartBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .heartBtnSection {
+        display: flex;
+        align-items: center;
+    }
+
+    .sendBtn {
+        width: 50%;
+        -webkit-tap-highlight-color: transparent;
+    }
+}
+
+@media screen and (min-width: 801px) and (max-width: 1023px) {
+
+    /*Tablet*/
+    .messageCard {
+        width: 70%;
+        margin-bottom: 25px;
+    }
+
+    .textArea {
+        width: 80%;
+
+    }
+
+    .inputField {
+
+        width: 90%;
+
+    }
+}