Merge pull request #12 from 4GeeksAcademy/notes

correccion de develop se elimina parte del merge de AA, se corrige home

Todo queda funcionando con normalidad

Author: LMezza

src/api/routes.py

@@ -2,7 +2,7 @@
 This module takes care of starting the API Server, Loading the DB and Adding the endpoints
 """
 from flask import Flask, request, jsonify, url_for, Blueprint
-from api.models import db, User
+from api.models import db, User, Notes
 from api.utils import generate_sitemap, APIException
 from flask_cors import CORS
 from sqlalchemy.exc import NoResultFound
@@ -76,6 +76,7 @@ def login():
         # establecer condiciones si el email que me envian desde el front es distinto envia error si no envia el token
         if email != user.email or password != user.password:
             return jsonify({"msg": "Bad password or email"}), 401
+            
 
         access_token = create_access_token(identity=email)
         return jsonify({"access_token":access_token, "user": user.serialize()})
@@ -104,4 +105,30 @@ def protected():
 #con la busqueda del señor anterior en la tabla favoritos fijate cuantos tiene y traemelos 
 # user = db.session.execute(db.select(User).filter_by(email=email)).scalar_one()
     # la entidad verificada se guarda en el espacio de memoria
-    return jsonify(logged_in_as=current_user), 200
+    return jsonify(logged_in_as=current_user), 200
+
+
+
+
+
+
+
+
+
+
+
+
+
+@api.route("/notes", methods=["GET"])
+@jwt_required()
+def call_notes():
+    # Access the identity of the current user with get_jwt_identity
+    current_user = get_jwt_identity()
+    user = db.session.execute(db.select(User).filter_by(email=current_user)).scalar_one()
+#aplicar logica para mostar profile 
+    notes = db.session.execute(db.select(Notes).filter_by(user_id=user.id)).scalars()
+    print(list(notes))
+
+
+#cambiar el mensaje de return que no muestre datos personales 
+    return jsonify(result = "your notes"), 200

src/front/js/component/footer.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 
 export const Footer = () => {
 	return (
@@ -7,12 +7,12 @@ export const Footer = () => {
 			{/* Social Icons */}
 			<div className="flex items-center space-x-3">
 			  <a href="#" className="opacity-75 hover:opacity-100">
-			  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
+			  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-instagram" viewBox="0 0 16 16">
                  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
                  </svg>
  			  </a>
 			  <a href="#" className="opacity-75 hover:opacity-100">
-			  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
+			  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-facebook" viewBox="0 0 16 16">
                  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
                  </svg>
  			  </a>

src/front/js/index.js

@@ -9,4 +9,4 @@ import "../styles/index.css";
 import Layout from "./layout";
 
 //render your react application
-ReactDOM.render(<Layout />, document.querySelector("#app"));
+ReactDOM.render(<Layout />, document.querySelector("#app"));

src/front/js/layout.js

@@ -10,6 +10,7 @@ import { Demo } from "./pages/demo";
 import { Single } from "./pages/single";
 import injectContext from "./store/appContext";
 import { Profile }   from "./pages/profile"
+import { Notes }   from "./pages/notes"
 
 import { Navbar } from "./component/navbar";
 import { Footer } from "./component/footer";
@@ -31,6 +32,7 @@ const Layout = () => {
                         <Route element={<Home />} path="/" />
                         <Route element={<Loginview />} path="/login" />
                         <Route element={<ForgoPassword />} path="/resetpassword" />
+                        <Route element={<Notes />} path="/notes" />
                         <Route element={<Demo />} path="/demo" />
                         <Route element={<Single />} path="/single/:theid" />
                         <Route element={<h1>Not found!</h1>} />

src/front/js/pages/home.js

@@ -1,104 +1,26 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from "react";
 import { Context } from "../store/appContext";
-import { Link } from "react-router-dom";
-import { Eye, EyeOff } from 'lucide-react';
-
+import rigoImageUrl from "../../img/rigo-baby.jpg";
+import "../../styles/home.css";
 
 export const Home = () => {
 	const { store, actions } = useContext(Context);
-	const [showPassword, setShowPassword] = useState(false);
-	const [formData, setFormData] = useState({
-	  name: '',
-	  email: '',
-	  password: '',
-	  confirmPassword: ''
-	});
-	const handleInputChange = (e) => {
-		const { name, value } = e.target;
-		setFormData(prevState => ({
-		  ...prevState,
-		  [name]: value
-		}));
-	  };
-	  const handleSubmit = (e) => {
-		e.preventDefault();
-		// Add signup logic here
-		console.log('Signup data:', formData);
-	  };
+
 	return (
-		<div className="min-h-screen flex items-center justify-center bg-white p-4">
-		<div className="w-full max-w-4xl bg-white shadow-md rounded-lg overflow-hidden flex">
-		  {/* Left Side - Description */}
-		  <div className="w-1/2 bg-[#E6EDF3] p-8 flex flex-col justify-center">
-			<h2 className="text-2xl font-bold text-[#24292F] mb-4">Become a member</h2>
-			<p className="text-[#57606A]">
-			  Onmino helps you organize your ideas, tasks, and projects simply and efficiently. Start today!
+		<div className="text-center mt-5">
+			<h1>Hello Rigo!!</h1>
+			<p>
+				<img src={rigoImageUrl} />
+			</p>
+			<div className="alert alert-info">
+				{store.message || "Loading message from the backend (make sure your python backend is running)..."}
+			</div>
+			<p>
+				This boilerplate comes with lots of documentation:{" "}
+				<a href="https://start.4geeksacademy.com/starters/react-flask">
+					Read documentation
+				</a>
 			</p>
-		  </div>
-  
-		  {/* Right Side - Signup Form */}
-		  <div className="w-1/2 p-8 bg-white">
-			<form onSubmit={handleSubmit}>
-			  <div className="mb-4">
-				<input 
-				  type="text"
-				  name="name"
-				  placeholder="Name"
-				  value={formData.name}
-				  onChange={handleInputChange}
-				  className="w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
-				  required
-				/>
-			  </div>
-			  <div className="mb-4">
-				<input 
-				  type="email"
-				  name="email"
-				  placeholder="Email"
-				  value={formData.email}
-				  onChange={handleInputChange}
-				  className="w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
-				  required
-				/>
-			  </div>
-			  <div className="mb-4 relative">
-				<input 
-				  type={showPassword ? "text" : "password"}
-				  name="password"
-				  placeholder="Password"
-				  value={formData.password}
-				  onChange={handleInputChange}
-				  className="w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
-				  required
-				/>
-				<button
-				  type="button"
-				  onClick={() => setShowPassword(!showPassword)}
-				  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#57606A]"
-				>
-				  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-				</button>
-			  </div>
-			  <div className="mb-4 relative">
-				<input 
-				  type={showPassword ? "text" : "password"}
-				  name="confirmPassword"
-				  placeholder="Confirm Password"
-				  value={formData.confirmPassword}
-				  onChange={handleInputChange}
-				  className="w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
-				  required
-				/>
-			  </div>
-			  <button 
-				type="submit" 
-				className="w-full bg-[#1F6FEB] text-white py-2 rounded-md hover:bg-[#1160D3] transition duration-300"
-			  >
-				Register
-			  </button>
-			</form>
-		  </div>
 		</div>
-	  </div>
 	);
-  };
+};

src/front/js/pages/loginview.js

@@ -2,13 +2,14 @@ import React, { useContext, useState } from "react";
 import { Context } from "../store/appContext";
 import "../../styles/home.css";
 import { Link, useNavigate } from "react-router-dom";
-// import logo from "../store/logo-sin-fondo.jpg"
+import logo from "../store/logo-sin-fondo.jpg"
 
 export const Loginview = () => {
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const { store, actions } = useContext(Context);
   let navigate = useNavigate();
+
   async function handleSubmit(e) {
     e.preventDefault()
     //console.log(email, password);

src/front/js/pages/notes.js

@@ -0,0 +1,46 @@
+import React, { useContext } from "react";
+import { Context } from "../store/appContext";
+import rigoImageUrl from "../../img/rigo-baby.jpg";
+import "../../styles/home.css";
+import { Link } from "react-router-dom";
+
+
+
+export const Notes = () => {
+    const { store, actions } = useContext(Context);
+
+    return (
+        <div className="text-center mt-5">
+            <h1>Notes</h1>
+
+
+
+
+
+
+
+        </div>
+    );
+};
+
+
+
+
+
+
+
+
+
+
+// return (
+//     <div className="container mt-5 w-50">
+//         <div className="d-flex justify-content-center fs-2 mb-2"><input className="w-75 border-2 rounded-pill text-center" type="text" placeholder="What do you need to do?" onKeyDown={agregarLista} value={tarea} onChange={agregarTarea} /></div>
+//         <ul className="my-2 p-0 d-flex justify-content-between">
+//             {/* Crear con map lista */}
+//             <div className="list-group">
+//                 {listaTareas.length > 0 ? listaTareas.map((item) => <li className="list-group-item list-group-item-dark" key={item.id}>{item.label}<button type="button" className="btn btn-light position end-0" onClick={() => eliminarTarea(item.id)}>x</button></li>) : null}
+//             </div>
+//         </ul>
+//         {listaTareas.length + ` Task left`}
+//     </div>
+// );

src/front/js/pages/profile.js

@@ -3,6 +3,7 @@ import { Context } from "../store/appContext";
 import "../../styles/home.css";
 import { Link } from "react-router-dom";
 import logo from "../store/logo-sin-fondo.jpg"
+
 export const Profile = () => {
 
     return(

src/front/js/store/flux.js

@@ -24,44 +24,52 @@ const getState = ({ getStore, getActions, setStore }) => {
 			},
 
 
-					 login: async (email, password) => {
-						//console.log(email, password);
-						const myHeaders = new Headers();
-						myHeaders.append("Content-Type", "application/json");
-						const raw = JSON.stringify({
-							"email": email,
-							"password": password
-						});
-						const requestOptions = {
-							method: "POST",
-							headers: myHeaders,
-							body: raw
-						};
-						try {
-							const response = await fetch("https://glorious-garbanzo-x5vw5j6w55gxhpvqr-3001.app.github.dev/api/login", requestOptions);
-							const result = await response.json();
-							console.log(response);
-							console.log(result)
-							if (response.status !== 200){
-								return false
-							}
-							localStorage.setItem("token", result.access_token)
-							return true
-						} catch (error) {
-							console.error(error);
-						};
-				
+			login: async (email, password) => {
+
+				//console.log(email, password);
+				const myHeaders = new Headers();
+				myHeaders.append("Content-Type", "application/json");
+
+				const raw = JSON.stringify({
+					"email": email,
+					"password": password
+				});
+
+				const requestOptions = {
+					method: "POST",
+					headers: myHeaders,
+					body: raw
+				};
+
+				try {
+					const response = await fetch("https://symmetrical-journey-69r6wvr76v5x25g4-3001.app.github.dev/api/login", requestOptions);
+					const result = await response.json();
+					console.log(response);
+					
+					console.log(result)
+
+					if (response.status !== 200){
+						return false
+					}
+					localStorage.setItem("token", result.access_token)
+					return true
+				} catch (error) {
+					console.error(error);
+				};
+
+
+
 			},
 
 			getMessage: async () => {
-				try{
+				try {
 					// fetching data from the backend
 					const resp = await fetch(process.env.BACKEND_URL + "/api/hello")
 					const data = await resp.json()
 					setStore({ message: data.message })
 					// don't forget to return something, that is how the async resolves
 					return data;
-				}catch(error){
+				} catch (error) {
 					console.log("Error loading message from backend", error)
 				}
 			},