Skip to content

[TACKLE-114] create a common useFetch ReactJS Hook to be reused #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carlosthe19916 wants to merge 16 commits into
base: main
Choose a base branch
from
Open

[TACKLE-114] create a common useFetch ReactJS Hook to be reused #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
4034bb1
useFetch
carlosthe19916 Apr 19, 2021
09e0919
add test
carlosthe19916 Apr 19, 2021
163a01d
Replace old fetchs by new hook useFetch
carlosthe19916 Apr 19, 2021
257ca27
Merge branch 'main' into useFetch
carlosthe19916 Apr 23, 2021
84b0485
change useFetchJobFunction by useFetch
carlosthe19916 Apr 23, 2021
136b08f
Merge branch 'main' into useFetch
carlosthe19916 Apr 26, 2021
01fb1d6
Merge main
carlosthe19916 Apr 26, 2021
50fde2c
useFetch on assessment
carlosthe19916 Apr 26, 2021
027106c
Merge branch 'main' into useFetch
carlosthe19916 May 4, 2021
f6bcf73
Add useFetch on tag/tagTypes
carlosthe19916 May 4, 2021
27a7bd5
Merge branch 'main' into useFetch
carlosthe19916 May 10, 2021
bf3bd34
Fix refreshTable on tagTypes
carlosthe19916 May 10, 2021
132890b
Merge branch 'main' into useFetch
carlosthe19916 May 14, 2021
58a0cff
Remove custom useFeth comming from master and replace them by useFetch
carlosthe19916 May 14, 2021
373c300
Merge branch 'main' into useFetch
carlosthe19916 Jun 21, 2021
5f5d09a
merge main
carlosthe19916 Jun 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 38 additions & 8 deletions ...ation-inventory/application-assessment/components/stakeholders-form/stakeholders-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useFormikContext } from "formik";

Expand All @@ -11,11 +11,19 @@ import {
TextContent,
} from "@patternfly/react-core";

import { useFetchStakeholderGroups, useFetchStakeholders } from "shared/hooks";
import { useFetch } from "shared/hooks";

import { DEFAULT_SELECT_MAX_HEIGHT } from "Constants";
import { getValidatedFromError } from "utils/utils";

import { StakeholderGroupPage, StakeholderPage } from "api/models";
import {
getAllStakeholderGroups,
getAllStakeholders,
stakeholderGroupPageMapper,
stakeholderPageMapper,
} from "api/apiUtils";

import { IFormValues } from "../../form-utils";

import { StakeholderSelect } from "./stakeholder-select";
Expand All @@ -27,23 +35,45 @@ export const StakeholdersForm: React.FC<StakeholdersFormProps> = () => {
const { t } = useTranslation();
const formik = useFormikContext<IFormValues>();

// Fetch stakeholders

const {
stakeholders,
data: stakeholdersPage,
isFetching: isFetchingStakeholders,
fetchError: fetchErrorStakeholders,
fetchAllStakeholders,
} = useFetchStakeholders();
requestFetch: fetchAllStakeholders,
} = useFetch<StakeholderPage>({
defaultIsFetching: true,
onFetch: getAllStakeholders,
});

const stakeholders = useMemo(() => {
return stakeholdersPage
? stakeholderPageMapper(stakeholdersPage)
: undefined;
}, [stakeholdersPage]);

useEffect(() => {
fetchAllStakeholders();
}, [fetchAllStakeholders]);

// Fetch stakeholder groups

const {
stakeholderGroups,
data: stakeholderGroupPage,
isFetching: isFetchingStakeholderGroups,
fetchError: fetchErrorStakeholderGroups,
fetchAllStakeholderGroups,
} = useFetchStakeholderGroups();
requestFetch: fetchAllStakeholderGroups,
} = useFetch<StakeholderGroupPage>({
defaultIsFetching: true,
onFetch: getAllStakeholderGroups,
});

const stakeholderGroups = useMemo(() => {
return stakeholderGroupPage
? stakeholderGroupPageMapper(stakeholderGroupPage)
: undefined;
}, [stakeholderGroupPage]);

