From 60288f7ba030c5d8736b5086a0dc328de5e25f6e Mon Sep 17 00:00:00 2001 From: palash-signoz Date: Fri, 8 Apr 2022 13:49:33 +0530 Subject: [PATCH] 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 | 3 + .../public/locales/en-GB/translation.json | 27 +++++++ frontend/public/locales/en/common.json | 3 + frontend/src/container/AppLayout/index.tsx | 80 +++++++++++++------ frontend/src/pages/SignUp/index.tsx | 53 +++++++----- 5 files changed, 125 insertions(+), 41 deletions(-) create mode 100644 frontend/public/locales/en-GB/common.json create mode 100644 frontend/public/locales/en-GB/translation.json create mode 100644 frontend/public/locales/en/common.json diff --git a/frontend/public/locales/en-GB/common.json b/frontend/public/locales/en-GB/common.json new file mode 100644 index 0000000000..c17e7e73dd --- /dev/null +++ b/frontend/public/locales/en-GB/common.json @@ -0,0 +1,3 @@ +{ + "something_went_wrong": "Something went wrong" +} diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json new file mode 100644 index 0000000000..23330080e6 --- /dev/null +++ b/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." + } +} diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json new file mode 100644 index 0000000000..c17e7e73dd --- /dev/null +++ b/frontend/public/locales/en/common.json @@ -0,0 +1,3 @@ +{ + "something_went_wrong": "Something went wrong" +} diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx index 1fa47522c5..98910c60c5 100644 --- a/frontend/src/container/AppLayout/index.tsx +++ b/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 ( diff --git a/frontend/src/pages/SignUp/index.tsx b/frontend/src/pages/SignUp/index.tsx index 1bf16285a4..2518567adc 100644 --- a/frontend/src/pages/SignUp/index.tsx +++ b/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(getVersion); + const { t } = useTranslation('common'); + const { isLoggedIn } = useSelector((state) => state.app); - const userPrefResponse = useFetch(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 ( - {versionResponse.errorMessage || - userPrefResponse.errorMessage || - 'Somehthing went wrong'} + {versionResponse.data?.error || + userPrefResponse.data?.error || + t('something_went_wrong')} ); } 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 ; + return ; } - const { version } = versionResponse.payload; + const { version } = versionResponse.data.payload; - const userpref = userPrefResponse.payload; + const userpref = userPrefResponse.data.payload; return ; }