Add activeUser for default payer per group (#16)

* Add activeUser for default payer per group

* Prettier, change labels, use useEffect

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -6,7 +6,7 @@ import { Participant } from '@prisma/client'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { Fragment } from 'react'
+import { Fragment, useEffect } from 'react'
 
 type Props = {
   expenses: Awaited<ReturnType<typeof getGroupExpenses>>
@@ -21,6 +21,21 @@ export function ExpenseList({
   participants,
   groupId,
 }: Props) {
+  useEffect(() => {
+    const activeUser = localStorage.getItem('newGroup-activeUser')
+    const newUser = localStorage.getItem(`${groupId}-newUser`)
+    if (activeUser || newUser) {
+      localStorage.removeItem('newGroup-activeUser')
+      localStorage.removeItem(`${groupId}-newUser`)
+      const userId = participants.find(
+        (p) => p.name === (activeUser || newUser),
+      )?.id
+      if (userId) {
+        localStorage.setItem(`${groupId}-activeUser`, userId)
+      }
+    }
+  }, [groupId, participants])
+
   const getParticipant = (id: string) => participants.find((p) => p.id === id)
   const router = useRouter()
 

src/components/expense-form.tsx

@@ -51,6 +51,15 @@ export type Props = {
 export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
   const isCreate = expense === undefined
   const searchParams = useSearchParams()
+  const getSelectedPayer = (field?: { value: string }) => {
+    if (isCreate && typeof window !== 'undefined') {
+      const activeUser = localStorage.getItem(`${group.id}-activeUser`)
+      if (activeUser && activeUser !== 'None') {
+        return activeUser
+      }
+    }
+    return field?.value
+  }
   const form = useForm<ExpenseFormValues>({
     resolver: zodResolver(expenseFormSchema),
     defaultValues: expense
@@ -87,6 +96,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
           expenseDate: new Date(),
           amount: 0,
           paidFor: [],
+          paidBy: getSelectedPayer(),
           isReimbursement: false,
           splitMode: 'EVENLY',
         },
@@ -199,7 +209,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
                   <FormLabel>Paid by</FormLabel>
                   <Select
                     onValueChange={field.onChange}
-                    defaultValue={field.value}
+                    defaultValue={getSelectedPayer(field)}
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select a participant" />

src/components/group-form.tsx

@@ -24,6 +24,13 @@ import {
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
 import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { getGroup } from '@/lib/api'
 import { GroupFormValues, groupFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -61,6 +68,21 @@ export function GroupForm({
     keyName: 'key',
   })
 
+  let activeUser = 'None'
+
+  const updateActiveUser = () => {
+    if (group?.id) {
+      const participant = group.participants.find((p) => p.name === activeUser)
+      if (participant?.id) {
+        localStorage.setItem(`${group.id}-activeUser`, participant.id)
+      } else {
+        localStorage.setItem(`${group.id}-newUser`, activeUser)
+      }
+    } else {
+      localStorage.setItem('newGroup-activeUser', activeUser)
+    }
+  }
+
   return (
     <Form {...form}>
       <form
@@ -196,9 +218,57 @@ export function GroupForm({
           </CardFooter>
         </Card>
 
+        <Card className="mb-4">
+          <CardHeader>
+            <CardTitle>Local settings</CardTitle>
+            <CardDescription>
+              These settings are set per-device, and are used to customize your
+              experience.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid sm:grid-cols-2 gap-4">
+              <FormItem>
+                <FormLabel>Active user</FormLabel>
+                <FormControl>
+                  <Select
+                    onValueChange={(value) => {
+                      activeUser = value
+                    }}
+                    defaultValue={
+                      fields.find(
+                        (f) =>
+                          f.id ===
+                          localStorage.getItem(`${group?.id}-activeUser`),
+                      )?.name || 'None'
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a participant" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {[{ name: 'None' }, ...form.watch('participants')]
+                        .filter((item) => item.name.length > 0)
+                        .map(({ name }) => (
+                          <SelectItem key={name} value={name}>
+                            {name}
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormDescription>
+                  User used as default for paying expenses.
+                </FormDescription>
+              </FormItem>
+            </div>
+          </CardContent>
+        </Card>
+
         <SubmitButton
           size="lg"
           loadingContent={group ? 'Saving…' : 'Creating…'}
+          onClick={updateActiveUser}
         >
           <Save className="w-4 h-4 mr-2" /> {group ? <>Save</> : <> Create</>}
         </SubmitButton>