useEffect(() => {
fetchAllStakeholderGroups();
Expand Down
96 changes: 73 additions & 23 deletions ...plication-list/components/application-dependencies-form/application-dependencies-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import React, { useContext, useEffect, useState } from "react";
import React, {
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from "react";
import { useTranslation } from "react-i18next";

import {
Expand All @@ -13,16 +19,25 @@ import {
} from "@patternfly/react-core";

import { OptionWithValue } from "shared/components";
import { useFetch } from "shared/hooks";

import {
useFetchApplicationDependencies,
useFetchApplications,
} from "shared/hooks";
Application,
ApplicationDependency,
ApplicationDependencyPage,
ApplicationPage,
} from "api/models";

import { Application, ApplicationDependency } from "api/models";
import {
applicationDependencyPageMapper,
applicationPageMapper,
getAllApplicationDependencies,
getAllApplications,
} from "api/apiUtils";
import { getAxiosErrorMessage } from "utils/utils";

import { FormContext } from "./form-context";
import { SelectDependency } from "./select-dependency";
import { getAxiosErrorMessage } from "utils/utils";

const northToStringFn = (value: ApplicationDependency) => value.from.name;
const southToStringFn = (value: ApplicationDependency) => value.to.name;
Expand Down Expand Up @@ -66,40 +81,75 @@ export const ApplicationDependenciesForm: React.FC<ApplicationDependenciesFormPr

// Dependencies

const getAllNorthApplicationDependencies = useCallback(() => {
return getAllApplicationDependencies({
to: [`${application.id}`],
});
}, [application]);

const getAllSouthApplicationDependencies = useCallback(() => {
return getAllApplicationDependencies({
from: [`${application.id}`],
});
}, [application]);

const {
applicationDependencies: northDependencies,
data: northDependenciesPage,
isFetching: isFetchingNorthDependencies,
fetchError: fetchErrorNorthDependencies,
fetchAllApplicationDependencies: fetchAllNorthDependencies,
} = useFetchApplicationDependencies();
requestFetch: fetchAllNorthDependencies,
} = useFetch<ApplicationDependencyPage>({
defaultIsFetching: true,
onFetch: getAllNorthApplicationDependencies,
});

const northDependencies = useMemo(() => {
return northDependenciesPage
? applicationDependencyPageMapper(northDependenciesPage)
: undefined;
}, [northDependenciesPage]);

const {
applicationDependencies: southDependencies,
data: southDependenciesPage,
isFetching: isFetchingSouthDependencies,
fetchError: fetchErrorSouthDependencies,
fetchAllApplicationDependencies: fetchAllSouthDependencies,
} = useFetchApplicationDependencies();
requestFetch: fetchAllSouthDependencies,
} = useFetch<ApplicationDependencyPage>({
defaultIsFetching: true,
onFetch: getAllSouthApplicationDependencies,
});

const southDependencies = useMemo(() => {
return southDependenciesPage
? applicationDependencyPageMapper(southDependenciesPage)
: undefined;
}, [southDependenciesPage]);

useEffect(() => {
fetchAllNorthDependencies({
to: [`${application.id}`],
});
}, [application, fetchAllNorthDependencies]);
fetchAllNorthDependencies();
}, [fetchAllNorthDependencies]);

useEffect(() => {
fetchAllSouthDependencies({
from: [`${application.id}`],
});
}, [application, fetchAllSouthDependencies]);
fetchAllSouthDependencies();
}, [fetchAllSouthDependencies]);

// Applications

const {
applications,
data: applicationsPage,
isFetching: isFetchingApplications,
fetchError: fetchErrorApplications,
fetchAllApplications,
} = useFetchApplications();
requestFetch: fetchAllApplications,
} = useFetch<ApplicationPage>({
defaultIsFetching: true,
onFetch: getAllApplications,
});

const applications = useMemo(() => {
return applicationsPage
? applicationPageMapper(applicationsPage)
: undefined;
}, [applicationsPage]);

