fix: onApply data is updated (#1655)

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,15 +1,30 @@
 import { Button, Input, notification } from 'antd';
 import FormItem from 'antd/lib/form/FormItem';
+import getFeaturesFlags from 'api/features/getFeatureFlags';
 import apply from 'api/licenses/apply';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { QueryObserverResult, RefetchOptions, useQuery } from 'react-query';
+import { useDispatch } from 'react-redux';
+import { Dispatch } from 'redux';
+import { AppAction, UPDATE_FEATURE_FLAGS } from 'types/actions/app';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps } from 'types/api/licenses/getAll';
 
-import { ApplyForm, ApplyFormContainer, LicenseInput } from './applyFormStyles';
+import { ApplyForm, ApplyFormContainer, LicenseInput } from './styles';
 
-function ApplyLicenseForm(): JSX.Element {
+function ApplyLicenseForm({
+	licenseRefetch,
+}: ApplyLicenseFormProps): JSX.Element {
 	const { t } = useTranslation(['licenses']);
 	const [key, setKey] = useState('');
 	const [loading, setLoading] = useState(false);
+	const dispatch = useDispatch<Dispatch<AppAction>>();
+	const { refetch } = useQuery({
+		queryFn: getFeaturesFlags,
+		queryKey: 'getFeatureFlags',
+		enabled: false,
+	});
 
 	const onFinish = async (values: unknown | { key: string }): Promise<void> => {
 		const params = values as { key: string };
@@ -28,6 +43,16 @@ function ApplyLicenseForm(): JSX.Element {
 			});
 
 			if (response.statusCode === 200) {
+				const [featureFlagsResponse] = await Promise.all([
+					refetch(),
+					licenseRefetch(),
+				]);
+				if (featureFlagsResponse.data?.payload) {
+					dispatch({
+						type: UPDATE_FEATURE_FLAGS,
+						payload: featureFlagsResponse.data.payload,
+					});
+				}
 				notification.success({
 					message: 'Success',
 					description: t('license_applied'),
@@ -74,4 +99,12 @@ function ApplyLicenseForm(): JSX.Element {
 	);
 }
 
+interface ApplyLicenseFormProps {
+	licenseRefetch: (
+		options?: RefetchOptions,
+	) => Promise<
+		QueryObserverResult<SuccessResponse<PayloadProps> | ErrorResponse, unknown>
+	>;
+}
+
 export default ApplyLicenseForm;

frontend/src/container/Licenses/ListLicenses.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import React from 'react';

frontend/src/container/Licenses/index.tsx

@@ -1,9 +1,9 @@
 import { Tabs, Typography } from 'antd';
 import getAll from 'api/licenses/getAll';
 import Spinner from 'components/Spinner';
-import useFetch from 'hooks/useFetch';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
 
 import ApplyLicenseForm from './ApplyLicenseForm';
 import ListLicenses from './ListLicenses';
@@ -12,29 +12,31 @@ const { TabPane } = Tabs;
 
 function Licenses(): JSX.Element {
 	const { t } = useTranslation(['licenses']);
-	const { loading, payload, error, errorMessage } = useFetch(getAll);
+	const { data, isError, isLoading, refetch } = useQuery({
+		queryFn: getAll,
+		queryKey: 'getAllLicenses',
+	});
 
-	if (error) {
+	if (isError || data?.error) {
-		return <Typography>{errorMessage}</Typography>;
+		return <Typography>{data?.error}</Typography>;
 	}
 
-	if (loading || payload === undefined) {
+	if (isLoading || data?.payload === undefined) {
 		return <Spinner tip={t('loading_licenses')} height="90vh" />;
 	}
 
+	const allValidLicense =
+		data?.payload?.filter((license) => license.isCurrent) || [];
+
 	return (
 		<Tabs destroyInactiveTabPane defaultActiveKey="licenses">
 			<TabPane tabKey="licenses" tab={t('tab_current_license')} key="licenses">
-				<ApplyLicenseForm />
+				<ApplyLicenseForm licenseRefetch={refetch} />
-				<ListLicenses
+				<ListLicenses licenses={allValidLicense} />
-					licenses={payload ? payload.filter((l) => l.isCurrent === true) : []}
-				/>
 			</TabPane>
 
 			<TabPane tabKey="history" tab={t('tab_license_history')} key="history">
-				<ListLicenses
+				<ListLicenses licenses={allValidLicense} />
-					licenses={payload ? payload.filter((l) => l.isCurrent === false) : []}
-				/>
 			</TabPane>
 		</Tabs>
 	);