Sharing UI: invite by email, roles, read-only viewer mode (#17)

Co-authored-by: Steve Dudenhoeffer <[email protected]>

web/src/lib/gardens.ts

@@ -8,6 +8,9 @@ import type { UnitPref } from './units'
 
 const unitPrefSchema = z.enum(['metric', 'imperial'])
 
+export const gardenRoleSchema = z.enum(['owner', 'editor', 'viewer'])
+export type GardenRole = z.infer<typeof gardenRoleSchema>
+
 export const gardenSchema = z.object({
   id: z.number(),
   ownerId: z.number(),
@@ -19,9 +22,22 @@ export const gardenSchema = z.object({
   version: z.number(),
   createdAt: z.string(),
   updatedAt: z.string(),
+  // The actor's effective role on this garden (owner/editor/viewer). Present on
+  // every accessible response; optional defensively.
+  myRole: gardenRoleSchema.optional(),
 })
 export type Garden = z.infer<typeof gardenSchema>
 
+/** Whether a role may edit garden contents (objects/plops). Unknown → false. */
+export function canEditRole(role?: GardenRole): boolean {
+  return role === 'owner' || role === 'editor'
+}
+
+/** Whether a role owns the garden (may edit metadata, manage shares, delete). */
+export function isOwnerRole(role?: GardenRole): boolean {
+  return role === 'owner'
+}
+
 const gardensKey = ['gardens'] as const
 
 export const gardensQueryOptions = queryOptions({

web/src/lib/shares.ts

@@ -0,0 +1,70 @@
+// Garden sharing data layer: zod shapes for /gardens/:id/shares plus the
+// react-query hooks the share dialog and "leave garden" action use.
+
+import { queryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { z } from 'zod'
+import { api } from './api'
+
+export const shareRoleSchema = z.enum(['viewer', 'editor'])
+export type ShareRole = z.infer<typeof shareRoleSchema>
+
+export const shareSchema = z.object({
+  id: z.number(),
+  gardenId: z.number(),
+  userId: z.number(),
+  role: shareRoleSchema,
+  createdBy: z.number(),
+  version: z.number(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+  email: z.string(),
+  displayName: z.string(),
+})
+export type Share = z.infer<typeof shareSchema>
+
+const sharesKey = (gardenId: number) => ['shares', gardenId] as const
+
+export function sharesQueryOptions(gardenId: number) {
+  return queryOptions({
+    queryKey: sharesKey(gardenId),
+    queryFn: async (): Promise<Share[]> => z.array(shareSchema).parse(await api.get(`/gardens/${gardenId}/shares`)),
+  })
+}
+
+/** The shares on a garden (owner-only endpoint). */
+export function useShares(gardenId: number) {
+  return useQuery(sharesQueryOptions(gardenId))
+}
+
+// The add/update responses are a bare GardenShare (no email/displayName), so we
+// don't parse them into the list's Share shape; onSuccess refetches the list.
+export function useAddShare(gardenId: number) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (input: { email: string; role: ShareRole }) => api.post(`/gardens/${gardenId}/shares`, input),
+    onSuccess: () => qc.invalidateQueries({ queryKey: sharesKey(gardenId) }),
+  })
+}
+
+export function useUpdateShareRole(gardenId: number) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ userId, role }: { userId: number; role: ShareRole }) =>
+      api.patch(`/gardens/${gardenId}/shares/${userId}`, { role }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: sharesKey(gardenId) }),
+  })
+}
+
+/** Remove a share. Used both by the owner (revoke) and by a recipient leaving a
+ *  garden (their own userId). Refreshes the garden list too, since a leave
+ *  changes what the current user can see. */
+export function useRemoveShare(gardenId: number) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (userId: number) => api.delete(`/gardens/${gardenId}/shares/${userId}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: sharesKey(gardenId) })
+      qc.invalidateQueries({ queryKey: ['gardens'] })
+    },
+  })
+}