Merge branch 'IN-839' of https://github.com/weareinreach/InReach into I…

…N-839

.github/renovate.json

@@ -6,7 +6,13 @@
 	"packageRules": [
 		{
 			"groupName": "patched packages",
-			"matchPackageNames": ["@crowdin/ota-client", "eslint-plugin-node", "iso-google-locales", "trpc-panel"],
+			"matchPackageNames": [
+				"@crowdin/ota-client",
+				"eslint-plugin-node",
+				"iso-google-locales",
+				"trpc-panel",
+				"next-auth"
+			],
 			"matchUpdateTypes": ["major", "minor", "patch"]
 		}
 	],

.github/workflows/approve.yml

@@ -10,7 +10,7 @@ jobs:
   check:
     runs-on: ubuntu-latest
     steps:
-      - uses: github/privileged-requester@c124d56612a42b75bfa9984b21d1af9fa0ca7186 # v1.0.0
+      - uses: github/privileged-requester@91ebaf95f94bf27577b474f91936815d0f98138e # v1.0.1
         if: ${{ github.event.requested_reviewer.login == 'InReach-svc'}}
         with:
           myToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/chromatic.yml

@@ -31,7 +31,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Install Node.js
-        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3
+        uses: actions/setup-node@bea5baf987ba7aa777a8a0b4ace377a21c45c381 # v3
         with:
           node-version: 18
       - uses: pnpm/action-setup@d882d12c64e032187b2edb46d3a0d003b7a43598 # v2.4.0
@@ -59,7 +59,7 @@ jobs:
 
       # 👇 Runs Chromatic CLI in ./packages/ui
       - name: Publish to Chromatic
-        uses: chromaui/action@4f2201a85e8dcbaaf39969d144e6e917da2ae327 # v1
+        uses: chromaui/action@671728dff1f5d28ae44538038bb18dd21f72a8cc # v1
         with:
           workingDir: packages/ui
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/codeql.yml

@@ -21,6 +21,6 @@ jobs:
       - name: ⤵️ Check out code from GitHub
         uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3
       - name: 🏗 Initialize CodeQL
-        uses: github/codeql-action/init@0ba4244466797eb048eb91a6cd43d5c03ca8bd05 # v2
+        uses: github/codeql-action/init@a09933a12a80f87b87005513f0abb1494c27a716 # v2
       - name: 🚀 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@0ba4244466797eb048eb91a6cd43d5c03ca8bd05 # v2
+        uses: github/codeql-action/analyze@a09933a12a80f87b87005513f0abb1494c27a716 # v2

.github/workflows/lint.yml

@@ -31,7 +31,7 @@ jobs:
           git_commit_gpgsign: true
 
       - name: Install Node.js
-        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3
+        uses: actions/setup-node@bea5baf987ba7aa777a8a0b4ace377a21c45c381 # v3
         with:
           node-version: 18
 

.nvmrc

@@ -1 +1 @@
-18.17.0
+18.17.1

apps/app/package.json

