fix: remove redux

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -5,18 +5,16 @@ import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CheckCircle2, HandPlatter } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import AppReducer from 'types/reducer/app';
 
 export default function WaitlistFragment({
 	entityType,
 }: {
 	entityType: string;
 }): JSX.Element {
-	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { user } = useAppContext();
 	const { t } = useTranslation(['infraMonitoring']);
 	const { notifications } = useNotifications();
 

frontend/src/components/NotFound/index.tsx

@@ -1,31 +1,10 @@
-import getLocalStorageKey from 'api/browser/localstorage/get';
 import NotFoundImage from 'assets/NotFound';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import { Dispatch } from 'redux';
-import AppActions from 'types/actions';
-import { LOGGED_IN } from 'types/actions/app';
 
 import { defaultText } from './constant';
 import { Button, Container, Text, TextContainer } from './styles';
 
 function NotFound({ text = defaultText }: Props): JSX.Element {
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-	const isLoggedIn = getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN);
-
-	const onClickHandler = useCallback(() => {
-		if (isLoggedIn) {
-			dispatch({
-				type: LOGGED_IN,
-				payload: {
-					isLoggedIn: true,
-				},
-			});
-		}
-	}, [dispatch, isLoggedIn]);
-
 	return (
 		<Container>
 			<NotFoundImage />
@@ -35,7 +14,7 @@ function NotFound({ text = defaultText }: Props): JSX.Element {
 				<Text>Page Not Found</Text>
 			</TextContainer>
 
-			<Button onClick={onClickHandler} to={ROUTES.APPLICATION} tabIndex={0}>
+			<Button to={ROUTES.APPLICATION} tabIndex={0}>
 				Return To Services Page
 			</Button>
 		</Container>

frontend/src/components/ReleaseNote/Releases/ReleaseNote0120.tsx

@@ -1,21 +1,20 @@
 import { Button, Space } from 'antd';
 import setFlags from 'api/user/setFlags';
 import MessageTip from 'components/MessageTip';
+import { useAppContext } from 'providers/App/App';
 import { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Dispatch } from 'redux';
-import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_USER_FLAG } from 'types/actions/app';
 import { UserFlags } from 'types/api/user/setFlags';
-import AppReducer from 'types/reducer/app';
 
 import ReleaseNoteProps from '../ReleaseNoteProps';
 
 export default function ReleaseNote0120({
 	release,
 }: ReleaseNoteProps): JSX.Element | null {
-	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { user } = useAppContext();
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
@@ -34,7 +33,7 @@ export default function ReleaseNote0120({
 				return;
 			}
 
-			const response = await setFlags({ userId: user?.userId, flags });
+			const response = await setFlags({ userId: user.id, flags });
 
 			if (response.statusCode !== 200) {
 				console.log('failed to complete do not show status', response.error);

frontend/src/components/ReleaseNote/index.tsx

@@ -1,6 +1,7 @@
 import ReleaseNoteProps from 'components/ReleaseNote/ReleaseNoteProps';
 import ReleaseNote0120 from 'components/ReleaseNote/Releases/ReleaseNote0120';
 import ROUTES from 'constants/routes';
+import { useAppContext } from 'providers/App/App';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { UserFlags } from 'types/api/user/setFlags';
@@ -44,12 +45,13 @@ const allComponentMap: ComponentMapType[] = [
 // ReleaseNote prints release specific warnings and notes that
 // user needs to be aware of before using the upgraded version.
 function ReleaseNote({ path }: ReleaseNoteProps): JSX.Element | null {
-	const { userFlags, currentVersion } = useSelector<AppState, AppReducer>(
+	const { user } = useAppContext();
+	const { currentVersion } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
 
 	const c = allComponentMap.find((item) =>
-		item.match(path, currentVersion, userFlags),
+		item.match(path, currentVersion, user.flags),
 	);
 
 	if (!c) {

frontend/src/container/APIKeys/APIKeys.tsx

@@ -44,14 +44,12 @@ import {
 	View,
 	X,
 } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
 import { ChangeEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
-import { useSelector } from 'react-redux';
 import { useCopyToClipboard } from 'react-use';
-import { AppState } from 'store/reducers';
 import { APIKeyProps } from 'types/api/pat/types';
-import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 
 export const showErrorNotification = (
@@ -99,7 +97,7 @@ export const getDateDifference = (
 };
 
 function APIKeys(): JSX.Element {
-	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { user } = useAppContext();
 	const { notifications } = useNotifications();
 	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 	const [isAddModalOpen, setIsAddModalOpen] = useState(false);

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -6,22 +6,20 @@ import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
+import { useAppContext } from 'providers/App/App';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
-import { AppState } from 'store/reducers';
 import { Channels, PayloadProps } from 'types/api/channels/getAll';
-import AppReducer from 'types/reducer/app';
 
 import Delete from './Delete';
 
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
 	const { notifications } = useNotifications();
 	const [channels, setChannels] = useState<Channels[]>(allChannels);
-	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
-	const [action] = useComponentPermission(['new_alert_action'], role);
+	const { user } = useAppContext();
+	const [action] = useComponentPermission(['new_alert_action'], user.role);
 
 	const onClickEditHandler = useCallback((id: string) => {
 		history.replace(

frontend/src/container/AllAlertChannels/index.tsx

@@ -9,11 +9,9 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import { isUndefined } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import AppReducer from 'types/reducer/app';
 
 import AlertChannelsComponent from './AlertChannels';
 import { Button, ButtonContainer, RightActionContainer } from './styles';
@@ -22,10 +20,10 @@ const { Paragraph } = Typography;
 
 function AlertChannels(): JSX.Element {
 	const { t } = useTranslation(['channels']);
-	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { user } = useAppContext();
 	const [addNewChannelPermission] = useComponentPermission(
 		['add_new_channel'],
-		role,
+		user.role,
 	);
 	const onToggleHandler = useCallback(() => {
 		history.push(ROUTES.CHANNELS_NEW);

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -24,18 +24,15 @@ import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import useAxiosError from 'hooks/useAxiosError';
-import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { License } from 'types/api/licenses/def';
-import AppReducer from 'types/reducer/app';
 import { isCloudUser } from 'utils/app';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
@@ -137,9 +134,13 @@ export default function BillingContainer(): JSX.Element {
 		Partial<UsageResponsePayloadProps>
 	>({});
 
-	const { isFetching, data: licensesData, error: licenseError } = useLicense();
-
-	const { user, org } = useSelector<AppState, AppReducer>((state) => state.app);
+	const {
+		user,
+		org,
+		licenses,
+		isFetchingLicenses,
+		licensesFetchError,
+	} = useAppContext();
 	const { notifications } = useNotifications();
 
 	const handleError = useAxiosError();
@@ -181,7 +182,7 @@ export default function BillingContainer(): JSX.Element {
 
 			setData(formattedUsageData);
 
-			if (!licensesData?.payload?.onTrial) {
+			if (!licenses?.onTrial) {
 				const remainingDays = getRemainingDays(billingPeriodEnd) - 1;
 
 				setHeaderText(
@@ -195,14 +196,14 @@ export default function BillingContainer(): JSX.Element {
 
 			setApiResponse(data?.payload || {});
 		},
-		[licensesData?.payload?.onTrial],
+		[licenses?.onTrial],
 	);
 
 	const isSubscriptionPastDue =
 		apiResponse.subscriptionStatus === SubscriptionStatus.PastDue;
 
 	const { isLoading, isFetching: isFetchingBillingData } = useQuery(
-		[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
+		[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.id],
 		{
 			queryFn: () => getUsage(activeLicense?.key || ''),
 			onError: handleError,
@@ -213,25 +214,29 @@ export default function BillingContainer(): JSX.Element {
 
 	useEffect(() => {
 		const activeValidLicense =
-			licensesData?.payload?.licenses?.find(
-				(license) => license.isCurrent === true,
-			) || null;
+			licenses?.licenses?.find((license) => license.isCurrent === true) || null;
 
 		setActiveLicense(activeValidLicense);
 
-		if (!isFetching && licensesData?.payload?.onTrial && !licenseError) {
-			const remainingDays = getRemainingDays(licensesData?.payload?.trialEnd);
+		if (!isFetchingLicenses && licenses?.onTrial && !licensesFetchError) {
+			const remainingDays = getRemainingDays(licenses?.trialEnd);
 
 			setIsFreeTrial(true);
 			setBillAmount(0);
 			setDaysRemaining(remainingDays > 0 ? remainingDays : 0);
 			setHeaderText(
 				`You are in free trial period. Your free trial will end on ${getFormattedDate(
-					licensesData?.payload?.trialEnd,
+					licenses?.trialEnd,
 				)}`,
 			);
 		}
-	}, [isFetching, licensesData?.payload, licenseError]);
+	}, [
+		licenses?.licenses,
+		licenses?.onTrial,
+		licenses?.trialEnd,
+		isFetchingLicenses,
+		licensesFetchError,
+	]);
 
 	const columns: ColumnsType<DataType> = [
 		{
@@ -313,7 +318,7 @@ export default function BillingContainer(): JSX.Element {
 	});
 
 	const handleBilling = useCallback(async () => {
-		if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) {
+		if (isFreeTrial && !licenses?.trialConvertedToSubscription) {
 			logEvent('Billing : Upgrade Plan', {
 				user: pick(user, ['email', 'userId', 'name']),
 				org,
@@ -340,7 +345,7 @@ export default function BillingContainer(): JSX.Element {
 	}, [
 		activeLicense?.key,
 		isFreeTrial,
-		licensesData?.payload?.trialConvertedToSubscription,
+		licenses?.trialConvertedToSubscription,
 		manageCreditCard,
 		updateCreditCard,
 	]);
@@ -452,22 +457,21 @@ export default function BillingContainer(): JSX.Element {
 							disabled={isLoading}
 							onClick={handleBilling}
 						>
-							{isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription
+							{isFreeTrial && !licenses?.trialConvertedToSubscription
 								? t('upgrade_plan')
 								: t('manage_billing')}
 						</Button>
 					</Flex>
 				</Flex>
 
-				{licensesData?.payload?.onTrial &&
-					licensesData?.payload?.trialConvertedToSubscription && (
-						<Typography.Text
-							ellipsis
-							style={{ fontWeight: '300', color: '#49aa19', fontSize: 12 }}
-						>
-							{t('card_details_recieved_and_billing_info')}
-						</Typography.Text>
-					)}
+				{licenses?.onTrial && licenses?.trialConvertedToSubscription && (
+					<Typography.Text
+						ellipsis
+						style={{ fontWeight: '300', color: '#49aa19', fontSize: 12 }}
+					>
+						{t('card_details_recieved_and_billing_info')}
+					</Typography.Text>
+				)}
 
 				{!isLoading && !isFetchingBillingData ? (
 					headerText && (
@@ -510,7 +514,7 @@ export default function BillingContainer(): JSX.Element {
 				{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
 			</div>
 
-			{isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription && (
+			{isFreeTrial && !licenses?.trialConvertedToSubscription && (
 				<div className="upgrade-plan-benefits">
 					<Row
 						justify="space-between"

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -2,7 +2,7 @@ import { Row, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { FeatureKeys } from 'constants/features';
-import useFeatureFlags from 'hooks/useFeatureFlag';
+import { useAppContext } from 'providers/App/App';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -13,9 +13,11 @@ import { OptionType } from './types';
 
 function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 	const { t } = useTranslation(['alerts']);
+	const { featureFlags } = useAppContext();
 
 	const isAnomalyDetectionEnabled =
-		useFeatureFlags(FeatureKeys.ANOMALY_DETECTION)?.active || false;
+		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
+			?.active || false;
 
 	const optionList = getOptionList(t, isAnomalyDetectionEnabled);