chore(refactor): Signup app layout (#969)

* feat: useFetch is upgraded to useFetchQueries

* chore: en-gb and common.json is updated over public locale

frontend/public/locales/en-GB/common.json

@@ -0,0 +1,3 @@
+{
+	"something_went_wrong": "Something went wrong"
+}

frontend/public/locales/en-GB/translation.json

@@ -0,0 +1,27 @@
+{
+	"monitor_signup": "Monitor your applications. Find what is causing issues.",
+	"version": "Version",
+	"latest_version": "Latest version",
+	"current_version": "Current version",
+	"release_notes": "Release Notes",
+	"read_how_to_upgrade": "Read instructions on how to upgrade",
+	"latest_version_signoz": "You are running the latest version of SigNoz.",
+	"stale_version": "You are on an older version and may be loosing on the latest features we have shipped. We recommend to upgrade to the latest version",
+	"oops_something_went_wrong_version": "Oops.. facing issues with fetching updated version information",
+	"n_a": "N/A",
+	"routes": {
+		"general": "General",
+		"alert_channels": "Alert Channels"
+	},
+	"settings": {
+		"total_retention_period": "Total Retention Period",
+		"move_to_s3": "Move to S3\n(should be lower than total retention period)",
+		"retention_success_message": "Congrats. The retention periods for {{name}} has been updated successfully.",
+		"retention_error_message": "There was an issue in changing the retention period for {{name}}. Please try again or reach out to support@signoz.io",
+		"retention_failed_message": "There was an issue in changing the retention period. Please try again or reach out to support@signoz.io",
+		"retention_comparison_error": "Total retention period for {{name}} can’t be lower or equal to the period after which data is moved to s3.",
+		"retention_null_value_error": "Retention Period for {{name}} is not set yet. Please set by choosing below",
+		"retention_confirmation": "Are you sure you want to change the retention period?",
+		"retention_confirmation_description": "This will change the amount of storage needed for saving metrics & traces."
+	}
+}

frontend/public/locales/en/common.json

@@ -0,0 +1,3 @@
+{
+	"something_went_wrong": "Something went wrong"
+}

frontend/src/container/AppLayout/index.tsx

@@ -1,13 +1,13 @@
 import { notification } from 'antd';
-import getLatestVersion from 'api/user/getLatestVersion';
-import getVersion from 'api/user/getVersion';
+import getUserLatestVersion from 'api/user/getLatestVersion';
+import getUserVersion from 'api/user/getVersion';
 import ROUTES from 'constants/routes';
 import TopNav from 'container/Header';
 import SideNav from 'container/SideNav';
-import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQueries } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
@@ -30,15 +30,28 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const [isSignUpPage, setIsSignUpPage] = useState(ROUTES.SIGN_UP === pathname);
 
-	const { payload: versionPayload, loading, error: getVersionError } = useFetch(
-		getVersion,
-	);
+	const [getUserVersionResponse, getUserLatestVersionResponse] = useQueries([
+		{
+			queryFn: getUserVersion,
+			queryKey: 'getUserVersion',
+			enabled: isLoggedIn,
+		},
+		{
+			queryFn: getUserLatestVersion,
+			queryKey: 'getUserLatestVersion',
+			enabled: isLoggedIn,
+		},
+	]);
 
-	const {
-		payload: latestVersionPayload,
-		loading: latestLoading,
-		error: latestError,
-	} = useFetch(getLatestVersion);
+	useEffect(() => {
+		if (getUserLatestVersionResponse.status === 'idle' && isLoggedIn) {
+			getUserLatestVersionResponse.refetch();
+		}
+
+		if (getUserVersionResponse.status === 'idle' && isLoggedIn) {
+			getUserVersionResponse.refetch();
+		}
+	}, [getUserLatestVersionResponse, getUserVersionResponse, isLoggedIn]);
 
 	const { children } = props;
 
@@ -61,7 +74,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			history.push(ROUTES.APPLICATION);
 		}
 
