Week 11: Project Happy thoughts

package.json

@@ -10,17 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^5.7.2",
     "vite": "^4.4.5"
   }
 }

src/App.css

@@ -0,0 +1,7 @@
+.app-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+

src/App.jsx

@@ -1,3 +1,60 @@
-export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+import React, { useState, useEffect } from "react";
+import { ThoughtForm } from "./components/ThoughtForm";
+import { ThoughtList } from "./components/ThoughtList";
+import { LoadingSpinner } from "./components/LoadingSpinner";
+import './App.css';
+
+const App = () => {
+  const [thoughts, setThoughts] = useState([]);
+  const [likedThoughts, setLikedThoughts] = useState(() => {
+    const savedLikes = localStorage.getItem("likedThoughts");
+    return savedLikes ? JSON.parse(savedLikes) : [];
+  });
+
+  useEffect(() => {
+    const fetchThoughts = async () => {
+      try {
+        const response = await fetch("https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts");
+        const data = await response.json();
+        setThoughts(data);
+      } catch (error) {
+        console.error("Error fetching thoughts:", error);
+      }
+    };
+    fetchThoughts();
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("likedThoughts", JSON.stringify(likedThoughts));
+  }, [likedThoughts]);
+
+  const handleLike = (thoughtId) => {
+    if (!likedThoughts.includes(thoughtId)) {
+      setLikedThoughts((prevLikes) => [...prevLikes, thoughtId]);
+      setThoughts((prevThoughts) =>
+        prevThoughts.map((thought) =>
+          thought._id === thoughtId
+            ? { ...thought, hearts: thought.hearts + 1 }
+            : thought
+        )
+      );
+    }
+  };
+
+  return (
+    <div className="app-container">
+      <ThoughtForm setThoughts={setThoughts} />
+      {thoughts.length === 0 ? (
+        <LoadingSpinner />
+      ) : (
+        <ThoughtList
+          thoughts={thoughts}
+          onLike={handleLike}
+          likedThoughts={likedThoughts}
+        />
+      )}
+    </div>
+  );
 };
+
+export default App;

src/components/LoadingSpinner.css

@@ -0,0 +1,15 @@
+.loading-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    font-family: 'Courier New', monospace;
+    color: #000000; 
+    background-color: #ffffff; 
+    padding: 20px;
+    border-radius: 12px;
+}
+
+.loading-spinner p {
+    margin: 0;
+}

src/components/LoadingSpinner.tsx

@@ -0,0 +1,8 @@
+import React from 'react'; 
+import './LoadingSpinner.css';
+
+export const LoadingSpinner: React.FC = () => (
+  <div className="loading-spinner">
+    <p>Loading thoughts...</p>
+  </div>
+);

src/components/ThoughtForm.css

@@ -0,0 +1,58 @@
+.thought-form {
+    background-color: #E0E0E0;
+    border: 1px solid #000000;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 8px 8px 0 #000000;
+    font-family: 'Courier New', monospace;
+    max-width: 400px; 
+    width: 100%;
+    margin: 20px auto;
+}  
+
+.thought-form h2 {
+    font-size: 1.5rem;
+    margin: 0 0 10px 0;
+    font-weight: bold;
+    color: #000000;
+}
+
+.thought-form textarea {
+    width: calc(100% - 22px); 
+    height: 100px;
+    padding: 10px;
+    border: 1px solid #000000;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 1rem;
+    color: #000000;
+    background-color: #FFFFFF;
+    resize: none;
+    margin-bottom: 10px;
+    box-sizing: border-box; 
+}
+
+.character-count {
+    font-size: 0.9rem;
+    color: #000000;
+    text-align: right;
+    margin-bottom: 15px;
+}
+
+.thought-form button {
+    width: 100%;
+    padding: 10px;
+    background-color: #000000;
+    color: #FFFFFF;
+    border: none;
+    font-size: 1rem;
+    font-family: 'Courier New', monospace;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: background-color 0.3s;
+}
+
+.thought-form button:hover {
+    background-color: #333333;
+}
+

