EditReportInWord Component

The EditReportInWord component is the primary user interface for initiating and managing Microsoft Word editing sessions for radiology reports.

Component Overview

Location: src/components/reusable/Modals/Report/EditReportInWord.tsx

Purpose: Provides the "Edit in Microsoft Word" functionality within the report modal

Props Interface

interface Props {
  selectedReportData: JsonObject;
  selectedTemplate: JsonObject;
}

Props Description:

• selectedReportData: Contains lab report information (ID, patient data, etc.)
• selectedTemplate: Selected template configuration (ID, S3 path, etc.)

State Management

const [currentEditedReport, setCurrentEditedReport] = useState<ExternalReportEdit | JsonObject>({});
const [spinner, setSpinner] = useState<boolean>(false);
const [isButtonClicked, setIsButtonClicked] = useState<boolean>(false);

Key Methods

getExistingReport

Purpose: Fetches existing edit session data on component mount

const getExistingReport = async (): Promise<void> => {
  try {
    const currentReport = await GET(`api-v3/report/external-edit/${selectedReportData?.labReportId}`);
    if (!currentReport?.data || !currentReport?.data?.pdf_file_path) {
      setCurrentEditedReport({});
      return;
    }
    setCurrentEditedReport(currentReport.data);
  } catch {
    failureAlert("Failed to fetch existing report");
    setCurrentEditedReport({});
  }
};

takeAuthorship

Purpose: Transfers authorship of an active session to the current user

const takeAuthorship = async (): Promise<void> => {
  setSpinner(true);
  const updatedReport: ExternalReportEdit = await transferAuthorshipRequest(
    selectedReportData?.labReportId
  );
  setCurrentEditedReport({ ...updatedReport });
  setTimeout(() => {
    setSpinner(false);
  }, 1000);
};

OnEditInWordClick

Purpose: Handles the main "Edit in Microsoft Word" button click

Logic Flow:

1. Check for existing active session
2. Validate template selection
3. Set loading state
4. Call makeWordRequest to initiate session
5. Handle success/error responses

UI Structure

Main Container

<div className="ml-2">
  <div className="d-flex justify-content-start align-items-center">
    {/* Edit Button */}
    {/* Tooltip */}
  </div>
  {/* Session Status Display */}
</div>

Edit Button

Dynamic States:

• Default: "Edit in Microsoft Word" (primary color)
• Loading: "Opening in Word" (secondary color, disabled)
• Disabled: When user is not the session author

Conditional Rendering:

isDisabled={
  isEmpty(currentEditedReport) ? false : loginUser !== currentEditedReport?.author
}

Session Information Display

Shown when session exists:

• Current author name
• Last updated timestamp (formatted)
• Take authorship button (if not current author)
• PDF preview iframe

Integration Points

With Report Modal

• Embedded within the report viewing modal
• Receives selected template from parent component
• Updates parent state on session changes

With Template System

• Validates selected template exists
• Passes template ID and S3 path to backend
• Handles template-related error messages

With User Management

• Checks current user permissions
• Displays authorship information
• Allows authorship transfer

Error Handling

Validation Errors

• No Template Selected: "Select the appropriate template to edit in word"
• Session Creation Failed: Backend error messages displayed via failureAlert

Network Errors

• API call failures caught and handled gracefully
• User-friendly error messages
• Retry mechanisms where appropriate

Accessibility Features

ARIA Labels

• Button has proper id for testing: edit-in-word-btn
• Tooltip has target ID: allow-microsoft-integration-tooltip-icon

Keyboard Navigation

• Button is focusable and keyboard accessible
• Tooltip triggered on focus/hover

Screen Reader Support

• Descriptive button text
• Status messages read aloud
• Error alerts announced

Performance Considerations

Lazy Loading

• Component loaded only when report modal is opened
• PDF preview loaded on demand

Memory Management

• State cleaned up on unmount
• Large PDF previews handled efficiently

Usage Example

// In Report Modal
<EditReportInWord
  selectedReportData={{
    labReportId: 12345,
    patientName: "John Doe",
    // ... other report data
  }}
  selectedTemplate={{
    id: 678,
    word_s3_filepath: "s3://bucket/templates/radiology.docx",
    name: "Radiology Report Template"
  }}
/>