Merge pull request #6 from amosmachora/dev

Dev

.changeset/spicy-waves-type.md

@@ -0,0 +1,5 @@
+---
+"react-daraja": minor
+---
+
+removed frontend react hooks

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+dist

components/QRCodeDisplay.tsx

@@ -1,20 +1,44 @@
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect, useState } from "react";
-import { useReactDaraja } from "../hooks/useReactDaraja";
-import { useScannableQrCode } from "../hooks/useScannableQrCode";
-import { ScannableQrParams } from "../types";
+import { ScannableQrCodeResponse, ScannableQrParams } from "../types";
+import axios from "axios";
+import { BASE_URL } from "../src/env";
+import { generateAccessToken } from "../src/access-token";
 
 export const QRCodeDisplay = ({
   scannableQrParams,
 }: {
   scannableQrParams: ScannableQrParams;
 }) => {
   const [qrString, setQrString] = useState<string | null>(null);
-  const getQRcode = useScannableQrCode(scannableQrParams);
+  const [fetchError, setFetchError] = useState(false);
+
+  const accessToken = generateAccessToken();
+
+  const fetchQrCode = async (): Promise<ScannableQrCodeResponse> => {
+    try {
+      const res: ScannableQrCodeResponse = await axios.post(
+        `${BASE_URL}/mpesa/qrcode/v1/generate`,
+        scannableQrParams,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+      return res;
+    } catch (err: any) {
+      throw new Error(
+        `Error occurred with status code ${err.response?.status}, ${err.response?.statusText}`
+      );
+    }
+  };
 
   useEffect(() => {
-    getQRcode().then((res) => setQrString(res.QRCode));
+    fetchQrCode()
+      .then((res) => setQrString(res.QRCode))
+      .catch((err) => setFetchError(true));
   }, []);
 
   const qrImage = new Image();
@@ -24,7 +48,9 @@ export const QRCodeDisplay = ({
     <div
       className={`w-[${scannableQrParams.Size}] h-[${scannableQrParams.Size}]`}
     >
-      {qrString ? (
+      {fetchError ? (
+        <p>An error occurred!</p>
+      ) : qrString ? (
         <img src={qrImage.src} alt="QR Code" className="w-full h-full" />
       ) : (
         <FontAwesomeIcon