Merge pull request #65 from casesandberg/feature/user_timezone

Save User Timezone

apps/api/app/api/users/me/schema.ts

@@ -10,7 +10,13 @@ export default createSchema({
     },
   },
   PATCH: {
-    requestBody: UserSchema.pick({ username: true, bio: true, displayName: true, avatarUrl: true }).partial(),
+    requestBody: UserSchema.pick({
+      username: true,
+      bio: true,
+      displayName: true,
+      avatarUrl: true,
+      timezone: true,
+    }).partial(),
     responses: {
       200: UserSchema,
       404: ServerErrorSchema,

packages/auth/lib/auth.ts

@@ -41,4 +41,17 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
       from: '[email protected]',
     }),
   ],
+
+  callbacks: {
+    async signIn({ user }) {
+      if (user) {
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+        await db.user.update({
+          where: { id: user.id },
+          data: { timezone },
+        })
+      }
+      return true
+    },
+  },
 })

packages/database/migrations/20240801182408_user_timezone/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "timezone" TEXT NOT NULL DEFAULT 'America/Los_Angeles';

packages/database/mocks.ts

@@ -16,6 +16,22 @@ import {
   Notification,
 } from './zod'
 
+// Monkey patch for es2022
+declare namespace Intl {
+  type Key = 'calendar' | 'collation' | 'currency' | 'numberingSystem' | 'timeZone' | 'unit'
+
+  function supportedValuesOf(input: Key): string[]
+
+  type DateTimeFormatOptions = {
+    timeZone: string
+    timeZoneName: string
+  }
+  class DateTimeFormat {
+    constructor(locale: string, options: DateTimeFormatOptions)
+    format(date: Date): string
+  }
+}
+
 export function mockUser(overrides?: Partial<User>): User {
   const firstName = faker.person.firstName()
   const lastName = faker.person.lastName()
@@ -30,6 +46,7 @@ export function mockUser(overrides?: Partial<User>): User {
     website: faker.helpers.maybe(faker.internet.domainName, { probability: 0.3 }) ?? null,
     createdAt: faker.date.past(),
     updatedAt: faker.date.recent(),
+    timezone: faker.helpers.arrayElement(Intl.supportedValuesOf('timeZone')),
     ...overrides,
   }
 }

packages/database/schema.prisma

