ShareModal

The ShareModal component provides an interface for managing sharing permissions for folders and files, allowing users to control access through user and team assignments.

Implementation

The component uses several hooks for managing users and teams:

import { ShareModal } from '../components/modals/ShareModal'
import { usePeople } from '@hooks/people/usePeople'
import { useTeam } from '@hooks/team/useTeam'

Props

Name	Type	Required	Description
doc	FileItem	Yes	The file or folder to share
effectivePermissions	EffectivePermissions	No	Current effective permissions
inheritPermissions	boolean	No	Whether to inherit permissions from parent (default: false)
onSave	(permissions: SharePermissions) => Promise<void>	Yes	Callback when permissions are saved
onClose	() => void	No	Callback when modal is closed

Where SharePermissions is:

{
  users: { user: string; role: FolderRole }[]
  teams: { team: string; role: FolderRole }[]
  inheritPermissions: boolean
}

Features

Permission Management

• Toggle between people and team sharing views
• Assign user-level permissions with roles (editor, viewer)
• Assign team-level permissions
• Inherit permissions from parent folder
• Filter out document owner from available people
• Prevent duplicate assignments

Data Management

• Uses usePeople hook for user data
• Uses useTeam hook for team data
• Memoized filtering of available people and teams
• Loading states for async operations

User Interface

• Toggle switch between people and teams view
• DataTable for displaying assigned permissions
• Role selection via dropdown (editor, viewer, remove access)
• Permission inheritance toggle
• Loading states feedback

Internal Types

interface PersonWithRole {
  _id: string
  firstName: string
  lastName: string
  role: FolderRole
  email: string
  isEffective: boolean
}

interface TeamWithRole {
  _id: string
  name: string
  role: FolderRole
  members: JSX.Element
  isEffective: boolean
}

Usage Example

import { ShareModal } from '../components/modals/ShareModal'

function ShareButton({ fileItem }: { fileItem: FileItem }) {
  const handleSave = async (permissions: {
    users: { user: string; role: FolderRole }[]
    teams: { team: string; role: FolderRole }[]
    inheritPermissions: boolean
  }) => {
    try {
      await updatePermissions(fileItem._id, permissions)
    } catch (error) {
      showError({
        title: 'Error updating permissions',
        message: 'Failed to update permissions. Please try again.'
      })
    }
  }

  return (
    <ShareModal
      doc={fileItem}
      effectivePermissions={currentPermissions}
      inheritPermissions={fileItem.inheritPermissions}
      onSave={handleSave}
      onClose={() => {
        // Handle modal close
      }}
    />
  )
}