anyone-oslo/pages

import { ChangeEvent } from "react";
 
import * as Template from "../../types/Template";
 
import LabelledField from "../LabelledField";
import RichTextArea from "../RichTextArea";
 
type Props = {
  block: Template.Block;
  errors: string[];
  onChange: (value: string) => void;
  lang: string;
  dir: string;
  value: string;
};
 
Function `Block` has 54 lines of code (exceeds 25 allowed). Consider refactoring.
Function `Block` has a Cognitive Complexity of 7 (exceeds 5 allowed). Consider refactoring.
export default function Block(props: Props) {
  const { block, errors, onChange, lang, dir, value } = props;
 
  const handleChange = (
    evt: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
  ) => {
    onChange(evt.target.value);
  };
 
  const id = `page_${block.name}`;
 
  const commonOptions = {
    id: id,
    name: `page[${block.name}]`,
    value: value
  };
 
  const textFieldOptions = {
    ...commonOptions,
    className: ["rich", block.class].join(" ").trim(),
    lang: lang,
    dir: dir,
    placeholder: block.placeholder
  };
 
  let field: React.ReactNode;
  if (block.type == "select") {
    const options = block.options;
 
    // Ensure the current value is part of the options
    if (options.map((o) => o[1]).indexOf(value) === -1) {
      options.push([value, value]);
    }
 
    field = (
Similar blocks of code found in 2 locations. Consider refactoring.
      <select onChange={handleChange} {...commonOptions}>
        {options.map((opt) => (
          <option key={opt[1]} value={opt[1]}>
            {opt[0]}
          </option>
        ))}
      </select>
    );
  } else if (block.size == "field") {
    field = <input type="text" onChange={handleChange} {...textFieldOptions} />;
  } else {
    field = (
      <RichTextArea
        onChange={onChange}
        rows={block.size == "large" ? 15 : 5}
        {...textFieldOptions}
      />
    );
  }
 
  return (
    <LabelledField
      htmlFor={id}
      label={block.title}
      description={block.description}
      errors={errors}>
      {field}
    </LabelledField>
  );
}