Duplicate an event by copy-pasting it

[tyler-dane]

Feature Description

As a user, I want to be able to duplicate an event using META + C and META + V, so I can create a similar one quickly.

Use Case

Some users naturally use the META + c and META + v shortcuts to copy and paste items in other apps. Even though you can duplicate an event using one shortcut (META + d), we should also accommodate this shortcut combination for those who aren't familiar with the former yet.

Additional Context

A user can already duplicate an event in two ways:

• R-Click and then clicking Duplicate event from the action menu (Allow user to duplicate regular events #191)
• Meta + d (META + d does not duplicate event #446)

This code should be very similar what we already have.

There is some potential complexity here. If a user presses META+C on one event, then clicks another event and presses META + C on that one, we'll have to be careful that we use the event data from the second event and not the first.

Another gotcha to be aware of is considering what happens if a user presses META + C and then doesn't press META + V immediately afterwards. Do some experimentation or research about how to best handle this scenario. Do we add an interval so that the local state is cleared if the META + V doesn't come afterwards? Does that kind of functionality come with react-hotkeys? Do we just keep it around forever and let the user paste it at a later time?

This is a rough POC. Notice how it stores the event in memory.

import React, { useState } from 'react';
import { HotKeys } from 'react-hotkeys';

const keyMap = {
  COPY_EVENT: 'meta+c',
  PASTE_EVENT: 'meta+v'
};

const EventHotkeys = ({ onDuplicate }) => {
  const [copiedEvent, setCopiedEvent] = useState(null);

  const handlers = {
    COPY_EVENT: (event) => {
      event.preventDefault();
      // Assume getSelectedEvent() is your logic to get the selected event
      const selectedEvent = getSelectedEvent(); 
      if (selectedEvent) {
        setCopiedEvent(selectedEvent);
        console.log('Event copied:', selectedEvent);
      }
    },
    PASTE_EVENT: (event) => {
      event.preventDefault();
      if (copiedEvent) {
        onDuplicate(copiedEvent);
        console.log('Event duplicated:', copiedEvent);
      }
    }
  };

  return (
    <HotKeys keyMap={keyMap} handlers={handlers}>
      {/* Your UI here */}
    </HotKeys>
  );
};

export default EventHotkeys;

[tyler-dane]

Moved to a future milestone. Since users can already duplicate events via clicking, I'd like to focus on other net-new use-cases before this.