feat(data-portal): organization table (#718)

# Pull Request type Please check the type of change your PR introduces: - [ ] Bugfix - [x] Feature - [ ] Code style update (formatting, renaming) - [ ] Refactoring (no functional changes, no API changes) - [ ] Build-related changes - [ ] Documentation content changes - [ ] Other (please describe): ## What is the current behavior? Issue Number: IN-854 ## What is the new behavior? - - - ## Does this introduce a breaking change? - [ ] Yes - [ ] No ## Other information PR-URL: #718 Co-authored-by: Joe Karow <[email protected]>
weareinreach · Aug 17, 2023 · e024525 · e024525
2 parents e3f98e5 + 2ab6eb5
commit e024525
Show file tree

Hide file tree

Showing 14 changed files with 667 additions and 18 deletions.
diff --git a/packages/api/router/organization/index.ts b/packages/api/router/organization/index.ts
@@ -24,6 +24,7 @@ type OrganizationHandlerCache = {
 	slugRedirect: typeof import('./query.slugRedirect.handler').slugRedirect
 	getIntlCrisis: typeof import('./query.getIntlCrisis.handler').getIntlCrisis
 	getNatlCrisis: typeof import('./query.getNatlCrisis.handler').getNatlCrisis
+	forOrganizationTable: typeof import('./query.forOrganizationTable.handler').forOrganizationTable
 	// #endregion
 
 	//
@@ -162,6 +163,17 @@ export const orgRouter = defineRouter({
 		if (!HandlerCache.getNatlCrisis) throw new Error('Failed to load handler')
 		return HandlerCache.getNatlCrisis({ ctx, input })
 	}),
+	forOrganizationTable: publicProcedure
+		.input(schema.ZForOrganizationTableSchema)
+		.query(async ({ ctx, input }) => {
+			if (!HandlerCache.forOrganizationTable)
+				HandlerCache.forOrganizationTable = await import('./query.forOrganizationTable.handler').then(
+					(mod) => mod.forOrganizationTable
+				)
+
+			if (!HandlerCache.forOrganizationTable) throw new Error('Failed to load handler')
+			return HandlerCache.forOrganizationTable({ ctx, input })
+		}),
 
 	// #endregion
 

diff --git a/packages/api/router/organization/query.forOrganizationTable.handler.ts b/packages/api/router/organization/query.forOrganizationTable.handler.ts
@@ -0,0 +1,32 @@
+import { prisma } from '@weareinreach/db'
+import { type TRPCHandlerParams } from '~api/types/handler'
+
+import { type TForOrganizationTableSchema } from './query.forOrganizationTable.schema'
+
+export const forOrganizationTable = async ({ input }: TRPCHandlerParams<TForOrganizationTableSchema>) => {
+	const results = await prisma.organization.findMany({
+		where: input,
+		select: {
+			id: true,
+			name: true,
+			slug: true,
+			lastVerified: true,
+			updatedAt: true,
+			createdAt: true,
+			published: true,
+			deleted: true,
+			locations: {
+				select: {
+					id: true,
+					name: true,
+					updatedAt: true,
+					createdAt: true,
+					published: true,
+					deleted: true,
+				},
+			},
+		},
+		orderBy: [{ deleted: 'desc' }, { name: 'asc' }],
+	})
+	return results
+}
diff --git a/packages/api/router/organization/query.forOrganizationTable.schema.ts b/packages/api/router/organization/query.forOrganizationTable.schema.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+
+export const ZForOrganizationTableSchema = z
+	.object({
+		published: z.boolean(),
+		deleted: z.boolean(),
+	})
+	.partial()
+	.optional()
+export type TForOrganizationTableSchema = z.infer<typeof ZForOrganizationTableSchema>
diff --git a/packages/api/router/organization/schemas.ts b/packages/api/router/organization/schemas.ts
@@ -4,6 +4,7 @@ export * from './mutation.createNewQuick.schema'
 export * from './mutation.createNewSuggestion.schema'
 export * from './query.checkForExisting.schema'
 export * from './query.forLocationPage.schema'
+export * from './query.forOrganizationTable.schema'
 export * from './query.forOrgPage.schema'
 export * from './query.generateSlug.schema'
 export * from './query.getById.schema'

diff --git a/packages/ui/.storybook/decorators.tsx b/packages/ui/.storybook/decorators.tsx
@@ -110,7 +110,7 @@ export const Layouts = (Story: StoryFn, context: StoryContext) => {
 	switch (layoutWrapper) {
 		case 'centeredFullscreen': {
 			return (
-				<Center h='100vh'>
+				<Center h='100vh' w='100vw'>
 					<Story />
 				</Center>
 			)

diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
@@ -38,7 +38,7 @@ const config: StorybookConfig = {
 		options: {
 			builder: {
 				lazyCompilation: Boolean(process.env.SB_LAZY),
-				fsCache: Boolean(process.env.SB_CACHE),
+				fsCache: true, // Boolean(process.env.SB_CACHE),
 				useSWC: true,
 			},
 			nextConfigPath: path.resolve(__dirname, '../../../apps/app/next.config.mjs'),

diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import './wdyr'
 import { type BADGE } from '@geometricpanda/storybook-addon-badges'
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { type INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { type Preview } from '@storybook/react'
 import { type WhyDidYouRenderOptions } from '@welldone-software/why-did-you-render'
 import { type RequestHandler, rest } from 'msw'
@@ -67,7 +67,93 @@ const preview: Preview = {
 		},
 		i18n,
 		viewport: {
-			viewports: INITIAL_VIEWPORTS,
+			viewports: {
+				iphonex: {
+					name: 'iPhone X',
+					styles: { height: '812px', width: '375px' },
+					type: 'mobile',
+				},
+				iphonexsmax: {
+					name: 'iPhone XS Max',
+					styles: { height: '896px', width: '414px' },
+					type: 'mobile',
+				},
+				iphonese2: {
+					name: 'iPhone SE (2nd generation)',
+					styles: { height: '667px', width: '375px' },
+					type: 'mobile',
+				},
+				iphone12mini: {
+					name: 'iPhone 12 mini',
+					styles: { height: '812px', width: '375px' },
+					type: 'mobile',
+				},
+				iphone12: {
+					name: 'iPhone 12',
+					styles: { height: '844px', width: '390px' },
+					type: 'mobile',
+				},
+				iphone12promax: {
+					name: 'iPhone 12 Pro Max',
+					styles: { height: '926px', width: '428px' },
+					type: 'mobile',
+				},
+				galaxys9: {
+					name: 'Galaxy S9',
+					styles: { height: '740px', width: '360px' },
+					type: 'mobile',
+				},
+				nexus6p: {
+					name: 'Nexus 6P',
+					styles: { height: '732px', width: '412px' },
+					type: 'mobile',
+				},
+				pixel: {
+					name: 'Pixel',
+					styles: { height: '960px', width: '540px' },
+					type: 'mobile',
+				},
+				pixelxl: {
+					name: 'Pixel XL',
+					styles: { height: '1280px', width: '720px' },
+					type: 'mobile',
+				},
+				ipad: {
+					name: 'iPad',
+					styles: { height: '1024px', width: '768px' },
+					type: 'tablet',
+				},
+				ipad10p: {
+					name: 'iPad Pro 10.5-in',
+					styles: { height: '1112px', width: '834px' },
+					type: 'tablet',
+				},
+				ipad12p: {
+					name: 'iPad Pro 12.9-in',
+					styles: { height: '1366px', width: '1024px' },
+					type: 'tablet',
+				},
+				desktop1: {
+					name: 'Desktop - 1920x1080',
+					styles: { width: '1920px', height: '1080px' },
+					type: 'desktop',
+				},
+				desktop2: {
+					name: 'Desktop - 1366x768',
+					styles: { width: '1366px', height: '768px' },
+					type: 'desktop',
+				},
+				desktop3: {
+					name: 'Desktop - 1440x900',
+					styles: { width: '1440px', height: '900px' },
+					type: 'desktop',
+				},
+				desktop4: {
+					name: 'Desktop - 1280x720',
+					styles: { width: '1280px', height: '720px' },
+					type: 'desktop',
+				},
+			},
 		},
 		chromatic: {
 			delay: 1000,
@@ -132,7 +218,6 @@ declare module '@storybook/react' {
 		layout?: 'centered' | 'fullscreen' | 'padded'
 		layoutWrapper?: LayoutsDecorator
 		disableStrictMode?: boolean
-		disableWhyDidYouRender?: boolean
 		pseudo?: Partial<Record<PseudoStates, string | string[] | boolean>> & { rootElement?: string }
 		rqDevtools?: boolean
 		searchContext?: SearchStateProviderProps['initState']

diff --git a/packages/ui/components/data-portal/OrganizationTable.stories.tsx b/packages/ui/components/data-portal/OrganizationTable.stories.tsx
@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import { organization } from '~ui/mockData/organization'
+
+import { OrganizationTable } from './OrganizationTable'
+
+export default {
+	title: 'Data Portal/Tables/Organizations',
+	component: OrganizationTable,
+	parameters: {
+		layoutWrapper: 'centeredFullscreen',
+		msw: [organization.forOrganizationTable],
+		rqDevtools: true,
+	},
+} satisfies Meta<typeof OrganizationTable>
+
+type StoryDef = StoryObj<typeof OrganizationTable>
+
+export const Default = {} satisfies StoryDef