diff --git a/code/client/src/components/CreateGoal.js b/code/client/src/components/CreateGoal.js index 08fa80c94..e574d2579 100644 --- a/code/client/src/components/CreateGoal.js +++ b/code/client/src/components/CreateGoal.js @@ -1,8 +1,7 @@ +import React, { useState, useEffect } from "react"; // Added useEffect import import apiClient from "../services/apiClient.js"; -import React, { useState } from "react"; import { validateGoalForm } from '../utils/validateGoalForm.js'; import { authenticated } from "../utils/authenticate.js"; - import { Box, Typography, @@ -24,7 +23,16 @@ import { } from "./style/styles.js"; function CreateGoal() { - authenticated(); + // Profile Data State + const [profileData, setProfileData] = useState({ + userId: "", + email: "", + name: "", + gender: "", + dob: { year: 1900, month: 1, day: 1 }, + height: { feet: "", inches: "" }, + }); + const [goalFormData, setGoalFormData] = useState({ type: "", targetValue: 0, @@ -32,6 +40,26 @@ function CreateGoal() { const [successMessage, setSuccessMessage] = useState(''); const [errorMessage, setErrorMessage] = useState(''); + const [error, setError] = useState(null); // State for managing error when fetching profile + + // useEffect to fetch profile data + useEffect(() => { + const token = authenticated(); + + if (token) { + apiClient + .get("/api/users/manage-profile", { + headers: { Authorization: `Bearer ${token}` }, + }) // Fetch user profile data from the backend + .then((res) => { + setProfileData(res.data); // Set the fetched profile data + }) + .catch((err) => { + setError("Error fetching profile data. Try refreshing."); + console.log(err); + }); + } + }, []); // Empty dependency array to run only once after the component mounts // Handle input changes const handleChange = (e) => { @@ -42,77 +70,76 @@ function CreateGoal() { })); }; -// Function to handle the form submission event -const handleSubmit = (event) => { - event.preventDefault(); // Prevent default form submission behavior (e.g., page reload) - - // Clear any existing messages before processing the form - clearMessages(); - - // Validate the form and, if valid, proceed with goal creation - if (validateAndSetMessages(goalFormData)) { - createGoal(goalFormData); - } -}; - -// Function to clear any success or error messages -const clearMessages = () => { - setSuccessMessage(''); - setErrorMessage(''); -}; - -// Function to validate the goal form and handle validation messages -const validateAndSetMessages = (formData) => { - const validationResult = validateGoalForm(formData); - - if (!validationResult.isValid) { - setErrorMessage('Error: Please review your inputs and try again'); - return false; // Prevent form submission if validation fails - } - - return true; -}; - -// Function to create a new goal by making a POST request -const createGoal = async (formData) => { - try { - console.log("Creating new goal with data:", formData); - // Sends a POST request to the backend with the form data - await apiClient.post("/api/goals/create-goal", formData); - handleGoalSuccess(); // Handle the success case - } catch (error) { - handleGoalError(error); // Handle the error case - } -}; - -// Function to handle a successful goal creation -const handleGoalSuccess = () => { - console.log("Goal created successfully!"); - setSuccessMessage('New goal successful!'); -}; - -// Function to handle errors during goal creation -const handleGoalError = (error) => { - console.error("Error creating goal:", error); - setErrorMessage('Failed to create a new goal. Please try again.'); -}; + // Function to handle the form submission event + const handleSubmit = (event) => { + event.preventDefault(); // Prevent default form submission behavior + clearMessages(); + if (validateAndSetMessages(goalFormData)) { + createGoal(goalFormData); + } + }; + + // Clear messages + const clearMessages = () => { + setSuccessMessage(''); + setErrorMessage(''); + }; + + // Validate form + const validateAndSetMessages = (formData) => { + const validationResult = validateGoalForm(formData); + if (!validationResult.isValid) { + setErrorMessage('Error: Please review your inputs and try again'); + return false; + } + return true; + }; + + // Create goal + const createGoal = async (formData) => { + try { + console.log("Creating new goal with data:", formData); + + const token = authenticated(); + console.log("Token:", token); + + await apiClient.post("/api/goals/create-goal", formData, { + headers: { Authorization: `Bearer ${token}` }, // Pass token + }); + + handleGoalSuccess(); + } catch (error) { + handleGoalError(error); + } + }; + + // Handle success + const handleGoalSuccess = () => { + console.log("Goal created successfully!"); + setSuccessMessage('New goal successful!'); + }; + + // Handle error + const handleGoalError = (error) => { + console.error("Error creating goal:", error); + setErrorMessage('Failed to create a new goal. Please try again.'); + }; return ( Set up your goal here: - {/* Set up your goal here: */}
- {/* Select a goal type */} + {/* Select a goal type */} Select a goal type