Merge branch 'dev' into IN-945-service-edit-page

apps/app/next-i18next.config.mjs

@@ -73,31 +73,33 @@ const config = {
 	},
 	defaultNS: 'common',
 	localePath: path.resolve('./public/locales'),
-	fallbackLng: ['en'],
+	fallbackLng: 'en',
 	reloadOnPrerender: isDev,
 	debug: isDev && isBrowser && isVerbose,
 	partialBundledLanguages: true,
 	nonExplicitSupportedLngs: true,
 	cleanCode: true,
-	react: {
-		useSuspense: false,
-		bindI18nStore: 'added loaded',
-		bindI18n: 'languageChanged loaded',
-	},
+	// react: {
+	// 	useSuspense: false,
+	// 	bindI18nStore: 'added loaded',
+	// 	bindI18n: 'languageChanged loaded',
+	// },
 
-	backend: {
-		backendOptions: [
-			{
-				backend: HttpBackend,
-				// debounceInterval: 200,
-				backendOption: {
-					loadPath: getUrl(apiPath),
-					allowMultiLoading: true,
-				},
-			},
-		],
-		backends: isBrowser ? [multi] : [],
-	},
+	backend: isBrowser
+		? {
+				backendOptions: [
+					{
+						backend: HttpBackend,
+						// debounceInterval: 200,
+						backendOption: {
+							loadPath: getUrl(apiPath),
+							allowMultiLoading: true,
+						},
+					},
+				],
+				backends: [multi],
+			}
+		: undefined,
 	serializeConfig: false,
 	use: plugins(),
 	maxParallelReads: 20,

apps/app/public/locales/en/common.json

@@ -132,7 +132,7 @@
 		"share-feedback": "Share feedback",
 		"subscribe-newsletter": "Subscribe to our newsletter",
 		"suggest-org": "Suggest an organization",
-		"tagline": "Seek LGBTQ+ resources.<br/>\nReach safety.<br/>\nFind belonging.",
+		"tagline": "Seek LGBTQ+ resources.<br/>Reach safety.<br/>Find belonging.",
 		"vetting-process": "Vetting process"
 	},
 	"forgot-password": "Forgot password?",

apps/app/src/pages/_app.tsx

@@ -10,7 +10,7 @@ import dynamic from 'next/dynamic'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { type Session } from 'next-auth'
-import { appWithTranslation } from 'next-i18next'
+import { appWithTranslation, type UserConfig } from 'next-i18next'
 import { DefaultSeo, type DefaultSeoProps } from 'next-seo'
 import { GoogleAnalytics } from 'nextjs-google-analytics'
 
@@ -97,7 +97,16 @@ const MyApp = (appProps: AppPropsWithGridSwitch) => {
 	)
 }
 
