Merge pull request #116 from JosueBrenes/fix/general-fixes

Fix/general fixes

frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { LinkButton } from "@/components/ui/LinkButton";
 import ProgressBar from "@/components/ui/ProgressBar";
 import Image, { StaticImageData } from "next/image";
 import { useState } from "react";
@@ -10,13 +9,31 @@ interface FundDonateProps {
 }
 
 const FundDonate = ({ icon }: FundDonateProps) => {
-  const [amount, setAmount] = useState<number>();
+  const [amount, setAmount] = useState<number | "">("");
+  const [error, setError] = useState<string>("");
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = Number(e.target.value);
+    const value = e.target.value === "" ? "" : Number(e.target.value);
     setAmount(value);
+    setError("");
   };
 
+  const handleDonateClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (amount === "") {
+      setError("This field is required.");
+    } else if (typeof amount === "number" && amount < 0) {
+      setError("The amount cannot be negative.");
+    } else {
+      console.log("Donating:", amount);
+      setError("");
+      setTimeout(() => {
+        window.location.href = "/"; 
+      }, 0);
+    }
+  };
+
+
   return (
     <div className="flex flex-col">
       <ProgressBar progress={34} />
@@ -26,14 +43,26 @@ const FundDonate = ({ icon }: FundDonateProps) => {
       </div>
       <div className="flex justify-center">
         <input
-          className="border border-gray-400 p-2 my-5 rounded w-1/4"
+          className={`border p-2 my-5 rounded w-1/4 ${
+            error ? "border-red-500" : "border-gray-400"
+          }`}
           type="number"
           placeholder="Enter the amount of STRK"
           onChange={handleAmountChange}
           value={amount}
+          min={0}
+          required
         />
       </div>
-      <LinkButton label="Donate" href="/" />
+      {error && (
+        <p className="text-red-500 text-center mb-4">{error}</p> 
+      )}
+      <button
+        onClick={handleDonateClick}
+        className="self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md text-xs md:text-sm shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400"
+      >
+        Donate
+      </button>
     </div>
   );
 };

frontend/gostarkme-web/components/modules/newfunding/DescriptionStep.tsx

@@ -9,15 +9,28 @@ const DescriptionStep: React.FC<DescriptionStepProps> = ({
   fundingDescription,
   setFundingDescription,
 }) => (
-  <div className="w-11/12 md:w-3/3 lg:w-1/1 font-sans text-2xl font-normal leading-normal text-left">
+  <div className="relative w-11/12 md:w-3/3 lg:w-1/1 font-sans text-2xl font-normal leading-normal text-left">
     <strong>Note:</strong> You can always edit your funding description later ;)
+
     <textarea
       placeholder="Funding description"
       value={fundingDescription}
       onChange={(e) => setFundingDescription(e.target.value)}
       className="mt-3 p-4 border border-black rounded w-full h-60 resize-none font-sans font-light leading-snug text-left placeholder:text-base placeholder:font-light"
       required
     />
+
+    {/* Back Arrow */}
+    <a
+      href=""
+      className="absolute right-[-270px] top-[-205px]" 
+    >
+      <img 
+        src="/icons/arrow-right.png" 
+        alt="Back Arrow"
+        className="h-8 w-8"
+      />
+    </a>
   </div>
 );
 

frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx

