Merge pull request #15 from NetLogo/feature-logging-download-data

Added Additional Fields to Download Form

Author: geperez8

src/components/download/donation-section.tsx

@@ -13,16 +13,23 @@ export interface DonationData {
 }
 
 interface DonationSectionProps {
-  donationData: DonationData;
+  donationArray: DonationData[];
 }
 
-const DonationSection = ({ donationData }: DonationSectionProps) => {
+const DonationSection = ({ donationArray }: DonationSectionProps) => {
+  const [donationData, setDonationData] = useState<DonationData | null>(null);
+
+  useEffect(() => {
+    const randomIndex = Math.floor(Math.random() * donationArray.length);
+    setDonationData(donationArray[randomIndex]);
+  }, []);
+
   return (
     <ContentImageLayout
-      imageId={donationData.image.id}>
-      <h1 className="donate-title">{donationData.title}</h1>
+      imageId={donationData?.image.id}>
+      <h1 className="donate-title">{donationData?.title}</h1>
         <ReactMarkdown className="donate-text">
-          {donationData.text}
+          {donationData?.text}
         </ReactMarkdown>
         <div className="donate-button-container">
           <Button
@@ -36,7 +43,7 @@ const DonationSection = ({ donationData }: DonationSectionProps) => {
               width: "203px",
               borderRadius: "17px",
             }}
-            onClick={() => handleLinkClick(donationData.url)}
+            onClick={() => donationData ? handleLinkClick(donationData.url) : null}
           />
           <p>
             Donations are processed through Northwestern University, but 100%

src/components/download/download-form.tsx

@@ -17,6 +17,9 @@ export interface FormData {
   email: string;
   subscribe: boolean;
   comments: string;
+  ip: string;
+  country: string;
+  time_stamp: string;
 }
 
 interface DownloadFormProps {
@@ -37,6 +40,20 @@ const DetectOS = () => {
   return os;
 }
 
+const getFormattedTimestamp = () => {
+  const now = new Date();
+  const pad = (n:number) => String(n).padStart(2, '0');
+
+  const year = now.getFullYear();
+  const month = pad(now.getMonth() + 1); // Months are 0-indexed
+  const day = pad(now.getDate());
+  const hour = pad(now.getHours());
+  const minute = pad(now.getMinutes());
+  const second = pad(now.getSeconds());
+
+  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+}
+
 const DownloadForm = ({ versions, downloadedSetter }: DownloadFormProps) => {
   // State for all form fields with typed interface
   const [formData, setFormData] = useState<FormData>({
@@ -47,6 +64,9 @@ const DownloadForm = ({ versions, downloadedSetter }: DownloadFormProps) => {
     email: "",
     subscribe: false,
     comments: "",
+    ip: "",
+    country: "",
+    time_stamp: "",
   });
 
   const netLogoVersions = useMemo(() => {
@@ -85,11 +105,20 @@ const DownloadForm = ({ versions, downloadedSetter }: DownloadFormProps) => {
     });
   };
 
-  const handleFormSubmission = (e: FormEvent<HTMLFormElement>) => {
+  const handleFormSubmission = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     // Send form data to backend
     const api = new NetLogoAPI();
+
+    await fetch('https://ipapi.co/json/')
+    .then(res => res.json())
+    .then(data => {
+      formData.ip = data.ip;
+      formData.country = data.country_name;
+      formData.time_stamp = getFormattedTimestamp();
+    });
+
     const result = api.sendDownloadForm(formData);
 
     //Go to download Link
@@ -101,6 +130,9 @@ const DownloadForm = ({ versions, downloadedSetter }: DownloadFormProps) => {
       (link) => link.platform === formData.platform
     )?.download_url;
 
+    
+
+
     if (!downloadUrl) {
       alert("Download link not found");
       return;

src/pages/donate.astro

@@ -5,13 +5,10 @@ import DonationSection from "../components/download/donation-section.tsx";
 
 const api = new NetLogoApi();
 
-
 const donationData = await api.getDonationData()
-const randomIndex = Math.floor(Math.random() * donationData.length);
-
 
 ---
 
 <Layout show_footer_buttons={false}>
-    <DonationSection donationData = {donationData[randomIndex]} client:load/>
+    <DonationSection donationArray = {donationData} client:load/>
 </Layout>