From 7764f114f2628461948a9c3a625205ae86bd21a3 Mon Sep 17 00:00:00 2001
From: Maciek Malik <poczta@maciekmalik.pl>
Date: Sun, 18 Feb 2024 08:55:57 +0100
Subject: [PATCH] :)

---
 package.json                            |   4 +-
 src/App.tsx                             |  53 ++++-----
 src/components/UserProfileContainer.tsx | 138 +++++++++++-------------
 3 files changed, 93 insertions(+), 102 deletions(-)

diff --git a/package.json b/package.json
index 5bb6f84..ca9ac3b 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "loyalty-customer-mobile-app/node_modules/.bin/vite",
-    "build": "loyalty-customer-mobile-app/node_modules/.bin/tsc && vite build",
+    "dev": "vite",
+    "build": "tsc && vite build",
     "preview": "loyalty-customer-mobile-app/node_modules/.bin/vite preview",
     "test.e2e": "loyalty-customer-mobile-app/node_modules/.bin/cypress run",
     "test.unit": "loyalty-customer-mobile-app/node_modules/.bin/vitest",
diff --git a/src/App.tsx b/src/App.tsx
index 71c485e..d4b954a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
-import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-import { Redirect, Route } from 'react-router-dom';
+import {IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact} from '@ionic/react';
+import {IonReactRouter} from '@ionic/react-router';
+import {Redirect, Route} from 'react-router-dom';
 import Menu from './components/Menu';
 import Page from './pages/Page';
 
@@ -24,33 +24,34 @@ import '@ionic/react/css/display.css';
 import './theme/variables.css';
 import CouponsPage from './pages/CouponsPage';
 import UserProfilePage from './pages/UserProfilePage';
+import React from "react";
 
 setupIonicReact();
 
 const App: React.FC = () => {
-  return (
-    <IonApp>
-      <IonReactRouter>
-        <IonSplitPane contentId="main">
-          <Menu />
-          <IonRouterOutlet id="main">
-            <Route path="/" exact={true}>
-              <Redirect to="/folder/Coupons" />
-            </Route>
-            <Route path="/folder/:name" exact={true}>
-              <Page />
-            </Route>
-            <Route path="/folder/Coupons" exact={true}>
-              <CouponsPage/>
-            </Route>
-            <Route path="/folder/Profile" exact={true}>
-              <UserProfilePage />
-            </Route>
-          </IonRouterOutlet>
-        </IonSplitPane>
-      </IonReactRouter>
-    </IonApp>
-  );
+    return (
+        <IonApp>
+            <IonReactRouter>
+                <IonSplitPane contentId="main">
+                    <Menu/>
+                    <IonRouterOutlet id="main">
+                        <Route path="/" exact={true}>
+                            <Redirect to="/folder/Coupons"/>
+                        </Route>
+                        <Route path="/folder/:name" exact={true}>
+                            <Page/>
+                        </Route>
+                        <Route path="/folder/Coupons" exact={true}>
+                            <CouponsPage/>
+                        </Route>
+                        <Route path="/folder/Profile" exact={true}>
+                            <UserProfilePage/>
+                        </Route>
+                    </IonRouterOutlet>
+                </IonSplitPane>
+            </IonReactRouter>
+        </IonApp>
+    );
 };
 
 export default App;
diff --git a/src/components/UserProfileContainer.tsx b/src/components/UserProfileContainer.tsx
index a019821..9e2c437 100644
--- a/src/components/UserProfileContainer.tsx
+++ b/src/components/UserProfileContainer.tsx
@@ -1,87 +1,77 @@
 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";
-import { getShares } from "../services/loyaltyService";
+import React, {useEffect, useState} from "react";
+import {IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonInput, IonProgressBar,} from "@ionic/react";
+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<any>(0);
+    const [error, setError] = useState<string | null>(null);
 
-  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.");
-      }
-    };
+    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.numberOfShares !== null
-              ? shares.numberOfShares
-              : "Loading..."}
-          </IonCardTitle>
-        </IonCardHeader>
-      </IonCard>
-      <IonCard>
-        <IonCardHeader>
-          <IonCardTitle>0x932890843298943298</IonCardTitle>
-          <IonInput
-            label="Private key:"
-            type="password"
-            value="132123123132123123"
-          ></IonInput>
-        </IonCardHeader>
-      </IonCard>
-    </>
-  );
+    return (
+        <>
+            <IonCard>
+                <IonCardHeader>
+                    <IonCardTitle>
+                        <IonInput
+                            clearOnEdit={true}
+                            value={getData(DataKey.Name)}
+                            onIonBlur={(e) => changeName(e.target.value)}
+                        ></IonInput>
+                    </IonCardTitle>
+                    <IonCardSubtitle>My name:</IonCardSubtitle>
+                </IonCardHeader>
+            </IonCard>
+            <IonCard>
+                <IonCardHeader>
+                    <IonCardTitle>
+                        {shares?.numberOfShares
+                            ? shares.numberOfShares
+                            : <IonProgressBar style={{"margin-top": "5px"}} type="indeterminate"></IonProgressBar>}
+                    </IonCardTitle>
+                    <IonCardSubtitle>My shares: </IonCardSubtitle>
+                </IonCardHeader>
+            </IonCard>
+            <IonCard>
+                <IonCardHeader>
+
+                    <IonCardTitle
+                        style={{"font-size": "25px", "text-align": "center"}}>0x932890843298943298</IonCardTitle>
+                    <IonInput
+                        label="Private key:"
+                        type="password"
+                        value="132123123132123123"
+                    ></IonInput>
+                </IonCardHeader>
+            </IonCard>
+        </>
+    );
 };
 
 export default UserProfileContainer;