Feature/use api hook3

pages/sites/[slug]/[locale]/profile/projects/[id].tsx

@@ -16,7 +16,6 @@ import type {
 import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import ManageProjects from '../../../../../../src/features/user/ManageProjects';
-import { getAuthenticatedRequest } from '../../../../../../src/utils/apiRequests/api';
 import GlobeContentLoader from '../../../../../../src/features/common/ContentLoaders/Projects/GlobeLoader';
 import AccessDeniedLoader from '../../../../../../src/features/common/ContentLoaders/Projects/AccessDeniedLoader';
 import Footer from '../../../../../../src/features/common/Layout/Footer';
@@ -34,6 +33,7 @@ import { v4 } from 'uuid';
 import { defaultTenant } from '../../../../../../tenant.config';
 import { useTenant } from '../../../../../../src/features/common/Layout/TenantContext';
 import getMessagesForPage from '../../../../../../src/utils/language/getMessagesForPage';
+import { useApi } from '../../../../../../src/hooks/useApi';
 
 interface Props {
   pageProps: PageProps;
@@ -47,12 +47,13 @@ function ManageSingleProject({
   const [ready, setReady] = React.useState<boolean>(false);
   const router = useRouter();
   const { setTenantConfig } = useTenant();
+  const { getApiAuthenticated } = useApi();
   const [accessDenied, setAccessDenied] = React.useState<boolean>(false);
   const [setupAccess, setSetupAccess] = React.useState<boolean>(false);
   const [project, setProject] = React.useState<
     ProfileProjectTrees | ProfileProjectConservation | null
   >(null);
-  const { user, contextLoaded, token, logoutUser } = useUserProps();
+  const { user, contextLoaded, token } = useUserProps();
   const { setErrors, redirect } = React.useContext(ErrorHandlingContext);
 
   React.useEffect(() => {
@@ -71,14 +72,9 @@ function ManageSingleProject({
   useEffect(() => {
     async function loadProject() {
       try {
-        const result = await getAuthenticatedRequest<
+        const result = await getApiAuthenticated<
           ProfileProjectTrees | ProfileProjectConservation
-        >({
-          tenant: tenantConfig.id,
-          url: `/app/profile/projects/${projectGUID}`,
-          token,
-          logoutUser,
-        });
+        >(`/app/profile/projects/${projectGUID}`);
         setProject(result);
         setSetupAccess(true);
       } catch (err) {

src/features/common/types/project.d.ts

@@ -134,7 +134,6 @@ export interface BasicDetailsProps {
   >;
   setProjectGUID: SetState<string>;
   projectGUID: string | unknown;
-  token: string;
   purpose: 'trees' | 'conservation';
 }
 
@@ -195,7 +194,6 @@ export interface PlantingSeason {
 
 export interface ProjectSitesProps {
   handleBack: (arg: number) => void;
-  token: string;
   handleNext: (arg: number) => void;
   projectGUID: string;
   projectDetails: ProfileProjectTrees | ProfileProjectConservation | null;
@@ -230,7 +228,6 @@ interface EditSiteProps {
   geoJsonProp: GeoJson | null;
   projectGUID: string;
   setSiteList: SetState<Site[]>;
-  token: string;
   seteditMode: Function;
   siteGUID: Nullable<string>;
   siteList: Site[];

src/features/user/ManagePayouts/components/BankDetailsForm.tsx

@@ -12,7 +12,7 @@ import InlineFormDisplayGroup from '../../../common/Layout/Forms/InlineFormDispl
 import AutoCompleteCountry from '../../../common/InputTypes/AutoCompleteCountry';
 import { getStoredConfig } from '../../../../utils/storeConfig';
 
-export type FormData = {
+export type AccountFormData = {
   currency: string;
   payoutMinAmount?: string;
   bankName: string;
@@ -30,11 +30,11 @@ export type FormData = {
 interface Props {
   payoutMinAmounts: { [key: string]: number } | null;
   account?: BankAccount;
-  handleSave: (data: FormData) => Promise<void>;
+  handleSave: (data: AccountFormData) => Promise<void>;
   isProcessing: boolean;
 }
 
-const extractFormValues = (account?: BankAccount): FormData => {
+const extractFormValues = (account?: BankAccount): AccountFormData => {
   const formValues = {
     currency: account?.currency || PayoutCurrency.DEFAULT,
     payoutMinAmount: account?.payoutMinAmount?.toString() || '',
@@ -65,7 +65,7 @@ const BankDetailsForm = ({
     control,
     watch,
     formState: { errors },
-  } = useForm<FormData>({
+  } = useForm<AccountFormData>({
     mode: 'onBlur',
     defaultValues: extractFormValues(account),
   });
@@ -90,7 +90,7 @@ const BankDetailsForm = ({
     [payoutMinAmounts, currency]
   );
 
-  const onSubmit = (data: FormData): void => {
+  const onSubmit = (data: AccountFormData): void => {
     handleSave(data);
   };
 

src/features/user/ManagePayouts/index.tsx

@@ -1,15 +1,11 @@
 import type { ReactElement } from 'react';
-import { useState, useEffect, useContext, useCallback } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import type { TabItem } from '../../common/Layout/TabbedView/TabbedViewTypes';
 import type { APIError } from '@planet-sdk/common';
 import type { BankAccount, PayoutMinAmounts } from '../../common/types/payouts';
 import { useLocale, useTranslations } from 'next-intl';
 import DashboardView from '../../common/Layout/DashboardView';
 import TabbedView from '../../common/Layout/TabbedView';
-import {
-  getAuthenticatedRequest,
-  getRequest,
-} from '../../../utils/apiRequests/api';
 import { ErrorHandlingContext } from '../../common/Layout/ErrorHandlingContext';
 import { useUserProps } from '../../common/Layout/UserPropsContext';
 import { usePayouts } from '../../common/Layout/PayoutsContext';
@@ -19,7 +15,7 @@ import EditBankAccount from './screens/EditBankAccount';
 import AddBankAccount from './screens/AddBankAccount';
 import { useRouter } from 'next/router';
 import { handleError } from '@planet-sdk/common';
-import { useTenant } from '../../common/Layout/TenantContext';
+import { useApi } from '../../../hooks/useApi';
 
 export enum ManagePayoutTabs {
   OVERVIEW = 'overview',
@@ -40,44 +36,36 @@ export default function ManagePayouts({
 }: ManagePayoutsProps): ReactElement | null {
   const t = useTranslations('ManagePayouts');
   const locale = useLocale();
-  const { tenantConfig } = useTenant();
   const router = useRouter();
   const { setErrors } = useContext(ErrorHandlingContext);
-  const { token, contextLoaded, user, logoutUser } = useUserProps();
+  const { token, contextLoaded, user } = useUserProps();
   const { accounts, setAccounts, payoutMinAmounts, setPayoutMinAmounts } =
     usePayouts();
+  const { getApi, getApiAuthenticated } = useApi();
   const [tabConfig, setTabConfig] = useState<TabItem[]>([]);
   const [isDataLoading, setIsDataLoading] = useState(false);
 
-  const fetchPayoutMinAmounts = useCallback(async () => {
+  const fetchPayoutMinAmounts = async () => {
     if (!payoutMinAmounts) {
       try {
-        const res = await getRequest<PayoutMinAmounts>({
-          tenant: tenantConfig?.id,
-          url: '/app/payoutMinAmounts',
-        });
+        const res = await getApi<PayoutMinAmounts>('/app/payoutMinAmounts');
         setPayoutMinAmounts(res);
       } catch (err) {
         setErrors(handleError(err as APIError));
       }
     }
-  }, []);
+  };
 
   useEffect(() => {
     if (!payoutMinAmounts && user?.type === 'tpo') fetchPayoutMinAmounts();
   }, [step, user]);
 
-  const fetchAccounts = useCallback(async () => {
+  const fetchAccounts = async () => {
     if (!accounts) {
       setIsDataLoading(true);
       setProgress && setProgress(70);
       try {
-        const res = await getAuthenticatedRequest<BankAccount[]>({
-          tenant: tenantConfig?.id,
-          url: `/app/accounts`,
-          token,
-          logoutUser,
-        });
+        const res = await getApiAuthenticated<BankAccount[]>('/app/accounts');
         setAccounts(res);
       } catch (err) {
         setErrors(handleError(err as APIError));
@@ -88,7 +76,7 @@ export default function ManagePayouts({
         setTimeout(() => setProgress(0), 1000);
       }
     }
-  }, []);
+  };
 
   useEffect(() => {
     if (user?.type === 'tpo') {

src/features/user/ManagePayouts/screens/AddBankAccount.tsx

@@ -1,51 +1,47 @@
 import type { ReactElement } from 'react';
-import type { FormData } from '../components/BankDetailsForm';
+import type { AccountFormData } from '../components/BankDetailsForm';
 import type { APIError, SerializedError } from '@planet-sdk/common';
 import type { BankAccount } from '../../../common/types/payouts';
 
 import { useContext, useState } from 'react';
-import { postAuthenticatedRequest } from '../../../../utils/apiRequests/api';
 import { ErrorHandlingContext } from '../../../common/Layout/ErrorHandlingContext';
 import { usePayouts } from '../../../common/Layout/PayoutsContext';
-import { useUserProps } from '../../../common/Layout/UserPropsContext';
 import { useRouter } from 'next/router';
 import { useTranslations } from 'next-intl';
 import BankDetailsForm from '../components/BankDetailsForm';
 import CustomSnackbar from '../../../common/CustomSnackbar';
 import CenteredContainer from '../../../common/Layout/CenteredContainer';
 import { PayoutCurrency } from '../../../../utils/constants/payoutConstants';
 import { handleError } from '@planet-sdk/common';
-import { useTenant } from '../../../common/Layout/TenantContext';
+import { useApi } from '../../../../hooks/useApi';
 
 const AddBankAccount = (): ReactElement | null => {
   const t = useTranslations('ManagePayouts');
   const { payoutMinAmounts, setAccounts, accounts } = usePayouts();
-  const { token, logoutUser } = useUserProps();
+  const { postApiAuthenticated } = useApi();
   const { setErrors } = useContext(ErrorHandlingContext);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isAccountCreated, setIsAccountCreated] = useState(false);
   const router = useRouter();
-  const { tenantConfig } = useTenant();
   const closeSnackbar = (): void => {
     setIsAccountCreated(false);
   };
 
-  const handleSaveAccount = async (data: FormData) => {
+  const handleSaveAccount = async (data: AccountFormData) => {
     setIsProcessing(true);
-    const accountData = {
+    const accountData: AccountFormData = {
       ...data,
       currency: data.currency === PayoutCurrency.DEFAULT ? '' : data.currency,
       payoutMinAmount:
         data.currency === PayoutCurrency.DEFAULT ? '' : data.payoutMinAmount,
     };
     try {
-      const res = await postAuthenticatedRequest<BankAccount>({
-        tenant: tenantConfig?.id,
-        url: '/app/accounts',
-        data: accountData,
-        token,
-        logoutUser,
-      });
+      const res = await postApiAuthenticated<BankAccount, AccountFormData>(
+        '/app/accounts',
+        {
+          payload: accountData,
+        }
+      );
       if (accounts) {
         setAccounts([...accounts, res]);
       } else {

src/features/user/ManagePayouts/screens/EditBankAccount.tsx

@@ -1,41 +1,38 @@
 import type { ReactElement } from 'react';
-import type { FormData } from '../components/BankDetailsForm';
+import type { AccountFormData } from '../components/BankDetailsForm';
 import type { APIError, SerializedError } from '@planet-sdk/common';
 import type { BankAccount } from '../../../common/types/payouts';
 
 import { useContext, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { putAuthenticatedRequest } from '../../../../utils/apiRequests/api';
 import { usePayouts } from '../../../common/Layout/PayoutsContext';
 import { ErrorHandlingContext } from '../../../common/Layout/ErrorHandlingContext';
 import BankDetailsForm from '../components/BankDetailsForm';
 import BackArrow from '../../../../../public/assets/images/icons/headerIcons/BackArrow';
 import CustomSnackbar from '../../../common/CustomSnackbar';
 import CenteredContainer from '../../../common/Layout/CenteredContainer';
 import FormHeader from '../../../common/Layout/Forms/FormHeader';
-import { useUserProps } from '../../../common/Layout/UserPropsContext';
 import { PayoutCurrency } from '../../../../utils/constants/payoutConstants';
 import { handleError } from '@planet-sdk/common';
-import { useTenant } from '../../../common/Layout/TenantContext';
+import { useApi } from '../../../../hooks/useApi';
 
 const EditBankAccount = (): ReactElement | null => {
   const { accounts, payoutMinAmounts, setAccounts } = usePayouts();
   const router = useRouter();
-  const { tenantConfig } = useTenant();
   const [accountToEdit, setAccountToEdit] = useState<BankAccount | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isAccountUpdated, setIsAccountUpdated] = useState(false);
-  const { token, logoutUser } = useUserProps();
+  const { putApiAuthenticated } = useApi();
   const { setErrors, errors } = useContext(ErrorHandlingContext);
   const t = useTranslations('ManagePayouts');
 
   const closeSnackbar = (): void => {
     setIsAccountUpdated(false);
   };
 
-  const handleSaveAccount = async (data: FormData) => {
+  const handleSaveAccount = async (data: AccountFormData) => {
     setIsProcessing(true);
     const accountData = {
       ...data,
@@ -45,13 +42,10 @@ const EditBankAccount = (): ReactElement | null => {
     };
 
     try {
-      const res = await putAuthenticatedRequest<BankAccount>({
-        tenant: tenantConfig?.id,
-        url: `/app/accounts/${accountToEdit?.id}`,
-        data: accountData,
-        token,
-        logoutUser,
-      });
+      const res = await putApiAuthenticated<BankAccount, AccountFormData>(
+        `/app/accounts/${accountToEdit?.id}`,
+        { payload: accountData }
+      );
       // update accounts in context
       if (accounts) {
         const updatedAccounts = accounts.map((account) => {

src/features/user/ManagePayouts/screens/PayoutScheduleForm.tsx

@@ -10,11 +10,10 @@ import CenteredContainer from '../../../common/Layout/CenteredContainer';
 import { useTranslations } from 'next-intl';
 import { useUserProps } from '../../../common/Layout/UserPropsContext';
 import { ErrorHandlingContext } from '../../../common/Layout/ErrorHandlingContext';
-import { putAuthenticatedRequest } from '../../../../utils/apiRequests/api';
 import CustomSnackbar from '../../../common/CustomSnackbar';
 import { PaymentFrequencies } from '../../../../utils/constants/payoutConstants';
 import { handleError } from '@planet-sdk/common';
-import { useTenant } from '../../../common/Layout/TenantContext';
+import { useApi } from '../../../../hooks/useApi';
 
 const paymentFrequencies = [
   PaymentFrequencies.MANUAL,
@@ -32,8 +31,8 @@ const PayoutScheduleForm = (): ReactElement | null => {
   const t = useTranslations('ManagePayouts');
   const [isProcessing, setIsProcessing] = useState(false);
   const [isSaved, setIsSaved] = useState(false);
-  const { token, user, setUser, logoutUser } = useUserProps();
-  const { tenantConfig } = useTenant();
+  const { user, setUser } = useUserProps();
+  const { putApiAuthenticated } = useApi();
   const { setErrors } = useContext(ErrorHandlingContext);
   const {
     handleSubmit,
@@ -47,12 +46,8 @@ const PayoutScheduleForm = (): ReactElement | null => {
     setIsProcessing(true);
 
     try {
-      const res = await putAuthenticatedRequest<User>({
-        tenant: tenantConfig?.id,
-        url: '/app/profile',
-        data: { scheduleFrequency: data.scheduleFrequency },
-        token,
-        logoutUser,
+      const res = await putApiAuthenticated<User>('/app/profile', {
+        payload: { scheduleFrequency: data.scheduleFrequency },
       });
       setUser(res);
       setIsSaved(true);