From 5099fa6d24b9e4cc4ba89f9b4fd627e5aa617e00 Mon Sep 17 00:00:00 2001 From: Nabhag8848 Date: Wed, 15 May 2024 18:27:15 +0530 Subject: [PATCH] refactor: created AccountProvider and useEnvironment --- .../client/src/context/AccountProvider.tsx | 54 +++++++++++++ .../client/src/home/environmentSelector.tsx | 10 ++- packages/client/src/home/index.tsx | 75 ++++++------------- packages/client/src/home/navbar.tsx | 13 ++-- packages/client/src/hooks/index.ts | 1 + packages/client/src/hooks/useEnvironment.tsx | 17 +++++ packages/client/src/layout/AppLayout.tsx | 5 +- 7 files changed, 109 insertions(+), 66 deletions(-) create mode 100644 packages/client/src/context/AccountProvider.tsx create mode 100644 packages/client/src/hooks/index.ts create mode 100644 packages/client/src/hooks/useEnvironment.tsx diff --git a/packages/client/src/context/AccountProvider.tsx b/packages/client/src/context/AccountProvider.tsx new file mode 100644 index 00000000..9dac3791 --- /dev/null +++ b/packages/client/src/context/AccountProvider.tsx @@ -0,0 +1,54 @@ +import React, { ReactNode, createContext, useContext, useEffect, useState } from 'react'; +import * as Sentry from '@sentry/react'; +import { useUser } from '@clerk/clerk-react'; +import { useEnvironment } from '../hooks'; +import { DEFAULT_ENV, REVERT_BASE_API_URL } from '../constants'; + +const AccountContext = createContext({}); + +interface Props { + children?: ReactNode; +} + +export function AccountProvider({ children }: Props) { + const [account, setAccount] = useState(); + const { user, isLoaded, isSignedIn } = useUser(); + const { setEnvironment } = useEnvironment(); + + useEffect(() => { + if (isLoaded && isSignedIn) { + const headers = new Headers(); + headers.append('Content-Type', 'application/json'); + + const data = JSON.stringify({ + userId: user.id, + }); + + const requestOptions = { + method: 'POST', + body: data, + headers: headers, + }; + fetch(`${REVERT_BASE_API_URL}/internal/account`, requestOptions) + .then((response) => response.json()) + .then((result) => { + setAccount(result?.account); + const environments: string[] = result?.account?.environments?.map((env) => env.env) || []; + setEnvironment(environments?.[0] || DEFAULT_ENV); + }) + .catch((error) => { + Sentry.captureException(error); + console.error('error', error); + }); + } + }, [account, isLoaded, isSignedIn, setEnvironment, user?.id]); + + return {children}; +} + +export function useAccount() { + const context = useContext(AccountContext); + if (context === undefined) throw new Error('Context was used out of Provider'); + + return context; +} diff --git a/packages/client/src/home/environmentSelector.tsx b/packages/client/src/home/environmentSelector.tsx index 54e0928a..3421a54e 100644 --- a/packages/client/src/home/environmentSelector.tsx +++ b/packages/client/src/home/environmentSelector.tsx @@ -2,11 +2,14 @@ import * as React from 'react'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import Select, { SelectChangeEvent } from '@mui/material/Select'; +import { useEnvironment } from '../hooks'; + +export default function EnvironmentSelector({ environmentList }) { + const { environment, setEnvironment } = useEnvironment(); -export default function EnvironmentSelector({ environmentProp, setEnvironmentProp, environmentList }) { const handleChange = (event: SelectChangeEvent) => { event.preventDefault(); - setEnvironmentProp(event.target.value); + setEnvironment(event.target.value); }; const anchorRef = React.useRef(null); return ( @@ -18,8 +21,7 @@ export default function EnvironmentSelector({ environmentProp, setEnvironmentPro }} labelId="environment-selector" id="environment-selector" - value={environmentProp} - defaultValue={environmentProp} + value={environment} onChange={handleChange} SelectDisplayProps={{ style: { diff --git a/packages/client/src/home/index.tsx b/packages/client/src/home/index.tsx index d346db56..40666a13 100644 --- a/packages/client/src/home/index.tsx +++ b/packages/client/src/home/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useMemo } from 'react'; import Navbar from './navbar'; import ApiKeys from './apiKeys'; import Analytics from './analytics'; @@ -6,9 +6,8 @@ import Analytics from './analytics'; import Onboarding from './onboarding'; import Integrations from './integrations'; import { useUser } from '@clerk/clerk-react'; -import { REVERT_BASE_API_URL, DEFAULT_ENV } from '../constants'; -import * as Sentry from '@sentry/react'; import Sidebar from '../ui/Sidebar'; +import { useEnvironment } from '../hooks'; declare global { interface Window { @@ -27,56 +26,31 @@ const renderTab = (tabValue: number, handleChange, environment) => { return ; } else return undefined; }; -const getInitialEnvironment = () => { - var selectedOption = localStorage.getItem('revert_environment_selected') || DEFAULT_ENV; - - return selectedOption; -}; const Home = () => { const [tabValue, setTabValue] = React.useState(0); - const [account, setAccount] = React.useState(); - const [environment, setEnvironment] = React.useState(getInitialEnvironment()); - const user = useUser(); + const { environment } = useEnvironment(); + const { user } = useUser(); - const setSelectedEnvironment = (option) => { - localStorage.setItem('revert_environment_selected', option); - setEnvironment(option); - }; - useEffect(() => { - if (window.Intercom) { - window.Intercom('boot', { + const IntercomParams = useMemo( + function () { + return { api_base: 'https://api-iam.intercom.io', app_id: process.env.REACT_APP_INTERCOM_APP_ID, - user_id: user.user?.id, // - name: user.user?.fullName, // Full name - email: user.user?.emailAddresses[0].emailAddress, // Email address - created_at: user.user?.createdAt, // Signup date as a Unix timestamp - }); - } - const headers = new Headers(); - headers.append('Content-Type', 'application/json'); + user_id: user?.id, // + name: user?.fullName, // Full name + email: user?.emailAddresses[0].emailAddress, // Email address + created_at: user?.createdAt, // Signup date as a Unix timestamp + }; + }, + [user] + ); - const data = JSON.stringify({ - userId: user.user?.id, - }); - const requestOptions = { - method: 'POST', - body: data, - headers: headers, - }; - fetch(`${REVERT_BASE_API_URL}/internal/account`, requestOptions) - .then((response) => response.json()) - .then((result) => { - setAccount(result?.account); - const environments: string[] = result?.account?.environments?.map((env) => env.env) || []; - setSelectedEnvironment(environments?.[0] || DEFAULT_ENV); - }) - .catch((error) => { - Sentry.captureException(error); - console.error('error', error); - }); - }, [user.user?.id]); + useEffect(() => { + if (window.Intercom) { + window.Intercom('boot', IntercomParams); + } + }, [IntercomParams]); const handleChange = (newTabValue: number) => { setTabValue(newTabValue); @@ -87,14 +61,7 @@ const Home = () => { return ( <> - { - setEnvironment(env); - }} - environmentList={account?.environments} - /> +
{renderTab(tabValue, handleChange, environment)} diff --git a/packages/client/src/home/navbar.tsx b/packages/client/src/home/navbar.tsx index 14b86151..74f0223c 100644 --- a/packages/client/src/home/navbar.tsx +++ b/packages/client/src/home/navbar.tsx @@ -5,20 +5,19 @@ import { Link } from 'react-router-dom'; import QuizIcon from '@mui/icons-material/Quiz'; import EnvironmentSelector from './environmentSelector'; import GitHubButton from 'react-github-btn'; +import { useAccount } from '../context/AccountProvider'; + +const Navbar = () => { + const { account } = useAccount(); -const Navbar = ({ workspaceName, environment, setEnvironment, environmentList }) => { return (