feat: get apikey on popup mount & attach to shorten request

src/Background/index.ts

@@ -9,7 +9,7 @@ import { AxiosPromise } from 'axios';
 import * as constants from './constants';
 import api from '../api';
 
-export type ShortenUrlBodyProperties = {
+type ShortenUrlBodyProperties = {
     target: string;
     password?: string;
     customurl?: string;
@@ -17,6 +17,10 @@ export type ShortenUrlBodyProperties = {
     domain?: string;
 };
 
+export interface ApiBodyProperties extends ShortenUrlBodyProperties {
+    apikey: string;
+}
+
 type ShortenLinkResponseProperties = {
     id: string;
     address: string;
@@ -40,19 +44,21 @@ export type SuccessfulShortenStatusProperties = {
 };
 
 async function shortenUrl(
-    params: ShortenUrlBodyProperties
+    params: ApiBodyProperties
 ): Promise<SuccessfulShortenStatusProperties | ApiErroredProperties> {
     try {
-        // ToDo: get apikey from local storage
+        // extract `apikey` from body
+        const { apikey, ...otherParams } = params;
+
         const { data }: { data: ShortenLinkResponseProperties } = await api({
             method: 'POST',
             timeout: constants.SHORTEN_URL_TIMEOUT,
             url: `/api/v2/links`,
             headers: {
-                'X-API-Key': 'replace-with-api-key',
+                'X-API-Key': apikey,
             },
             data: {
-                ...params,
+                ...otherParams,
             },
         });
 
@@ -119,9 +125,6 @@ async function checkApiKey(apikey: string): Promise<SuccessfulApiKeyCheckPropert
     try {
         const { data }: { data: UserSettingsResponseProperties } = await getUserSettings(apikey);
 
-        // ToDo:
-        console.log(data);
-
         return {
             error: false,
             data,

src/Popup/Popup.tsx

@@ -10,7 +10,7 @@ import PopupBody, { ProcessedRequestProperties } from './PopupBody';
 
 import './styles.scss';
 
-export type DomainOptionsProperties = {
+type DomainOptionsProperties = {
     option: string;
     value: string;
     id: string;
@@ -24,13 +24,22 @@ export type ProcessRequestProperties = React.Dispatch<
     }>
 >;
 
+export type UserConfigProperties = {
+    apikey: string;
+    domainOptions: DomainOptionsProperties[];
+};
+
 const Popup: React.FC = () => {
     const [loading, setLoading] = useState<boolean>(true);
-    const [domainOptions, setDomainOptions] = useState<DomainOptionsProperties[]>([]);
+    const [userConfig, setUserConfig] = useState<UserConfigProperties>({
+        apikey: '',
+        domainOptions: [],
+    });
     const [requestProcessed, setRequestProcessed] = useState<ProcessedRequestProperties>({ error: null, message: '' });
 
     useEffect((): void => {
         async function getUserSettings(): Promise<void> {
+            // ToDo: type
             const { settings = {} } = await getExtensionSettings();
             // ToDo: change kutt.it entry to custom host(if exist)
             const defaultOptions: DomainOptionsProperties[] = [
@@ -72,10 +81,12 @@ const Popup: React.FC = () => {
 
                 // merge to beginning of array
                 optionsArray = defaultOptions.concat(optionsArray);
-                setDomainOptions(optionsArray);
+
+                // update domain list
+                setUserConfig({ apikey: settings.apikey, domainOptions: optionsArray });
             } else {
                 // no `user` but `apikey` exist on storage
-                setDomainOptions(defaultOptions);
+                setUserConfig({ apikey: settings.apikey, domainOptions: defaultOptions });
             }
 
             // ToDo: handle init operations(if any)
@@ -96,7 +107,7 @@ const Popup: React.FC = () => {
                         )) || (
                             <PopupForm
                                 defaultDomainId="default"
-                                domainOptions={domainOptions}
+                                userConfig={userConfig}
                                 setRequestProcessed={setRequestProcessed}
                             />
                         )}

src/Popup/PopupForm.tsx

@@ -3,12 +3,12 @@ import { withFormik, Field, Form, FormikBag, FormikProps, FormikErrors } from 'f
 
 import Loader from '../components/Loader';
 import messageUtil from '../util/mesageUtil';
-import { DomainOptionsProperties, ProcessRequestProperties } from './Popup';
+import { UserConfigProperties, ProcessRequestProperties } from './Popup';
 import { getCurrentTab } from '../util/tabs';
 
 import { SHORTEN_URL } from '../Background/constants';
 import { SelectField, TextField } from '../components/Input';
-import { ShortenUrlBodyProperties, SuccessfulShortenStatusProperties, ApiErroredProperties } from '../Background';
+import { ApiBodyProperties, SuccessfulShortenStatusProperties, ApiErroredProperties } from '../Background';
 
 type PopupFormValuesProperties = {
     password: string;
@@ -17,7 +17,11 @@ type PopupFormValuesProperties = {
 };
 
 const InnerForm: React.FC<PopupFormProperties & FormikProps<PopupFormValuesProperties>> = props => {
-    const { isSubmitting, handleSubmit, domainOptions } = props;
+    const {
+        isSubmitting,
+        handleSubmit,
+        userConfig: { domainOptions },
+    } = props;
 
     return (
         <>
@@ -53,22 +57,26 @@ const InnerForm: React.FC<PopupFormProperties & FormikProps<PopupFormValuesPrope
 // The type of props `PopupForm` receives
 type PopupFormProperties = {
     defaultDomainId: string;
-    domainOptions: DomainOptionsProperties[];
+    userConfig: UserConfigProperties;
     setRequestProcessed: ProcessRequestProperties;
 };
 
 // Wrap our form with the withFormik HoC
 const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
     // Transform outer props into default form values
-    mapPropsToValues: (props): PopupFormValuesProperties => {
-        const defaultItem = props.domainOptions.find(({ id }) => {
-            return id === 'default';
+    mapPropsToValues: ({
+        defaultDomainId,
+        userConfig: { domainOptions },
+    }: PopupFormProperties): PopupFormValuesProperties => {
+        // find default item to select in options menu
+        const defaultItem = domainOptions.find(({ id }) => {
+            return id === defaultDomainId;
         });
 
         return {
             password: '',
             customurl: '',
-            domain: defaultItem && defaultItem.value ? defaultItem.value.trim() : '',
+            domain: defaultItem && defaultItem.value ? defaultItem.value.trim() : '', // empty string will map to disabled entry
         };
     },
 
@@ -81,7 +89,6 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
         if (values.password && values.password.trim().length < 3) {
             errors.password = 'Password must be atleast 3 characters';
         }
-
         // custom url validation
         if (values.customurl && values.customurl.trim().length < 3) {
             errors.customurl = 'Custom URL must be atleast 3 characters';
@@ -92,7 +99,13 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
 
     handleSubmit: async (
         values: PopupFormValuesProperties,
-        { setSubmitting, props: { setRequestProcessed } }: FormikBag<PopupFormProperties, PopupFormValuesProperties>
+        {
+            setSubmitting,
+            props: {
+                setRequestProcessed,
+                userConfig: { apikey },
+            },
+        }: FormikBag<PopupFormProperties, PopupFormValuesProperties>
     ) => {
         // Get target link to shorten
         const tabs = await getCurrentTab();
@@ -104,9 +117,10 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
         }
 
         const { customurl, password, domain } = values;
-        const apiBody: ShortenUrlBodyProperties = {
+        const apiBody: ApiBodyProperties = {
+            apikey,
             target,
-            ...(customurl.trim() !== '' && { customurl: customurl.trim() }), // add this key if field is not empty
+            ...(customurl.trim() !== '' && { customurl: customurl.trim() }), // add this key only if field is not empty
             ...(password.trim() !== '' && { password: password.trim() }),
             reuse: false,
             ...(domain.trim() !== '' && { domain: domain.trim() }),
@@ -118,7 +132,7 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
             apiBody
         );
 
-        // enable submit button
+        // re-enable submit button
         setSubmitting(false);
 
         if (!response.error) {