src/components/ThoughtForm.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import './ThoughtForm.css';
+
+interface ThoughtFormProps {
+  setThoughts: React.Dispatch<React.SetStateAction<Thought[]>>;
+}
+
+interface Thought {
+  _id: string;
+  message: string;
+  hearts: number;
+  createdAt: string;
+}
+
+export const ThoughtForm: React.FC<ThoughtFormProps> = ({ setThoughts }) => {
+  const [thought, setThought] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [isPosting, setIsPosting] = useState<boolean>(false);
+
+  const minLength = 5;
+  const maxLength = 140;
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (thought.length < minLength) {
+      setError(`Thought must be at least ${minLength} characters.`);
+      return;
+    }
+
+    setIsPosting(true);
+    try {
+      const response = await fetch(
+        "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: thought }),
+        }
+      );
+      if (!response.ok) throw new Error("Failed to post thought.");
+
+      const newThought: Thought = await response.json();
+      setThoughts((prevThoughts) => [newThought, ...prevThoughts]);
+      setThought("");
+      setError("");
+    } catch (err) {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setIsPosting(false);
+    }
+  };
+
+  return (
+    <div className="thought-form">
+      <h2>Share a happy thought</h2>
+      <form onSubmit={handleSubmit}>
+        <textarea
+          value={thought}
+          maxLength={maxLength}
+          onChange={(e) => {
+            setThought(e.target.value);
+            if (error && e.target.value.length >= minLength) {
+              setError("");
+            }
+          }}
+          placeholder="What is making you happy right now?"
+        />
+        <div className="character-count">{thought.length} of {maxLength}</div>
+        {error && <p className="error-message">{error}</p>}
+        <button type="submit" disabled={isPosting}>
+          {isPosting ? "Posting..." : "Post happy thought"}
+        </button>
+      </form>
+    </div>
+  );
+};

src/components/ThoughtItem.css

@@ -0,0 +1,53 @@
+.thought-item {
+    background-color: #FFFFFF;
+    border: 1px solid #000000;
+    border-radius: 8px;
+    padding: 10px 15px; 
+    font-family: 'Courier New', monospace;
+    font-size: 1rem;
+    color: #000000;
+    box-shadow: 4px 4px 0 #000000;
+    width: 100%; 
+    box-sizing: border-box; 
+}
+
+.thought-item p {
+    margin: 0 0 10px 0; 
+}
+
+.thought-item .bottom-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.9rem;
+    color: #555555;
+}
+
+.thought-item .heart-container {
+    display: flex;
+    align-items: center; 
+    gap: 5px; 
+}
+
+.thought-item .heart-container button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}
+
+.thought-item .heart-container button.liked {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.thought-item .heart-container img {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle; 
+}
+
+.thought-item .heart-container button.liked img {
+    filter: grayscale(100%);
+}
+

src/components/ThoughtItem.tsx

@@ -0,0 +1,51 @@
+import React from 'react'; 
+import './ThoughtItem.css';
+import likeIcon from '../assets/heart.png';
+import moment from 'moment';
+
+interface Thought {
+  _id: string;
+  message: string;
+  hearts: number;
+  createdAt: string;
+}
+
+interface ThoughtItemProps {
+  thought: Thought;
+  isLiked: boolean;
+  onLike: (id: string) => void;
+}
+
+export const ThoughtItem: React.FC<ThoughtItemProps> = ({ thought, isLiked, onLike }) => {
+  const handleLike = async () => {
+    if (isLiked) return;
+
+    try {
+      await fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${thought._id}/like`, {
+        method: 'POST',
+      });
+      onLike(thought._id);
+    } catch (error) {
+      console.error('Failed to like thought:', error);
+    }
+  };
+
+  return (
+    <div className="thought-item">
+      <p>{thought.message}</p>
+      <div className="bottom-row">
+        <div className="heart-container">
+          <button
+            onClick={handleLike}
+            disabled={isLiked}
+            className={isLiked ? 'liked' : ''}
+          >
+            <img src={likeIcon} alt="like" />
+          </button>
+          <span>x {thought.hearts}</span>
+        </div>
+        <span className="timestamp">{moment(thought.createdAt).fromNow()}</span>
+      </div>
+    </div>
+  );
+};

src/components/ThoughtList.css

@@ -0,0 +1,10 @@
+.thought-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-width: 350px;
+    width: 100%;
+    font-family: Arial, sans-serif;
+    margin: 20px auto 0;
+    padding: 0; 
+}