@@ -1,34 +1,79 @@
+import React from 'react';
+
 interface FundingStepProps {
   fundingName: string;
   setFundingName: (name: string) => void;
   name: string;
   setName: (name: string) => void;
+  errors: { fundingName: string; name: string }; // Expecting errors as props
+  setErrors: React.Dispatch<React.SetStateAction<{ fundingName: string; name: string }>>; // Specify the type for setErrors
 }
 
 const FundingStep: React.FC<FundingStepProps> = ({
   fundingName,
   setFundingName,
   name,
   setName,
-}) => (
-  <div className="text-center w-11/12 md:w-3/3 lg:w-1/1">
-    <input
-      type="text"
-      placeholder="Funding name"
-      value={fundingName}
-      onChange={(e) => setFundingName(e.target.value)}
-      className="mt-2 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
-      required
-    />
-    <input
-      type="text"
-      placeholder="Set your goal in STRKs"
-      value={name}
-      onChange={(e) => setName(e.target.value)}
-      className="mt-4 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
-      required
-    />
-  </div>
-);
+  errors,
+  setErrors,
+}) => {
+  const handleGoal = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+
+    // Check if the input is empty or a valid non-negative number
+    if (newValue === '' || (Number(newValue) >= 0 && !isNaN(Number(newValue)))) {
+      setName(newValue);
+      setErrors((prev) => ({ ...prev, name: '' })); 
+    } else {
+      setErrors((prev) => ({ ...prev, name: 'The goal must be a non-negative number.' }));
+    }
+  };
+
+  const handleFundingNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setFundingName(newValue);
+
+    // Validate funding name to allow only alphabetic characters
+    const isValidName = /^[A-Za-z\s]*$/.test(newValue); // Allow letters and spaces only
+
+    if (!newValue) {
+      setErrors((prev) => ({ ...prev, fundingName: 'Funding name is required.' }));
+    } else if (!isValidName) {
+      setErrors((prev) => ({ ...prev, fundingName: 'Funding name cannot contain numbers or symbols.' }));
+    } else {
+      setErrors((prev) => ({ ...prev, fundingName: '' })); 
+    }
+  };
+
+  return (
+    <div className="text-center w-11/12 md:w-3/3 lg:w-1/1">
+      <input
+        type="text"
+        placeholder="Funding name"
+        value={fundingName}
+        onChange={handleFundingNameChange}
+        className={`mt-2 p-2 pl-4 border rounded w-full placeholder:text-base ${errors.fundingName ? 'border-red-500' : 'border-black'}`}
+        required
+      />
+      <input
+        type="number"
+        placeholder="Set your goal in STRKs"
+        value={name}
+        onChange={handleGoal}
+        className={`mt-4 p-2 pl-4 border rounded w-full placeholder:text-base ${errors.name ? 'border-red-500' : 'border-black'}`}
+        required
+        min={0} 
+      />
+
+      {/* Error Messages */}
+      {errors.fundingName && (
+        <p className="mt-5 text-red-500 text-center mb-4">{errors.fundingName}</p>
+      )}
+      {errors.name && (
+        <p className="mt-5 text-red-500 text-center mb-4">{errors.name}</p>
+      )}
+    </div>
+  );
+};
 
 export default FundingStep;

frontend/gostarkme-web/components/modules/newfunding/Stages.tsx

@@ -8,12 +8,29 @@ const Stages = () => {
   const [fundingName, setFundingName] = useState("");
   const [name, setName] = useState("");
   const [fundingDescription, setFundingDescription] = useState("");
+  const [errors, setErrors] = useState({ fundingName: "", name: "" });
 
   const handleNextStep = () => {
-    if (currentStep === 0 && (!fundingName || !name)) {
-      return;
+    // Reset errors
+    setErrors({ fundingName: "", name: "" });
+
+    // Validate fields
+    let hasErrors = false;
+    if (currentStep === 0) {
+      if (!fundingName) {
+        setErrors((prev) => ({ ...prev, fundingName: "Funding name is required." }));
+        hasErrors = true;
+      }
+      if (!name) {
+        setErrors((prev) => ({ ...prev, name: "The goal is required." }));
+        hasErrors = true;
+      }
+    }
+
+    // If there are no errors, proceed to the next step
+    if (!hasErrors) {
+      setCurrentStep((prev) => (prev === 1 ? 0 : prev + 1));
     }
-    setCurrentStep((prev) => (prev === 1 ? 0 : prev + 1));
   };
 
   const handleSubmit = () => {
@@ -35,6 +52,8 @@ const Stages = () => {
           setFundingName={setFundingName}
           name={name}
           setName={setName}
+          errors={errors} // Pass errors down
+          setErrors={setErrors} // Pass setErrors down
         />
       ) : (
         <DescriptionStep

frontend/gostarkme-web/components/ui/Footer.tsx

@@ -47,7 +47,7 @@ const Footer = (): React.JSX.Element => {
               />
             </svg>
           </a>
-          <a className="mx-1" href="https://discord.gg/26sQ6dbY">
+          <a className="mx-1" href="https://discord.gg/sEpnC6JB2U">
             <svg
               height="35"
               viewBox="0 0 24 24"