Function HeaderMapper

src/mapper/components/HeaderMapper.tsx:22–146

({
  onMappingsChanged,
  onMappingsSet,
  onBack,
}: Props)

}

export default function HeaderMapper({
  onMappingsChanged,
  onMappingsSet,
  onBack,
}: Props) {
  const { columnMappings, parsedFile } = useImporterState();
  const { sheets: sheetDefinitions } = useImporterDefinition();
  const { t } = useTranslations();
  const [hoveredCsvHeader, setHoveredCsvHeader] = useState<string | null>(null);

  const currentMapping = columnMappings ?? [];
  const parsed = parsedFile!;

  const data = parsed.data;
  const csvHeaders = parsed.meta.fields!;

  const mappingSelectOptions = useMappingAvailableSelectOptions(
    sheetDefinitions,
    currentMapping
  );

  const mapingsValid = areAllRequiredMappingsSet(
    sheetDefinitions,
    currentMapping
  );

  const hoveredExamples = useMemo(() => {
    if (!hoveredCsvHeader) return [];
    return calculateMappingExamples(data, hoveredCsvHeader);
  }, [hoveredCsvHeader, data]);

  const [isMappingInProgress, setIsMappingInProgress] = useState(false);

  async function handleConfirm() {
    try {
      setIsMappingInProgress(true);
      await onMappingsSet();
    } finally {
      setIsMappingInProgress(false);
    }
  }

  return (
    <div className="flex h-full flex-col">
      <div className="flex-none text-2xl">{t('mapper.reviewAndConfirm')}</div>
      <div className="min-h-0 flex-auto">
        <div className="flex h-full justify-between space-x-5">
          <div className="flex flex-2 flex-col">
            <div className="my-5 flex text-sm font-light uppercase">
              <div className="flex-1">{t('mapper.importedColumn')}</div>
              <div className="flex-1">{t('mapper.destinationColumn')}</div>
            </div>
            <div className="flex-1 overflow-y-auto">
              {csvHeaders.map((header, columnIndex) => {
                const headerMapping =
                  currentMapping.find(
                    (mapping) => mapping.csvColumnName === header
                  ) ?? null;