useEffect(() => {
fetchAllApplications();
Expand Down
50 changes: 41 additions & 9 deletions ...s/application-inventory/application-list/components/application-form/application-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,32 @@ import {
MultiSelectFetchFormikField,
OptionWithValue,
} from "shared/components";
import { useFetchBusinessServices, useFetchTagTypes } from "shared/hooks";
import { useFetch } from "shared/hooks";

import { DEFAULT_SELECT_MAX_HEIGHT } from "Constants";
import { createApplication, TagTypeSortBy, updateApplication } from "api/rest";
import { Application, BusinessService, Tag } from "api/models";
import {
Application,
BusinessService,
BusinessServicePage,
Tag,
TagTypePage,
} from "api/models";
import {
getAxiosErrorMessage,
getValidatedFromError,
getValidatedFromErrorTouched,
} from "utils/utils";
import {
bussinessServicePageMapper,
getAllBusinessServices,
getAllTagTypes,
tagTypePageMapper,
} from "api/apiUtils";

export const getAllTagTypesSortedByRank = () => {
return getAllTagTypes({ field: TagTypeSortBy.RANK });
};

const businesServiceToOption = (
value: BusinessService
Expand Down Expand Up @@ -72,11 +88,20 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
// Business services

const {
businessServices,
data: businessServicesPage,
isFetching: isFetchingBusinessServices,
fetchError: fetchErrorBusinessServices,
fetchAllBusinessServices,
} = useFetchBusinessServices();
requestFetch: fetchAllBusinessServices,
} = useFetch<BusinessServicePage>({
defaultIsFetching: true,
onFetch: getAllBusinessServices,
});

const businessServices = useMemo(() => {
return businessServicesPage
? bussinessServicePageMapper(businessServicesPage)
: undefined;
}, [businessServicesPage]);

useEffect(() => {
fetchAllBusinessServices();
Expand All @@ -85,14 +110,21 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
// TagTypes

const {
tagTypes,
data: tagTypesPage,
isFetching: isFetchingTagTypes,
fetchError: fetchErrorTagTypes,
fetchAllTagTypes,
} = useFetchTagTypes();
requestFetch: fetchAllTagTypes,
} = useFetch<TagTypePage>({
defaultIsFetching: true,
onFetch: getAllTagTypesSortedByRank,
});

const tagTypes = useMemo(() => {
return tagTypesPage ? tagTypePageMapper(tagTypesPage) : undefined;
}, [tagTypesPage]);

useEffect(() => {
fetchAllTagTypes({ field: TagTypeSortBy.RANK });
fetchAllTagTypes();
}, [fetchAllTagTypes]);

// Tags
Expand Down
54 changes: 30 additions & 24 deletions src/pages/controls/business-services/business-services.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { AxiosResponse } from "axios";
import { useTranslation } from "react-i18next";

Expand Down Expand Up @@ -32,12 +32,17 @@ import {
} from "shared/components";
import {
useTableControls,
useFetchBusinessServices,
useFetch,
useDeleteBusinessService,
} from "shared/hooks";

import { BusinessService, SortByQuery } from "api/models";
import { BusinessServiceSortBy, BusinessServiceSortByQuery } from "api/rest";
import { BusinessService, BusinessServicePage, SortByQuery } from "api/models";
import {
BusinessServiceSortBy,
BusinessServiceSortByQuery,
getBusinessServices,
} from "api/rest";
import { bussinessServicePageMapper } from "api/apiUtils";
import { getAxiosErrorMessage } from "utils/utils";

import { NewBusinessServiceModal } from "./components/new-business-service-modal";
Expand Down Expand Up @@ -107,13 +112,6 @@ export const BusinessServices: React.FC = () => {

const { deleteBusinessService } = useDeleteBusinessService();

const {
businessServices,
isFetching,
fetchError,
fetchBusinessServices,
} = useFetchBusinessServices(true);

const {
paginationQuery,
sortByQuery,
Expand All @@ -123,8 +121,8 @@ export const BusinessServices: React.FC = () => {
sortByQuery: { direction: "asc", index: 0 },
});

const refreshTable = useCallback(() => {
fetchBusinessServices(
const fetchBusinessServices = useCallback(() => {
return getBusinessServices(
{
name: filtersValue.get(FilterKey.NAME),
description: filtersValue.get(FilterKey.DESCRIPTION),
Expand All @@ -133,19 +131,27 @@ export const BusinessServices: React.FC = () => {
paginationQuery,
toSortByQuery(sortByQuery)
);
}, [filtersValue, paginationQuery, sortByQuery, fetchBusinessServices]);
}, [filtersValue, paginationQuery, sortByQuery]);

const {
data: businessServicesPage,
isFetching,
fetchError,
requestFetch: refreshTable,
} = useFetch<BusinessServicePage>({
defaultIsFetching: true,
onFetch: fetchBusinessServices,
});

const businessServices = useMemo(() => {
return businessServicesPage
? bussinessServicePageMapper(businessServicesPage)
: undefined;
}, [businessServicesPage]);

useEffect(() => {
fetchBusinessServices(
{
name: filtersValue.get(FilterKey.NAME),
description: filtersValue.get(FilterKey.DESCRIPTION),
owner: filtersValue.get(FilterKey.OWNER),
},
paginationQuery,
toSortByQuery(sortByQuery)
);
}, [filtersValue, paginationQuery, sortByQuery, fetchBusinessServices]);
refreshTable();
}, [filtersValue, paginationQuery, sortByQuery, refreshTable]);

const columns: ICell[] = [
{ title: t("terms.name"), transforms: [sortable, cellWidth(25)] },
Expand Down
Loading