Merge pull request #152 from devtron-labs/chore/user-email-provider

chore: replace getLoginInfo with useUserEmail

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.87",
+    "version": "0.0.88",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -194,19 +194,6 @@ export function getCookie(sKey) {
     )
 }
 
-export function getLoginInfo() {
-    const argocdToken = getCookie(TOKEN_COOKIE_NAME)
-    if (argocdToken) {
-        const jwts = argocdToken.split('.')
-        try {
-            return JSON.parse(atob(jwts[1]))
-        } catch (err) {
-            console.error('error in setting user ', err)
-            return null
-        }
-    }
-}
-
 export function useForm(stateSchema, validationSchema = {}, callback) {
     const [state, setState] = useState(stateSchema)
     const [disable, setDisable] = useState(true)

src/Common/Helper.tsx

@@ -18,7 +18,7 @@ import { useEffect, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import './pageHeader.css'
 import ReactGA from 'react-ga4'
-import { getLoginInfo, getRandomColor } from '../../../Common'
+import { getRandomColor } from '../../../Common'
 import LogoutCard from '../LogoutCard'
 import { setActionWithExpiry, handlePostHogEventUpdate } from './utils'
 import { InstallationType, ServerInfo, PageHeaderType } from './types'
@@ -30,7 +30,7 @@ import { ReactComponent as Question } from '../../../Assets/Icon/ic-help-outline
 import { ReactComponent as Close } from '../../../Assets/Icon/ic-close.svg'
 import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
 import AnnouncementBanner from '../AnnouncementBanner/AnnouncementBanner'
-import { useMainContext } from '../../Providers'
+import { useMainContext, useUserEmail } from '../../Providers'
 import { InfoIconTippy } from '../InfoIconTippy'
 
 const PageHeader = ({
@@ -53,8 +53,7 @@ const PageHeader = ({
         tippyProps || {}
     const [showHelpCard, setShowHelpCard] = useState(false)
     const [showLogOutCard, setShowLogOutCard] = useState(false)
-    const loginInfo = getLoginInfo()
-    const email: string = loginInfo ? loginInfo.email || loginInfo.sub : ''
+    const { email } = useUserEmail()
     const [currentServerInfo, setCurrentServerInfo] = useState<{ serverInfo: ServerInfo; fetchingServerInfo: boolean }>(
         {
             serverInfo: undefined,

src/Shared/Components/Header/PageHeader.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useMemo, useState } from 'react'
+import { UseUserEmailContextType } from './types'
+
+const context = createContext<UseUserEmailContextType>(null)
+
+export const useUserEmail = () => useContext(context)
+
+export const UserEmailProvider: React.FC<{}> = ({ children }) => {
+    const [email, setEmail] = useState<string>('')
+
+    const providerValue = useMemo(
+        () => ({
+            email,
+            setEmail,
+        }),
+        [email],
+    )
+
+    return <context.Provider value={providerValue}>{children}</context.Provider>
+}
+
+// For using the provider in class based components
+export const withUserEmail = (Component: React.ComponentClass) => (props: object) => {
+    const { email, setEmail } = useUserEmail()
+    return <Component {...{ ...props, email, setEmail }} />
+}

src/Shared/Providers/UserEmailProvider/UserEmailProvider.tsx

@@ -0,0 +1,2 @@
+export * from './UserEmailProvider'
+export * from './types'

src/Shared/Providers/UserEmailProvider/index.ts

@@ -0,0 +1,4 @@
+export interface UseUserEmailContextType {
+    email: string
+    setEmail: React.Dispatch<React.SetStateAction<string>>
+}

src/Shared/Providers/UserEmailProvider/types.ts

@@ -16,3 +16,4 @@
 
 export * from './MainContextProvider'
 export * from './ImageSelectionUtility'
+export * from './UserEmailProvider'