Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overhaul CreateLink Modal with Typed Models & Dynamic Checkboxes #225

Open
6 tasks
mahid797 opened this issue Feb 23, 2025 · 0 comments
Open
6 tasks

Overhaul CreateLink Modal with Typed Models & Dynamic Checkboxes #225

mahid797 opened this issue Feb 23, 2025 · 0 comments
Assignees
Labels
Frontend Frontend Related Issue ⚡Important High-impact issue that needs to be resolved before the next release Refactor Code Improvement
Milestone

Comments

@mahid797
Copy link
Collaborator

Remove any old numeric toggles (requiredUserDetailsOption), adopt typed data models (e.g. CreateDocumentLinkPayload), and dynamically render checkboxes for “Name,” “Email,” etc. from visitorFieldsConfig.ts. The user can also set alias, password (if not public), expirationTime, etc.

Detailed Tasks

  1. Create or Update CreateDocumentLinkPayload

    • Place it under src/shared/models/links.ts or a similar path.
    • Include fields like alias, isPublic, expirationTime, visitorFields (as an array of strings), etc.
  2. Use visitorFieldsConfig.ts

    • In CreateLink.tsx, import the config keys (e.g. visitorFieldKeys) to render checkboxes for each potential field.
    • The final chosen fields become visitorFields: string[] in the request payload.
  3. Typed useState

    • Instead of untyped useState({ alias: '', ... }), define an interface, e.g. CreateLinkFormValues. Example:
      interface CreateLinkFormValues {
      	alias: string;
      	isPublic: boolean;
      	password?: string;
      	askForVisitorInfo: boolean;
      	[key: string]: any; // for dynamic checkboxes
      }
    • Then do const [values, setValues] = useState<CreateLinkFormValues>({...}).
  4. Expiration Handling

    • If the user picks “days from now” or a date, the final payload should always pass expirationTime as an ISO string or omit it if not set.
  5. Remove Numeric Toggles

    • Delete references to requiredUserDetailsOption=1|2. Use the new dynamic checkboxes approach.
  6. Validation (Optional)

    • Use existing useValidatedFormData or a similar approach to ensure typed form data, minimal password length, etc.

Acceptance Criteria

  • CreateLink.tsx no longer references numeric toggles for visitor info.
  • A typed CreateDocumentLinkPayload model is defined under src/shared/models/links.ts.
  • The final payload uses an array of strings for visitorFields.
  • The UI renders dynamic checkboxes from visitorFieldsConfig.ts, storing the user’s selected fields in state.
  • Any errors (e.g., password too short) use typed form validations.
  • Code is clean, with ephemeral styled usage removed or replaced by sx props or small shared components.
@mahid797 mahid797 added this to the v0.1 milestone Feb 23, 2025
@mahid797 mahid797 added New Feature New feature to be implemented Refactor Code Improvement Frontend Frontend Related Issue ⚡Important High-impact issue that needs to be resolved before the next release and removed New Feature New feature to be implemented labels Feb 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Frontend Frontend Related Issue ⚡Important High-impact issue that needs to be resolved before the next release Refactor Code Improvement
Projects
None yet
Development

No branches or pull requests

2 participants