-		if (!latestLoading && latestError && latestCurrentCounter.current === 0) {
+		if (
+			getUserLatestVersionResponse.isFetched &&
+			getUserLatestVersionResponse.isError &&
+			latestCurrentCounter.current === 0
+		) {
 			latestCurrentCounter.current = 1;
 
 			dispatch({
@@ -75,7 +92,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			});
 		}
 
-		if (!loading && getVersionError && latestVersionCounter.current === 0) {
+		if (
+			getUserVersionResponse.isFetched &&
+			getUserVersionResponse.isError &&
+			latestVersionCounter.current === 0
+		) {
 			latestVersionCounter.current = 1;
 
 			dispatch({
@@ -89,34 +110,47 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			});
 		}
 
-		if (!latestLoading && versionPayload) {
+		if (
+			getUserVersionResponse.isFetched &&
+			getUserLatestVersionResponse.isSuccess &&
+			getUserVersionResponse.data &&
+			getUserVersionResponse.data.payload
+		) {
 			dispatch({
 				type: UPDATE_CURRENT_VERSION,
 				payload: {
-					currentVersion: versionPayload.version,
+					currentVersion: getUserVersionResponse.data.payload.version,
 				},
 			});
 		}
 
-		if (!loading && latestVersionPayload) {
+		if (
+			getUserLatestVersionResponse.isFetched &&
+			getUserLatestVersionResponse.isSuccess &&
+			getUserLatestVersionResponse.data &&
+			getUserLatestVersionResponse.data.payload
+		) {
 			dispatch({
 				type: UPDATE_LATEST_VERSION,
 				payload: {
-					latestVersion: latestVersionPayload.name,
+					latestVersion: getUserLatestVersionResponse.data.payload.name,
 				},
 			});
 		}
 	}, [
 		dispatch,
-		loading,
-		latestLoading,
-		versionPayload,
-		latestVersionPayload,
 		isLoggedIn,
 		pathname,
-		getVersionError,
-		latestError,
 		t,
+		getUserLatestVersionResponse.isLoading,
+		getUserLatestVersionResponse.isError,
+		getUserLatestVersionResponse.data,
+		getUserVersionResponse.isLoading,
+		getUserVersionResponse.isError,
+		getUserVersionResponse.data,
+		getUserLatestVersionResponse.isFetched,
+		getUserVersionResponse.isFetched,
+		getUserLatestVersionResponse.isSuccess,
 	]);
 
 	return (

frontend/src/pages/SignUp/index.tsx

@@ -1,41 +1,58 @@
 import { Typography } from 'antd';
-import getPreference from 'api/user/getPreference';
-import getVersion from 'api/user/getVersion';
+import getUserPreference from 'api/user/getPreference';
+import getUserVersion from 'api/user/getVersion';
 import Spinner from 'components/Spinner';
-import useFetch from 'hooks/useFetch';
 import React from 'react';
-import { PayloadProps as UserPrefPayload } from 'types/api/user/getUserPreference';
-import { PayloadProps as VersionPayload } from 'types/api/user/getVersion';
+import { useTranslation } from 'react-i18next';
+import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
 
 import SignUpComponent from './SignUp';
 
 function SignUp(): JSX.Element {
-	const versionResponse = useFetch<VersionPayload, undefined>(getVersion);
+	const { t } = useTranslation('common');
+	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
 
-	const userPrefResponse = useFetch<UserPrefPayload, undefined>(getPreference);
+	const [versionResponse, userPrefResponse] = useQueries([
+		{
+			queryFn: getUserVersion,
+			queryKey: 'getUserVersion',
+			enabled: !isLoggedIn,
+		},
+		{
+			queryFn: getUserPreference,
+			queryKey: 'getUserPreference',
+			enabled: !isLoggedIn,
+		},
+	]);
 
-	if (versionResponse.error || userPrefResponse.error) {
+	if (
+		versionResponse.status === 'error' ||
+		userPrefResponse.status === 'error'
+	) {
 		return (
 			<Typography>
-				{versionResponse.errorMessage ||
-					userPrefResponse.errorMessage ||
-					'Somehthing went wrong'}
+				{versionResponse.data?.error ||
+					userPrefResponse.data?.error ||
+					t('something_went_wrong')}
 			</Typography>
 		);
 	}
 
 	if (
-		versionResponse.loading ||
-		versionResponse.payload === undefined ||
-		userPrefResponse.loading ||
-		userPrefResponse.payload === undefined
+		versionResponse.status === 'loading' ||
+		userPrefResponse.status === 'loading' ||
+		!(versionResponse.data && versionResponse.data.payload) ||
+		!(userPrefResponse.data && userPrefResponse.data.payload)
 	) {
-		return <Spinner tip="Loading.." />;
+		return <Spinner tip="Loading..." />;
 	}
 
-	const { version } = versionResponse.payload;
+	const { version } = versionResponse.data.payload;
 
-	const userpref = userPrefResponse.payload;
+	const userpref = userPrefResponse.data.payload;
 
 	return <SignUpComponent userpref={userpref} version={version} />;
 }