Refactor CouponsContainer and UserProfileContainer components

DegenHack24 · Feb 18, 2024 · 8bc5014 · 8bc5014
1 parent 9efa473
commit 8bc5014
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 64 deletions.
diff --git a/src/components/CouponsContainer.tsx b/src/components/CouponsContainer.tsx
@@ -34,14 +34,12 @@ const CouponsContainer: React.FC<ContainerProps> = ({
 }) => {
   const [coupons, setCoupons] = useState<Coupon[]>([]);
   const [error, setError] = useState<string | null>(null);
-  console.log(coupons, "coupons");
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const data = await getCoupons(); // Fetch data from the API using getCoupons function
         setCoupons(data.activeCoupons); // Set the fetched data to the state
-        console.log(data.activeCoupons, "data");
       } catch (error) {
         console.error("Error fetching data:", error);
         setError("Error fetching data. Please try again.");

diff --git a/src/components/UserProfileContainer.tsx b/src/components/UserProfileContainer.tsx
@@ -1,74 +1,87 @@
-import './CouponsContainer.css';
-import React, { useEffect, useState } from 'react';
+import "./CouponsContainer.css";
+import React, { useEffect, useState } from "react";
 import {
-    IonButton,
-    IonCard,
-    IonCardContent,
-    IonCardHeader,
-    IonCardSubtitle,
-    IonCardTitle,
-    IonInput,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonThumbnail,
-} from '@ionic/react';
-import { signCoupon } from '../helpers/signCoupon';
-import { getData, setData } from '../data/helpers/localStorageService';
-import { DataKey } from '../data/const/localStorageConst';
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonThumbnail,
+} from "@ionic/react";
+import { signCoupon } from "../helpers/signCoupon";
+import { getData, setData } from "../data/helpers/localStorageService";
+import { DataKey } from "../data/const/localStorageConst";
+import { getShares } from "../services/loyaltyService";
 
-interface UserProfileProps {
-
-}
+interface UserProfileProps {}
 
 const changeName = (newName: string | number | null | undefined) => {
-    if (!!newName) {
-        setData(DataKey.Name, `${newName}`);
-    }
-}
+  if (!!newName) {
+    setData(DataKey.Name, `${newName}`);
+  }
+};
 
 const UserProfileContainer: React.FC<UserProfileProps> = () => {
+  const [shares, setShares] = useState<any>(0);
+  const [error, setError] = useState<string | null>(null);
 
-    const [shares, setShares] = useState<number>(0);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                setShares(84);
-            } catch (error) {
-                console.error('Error fetching data:', error);
-                setError('Error fetching data. Please try again.'); // You might want to handle the error more gracefully
-            }
-        };
+  useEffect(() => {
+    const fetchData = async () => {
+      console.log(shares);
+      try {
+        const data = await getShares(); // Call the getShares function
+        setShares(data); // Assuming that the returned data has a 'shares' property
+        console.log("Shares data:", data);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        setError("Error fetching data. Please try again.");
+      }
+    };
 
-        fetchData();
-    }, []);
+    fetchData();
+  }, []);
 
-    return (
-        <>
-            <IonCard>
-                <IonCardHeader>
-                    <IonCardSubtitle>My name:</IonCardSubtitle>
-                    <IonCardTitle>
-                        <IonInput clearOnEdit={true} value={getData(DataKey.Name)} onIonBlur={(e) => changeName(e.target.value)}></IonInput>
-                    </IonCardTitle>
-                </IonCardHeader>
-            </IonCard>
-            <IonCard>
-                <IonCardHeader>
-                    <IonCardSubtitle>My shares:</IonCardSubtitle>
-                    <IonCardTitle>{shares}</IonCardTitle>
-                </IonCardHeader>
-            </IonCard>
-            <IonCard>
-                <IonCardHeader>
-                    <IonCardTitle>0x932890843298943298</IonCardTitle>
-                    <IonInput label="Private key:" type='password' value='132123123132123123'></IonInput>
-                </IonCardHeader>
-            </IonCard>
-        </>
-    );
+  return (
+    <>
+      <IonCard>
+        <IonCardHeader>
+          <IonCardSubtitle>My name:</IonCardSubtitle>
+          <IonCardTitle>
+            <IonInput
+              clearOnEdit={true}
+              value={getData(DataKey.Name)}
+              onIonBlur={(e) => changeName(e.target.value)}
+            ></IonInput>
+          </IonCardTitle>
+        </IonCardHeader>
+      </IonCard>
+      <IonCard>
+        <IonCardHeader>
+          <IonCardSubtitle>My shares:</IonCardSubtitle>
+          <IonCardTitle>
+            {shares.numberOfShares !== null
+              ? shares.numberOfShares
+              : "Loading..."}
+          </IonCardTitle>
+        </IonCardHeader>
+      </IonCard>
+      <IonCard>
+        <IonCardHeader>
+          <IonCardTitle>0x932890843298943298</IonCardTitle>
+          <IonInput
+            label="Private key:"
+            type="password"
+            value="132123123132123123"
+          ></IonInput>
+        </IonCardHeader>
+      </IonCard>
+    </>
+  );
 };
 
 export default UserProfileContainer;