feat: edit org page (part 1)

.prettierignore

@@ -14,3 +14,4 @@ pnpm-lock.yaml
 .eslintignore
 *.hbs
 .trace/*.json
+packages/ui/mockData/json/*.json

apps/app/lib/wdyr.ts

@@ -0,0 +1,20 @@
+/// <reference types="@welldone-software/why-did-you-render" />
+import React from 'react'
+
+// eslint-disable-next-line node/no-process-env
+if (process.env.NODE_ENV === 'development' && !!process.env.WDYR) {
+	if (typeof window !== 'undefined') {
+		const loadWdyr = async () => {
+			const { default: whyDidYouRender } = await import('@welldone-software/why-did-you-render')
+			whyDidYouRender(React, {
+				trackAllPureComponents: true,
+				include: [/.*/],
+				exclude: [/.*mantine.*/i],
+				logOnDifferentValues: false,
+				logOwnerReasons: true,
+				collapseGroups: true,
+			})
+		}
+		loadWdyr()
+	}
+}

apps/app/next-i18next.config.mjs

@@ -6,14 +6,15 @@ import HttpBackend from 'i18next-http-backend'
 import intervalPlural from 'i18next-intervalplural-postprocessor'
 // import LocalStorageBackend from 'i18next-localstorage-backend'
 import MultiBackend from 'i18next-multiload-backend-adapter'
+import compact from 'just-compact'
 
 import path from 'path'
 
 // @ts-expect-error - yelling about declaration file
 import { localeList } from '@weareinreach/db/generated/locales.mjs'
 
 const isBrowser = typeof window !== 'undefined'
-const isDev = process.env.NODE_ENV !== 'production'
+const isDev = process.env.NODE_ENV !== 'production' && !process.env.CI
 const isVerbose = !!process.env.NEXT_VERBOSE
 // const Keys = z.record(z.string())
 
@@ -42,6 +43,29 @@ const multi = new MultiBackend(null, {
 	},
 })
 
