Clean up env provider hooks and make react happy

openstax · Nov 7, 2023 · d57db3e · d57db3e
1 parent 6729ee6
commit d57db3e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 29 deletions.
diff --git a/frontend/src/components/incorrect-user.tsx b/frontend/src/components/incorrect-user.tsx
@@ -1,19 +1,19 @@
 import { React } from '@common'
 import { OXColoredStripe } from '@components'
-import { loginURL, useEnvironment } from '@lib'
+import { useLoginURL } from '@lib'
 
 export interface IncorrectUserProps {
     desiredRole?: string
 }
 export const IncorrectUser:React.FC<IncorrectUserProps> = ({ desiredRole }) => {
-    const env = useEnvironment()
+    const loginURL = useLoginURL()
 
     return (
         <div className="incorrect-user" data-testid="incorrect-user-panel">
             <OXColoredStripe />
             <div className="container mt-4">
                 <h1>Looks like you‘re not logged in{desiredRole ? ` as a ${desiredRole}` : ''}.</h1>
-                <p>Please <a data-testid="login-link" href={loginURL(env)}>log in</a> before using this site</p>
+                <p>Please <a data-testid="login-link" href={loginURL}>log in</a> before using this site</p>
             </div>
         </div>
     )

diff --git a/frontend/src/components/navbar/account-links.tsx b/frontend/src/components/navbar/account-links.tsx
@@ -1,4 +1,4 @@
-import { logoutURL, useCurrentUser, useEnvironment, useFetchEnvironment } from '@lib';
+import { useLogoutURL, useCurrentUser, useEnvironment, useFetchEnvironment } from '@lib';
 import { Menu } from '@mantine/core';
 import { logout } from '@models';
 import { React } from '@common';
@@ -9,6 +9,7 @@ export default function AccountLinks() {
     const env = useEnvironment()
     const { refetch } = useFetchEnvironment()
     const isAdminOrResearcher = user.isAdministrator || user.isResearcher
+    const logoutURL = useLogoutURL()
 
     return (
         <>
@@ -19,7 +20,7 @@ export default function AccountLinks() {
                 </Menu.Item>
             </StyledLink>
             {!env.isImpersonating &&
-                <StyledLink to={logoutURL(env)} onClick={() => {
+                <StyledLink to={logoutURL} onClick={() => {
                     logout().then(() => refetch())
                 }}>
                     <Menu.Item>

diff --git a/frontend/src/lib/environment-provider.tsx b/frontend/src/lib/environment-provider.tsx
@@ -1,10 +1,10 @@
 import { React } from '@common'
-import { UserInfo } from '@models'
 import { ErrorPage, IncorrectUser, LoadingAnimation } from '@components'
 import { ENV } from './env'
 import { useApi } from './api-config'
 import { useQuery } from 'react-query';
 import { Environment } from '@api'
+import { UserInfo } from '@models';
 
 export const EnvironmentContext = React.createContext<Environment | null>(null)
 
@@ -56,9 +56,11 @@ export const useCurrentResearcher = () => {
 }
 
 export const useUserInfo = () => {
-    const env = useEnvironment()
-    return useQuery('fetchUserInfo', () => {
-        return fetchUserInfo(env)
+    const accountsApiURL = useAccountsApiURL()
+
+    return useQuery('fetchUserInfo', async (): Promise<UserInfo> => {
+        const resp = await fetch(`${accountsApiURL}`, { credentials: 'include' })
+        return await resp.json()
     })
 }
 
@@ -70,37 +72,39 @@ export const useUserPreferences = () => {
     })
 }
 
-export const locationOrigin = (env: Environment) => {
+export const useLocationOrigin = () => {
+    const env = useEnvironment()
     if (env.accountsEnvName === 'production') {
         return `https://openstax.org`;
     }
     return `https://${env.accountsEnvName}.openstax.org`;
 }
 
-export const loginURL = (env: Environment) => {
-    const url = accountsUrl(env)
+export const useLoginURL = () => {
+    const url = useAccountsURL()
     if (ENV.IS_DEV_MODE) return url
 
     return `${url}/login/?r=${encodeURIComponent(window.location.href)}`
 }
 
-export const logoutURL = (env: Environment) => {
+export const useLogoutURL = () => {
+    const locationOrigin = useLocationOrigin()
+    const accountsURL = useAccountsURL()
     if (ENV.IS_DEV_MODE) return '/dev/user';
-    const homepage = encodeURIComponent(`${locationOrigin(env)}/kinetic`);
-    return `${accountsUrl(env)}/signout?r=${homepage}`;
+    const homepage = encodeURIComponent(`${locationOrigin}/kinetic`);
+    return `${accountsURL}/signout?r=${homepage}`;
 }
 
-export const accountsUrl = (env: Environment): string => {
+export const useAccountsURL = (): string => {
+    const locationOrigin = useLocationOrigin()
+
     if (ENV.IS_DEV_MODE) return '/dev/user'
-    return `${locationOrigin(env)}/accounts`;
+    return `${locationOrigin}/accounts`;
 }
 
-export const accountsApiUrl = (env: Environment): string => {
-    if (ENV.IS_DEV_MODE) return `${ENV.API_ADDRESS}/development/user/api/user`
-    return `${accountsUrl(env)}/api/user`
-}
+export const useAccountsApiURL = (): string => {
+    const accountsURL = useAccountsURL()
 
-export const fetchUserInfo = async (env: Environment): Promise<UserInfo> => {
-    const resp = await fetch(`${accountsApiUrl(env)}`, { credentials: 'include' })
-    return await resp.json()
+    if (ENV.IS_DEV_MODE) return `${ENV.API_ADDRESS}/development/user/api/user`
+    return `${accountsURL}/api/user`
 }
diff --git a/frontend/src/screens/account-details.tsx b/frontend/src/screens/account-details.tsx
@@ -2,7 +2,7 @@ import { React } from '@common'
 import styled from '@emotion/styled'
 import { colors } from '@theme'
 
-import { accountsUrl, useApi, useIsMobileDevice, useUserInfo, useUserPreferences } from '@lib'
+import { useAccountsURL, useApi, useIsMobileDevice, useUserInfo, useUserPreferences } from '@lib'
 import {
     Box,
     Footer,
@@ -77,6 +77,7 @@ export default function AccountDetails() {
     const isMobile = useIsMobileDevice()
     const { data: userInfo } = useUserInfo()
     const { data: prefs } = useUserPreferences()
+    const accountsURL = useAccountsURL()
 
     if (!userInfo || !prefs) return <LoadingAnimation message="Loading account…" />;
 
@@ -94,7 +95,7 @@ export default function AccountDetails() {
                     <h2 className="mb-3">My Account</h2>
                     <Box justify='between' align="center">
                         <h5 className="mb-0 p-0">General</h5>
-                        <a href={`${accountsUrl()}`}>
+                        <a href={`${accountsURL}`}>
                             <span>Update Account</span>
                             <Icon icon="chevronRight" />
                         </a>

diff --git a/frontend/src/screens/researcher/account/researcher-account-page.tsx b/frontend/src/screens/researcher/account/researcher-account-page.tsx
@@ -1,6 +1,6 @@
 import { Box, Col, Footer, Form, HelpLink, Icon, Modal, ResourceLinks, Tooltip, TopNavBar } from '@components';
 import { React, styled, useState } from '@common';
-import { accountsUrl, useApi, useCurrentResearcher, useEnvironment } from '@lib';
+import { useAccountsURL, useApi, useCurrentResearcher } from '@lib';
 import { colors } from '@theme';
 import { Researcher } from '@api';
 import CustomerSupportImage from '../../../components/customer-support-image';
@@ -11,7 +11,7 @@ import { ResearcherAccountForm } from './researcher-account-form';
 
 export default function ResearcherAccountPage() {
     const researcher = useCurrentResearcher()
-    const env = useEnvironment()
+    const accountsUrl = useAccountsURL()
 
     if (!researcher) {
         return null
@@ -24,7 +24,7 @@ export default function ResearcherAccountPage() {
                 <Col sm={9} css={{ paddingRight: '2rem' }} direction='column'>
                     <Box justify='between' height='40px'>
                         <h3>My Account</h3>
-                        <a href={`${accountsUrl(env)}`} target='_blank'>
+                        <a href={`${accountsUrl}`} target='_blank'>
                             <span>Update Email & Password</span>
                             <Icon icon="chevronRight" />
                         </a>