@@ -27,6 +27,7 @@ model User {
   discordHandle    String?
   website          String?
   bio              String?
+  timezone         String             @default("America/Los_Angeles")
   authAccounts     AuthAccount[]
   sessions         Session[]
   comments         Comment[]

packages/database/zod/inputTypeSchemas/UserScalarFieldEnumSchema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
 
-export const UserScalarFieldEnumSchema = z.enum(['id','username','displayName','avatarUrl','twitterHandle','discordHandle','website','bio','createdAt','updatedAt','email','emailVerified']);
+export const UserScalarFieldEnumSchema = z.enum(['id','username','displayName','avatarUrl','twitterHandle','discordHandle','website','bio','timezone','createdAt','updatedAt','email','emailVerified']);
 
 export default UserScalarFieldEnumSchema;

packages/database/zod/modelSchema/UserSchema.ts

@@ -13,6 +13,7 @@ export const UserSchema = z.object({
   discordHandle: z.string().nullable(),
   website: z.string().nullable(),
   bio: z.string().nullable(),
+  timezone: z.string(),
   createdAt: z.coerce.date(),
   updatedAt: z.coerce.date(),
   // omitted: email: z.string(),

packages/ui/src/components/ui/combobox.tsx

@@ -49,7 +49,17 @@ export function Combobox({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0">
-        <Command>
+        <Command
+          filter={(rowValue, search, keywords) => {
+            const normalize = (str: string) => str.toLowerCase().replace(/[^a-z0-9]/g, '')
+            const normalizedValue = normalize(rowValue)
+            const normalizedSearch = normalize(search)
+            const normalizedKeywords = keywords?.map(normalize) || []
+
+            const extendedValue = `${normalizedValue} ${normalizedKeywords.join(' ')}`
+            return extendedValue.includes(normalizedSearch) ? 1 : 0
+          }}
+        >
           <CommandInput placeholder={searchLabel} />
           <CommandList>
             <CommandEmpty>{emptyLabel}</CommandEmpty>

packages/users/components/SettingsProfileForm.tsx

@@ -3,17 +3,33 @@
 import { debounce } from 'lodash'
 import React from 'react'
 import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { UserSchema } from '@play-money/database'
+import { User } from '@play-money/database'
 import { Button } from '@play-money/ui/button'
+import { Combobox } from '@play-money/ui/combobox'
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@play-money/ui/form'
 import { Input } from '@play-money/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@play-money/ui/select'
 import { Textarea } from '@play-money/ui/textarea'
 import { toast } from '@play-money/ui/use-toast'
 import { useUser } from '../context/UserContext'
 
-const profileFormSchema = UserSchema.pick({ username: true, bio: true, avatarUrl: true, displayName: true })
-type ProfileFormValues = z.infer<typeof profileFormSchema>
+// Monkey patch for es2022
+declare namespace Intl {
+  type Key = 'calendar' | 'collation' | 'currency' | 'numberingSystem' | 'timeZone' | 'unit'
+
+  function supportedValuesOf(input: Key): string[]
+
+  type DateTimeFormatOptions = {
+    timeZone: string
+    timeZoneName: string
+  }
+  class DateTimeFormat {
+    constructor(locale: string, options: DateTimeFormatOptions)
+    format(date: Date): string
+  }
+}
+
+type ProfileFormValues = Pick<User, 'username' | 'bio' | 'avatarUrl' | 'displayName' | 'timezone'>
 
 // TODO: @casesandberg Generate this from OpenAPI schema
 async function checkUsernameAvailability(username: string): Promise<{ available: boolean; message?: string }> {
@@ -31,6 +47,7 @@ export function SettingsProfileForm() {
       username: user?.username ?? '',
       bio: user?.bio ?? '',
       displayName: user?.displayName ?? '',
+      timezone: user?.timezone ?? '',
     },
   })
 
@@ -127,6 +144,37 @@ export function SettingsProfileForm() {
           )}
         />
 
+        <FormField
+          control={form.control}
+          name="timezone"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Timezone</FormLabel>
+              <FormControl>
+                <Combobox
+                  buttonClassName="w-full"
+                  {...field}
+                  items={Intl.supportedValuesOf('timeZone').map((tz) => {
+                    const offset = new Intl.DateTimeFormat('en-US', {
+                      timeZone: tz,
+                      timeZoneName: 'shortOffset',
+                    })
+                      .format(new Date())
+                      .split(' ')
+                      .pop()
+                    return { value: tz, label: `${tz} (${offset})`, keywords: [...tz.split(' ')] }
+                  })}
+                />
+              </FormControl>
+              <FormDescription>
+                This will be used for sending notifications, daily quest resets and displaying times in your local
+                timezone.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <Button type="submit" disabled={!isDirty || !isValid} loading={isSubmitting}>
           Update profile
         </Button>

packages/users/lib/updateUserById.ts

@@ -8,12 +8,14 @@ export async function updateUserById({
   displayName,
   bio,
   avatarUrl,
+  timezone,
 }: {
   id: string
   username?: string
   displayName?: string
   bio?: string
   avatarUrl?: string
+  timezone?: string
 }) {
   const user = await getUserById({ id })
 
@@ -33,7 +35,9 @@ export async function updateUserById({
   if (avatarUrl) {
     updatedData.avatarUrl = avatarUrl
   }
-
+  if (timezone) {
+    updatedData.timezone = timezone
+  }
   if (displayName) {
     updatedData.displayName = displayName
   }