+const plugins = () => {
+	/** @type {any[]} */
+	const pluginsToUse = [intervalPlural, LanguageDetector]
+	if (isBrowser) {
+		pluginsToUse.push(ChainedBackend)
+	}
+	if (process.env.NODE_ENV === 'development') {
+		if (isBrowser) {
+			// @ts-expect-error - yelling about declaration file
+			import('i18next-hmr/plugin').then(({ HMRPlugin }) =>
+				pluginsToUse.push(new HMRPlugin({ webpack: { client: true } }))
+			)
+		} else {
+			// @ts-expect-error - yelling about declaration file
+			import('i18next-hmr/plugin').then(({ HMRPlugin }) =>
+				pluginsToUse.push(new HMRPlugin({ webpack: { server: true } }))
+			)
+		}
+	}
+
+	return compact(pluginsToUse)
+}
+
 /** @type {import('next-i18next').UserConfig} */
 const config = {
 	i18n: {
@@ -76,7 +100,7 @@ const config = {
 		backends: isBrowser ? [multi] : [],
 	},
 	serializeConfig: false,
-	use: isBrowser ? [ChainedBackend, intervalPlural, LanguageDetector] : [intervalPlural, LanguageDetector],
+	use: plugins(),
 	maxParallelReads: 20,
 	joinArrays: '',
 	interpolation: {

apps/app/next.config.mjs

@@ -78,10 +78,30 @@ const nextConfig = {
 		// Automatically tree-shake Sentry logger statements to reduce bundle size
 		disableLogger: isVercelProd || isVercelActiveDev,
 	},
-	webpack: (config, { isServer, webpack }) => {
+	webpack: (config, { dev, isServer, webpack }) => {
 		if (isServer) {
 			config.plugins = [...config.plugins, new PrismaPlugin()]
 		}
+		if (dev && !isServer) {
+			/** WDYR */
+			const origEntry = config.entry
+			config.entry = async () => {
+				const wdyrPath = path.resolve(__dirname, './lib/wdyr.ts')
+				const entries = await origEntry()
+				if (entries['main.js'] && !entries['main.js'].includes(wdyrPath)) {
+					entries['main.js'].push(wdyrPath)
+				}
+				return entries
+			}
+			/** I18 HMR */
+			import('i18next-hmr/webpack').then(({ I18NextHMRPlugin }) =>
+				config.plugins.push(
+					new I18NextHMRPlugin({
+						localesDir: path.resolve(__dirname, 'public/static/locales'),
+					})
+				)
+			)
+		}
 
 		config.devtool = 'eval-source-map'
 

apps/app/package.json

@@ -36,6 +36,7 @@
 		"@mantine/nprogress": "6.0.21",
 		"@mantine/utils": "6.0.21",
 		"@next/bundle-analyzer": "14.1.0",
+		"@next/third-parties": "14.1.0",
 		"@opentelemetry/api": "1.7.0",
 		"@opentelemetry/core": "1.20.0",
 		"@opentelemetry/exporter-trace-otlp-http": "0.47.0",
@@ -119,10 +120,12 @@
 		"@typescript-eslint/parser": "6.19.0",
 		"@weareinreach/config": "workspace:*",
 		"@weareinreach/eslint-config": "0.100.0",
+		"@welldone-software/why-did-you-render": "8.0.1",
 		"commander": "11.1.0",
 		"dotenv": "16.3.1",
 		"eslint": "8.56.0",
 		"eslint-plugin-i18next": "6.0.3",
+		"i18next-hmr": "3.0.4",
 		"listr2": "8.0.1",
 		"prettier": "3.2.4",
 		"trpc-client-devtools-link": "0.2.1-next",

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

@@ -110,6 +110,9 @@
 		"try-again-text": "<Text>Something went wrong! Please try again.</Text>"
 	},
 	"exclude": "Exclude",
+	"exit": {
+		"edit-mode": "Exit edit mode"
+	},
 	"filter-by-service": "Filter by services",
 	"find-resources": "Find resources",
 	"find-x": "Find {{value}}",
@@ -189,6 +192,7 @@
 	"other-specify": "Other (please specify)",
 	"page-title": {
 		"base": "{{- title}} - InReach",
+		"edit-mode": "{{- title}} [EDIT MODE] - InReach",
 		"search-results": "Search Results"
 	},
 	"password": "Password",
@@ -423,9 +427,13 @@
 		"please-wait": "Please wait...",
 		"prev": "Prev",
 		"print": "Print",
+		"publish": "Publish",
+		"restore": "Restore",
+		"reverify": "Reverify",
 		"review": "Review",
 		"reviews": "Reviews",
 		"save": "Save",
+		"save-changes": "Save changes",
 		"saved": "Saved",
 		"search": "Search",
 		"service-hours": "Service hours",
@@ -434,6 +442,7 @@
 		"sign-up": "Sign up",
 		"skip": "Skip",
 		"support": "Support",
+		"unpublish": "Unpublish",
 		"website": "Website",
 		"yes": "Yes"
 	}

apps/app/src/middleware.ts

@@ -1,8 +1,10 @@
+import { track } from '@vercel/analytics/server'
 import { get } from '@vercel/edge-config'
 import { type NextMiddleware, type NextRequest, NextResponse } from 'next/server'
 
 export const middleware: NextMiddleware = async (req: NextRequest) => {
 	const res = NextResponse.next()
+	track('geo', { ...req.geo })
 
 	if (!req.cookies.has('inreach-session')) {
 		res.cookies.set({

apps/app/src/pages/_app.tsx

@@ -1,3 +1,5 @@
+import '../../lib/wdyr'
+
 import { Space } from '@mantine/core'
 import { Notifications } from '@mantine/notifications'
 import { Analytics } from '@vercel/analytics/react'
@@ -37,31 +39,11 @@ const defaultSEO = {
 	titleTemplate: '%s | InReach',
 	defaultTitle: 'InReach',
 	additionalLinkTags: [
-		{
-			rel: 'icon',
-			href: '/favicon-16x16.png',
-			sizes: '16x16',
-		},
-		{
-			rel: 'icon',
-			href: '/favicon-32x32.png',
-			sizes: '32x32',
-		},
-		{
-			rel: 'icon',
-			href: '/favicon-96x96.png',
-			sizes: '96x96',
-		},
-		{
-			rel: 'apple-touch-icon',
-			href: '/apple-icon-120x120.png',
-			sizes: '120x120',
-		},
-		{
-			rel: 'apple-touch-icon',
-			href: '/apple-icon-180x180.png',
-			sizes: '180x180',
-		},
+		{ rel: 'icon', href: '/favicon-16x16.png', sizes: '16x16' },
+		{ rel: 'icon', href: '/favicon-32x32.png', sizes: '32x32' },
+		{ rel: 'icon', href: '/favicon-96x96.png', sizes: '96x96' },
+		{ rel: 'apple-touch-icon', href: '/apple-icon-120x120.png', sizes: '120x120' },
+		{ rel: 'apple-touch-icon', href: '/apple-icon-180x180.png', sizes: '180x180' },
 	],
 } satisfies DefaultSeoProps
 
@@ -117,8 +99,8 @@ const MyApp = (appProps: AppPropsWithGridSwitch) => {
 
 export default api.withTRPC(appWithTranslation(MyApp, nextI18nConfig))
 
-export type NextPageWithoutGrid<P = unknown, IP = P> = NextPage<P, IP> & {
+export type NextPageWithOptions<Props = unknown, InitialProps = Props> = NextPage<Props, InitialProps> & {
 	omitGrid?: boolean
 	autoResetState?: boolean
 }
-type AppPropsWithGridSwitch = AppProps<{ session: Session }> & { Component: NextPageWithoutGrid }
+type AppPropsWithGridSwitch = AppProps<{ session: Session }> & { Component: NextPageWithOptions }

apps/app/src/pages/_document.tsx

@@ -10,7 +10,6 @@ const stylesServer = createStylesServer(appCache)
 export default class _Document extends Document {
 	static async getInitialProps(ctx: DocumentContext) {
 		const initialProps = await Document.getInitialProps(ctx)
-
 		return {
 			...initialProps,
 			styles: [

apps/app/src/pages/index.tsx

@@ -35,7 +35,7 @@ import { ResetPasswordModal } from '@weareinreach/ui/modals/ResetPassword'
 import { api } from '~app/utils/api'
 import { getServerSideTranslations } from '~app/utils/i18n'
 
-import { type NextPageWithoutGrid } from './_app'
+import { type NextPageWithOptions } from './_app'
 
 const useStyles = createStyles((theme) => ({
 	callout1text: {
@@ -159,7 +159,7 @@ const CardTranslation = ({ i18nKey, t }: { i18nKey: string; t: TFunction }) => {
 	)
 }
 
-const Home: NextPageWithoutGrid = () => {
+const Home: NextPageWithOptions = () => {
 	const router = useRouter()
 	const { t } = useTranslation('landingPage')
 	const theme = useMantineTheme()

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

@@ -9,13 +9,14 @@ import { z } from 'zod'
 import { trpcServerClient } from '@weareinreach/api/trpc'
 import { checkServerPermissions } from '@weareinreach/auth'
 import { Toolbar } from '@weareinreach/ui/components/core/Toolbar'
-import { ContactSection } from '@weareinreach/ui/components/sections/Contact'
+import { ContactSection } from '@weareinreach/ui/components/sections/ContactSection'
 import { ListingBasicInfo } from '@weareinreach/ui/components/sections/ListingBasicInfo'
 // import {LocationCard } from '@weareinreach/ui/components/sections/LocationCard'
 import { PhotosSection } from '@weareinreach/ui/components/sections/Photos'
 import { ReviewSection } from '@weareinreach/ui/components/sections/Reviews'
 import { ServicesInfoCard } from '@weareinreach/ui/components/sections/ServicesInfo'
 import { VisitCard } from '@weareinreach/ui/components/sections/VisitCard'
+import { OrgLocationPageLoading } from '@weareinreach/ui/loading-states/OrgLocationPage'
 import { api } from '~app/utils/api'
 import { getServerSideTranslations } from '~app/utils/i18n'
 
@@ -36,7 +37,7 @@ const OrgLocationPage: NextPage = () => {
 	useEffect(() => {
 		if (data && status === 'success' && orgData && orgDataStatus === 'success') setLoading(false)
 	}, [data, status, orgData, orgDataStatus])
-	if (loading || !data || !orgData) return <>Loading</>
+	if (loading || !data || !orgData) return <OrgLocationPageLoading />
 
 	const {
 		// emails,
@@ -69,7 +70,6 @@ const OrgLocationPage: NextPage = () => {
 				/>
 				<Stack pt={24} align='flex-start' spacing={40}>
 					<ListingBasicInfo
-						role='location'
 						data={{
 							name: data.name || orgData.name,
 							id: data.id,

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

@@ -12,40 +12,16 @@ import { z } from 'zod'
 import { trpcServerClient } from '@weareinreach/api/trpc'
 import { AlertMessage } from '@weareinreach/ui/components/core/AlertMessage'
 import { Toolbar } from '@weareinreach/ui/components/core/Toolbar'
-import { ContactSection } from '@weareinreach/ui/components/sections/Contact'
+import { ContactSection } from '@weareinreach/ui/components/sections/ContactSection'
 import { ListingBasicInfo } from '@weareinreach/ui/components/sections/ListingBasicInfo'
 import { PhotosSection } from '@weareinreach/ui/components/sections/Photos'
 import { ReviewSection } from '@weareinreach/ui/components/sections/Reviews'
 import { ServicesInfoCard } from '@weareinreach/ui/components/sections/ServicesInfo'
 import { VisitCard } from '@weareinreach/ui/components/sections/VisitCard'
-// import { useScreenSize } from '@weareinreach/ui/hooks/useScreenSize'
+import { OrgLocationPageLoading } from '@weareinreach/ui/loading-states/OrgLocationPage'
 import { api } from '~app/utils/api'
 import { getServerSideTranslations } from '~app/utils/i18n'
 
-const LoadingState = () => (
-	<>
-		<Grid.Col sm={8} order={1}>
-			{/* Toolbar */}
-			<Skeleton h={48} w='100%' radius={8} />
-			<Stack pt={24} align='flex-start' spacing={40}>
-				{/* Listing Basic */}
-				<Skeleton h={260} w='100%' />
-				{/* Body */}
-				<Skeleton h={520} w='100%' />
-				{/* Tab panels */}
-			</Stack>
-		</Grid.Col>
-		<Grid.Col order={2}>
-			<Stack spacing={40}>
-				{/* Contact Card */}
-				<Skeleton h={520} w='100%' />
-				{/* Visit Card  */}
-				<Skeleton h={260} w='100%' />
-			</Stack>
-		</Grid.Col>
-	</>
-)
-
 const useStyles = createStyles((theme) => ({
 	tabsList: {
 		position: 'sticky',
@@ -89,7 +65,7 @@ const OrgLocationPage: NextPage = () => {
 	useEffect(() => {
 		if (data && status === 'success' && orgData && orgDataStatus === 'success') setLoading(false)
 	}, [data, status, orgData, orgDataStatus])
-	if (loading || !data || !orgData || router.isFallback) return <LoadingState />
+	if (loading || !data || !orgData || router.isFallback) return <OrgLocationPageLoading />
 
 	const { attributes, description, reviews } = data
 
@@ -125,7 +101,6 @@ const OrgLocationPage: NextPage = () => {
 							/>
 						))}
 					<ListingBasicInfo
-						role='location'
 						data={{
 							name: data.name || orgData.name,
 							id: data.id,
@@ -228,10 +203,9 @@ export const getStaticProps = async ({
 
 		const [i18n] = await Promise.allSettled([
 			getServerSideTranslations(locale, ['common', 'services', 'attribute', 'phone-type', orgId.id]),
-			ssg.organization.getBySlug.prefetch({ slug }),
-			// ssg.organization.getIdFromSlug.prefetch({ slug }),
 			ssg.location.forLocationPage.prefetch({ id: orgLocationId }),
 			ssg.organization.forLocationPage.prefetch({ slug }),
+			ssg.location.getAlerts.prefetch({ id: orgLocationId }),
 		])
 		const props = {
 			trpcState: ssg.dehydrate(),