@@ -23,41 +23,41 @@
 	},
 	"dependencies": {
 		"@aws-crypto/sha256-js": "5.0.0",
-		"@aws-sdk/client-s3": "3.385.0",
+		"@aws-sdk/client-s3": "3.391.0",
 		"@aws-sdk/signature-v4": "3.370.0",
 		"@crowdin/crowdin-api-client": "1.24.0",
 		"@crowdin/ota-client": "1.0.0",
 		"@emotion/react": "11.11.1",
 		"@emotion/server": "11.11.0",
 		"@iconify/react": "4.1.1",
-		"@mantine/carousel": "6.0.17",
-		"@mantine/core": "6.0.17",
-		"@mantine/dates": "6.0.17",
-		"@mantine/dropzone": "6.0.17",
-		"@mantine/form": "6.0.17",
-		"@mantine/hooks": "6.0.17",
-		"@mantine/modals": "6.0.17",
-		"@mantine/next": "6.0.17",
-		"@mantine/notifications": "6.0.17",
-		"@mantine/nprogress": "6.0.17",
-		"@mantine/prism": "6.0.17",
-		"@mantine/spotlight": "6.0.17",
-		"@mantine/tiptap": "6.0.17",
-		"@mantine/utils": "6.0.17",
-		"@next/bundle-analyzer": "13.4.13",
+		"@mantine/carousel": "6.0.19",
+		"@mantine/core": "6.0.19",
+		"@mantine/dates": "6.0.19",
+		"@mantine/dropzone": "6.0.19",
+		"@mantine/form": "6.0.19",
+		"@mantine/hooks": "6.0.19",
+		"@mantine/modals": "6.0.19",
+		"@mantine/next": "6.0.19",
+		"@mantine/notifications": "6.0.19",
+		"@mantine/nprogress": "6.0.19",
+		"@mantine/prism": "6.0.19",
+		"@mantine/spotlight": "6.0.19",
+		"@mantine/tiptap": "6.0.19",
+		"@mantine/utils": "6.0.19",
+		"@next/bundle-analyzer": "13.4.16",
 		"@opentelemetry/api": "1.4.1",
-		"@opentelemetry/exporter-trace-otlp-http": "0.41.1",
-		"@opentelemetry/instrumentation": "0.41.1",
-		"@opentelemetry/instrumentation-fetch": "0.41.1",
-		"@opentelemetry/instrumentation-http": "0.41.1",
-		"@opentelemetry/resources": "1.15.1",
-		"@opentelemetry/sdk-node": "0.41.1",
-		"@opentelemetry/sdk-trace-base": "1.15.1",
-		"@opentelemetry/sdk-trace-node": "1.15.1",
-		"@opentelemetry/semantic-conventions": "1.15.1",
+		"@opentelemetry/exporter-trace-otlp-http": "0.41.2",
+		"@opentelemetry/instrumentation": "0.41.2",
+		"@opentelemetry/instrumentation-fetch": "0.41.2",
+		"@opentelemetry/instrumentation-http": "0.41.2",
+		"@opentelemetry/resources": "1.15.2",
+		"@opentelemetry/sdk-node": "0.41.2",
+		"@opentelemetry/sdk-trace-base": "1.15.2",
+		"@opentelemetry/sdk-trace-node": "1.15.2",
+		"@opentelemetry/semantic-conventions": "1.15.2",
 		"@prisma/instrumentation": "5.1.1",
-		"@sentry/nextjs": "7.61.1",
-		"@sentry/opentelemetry-node": "7.61.1",
+		"@sentry/nextjs": "7.64.0",
+		"@sentry/opentelemetry-node": "7.64.0",
 		"@tanstack/react-query": "4.32.6",
 		"@tanstack/react-table": "8.9.3",
 		"@tiptap/extension-link": "2.0.4",
@@ -67,7 +67,7 @@
 		"@trpc/next": "10.37.1",
 		"@trpc/react-query": "10.37.1",
 		"@trpc/server": "10.37.1",
-		"@vercel/analytics": "1.0.1",
+		"@vercel/analytics": "1.0.2",
 		"@vercel/edge-config": "0.2.1",
 		"@vercel/kv": "0.2.2",
 		"@weareinreach/api": "workspace:*",
@@ -84,7 +84,7 @@
 		"embla-carousel-autoplay": "7.1.0",
 		"embla-carousel-react": "7.1.0",
 		"flat": "5.0.2",
-		"i18next": "23.4.2",
+		"i18next": "23.4.4",
 		"i18next-browser-languagedetector": "7.1.0",
 		"i18next-chained-backend": "4.4.0",
 		"i18next-http-backend": "2.2.1",
@@ -94,50 +94,50 @@
 		"ioredis": "5.3.2",
 		"just-compact": "3.2.0",
 		"just-compare": "2.3.0",
-		"luxon": "3.3.0",
-		"next": "13.4.13",
-		"next-auth": "4.22.4",
+		"luxon": "3.4.0",
+		"next": "13.4.16",
+		"next-auth": "4.23.0",
 		"next-i18next": "14.0.0",
 		"next-seo": "6.1.0",
 		"nextjs-routes": "2.0.1",
 		"object-sizeof": "2.6.3",
 		"pretty-bytes": "6.1.1",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-error-boundary": "4.0.10",
-		"react-i18next": "13.0.3",
-		"tslog": "4.8.6",
-		"zod": "3.21.4"
+		"react-error-boundary": "4.0.11",
+		"react-i18next": "13.1.2",
+		"tslog": "4.9.1",
+		"zod": "3.22.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "1.36.2",
+		"@playwright/test": "1.37.0",
 		"@prisma/nextjs-monorepo-workaround-plugin": "5.1.1",
 		"@tanstack/react-query-devtools": "4.32.6",
 		"@tanstack/react-table-devtools": "8.7.6",
 		"@total-typescript/ts-reset": "0.4.2",
 		"@types/eslint": "8.44.2",
 		"@types/flat": "5.0.2",
 		"@types/luxon": "3.3.1",
-		"@types/node": "18.17.3",
+		"@types/node": "18.17.5",
 		"@types/prettier": "2.7.3",
-		"@types/react": "18.2.18",
+		"@types/react": "18.2.20",
 		"@types/react-dom": "18.2.7",
 		"@types/umami": "0.1.2",
-		"@typescript-eslint/eslint-plugin": "6.2.1",
-		"@typescript-eslint/parser": "6.2.1",
+		"@typescript-eslint/eslint-plugin": "6.4.0",
+		"@typescript-eslint/parser": "6.4.0",
 		"@weareinreach/config": "workspace:*",
 		"@weareinreach/eslint-config": "0.100.0",
 		"commander": "11.0.0",
 		"dotenv": "16.3.1",
-		"eslint": "8.46.0",
+		"eslint": "8.47.0",
 		"eslint-plugin-i18next": "6.0.3",
 		"i18next-resources-for-ts": "1.2.1",
 		"listr2": "6.6.1",
-		"prettier": "3.0.1",
+		"prettier": "3.0.2",
 		"trpc-client-devtools-link": "0.2.1-next",
 		"trpc-panel": "1.3.4",
 		"trpc-playground": "1.0.4",
-		"type-fest": "4.1.0",
+		"type-fest": "4.2.0",
 		"typescript": "5.1.6"
 	},
 	"ct3aMetadata": {

apps/app/src/pages/_app.tsx

@@ -17,6 +17,7 @@ import { Footer } from '@weareinreach/ui/components/sections/Footer'
 import { Navbar } from '@weareinreach/ui/components/sections/Navbar'
 import { useScreenSize } from '@weareinreach/ui/hooks/useScreenSize'
 import { BodyGrid } from '@weareinreach/ui/layouts/BodyGrid'
+import { GoogleMapsProvider } from '@weareinreach/ui/providers/GoogleMaps'
 import { SearchStateProvider } from '@weareinreach/ui/providers/SearchState'
 import { appCache, appTheme } from '@weareinreach/ui/theme'
 import { api } from '~app/utils/api'
@@ -88,12 +89,14 @@ const MyApp = (appProps: AppPropsWithGridSwitch) => {
 			>
 				<ModalsProvider>
 					<SearchStateProvider>
-						<PageLoadProgress />
-						<Navbar />
-						{PageContent}
-						{(isMobile || isTablet) && <Space h={80} />}
-						<Footer />
-						<Notifications transitionDuration={500} />
+						<GoogleMapsProvider>
+							<PageLoadProgress />
+							<Navbar />
+							{PageContent}
+							{(isMobile || isTablet) && <Space h={80} />}
+							<Footer />
+							<Notifications transitionDuration={500} />
+						</GoogleMapsProvider>
 					</SearchStateProvider>
 				</ModalsProvider>
 				<ReactQueryDevtools initialIsOpen={false} toggleButtonProps={{ style: { zIndex: 99998 } }} />

apps/app/src/pages/api/i18n/load.ts

@@ -4,7 +4,7 @@ import { context, trace } from '@opentelemetry/api'
 import { type NextApiRequest, type NextApiResponse } from 'next'
 import { z } from 'zod'
 
-import { createSubLog } from '@weareinreach/util/logger'
+import { createLoggerInstance } from '@weareinreach/util/logger'
 import { crowdinOpts } from '~app/data/crowdinOta'
 import { crowdinDistTimestamp, fetchCrowdinDbKey, fetchCrowdinFile } from '~app/utils/crowdin'
 import { redisReadCache, redisWriteCache } from '~app/utils/vercel-kv'
@@ -14,7 +14,7 @@ const QuerySchema = z.object({
 	ns: z.string(),
 })
 const tracer = trace.getTracer('inreach-app')
-const log = createSubLog('i18n Loader')
+const log = createLoggerInstance('i18n Loader')
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
 	const query = QuerySchema.parse(req.query)

apps/app/src/pages/api/trpc/[trpc].ts

@@ -1,9 +1,9 @@
 import { createNextApiHandler } from '@trpc/server/adapters/next'
 
 import { appRouter, createContext } from '@weareinreach/api'
-import { createSubLog } from '@weareinreach/util/logger'
+import { createLoggerInstance } from '@weareinreach/util/logger'
 
-const log = createSubLog('tRPC')
+const log = createLoggerInstance('tRPC')
 
 /* Creating a handler for the tRPC endpoint. */
 export default createNextApiHandler({

apps/app/src/pages/org/[slug]/[orgLocationId]/edit.tsx

@@ -29,7 +29,7 @@ const OrgLocationPage: NextPage = () => {
 	const { data: orgData, status: orgDataStatus } = api.organization.getBySlug.useQuery(query, {
 		enabled: router.isReady,
 	})
-	const { data, status } = api.location.getById.useQuery({ id: orgLocationId })
+	const { data, status } = api.location.forLocationPage.useQuery({ id: orgLocationId })
 	const { data: isSaved } = api.savedList.isSaved.useQuery(orgData?.id as string, {
 		enabled: orgDataStatus === 'success' && Boolean(orgData?.id),
 	})

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

@@ -60,9 +60,11 @@ const useStyles = createStyles((theme) => ({
 const OrganizationPage = ({ slug }: InferGetStaticPropsType<typeof getStaticProps>) => {
 	const router = useRouter<'/org/[slug]'>()
 	// const { query } = router
-	const { t, i18n } = useTranslation(['common', 'services', 'attribute', 'phone-type', slug], {
-		bindI18n: 'languageChanged loaded',
-	})
+	const {
+		t,
+		i18n,
+		ready: i18nReady,
+	} = useTranslation(['common', 'services', 'attribute', 'phone-type', slug])
 	const [activeTab, setActiveTab] = useState<string | null>('services')
 	const [loading, setLoading] = useState(true)
 	const { data, status } = api.organization.forOrgPage.useQuery({ slug }, { enabled: !!slug })
@@ -84,11 +86,11 @@ const OrganizationPage = ({ slug }: InferGetStaticPropsType<typeof getStaticProp
 	const reviewsRef = useRef<HTMLDivElement>(null)
 
 	useEffect(() => {
-		if (data && status === 'success') {
+		if (i18nReady && data && status === 'success') {
 			setLoading(false)
 			if (data.locations?.length > 1) setActiveTab('locations')
 		}
-	}, [data, status])
+	}, [data, status, i18nReady])
 
 	useEffect(() => {
 		data?.id &&

apps/app/src/utils/api.ts

@@ -9,9 +9,9 @@ import { devtoolsLink } from 'trpc-client-devtools-link'
 import { type AppRouter } from '@weareinreach/api'
 import { transformer } from '@weareinreach/api/lib/transformer'
 import { getEnv } from '@weareinreach/env'
-import { createSubLog } from '@weareinreach/util/logger'
+import { createLoggerInstance } from '@weareinreach/util/logger'
 
-const log = createSubLog('tRPC')
+const log = createLoggerInstance('tRPC')
 const getBaseUrl = () => {
 	if (typeof window !== 'undefined') return '' // browser should use relative url
 	if (getEnv('VERCEL_URL')) return `https://${getEnv('VERCEL_URL')}` // SSR should use vercel url

apps/app/src/utils/i18n.ts

@@ -1,15 +1,19 @@
-import { type Namespace } from 'i18next'
-// eslint-disable-next-line no-restricted-imports
+/* eslint-disable no-restricted-imports */
+import { type DefaultNamespace } from 'i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { type LiteralUnion } from 'type-fest'
+
+import { type Namespaces } from '@weareinreach/db/generated/namespaces'
 
 import i18nextConfig from '../../next-i18next.config.mjs'
 
 // type ArrayElementOrSelf<T> = T extends Array<infer U> ? U[] : T[]
 
+type Namespace = LiteralUnion<Namespaces, string>
 type NamespaceSSR = string | string[] | undefined
 export const getServerSideTranslations = async (
 	locale = 'en',
-	namespacesRequired?: Namespace,
+	namespacesRequired: Namespace | Namespace[] = i18nextConfig.defaultNS as DefaultNamespace,
 	extraLocales?: string[] | false
 ) => serverSideTranslations(locale, namespacesRequired as NamespaceSSR, i18nextConfig, extraLocales)
 

apps/app/src/utils/vercel-kv.ts

@@ -4,10 +4,10 @@ import { flatten, unflatten } from 'flat'
 import sizeof from 'object-sizeof'
 import formatBytes from 'pretty-bytes'
 
-import { createSubLog } from '@weareinreach/util/logger'
+import { createLoggerInstance } from '@weareinreach/util/logger'
 
 const redisTTL = 86400
-const log = createSubLog('Vercel KV')
+const log = createLoggerInstance('Vercel KV')
 const tracer = trace.getTracer('inreach-app')
 
 export const redisReadCache = async (namespaces: string[], lang: string, otaManifestTimestamp: number) => {