-export default api.withTRPC(appWithTranslation(MyApp, nextI18nConfig))
+const i18NextSSRConfig: UserConfig = {
+	i18n: {
+		defaultLocale: nextI18nConfig.i18n.defaultLocale,
+		locales: nextI18nConfig.i18n.locales,
+	},
+	interpolation: nextI18nConfig.interpolation,
+	use: nextI18nConfig.use,
+}
+
+export default api.withTRPC(appWithTranslation(MyApp, i18NextSSRConfig))
 
 export type NextPageWithOptions<Props = unknown, InitialProps = Props> = NextPage<Props, InitialProps> & {
 	omitGrid?: boolean

apps/app/src/pages/org/[slug]/index.tsx

@@ -46,7 +46,7 @@ const OrganizationPage = ({
 	const router = useRouter<'/org/[slug]'>()
 	const { data, status } = api.organization.forOrgPage.useQuery({ slug }, { enabled: !!slug })
 	// const { query } = router
-	const { t, i18n, ready: i18nReady } = useTranslation(formatNS(orgId))
+	const { t } = useTranslation(formatNS(orgId))
 	const [activeTab, setActiveTab] = useState<string | null>('services')
 	const [loading, setLoading] = useState(true)
 	const { data: hasRemote } = api.service.forServiceInfoCard.useQuery(
@@ -69,16 +69,16 @@ const OrganizationPage = ({
 	const reviewsRef = useRef<HTMLDivElement>(null)
 
 	useEffect(() => {
-		if (i18nReady && data && status === 'success' && !router.isFallback) {
+		if (data && status === 'success' && !router.isFallback) {
 			setLoading(false)
 			if (data.locations?.length > 1) setActiveTab('locations')
 		}
-	}, [data, status, i18nReady, router.isFallback])
+	}, [data, status, router.isFallback])
 
-	useEffect(() => {
-		orgId && i18n.reloadResources(i18n.resolvedLanguage, formatNS(orgId))
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [])
+	// useEffect(() => {
+	// 	orgId && i18n.reloadResources(i18n.resolvedLanguage)
+	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// }, [])
 
 	if (loading || !data || router.isFallback) return <OrgPageLoading />
 

packages/ui/components/core/Breadcrumb.tsx

@@ -113,7 +113,7 @@ export const Breadcrumb = (props: BreadcrumbProps) => {
 				return t('close')
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [option, backTo, backToText])
+	}, [option, backTo, backToText, isMobile])
 
 	return (
 		<UnstyledButton className={classes.root} onClick={clickHandler}>

packages/ui/components/core/UserAvatar.tsx

@@ -1,5 +1,6 @@
 import { Avatar, createStyles, Group, rem, Skeleton, Stack, Text, useMantineTheme } from '@mantine/core'
 import { DateTime } from 'luxon'
+import router from 'next/router'
 import { type User } from 'next-auth'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
@@ -61,7 +62,7 @@ export const UserAvatar = ({
 			}
 		}
 	}
-	const showLoadingState = loading || (useLoggedIn && status === 'loading' && !session)
+	const showLoadingState = loading || (useLoggedIn && status === 'loading' && !session) || router.isFallback
 	if (showLoadingState) {
 		return (
 			<Group className={classes.group}>

packages/ui/components/core/UserMenu.tsx

@@ -73,7 +73,7 @@ export const UserMenu = ({ className, classNames, styles, unstyled }: UserMenuPr
 	const { classes, cx } = useStyles(undefined, { name: 'UserMenu', classNames, styles, unstyled })
 	const variant = useCustomVariant()
 
-	const isLoading = status === 'loading'
+	const isLoading = status === 'loading' || router.isFallback
 	const canAccessDataPortal = checkPermissions({
 		session,
 		permissions: ['dataPortalBasic', 'dataPortalAdmin', 'dataPortalManager'],
@@ -174,7 +174,7 @@ export const UserMenu = ({ className, classNames, styles, unstyled }: UserMenuPr
 						signOut({ callbackUrl: '/' })
 					}}
 				>
-					{t('log-out')}
+					{!router.isFallback && t('log-out')}
 				</UnstyledButton>
 			</Group>
 		)

packages/ui/components/sections/Footer.tsx

@@ -43,22 +43,34 @@ const useStyles = createStyles((theme) => ({
 
 type FooterLinkInt = {
 	key: string
+	defaultValue: string
 	href: InternalLink
 	onClick?: never
 	external: false
 }
 type FooterLinkExt = {
 	key: string
+	defaultValue: string
 	href?: ExternalLink
 	onClick?: MouseEventHandler<HTMLAnchorElement>
 	external: true
 }
 type LinkArr = (FooterLinkInt | FooterLinkExt)[]
 
 const connectLinks: LinkArr = [
-	{ key: 'inreach-org', href: 'https://www.inreach.org', external: true },
-	{ key: 'download-app', href: 'https://inreach.org/mobile-app/', external: true },
-	{ key: 'footer.subscribe-newsletter', href: 'https://inreach.org/newsletter/', external: true },
+	{ key: 'inreach-org', defaultValue: 'InReach.org', href: 'https://www.inreach.org', external: true },
+	{
+		key: 'download-app',
+		defaultValue: 'Download the app',
+		href: 'https://inreach.org/mobile-app/',
+		external: true,
+	},
+	{
+		key: 'footer.subscribe-newsletter',
+		defaultValue: 'Subscribe to our newsletter',
+		href: 'https://inreach.org/newsletter/',
+		external: true,
+	},
 ]
 
 export const Footer = () => {
@@ -68,31 +80,31 @@ export const Footer = () => {
 	const linkVar = { variant: variants.Link.inlineInvertedUtil1 }
 	const support = [
 		<Link key={0} href='/suggest' target='_self' {...linkVar}>
-			{t('footer.suggest-org')}
+			{t('footer.suggest-org', { defaultValue: 'Suggest an organization' })}
 		</Link>,
 		<Link key={1} href='https://www.surveymonkey.com/r/96QD8ZQ' external {...linkVar}>
-			{t('footer.share-feedback')}
+			{t('footer.share-feedback', { defaultValue: 'Share feedback' })}
 		</Link>,
 		<Link key={2} href='https://inreach.org/vetting-process/' external {...linkVar}>
-			{t('footer.vetting-process')}
+			{t('footer.vetting-process', { defaultValue: 'Vetting process' })}
 		</Link>,
 		<PrivacyStatementModal key={3} component={Link} {...linkVar}>
-			{t('footer.privacy-statement')}
+			{t('footer.privacy-statement', { defaultValue: 'Privacy statement' })}
 		</PrivacyStatementModal>,
 		<GenericContentModal key={4} content='antiHate' component={Link} {...linkVar}>
-			{t('footer.anti-hate')}
+			{t('footer.anti-hate', { defaultValue: 'Anti-hate commitment' })}
 		</GenericContentModal>,
 		<GenericContentModal key={5} content='accessibilityStatement' component={Link} {...linkVar}>
-			{t('footer.digital-accessibility')}
+			{t('footer.digital-accessibility', { defaultValue: 'Digital accessibility' })}
 		</GenericContentModal>,
 		<GenericContentModal key={6} content='disclaimer' component={Link} {...linkVar}>
-			{t('footer.disclaimer')}
+			{t('footer.disclaimer', { defaultValue: 'Disclaimer' })}
 		</GenericContentModal>,
 	]
 
-	const connect = connectLinks.map(({ key, ...props }, idx) => (
+	const connect = connectLinks.map(({ key, defaultValue, ...props }, idx) => (
 		<Link key={idx} variant={variants.Link.inlineInvertedUtil1} {...props}>
-			{t(key)}
+			{t(key, { defaultValue })}
 		</Link>
 	))
 
@@ -104,50 +116,84 @@ export const Footer = () => {
 						<Stack align='start' spacing={24}>
 							<Image
 								src={InReach}
-								alt={t('inreach-logo')}
+								alt={t('inreach-logo', { defaultValue: 'InReach logo' })}
 								width={100}
 								height={37.53}
 								style={{ marginBottom: 0 }}
 							/>
 							<Title order={2} fw={500}>
-								<Trans i18nKey='footer.tagline' />
+								<Trans
+									i18nKey='footer.tagline'
+									defaults='Seek LGBTQ+ resources.<br/>Reach safety.<br/>Find belonging.'
+								/>
 							</Title>
 							<a href='https://vercel.com/?utm_source=in-reach&utm_campaign=oss' style={{ margin: 0 }}>
 								<Image
 									src={Vercel}
-									alt={t('powered-by-vercel')}
+									alt={t('powered-by-vercel', { defaultValue: 'Powered by Vercel' })}
 									width={240}
 									height={48}
 									style={{ marginBottom: 0, marginLeft: -2, marginTop: 8 }}
 								/>
 							</a>
 						</Stack>
 						<Text className={classes.copyrightText}>
-							{t('inreach-copyright', { year: new Date().getFullYear() })}
+							{t('inreach-copyright', {
+								year: new Date().getFullYear(),
+								defaultValue: `InReach, Inc. ${new Date().getFullYear()} • All rights reserved • InReach ❤️ Open Source`,
+							})}
 						</Text>
 					</Stack>
 				</Grid.Col>
 				<Grid.Col xs={6} sm={3} pt={0} pb={0}>
 					<Stack justify='space-between' style={{ height: '100%' }} align='start' spacing='xl'>
-						<Text fw={600}>{t('support')}</Text>
+						<Text fw={600}>{t('support', { defaultValue: 'Support' })}</Text>
 						{support}
 					</Stack>
 				</Grid.Col>
 				<Grid.Col xs={6} sm={3} pr={0} pt={0} pb={0}>
 					<Stack spacing='xl'>
-						<Text fw={600}>{t('connect')}</Text>
+						<Text fw={600}>{t('connect', { defaultValue: 'Connect' })}</Text>
 						{connect}
 						<Group noWrap className={classes.iconGroup}>
-							<SocialLink icon='facebook' href='https://www.facebook.com/weareinreach' />
+							<SocialLink
+								icon='facebook'
+								href='https://www.facebook.com/weareinreach'
+								title={t('social.facebook', { defaultValue: 'Facebook' })}
+							/>
 							{/* <SocialLink icon='twitter' href='https://twitter.com/weareinreach' /> */}
-							<SocialLink icon='linkedin' href='https://www.linkedin.com/company/weareinreach' />
-							<SocialLink icon='instagram' href='https://www.instagram.com/weareinreach' />
-							<SocialLink icon='youtube' href='https://www.youtube.com/channel/UCJsVS5-0ymo40mRjCe4BIHA' />
+							<SocialLink
+								icon='linkedin'
+								href='https://www.linkedin.com/company/weareinreach'
+								title={t('social.linkedin', { defaultValue: 'LinkedIn' })}
+							/>
+							<SocialLink
+								icon='instagram'
+								href='https://www.instagram.com/weareinreach'
+								title={t('social.instagram', { defaultValue: 'Instagram' })}
+							/>
+							<SocialLink
+								icon='youtube'
+								href='https://www.youtube.com/channel/UCJsVS5-0ymo40mRjCe4BIHA'
+								title={t('social.youtube', { defaultValue: 'YouTube' })}
+							/>
 						</Group>
 						<Group noWrap className={classes.iconGroup} pb='24px'>
-							<SocialLink icon='tiktok' href='https://www.tiktok.com/@weareinreach' />
-							<SocialLink icon='github' href='https://github.com/weareinreach' />
-							<SocialLink icon='email' href='https://inreach.org/contact/' />
+							<SocialLink
+								icon='tiktok'
+								href='https://www.tiktok.com/@weareinreach'
+								title={t('social.tiktok', { defaultValue: 'TikTok' })}
+							/>
+							<SocialLink
+								icon='github'
+								href='https://github.com/weareinreach'
+								title={t('social.github', { defaultValue: 'GitHub' })}
+							/>
+							<SocialLink
+								icon='email'
+								href='https://inreach.org/contact/'
+								title={t('social.email', { defaultValue: 'Email' })}
+							/>
 						</Group>
 					</Stack>
 				</Grid.Col>

packages/ui/components/sections/Navbar.tsx

@@ -28,7 +28,7 @@ const useStyles = createStyles((theme) => ({
 		top: 0,
 		left: 0,
 		right: 0,
-		zIndex: 1000,
+		zIndex: 150,
 		backgroundColor: theme.other.colors.secondary.white,
 	},
 	mobileNav: {
@@ -203,6 +203,7 @@ export const Navbar = () => {
 	const { classes } = useStyles()
 	const variants = useCustomVariant()
 	const { isMobile, isTablet } = useScreenSize()
+	const router = useRouter()
 
 	return isMobile || isTablet ? (
 		<MobileNav className={classes.mobileNav} />
@@ -215,15 +216,15 @@ export const Navbar = () => {
 							src={InReachLogo}
 							width={100}
 							height={38}
-							alt={t('inreach-logo', { defaultValue: 'InReach logo' })}
+							alt={!router.isFallback ? t('inreach-logo', { defaultValue: 'InReach logo' }) : 'InReach logo'}
 							style={{ margin: 0 }}
 						/>
 					</Link>
 					<Group spacing={40} noWrap align='center'>
 						<UserMenu />
 						<Link href='https://www.google.com' target='_self' variant={variants.Link.inheritStyle}>
 							<Button variant='accent' onClick={navbarEvent.safetyExit} id='safety-exit'>
-								{t('safety-exit')}
+								{!router.isFallback && t('safety-exit')}
 							</Button>
 						</Link>
 					</Group>