feat: show API responses on UI

src/Popup/Popup.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 
-import { UserSettingsResponseProperties, DomainEntryProperties } from '../Background';
+import { UserSettingsResponseProperties } from '../Background';
 import { getExtensionSettings } from '../util/settings';
 import BodyWrapper from '../components/BodyWrapper';
 import Loader from '../components/Loader';
 import PopupForm from './PopupForm';
 import PopupHeader from './Header';
+import PopupBody, { ProcessedRequestProperties } from './PopupBody';
 
 import './styles.scss';
 
@@ -18,7 +19,8 @@ export type DomainOptionsProperties = {
 
 const Popup: React.FC = () => {
     const [domainOptions, setDomainOptions] = useState<DomainOptionsProperties[]>([]);
-    const [loading, setLoading] = useState(true);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [requestProcessed, setRequestProcessed] = useState<ProcessedRequestProperties>({ error: null, message: '' });
 
     useEffect((): void => {
         async function getUserSettings(): Promise<void> {
@@ -77,7 +79,13 @@ const Popup: React.FC = () => {
                 {!loading ? (
                     <>
                         <PopupHeader />
-                        <PopupForm domainOptions={domainOptions} defaultDomainId="default" />
+                        {(requestProcessed.error !== null && <PopupBody requestProcessed={requestProcessed} />) || (
+                            <PopupForm
+                                domainOptions={domainOptions}
+                                defaultDomainId="default"
+                                setRequestProcessed={setRequestProcessed}
+                            />
+                        )}
                     </>
                 ) : (
                     <Loader />

src/Popup/PopupBody.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export type ProcessedRequestProperties = {
+    error: boolean | null;
+    message: string;
+};
+
+type PopupBodyProperties = {
+    requestProcessed: ProcessedRequestProperties;
+};
+
+const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message } }) => {
+    return (
+        <>
+            <div>
+                <p>{message}</p>
+            </div>
+        </>
+    );
+};
+
+export default PopupBody;

src/Popup/PopupForm.tsx

@@ -54,6 +54,12 @@ const InnerForm: React.FC<PopupFormProperties & FormikProps<PopupFormValuesPrope
 type PopupFormProperties = {
     defaultDomainId: string;
     domainOptions: DomainOptionsProperties[];
+    setRequestProcessed: React.Dispatch<
+        React.SetStateAction<{
+            error: boolean | null;
+            message: string;
+        }>
+    >;
 };
 
 // Wrap our form with the withFormik HoC
@@ -91,7 +97,7 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
 
     handleSubmit: async (
         values: PopupFormValuesProperties,
-        { setSubmitting, props }: FormikBag<PopupFormProperties, PopupFormValuesProperties>
+        { setSubmitting, props: { setRequestProcessed } }: FormikBag<PopupFormProperties, PopupFormValuesProperties>
     ) => {
         // Get target link to shorten
         const tabs = await getCurrentTab();
@@ -120,12 +126,15 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
         );
 
         if (!response.error) {
-            const { data } = response;
-            // ToDo: Show Shortened Link data on DOM
-            console.log(data);
+            const {
+                data: { link },
+            } = response;
+
+            // show shortened url
+            setRequestProcessed({ error: false, message: link });
         } else {
             // errored
-            console.log(response.message);
+            setRequestProcessed({ error: true, message: response.message });
         }
 
         // enable submit button