Function EditEvent

apps/start/src/modals/edit-event.tsx:28–214

({ id }: Props)

}

export default function EditEvent({ id }: Props) {
  const { projectId } = useAppParams();
  const trpc = useTRPC();
  const client = useQueryClient();

  const { data: event } = useQuery(
    trpc.event.byId.queryOptions({ id, projectId }),
  );

  const [selectedIcon, setIcon] = useState<string | null>(null);
  const [selectedColor, setColor] = useState(EventIconRecords.default!.color);
  const [conversion, setConversion] = useState(false);
  const [step, setStep] = useState<'icon' | 'color'>('icon');
  useEffect(() => {
    if (event?.meta?.icon) {
      setIcon(event.meta.icon);
    }
    if (event?.meta?.color) {
      setColor(event.meta.color);
    }
    if (event?.meta?.conversion) {
      setConversion(event.meta.conversion);
    }
  }, [event]);

  const SelectedIcon = selectedIcon ? EventIconMapper[selectedIcon] : null;

  const mutation = useMutation(
    trpc.event.updateEventMeta.mutationOptions({
      onSuccess() {
        toast('Event updated');
        client.invalidateQueries(trpc.event.pathFilter());
        popModal();
      },
    }),
  );
  const getBg = (color: string) => `bg-${color}-200`;
  const getText = (color: string) => `text-${color}-700`;
  const iconGrid = 'grid grid-cols-10 gap-4';
  const [search, setSearch] = useState('');
  return (
    <ModalContent>
      <ModalHeader
        title={`Edit: ${event?.name}`}
        text={`Changes here will affect all "${event?.name}" events`}
      />
      <div className="col gap-4">
        <div>
          <Label className="mb-4 block">Conversion</Label>
          <label className="flex cursor-pointer select-none items-center gap-4 rounded-md border border-border p-4">
            <Checkbox
              checked={conversion}
              onCheckedChange={(checked) => {
                if (checked === 'indeterminate') return;
                setConversion(checked);
              }}
            />
            <div>