opportunity-hack · gregv · Dec 22, 2023 · Jul 19, 2023 · Jul 27, 2023 · Jul 27, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,6 @@
     "@remix-run/server-runtime",
     "@remix-run/router",
     "react-router"
-  ]
+  ],
+  "editor.formatOnSave": true
 }
diff --git a/app/components/ui/data_table.tsx b/app/components/ui/data_table.tsx
@@ -30,12 +30,17 @@ export function DataTable<TData, TValue>({
 		data,
 		columns,
 		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		autoResetPageIndex: false,
-	})
+		getPaginationRowModel: getPaginationRowModel(),				
+		initialState: {
+			pagination: {
+				pageSize: 20, // Set the default page size to 20
+			}
+		}
+
+	});
 
 	return (
-		<div>
+		<div>							
 			<div className="rounded-md border">
 				<Table>
 					<TableHeader>
@@ -90,7 +95,7 @@ export function DataTable<TData, TValue>({
 				<div className="flex w-[250px] items-center justify-center text-sm font-medium">
 					Page {table.getState().pagination.pageIndex + 1} of{' '}
 					{table.getPageCount()}{' '}
-					<span className="ml-4">(10 rows per page)</span>
+					<span className="ml-4">(20 rows per page)</span>
 				</div>
 				<Button
 					variant="outline"

diff --git a/app/components/ui/icon.svg b/app/components/ui/icon.svg
diff --git a/app/components/ui/icon.tsx b/app/components/ui/icon.tsx
@@ -63,24 +63,25 @@ export function Icon({
 }
 
 type IconName =
-	| 'arrow-right'
-	| 'avatar'
-	| 'calendar'
-	| 'camera'
-	| 'caret-sort'
-	| 'check'
-	| 'cross-1'
-	| 'dots-vertical'
-	| 'exit'
-	| 'gear'
-	| 'horse'
-	| 'laptop'
-	| 'lock-closed'
-	| 'lock-open-1'
-	| 'moon'
-	| 'pencil-1'
-	| 'pencil-2'
-	| 'person'
-	| 'plus'
-	| 'sun'
-	| 'trash'
+  | "arrow-right"
+  | "avatar"
+  | "calendar"
+  | "camera"
+  | "caret-sort"
+  | "check"
+  | "cross-1"
+  | "dots-vertical"
+  | "email"
+  | "exit"
+  | "gear"
+  | "horse"
+  | "laptop"
+  | "lock-closed"
+  | "lock-open-1"
+  | "moon"
+  | "pencil-1"
+  | "pencil-2"
+  | "person"
+  | "plus"
+  | "sun"
+  | "trash"
diff --git a/app/data.ts b/app/data.ts
@@ -2,7 +2,9 @@ import { Prisma } from '@prisma/client'
 
 export const siteName = 'The Barn Volunteer Portal'
 export const siteEmailAddress = '[email protected]'
-export const siteEmailAddressWithName = siteName + ' <[email protected]>'
+export const siteEmailAddressWithName =
+	siteName + ' <[email protected]>'
+export const siteBaseUrl = 'https://thebarn.trottrack.org'
 
 export const volunteerTypes = [
 	{

diff --git a/app/root.tsx b/app/root.tsx
@@ -160,15 +160,19 @@ function App() {
 	)
 	if (user) {
 		nav = (
-			<div className="flex items-center gap-1">
-				<Button asChild className="mx-auto pr-4" size="sm" variant="default">
-					<Link to="/calendar" className="flex gap-2 pr-1">
-						<Icon className="text-body-md" name="calendar" />
-						Calendar
-					</Link>
-				</Button>
-				{userIsAdmin ? <AdminDropdown /> : null}
-				<UserDropdown />
+			<div className="flex grow items-center justify-between gap-1 sm:justify-end">
+				<div className="flex items-center justify-start gap-1">
+					<Button asChild className="px-4" size="sm" variant="default">
+						<Link to="/calendar" className="flex gap-2">
+							<Icon className="text-body-md" name="calendar" />
+							<span className="xsm:inline hidden">Calendar</span>
+						</Link>
+					</Button>
+					{userIsAdmin ? <AdminDropdown /> : null}
+				</div>
+				<div className="shrink-0">
+					<UserDropdown />
+				</div>
 			</div>
 		)
 	}
@@ -184,8 +188,8 @@ function App() {
 			</head>
 			<body className="flex h-full flex-col justify-between bg-background text-foreground">
 				<header className="container mx-auto py-6">
-					<nav className="flex justify-between">
-						<Link to="/">
+					<nav className="flex justify-center sm:justify-between">
+						<Link to="/" className="hidden sm:block">
 							<div className="font-light">Equestrian</div>
 							<div className="font-bold">Volunteer Scheduler</div>
 						</Link>
@@ -229,9 +233,9 @@ function UserDropdown() {
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button asChild variant="secondary" className="min-w-[8rem]">
+				<Button asChild variant="secondary" className="gap-2 px-2">
 					<Link
-						to={`/users/${user.username}`}
+						to={`/settings/profile`}
 						// this is for progressive enhancement
 						onClick={e => e.preventDefault()}
 					>
@@ -240,7 +244,7 @@ function UserDropdown() {
 							alt={user.name ?? user.username}
 							src={getUserImgSrc(user.imageId)}
 						/>
-						<span className="text-body-sm font-bold">
+						<span className="text-body-sm font-bold hidden sm:inline">
 							{user.name ?? user.username}
 						</span>
 					</Link>
@@ -281,7 +285,7 @@ function AdminDropdown() {
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button asChild variant="secondary" className="min-w-[8rem]">
+				<Button asChild variant="secondary" className="gap-2">
 					<Link
 						to="/admin/users"
 						// this is for progressive enhancement
@@ -308,6 +312,13 @@ function AdminDropdown() {
 							</Icon>
 						</Link>
 					</DropdownMenuItem>
+					<DropdownMenuItem asChild>
+						<Link prefetch="intent" to={`/admin/email`}>
+							<Icon className="text-body-md" name="email">
+								Email
+							</Icon>
+						</Link>
+					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenuPortal>
 		</DropdownMenu>

diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
@@ -118,16 +118,8 @@ export async function action({ request }: DataFunctionArgs) {
 			{ status: 400 },
 		)
 	}
-	const {
-		username,
-		name,
-		password,
-		phone,
-		// TODO: add user to mailing list if they agreed to it
-		// agreeToMailingList,
-		remember,
-		redirectTo,
-	} = submission.value
+	const { username, name, password, phone, remember, redirectTo } =
+		submission.value
 
 	const session = await signup({ email, username, password, name, phone })
 
@@ -175,11 +167,7 @@ export default function OnboardingPage() {
 					</p>
 				</div>
 				<Spacer size="xs" />
-				<Form
-					method="POST"
-					className="mx-auto w-full max-w-sm"
-					{...form.props}
-				>
+				<Form method="POST" className="mx-auto w-full max-w-sm" {...form.props}>
 					<Field
 						labelProps={{ htmlFor: fields.username.id, children: 'Username' }}
 						inputProps={{
@@ -233,15 +221,14 @@ export default function OnboardingPage() {
 							htmlFor: fields.agreeToTermsOfServiceAndPrivacyPolicy.id,
 							children: (
 								<>
-									Do you agree to our{' '}
+									I agree to the{' '}
 									<Link to="/tos" target="_blank" className="underline">
 										Terms of Service
 									</Link>{' '}
 									and{' '}
 									<Link to="/privacy" target="_blank" className="underline">
 										Privacy Policy
 									</Link>
-									?
 								</>
 							),
 						}}
@@ -252,18 +239,6 @@ export default function OnboardingPage() {
 						errors={fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
 					/>
 
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.agreeToMailingList.id,
-							children:
-								'Would you like to recieve emails about upcoming opportunities to volunteer?',
-						}}
-						buttonProps={conform.input(fields.agreeToMailingList, {
-							type: 'checkbox',
-						})}
-						errors={fields.agreeToMailingList.errors}
-					/>
-
 					<CheckboxField
 						labelProps={{
 							htmlFor: fields.remember.id,

diff --git a/app/routes/_auth+/signup/index.tsx b/app/routes/_auth+/signup/index.tsx
@@ -31,7 +31,12 @@ export const verificationType = 'onboarding'
 
 const signupSchema = z.object({
 	email: emailSchema,
-	signupPassword: z.string().min(1, { message: "Please fill this in with the password given to you by the volunteer coordinator." }),
+	signupPassword: z
+		.string()
+		.min(1, {
+			message:
+				'Please fill this in with the password given to you by the volunteer coordinator.',
+		}),
 })
 
 export async function action({ request }: DataFunctionArgs) {
@@ -52,12 +57,14 @@ export async function action({ request }: DataFunctionArgs) {
 					return
 				}
 
-				const validSignupPassword = await verifySignupPassword(data.signupPassword)
+				const validSignupPassword = await verifySignupPassword(
+					data.signupPassword,
+				)
 				if (!validSignupPassword) {
 					ctx.addIssue({
 						path: ['signupPassword'],
 						code: z.ZodIssueCode.custom,
-						message: 'Incorrect signup password'
+						message: 'Incorrect signup password',
 					})
 					return
 				}
@@ -118,11 +125,12 @@ export async function action({ request }: DataFunctionArgs) {
 	if (response.status === 'success') {
 		return redirect(redirectTo.pathname + redirectTo.search)
 	} else {
-		submission.error[''] = 'There was an error sending the email.' + response.error;
-		if ( response.error?.message ){
-			submission.error[''] += ' ' + response.error.message;
+		submission.error[''] =
+			'There was an error sending the email.' + response.error
+		if (response.error?.message) {
+			submission.error[''] += ' ' + response.error.message
 		}
-		
+
 		return json(
 			{
 				status: 'error',
@@ -158,7 +166,8 @@ export default function SignupRoute() {
 			<div className="text-center">
 				<h1 className="text-4xl sm:text-h1">Let's saddle up!</h1>
 				<p className="mt-3 text-body-md text-muted-foreground">
-					Please enter your email and the secret password given to you by the volunteer coordinator.
+					Please enter your email and the secret password given to you by the
+					volunteer coordinator.
 				</p>
 			</div>
 			<Form
@@ -179,7 +188,10 @@ export default function SignupRoute() {
 						htmlFor: fields.signupPassword.id,
 						children: 'Secret',
 					}}
-					inputProps={{ ...conform.input(fields.signupPassword), autoFocus: true, type: "password" }}
+					inputProps={{
+						...conform.input(fields.signupPassword),
+						autoFocus: true,
+					}}
 					errors={fields.signupPassword.errors}
 				/>
 				<ErrorList errors={form.errors} id={form.errorId} />

diff --git a/app/routes/admin+/_email+/CustomEmail.server.tsx b/app/routes/admin+/_email+/CustomEmail.server.tsx
@@ -0,0 +1,43 @@
+import { Container, Html, Link, Tailwind, Text } from '@react-email/components'
+import tailwindConfig from '../../../../tailwind.config.ts'
+import { siteBaseUrl,  siteName } from '~/data.ts'
+
+export function CustomEmail({ upcomingEvents, message }: { upcomingEvents: any[], message: string }) {
+	return (
+		<Tailwind config={tailwindConfig}>
+			<Html lang="en" dir="ltr">
+				<Container style={{ backgroundColor: '#F8F8F8', padding: '20px', borderRadius: '5px' }}>
+					<h1 style={{ color: '#333', fontSize: '24px', marginBottom: '20px' }}>
+						<Text>A Message from {siteName}</Text>
+					</h1>
+					<p style={{ color: '#555', fontSize: '16px', marginBottom: '10px' }}>
+						<Text>{message}</Text>
+					</p>
+					<p style={{ color: '#555', fontSize: '16px', marginBottom: '10px' }}>
+						<Link href={siteBaseUrl + "/calendar"} style={{ color: '#007BFF', textDecoration: 'none' }}>
+							View upcoming events
+						</Link>
+						{
+							// List out upcoming events with event.title
+							// Render event.start and event.end with a date format
+							upcomingEvents.map(event => {
+								return (
+									<div key={event.title}>
+										<Text>
+											🐴 {event.title} {event.start.toLocaleString()} - {event.end.toLocaleTimeString()}																						
+										</Text>																														
+									</div>
+								)
+							}
+							)
+
+
+
+
+						}
+					</p>
+				</Container>
+			</Html>
+		</Tailwind>
+	)
+}