State Management in eigene Komponente ausgliedern

[stekhn]

Momentan finde das ganze State Management in der App.tsx statt. Es gibt fast zwanzig verschiedene useState-Handler, welche man in einer Komponente , z.B. Logic oder State zusammenfassen könnte.

const [chart, setChart] = useState(defaultChart);
const [format, setFormat] = useState(defaultFormat);

const [width, setWidth] = useState(defaultWidth);
const [height, setHeight] = useState(defaultHeight);
const [scalingFactor, setScalingFactor] = useState(defaultScalingFactor);
const [dateDisabled, setDateDisabled] = useState(defaultDateDisabled);
const [annotationDisabled, setAnnotationDisabled] = useState(
  defaultAnnotationDisabled
);
const [hasAnnotation, setHasAnnotation] = useState(
  defaultAnnotationVisibility
);
const [labelsDisabled, setLabelsDisabled] = useState(defaultLabelsDisabled);
const [hasLabels, setHasLabels] = useState(defaultLabelVisibility);
const [hasLogo, setHasLogo] = useState(defaultLogoVisibility);
const [hasCollapsed, setHasCollapsed] = useState(true);

const [startDate, setStartDate] = useState(defaultStartDate);
const [endDate, setEndDate] = useState(maxEndDate);

const [svgDom, setSvgDom] = useState<HTMLInputElement | null>(null);