Technigo · ssofiejohansson · May 1, 2025 · May 1, 2025 · May 1, 2025 · May 1, 2025
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ dist
 dist-ssr
 *.local
 package-lock.json
+.env
 
 # Editor directories and files
 .vscode/*

diff --git a/README.md b/README.md
@@ -1 +1,3 @@
 # Happy Thoughts
+
+https://smilezone78.netlify.app/
diff --git a/index.html b/index.html
@@ -1,16 +1,23 @@
 <!DOCTYPE html>
-<html lang="en">
+
+
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./heart.png" />
+    <html lang="en">
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Chewy&display=swap"
+    rel="stylesheet"
+  />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Happy Thoughts</title>
   </head>
+
   <body>
     <div id="root"></div>
-    <script
-      type="module"
-      src="./src/main.jsx">
-    </script>
+    <script type="module" src="./src/main.jsx"></script>
   </body>
 </html>
+
diff --git a/package.json b/package.json
@@ -4,14 +4,18 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.13.5",
+    "jwt-decode": "^4.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.6.2",
+    "styled-components": "^6.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

diff --git a/public/.env b/public/.env
@@ -0,0 +1 @@
+VITE_API_URL=https://js-project-happy-thoughts-backend-1.onrender.com
diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/public/heart.png b/public/heart.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,23 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Thoughts } from './Sections/Thoughts';
+import { Home } from './Pages/Home';
+import { Login } from './Pages/Login';
+import { Register } from './Pages/Register';
+import { Logout } from './Pages/Logout';
+import './index.css';
+// import { MyLikes } from './Pages/MyLikes';
+
 export const App = () => {
   return (
-    <h1>Happy Thoughts</h1>
-  )
-}
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<Home />} />
+        <Route path='/thoughts' element={<Thoughts />} />
+        <Route path='/login' element={<Login />} />
+        <Route path='/logout' element={<Logout />} />
+        <Route path='/register' element={<Register />} />
+        {/* <Route path='/thoughts/likes' element={<MyLikes />} /> */}
+      </Routes>
+    </BrowserRouter>
+  );
+};
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Container } from '../Sections/Thoughts';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+import { Bubble } from '../Sections/Components/Bubble';
+import { Button } from '../Sections/Components/Button';
+import { Title } from '../Sections/Post';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`;
+
+export const DotLottieWrapper = styled.div`
+  display: none;
+  @media (min-width: 768px) {
+    display: block;
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 100;
+  }
+`;
+
+export const Home = () => {
+  return (
+    <Container>
+      <Title>✨ Welcome to Happy Thoughts ✨</Title>
+      <p>Trying to make the world a better place, one thought at a time.</p>
+      <ButtonContainer>
+        <Button as={Link} to='/login'>
+          Login
+        </Button>
+        <Button as={Link} to='/register'>
+          Sign up
+        </Button>
+      </ButtonContainer>
+
+      <DotLottieWrapper>
+        <Bubble>
+          Hi there! You have to be logged in to see our happy thoughts. Please{' '}
+          <Link to='/login'>login</Link> or <Link to='/register'>sign up</Link> ❤️
+        </Bubble>
+        <DotLottieReact
+          src='https://lottie.host/5a7cb486-522b-4467-b656-356bea2585ff/MH7Oyw6zWd.lottie'
+          loop
+          autoplay
+          style={{ maxWidth: '200px' }}
+        />
+      </DotLottieWrapper>
+    </Container>
+  );
+};
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
@@ -0,0 +1,88 @@
+import { Title } from '../Sections/Post';
+import { Container } from '../Sections/Thoughts';
+import { useState } from 'react';
+import {
+  FormWrapper,
+  Label,
+  Input,
+  ErrorMsg,
+  SubmitButton,
+} from '../Sections/Components/Form';
+import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8081';
+
+export const Login = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [message, setMessage] = useState('');
+  const [success, setSuccess] = useState(false);
+  const navigate = useNavigate();
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await fetch(`${API_URL}/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await response.json();
+      if (data.success) {
+        setMessage(`Hi, ${username} 🐮 Let's post some happy thoughts!`);
+        setSuccess(true);
+        localStorage.setItem('accessToken', data.accessToken);
+        localStorage.setItem('userId', data.id);
+        navigate('/thoughts', {
+          state: {
+            loginMessage: `Hey ${username} 🐮 Let's post some happy thoughts!`,
+          },
+        });
+      } else {
+        setMessage(data.message || 'Login failed');
+        setSuccess(false);
+      }
+    } catch (err) {
+      setMessage('Something went wrong. Please try again.');
+      setSuccess(false);
+    }
+  };
+
+  return (
+    <>
+      <Container>
+        <Title>Login to Happy Thoughts</Title>
+        <p>
+          Don't have an account? Sign up <Link to='/register'>here</Link>.
+        </p>
+        <FormWrapper onSubmit={handleLogin}>
+          <Label>
+            Username:
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete='username'
+            />
+          </Label>
+          <Label>
+            Password:
+            <Input
+              type='password'
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete='current-password'
+            />
+          </Label>
+          <SubmitButton type='submit'>Log in</SubmitButton>
+          {message && !success && <ErrorMsg>{message}</ErrorMsg>}
+        </FormWrapper>
+        <p>
+          ← Go back to <Link to='/'>home</Link>.
+        </p>
+      </Container>
+    </>
+  );
+};
diff --git a/src/Pages/Logout.jsx b/src/Pages/Logout.jsx
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const Logout = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Remove the correct auth keys
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('userId');
+    navigate('/');
+  }, [navigate]);
+
+  return null;
+};
diff --git a/src/Pages/MyLikes.jsx b/src/Pages/MyLikes.jsx
@@ -0,0 +1,69 @@
+// import React, { useEffect, useState } from 'react';
+// import { Container, SubHeading } from '../Sections/Thoughts';
+// import { View } from '../Sections/View'; // <-- Use the shared View
+// import { Button } from '../Sections/Components/Button';
+// import { Link } from 'react-router-dom';
+// import styled, { keyframes } from 'styled-components';
+// import { ViewContainer, TextField } from '../Sections/View'; // Import the ViewContainer for styling
+
+// // Spinner animation from Thoughts.jsx
+// const Rotate = keyframes`
+//   0% { transform: rotate(0deg); }
+//   100% { transform: rotate(360deg); }
+// `;
+
+// const Hourglass = styled.div`
+//   font-size: 45px;
+//   animation: ${Rotate} 1.5s linear infinite;
+// `;
+
+// const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8081';
+
+// export const MyLikes = () => {
+//   const [likedThoughts, setLikedThoughts] = useState([]);
+
+//   useEffect(() => {
+//     const accessToken = localStorage.getItem('accessToken');
+//     console.log('Access token:', accessToken);
+
+//     if (!accessToken) {
+//       console.error('No access token found');
+//       return;
+//     }
+
+//     fetch(`${API_URL}/thoughts/likes`, {
+//       method: 'GET',
+//       headers: {
+//         'Content-Type': 'application/json',
+//         Authorization: `Bearer ${accessToken}`, // ✅ must be this format
+//       },
+//     })
+//       .then((res) => {
+//         if (!res.ok) {
+//           throw new Error('Network response was not ok');
+//         }
+//         return res.json();
+//       })
+//       .then((data) => {
+//         console.log('Liked thoughts:', data);
+//         setLikedThoughts(data);
+//       })
+//       .catch((err) => {
+//         console.error('Fetch error:', err);
+//       });
+//   }, []);
+
+//   return (
+//     <Container>
+//       <h2>My Liked Thoughts</h2>
+//       <Link to='/thoughts'>
+//         <Button style={{ marginBottom: '20px' }}>Go back</Button>
+//       </Link>
+//       {likedThoughts.map((thought) => (
+//         <ViewContainer key={thought._id}>
+//           <TextField>{thought.message}</TextField>
+//         </ViewContainer>
+//       ))}
+//     </Container>
+//   );
+// };
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		# Happy Thoughts

		https://smilezone78.netlify.app/
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_API_URL=https://js-project-happy-thoughts-backend-1.onrender.com