u

src/components/CompanySettingsDialog.jsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { Component } from 'react';
+import { connect } from 'react-redux';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -14,72 +15,75 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import { useSnackbar } from 'notistack';
+import { enqueueSnackbar } from 'notistack';
 import { company } from '../api';
-import { useAuth } from '../auth/useAuth';
+import { selectAuthUser } from '../store/authSlice';
 import {
   ISO639_OPTIONS,
   companyLanguageToIso639,
   parseTaxRate,
 } from '../utils/companyForm';
 
-export default function CompanySettingsDialog({ open, onClose }) {
-  const { user } = useAuth();
-  const { enqueueSnackbar } = useSnackbar();
-  const [loading, setLoading] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState(null);
-  const [name, setName] = useState('');
-  const [iso639, setIso639] = useState('de');
-  const [taxrate, setTaxrate] = useState('');
-  const [reducedtaxrate, setReducedtaxrate] = useState('');
-
-  const companyId = user?.selectedCompanyId;
-  const parsedTaxrate = parseTaxRate(taxrate);
-  const parsedReducedtaxrate = parseTaxRate(reducedtaxrate);
-  const canSave =
-    name.trim() !== '' &&
-    ISO639_OPTIONS.includes(iso639) &&
-    parsedTaxrate != null &&
-    parsedReducedtaxrate != null;
-
-  useEffect(() => {
-    if (!open || !companyId) return;
-
-    let active = true;
-    (async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const data = await company.getById(companyId);
-        if (!active) return;
-        const item = data.company;
-        setName(item.name ?? '');
-        setIso639(companyLanguageToIso639(item));
-        setTaxrate(item.taxrate != null ? String(item.taxrate) : '');
-        setReducedtaxrate(item.reducedtaxrate != null ? String(item.reducedtaxrate) : '');
-      } catch (err) {
-        if (!active) return;
-        setError(err.message);
-      } finally {
-        if (active) setLoading(false);
-      }
-    })();
-
-    return () => {
-      active = false;
+class CompanySettingsDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      busy: false,
+      error: null,
+      name: '',
+      iso639: 'de',
+      taxrate: '',
+      reducedtaxrate: '',
     };
-  }, [open, companyId]);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
 
-  const handleSubmit = async (event) => {
+  componentDidUpdate(prevProps) {
+    const { open, user } = this.props;
+    const companyId = user?.selectedCompanyId;
+    if (open && !prevProps.open && companyId) {
+      void this.loadCompany(companyId);
+    }
+  }
+
+  async loadCompany(companyId) {
+    this.setState({ loading: true, error: null });
+    try {
+      const data = await company.getById(companyId);
+      const item = data.company;
+      this.setState({
+        name: item.name ?? '',
+        iso639: companyLanguageToIso639(item),
+        taxrate: item.taxrate != null ? String(item.taxrate) : '',
+        reducedtaxrate: item.reducedtaxrate != null ? String(item.reducedtaxrate) : '',
+      });
+    } catch (err) {
+      this.setState({ error: err.message });
+    } finally {
+      this.setState({ loading: false });
+    }
+  }
+
+  async handleSubmit(event) {
     event.preventDefault();
+    const { user, onClose } = this.props;
+    const { name, iso639, taxrate, reducedtaxrate } = this.state;
+    const companyId = user?.selectedCompanyId;
+    const parsedTaxrate = parseTaxRate(taxrate);
+    const parsedReducedtaxrate = parseTaxRate(reducedtaxrate);
+    const canSave =
+      name.trim() !== '' &&
+      ISO639_OPTIONS.includes(iso639) &&
+      parsedTaxrate != null &&
+      parsedReducedtaxrate != null;
+
     if (!companyId || !canSave) {
-      setError('Bitte alle Pflichtfelder ausfüllen.');
+      this.setState({ error: 'Bitte alle Pflichtfelder ausfüllen.' });
       return;
     }
 
-    setBusy(true);
-    setError(null);
+    this.setState({ busy: true, error: null });
     try {
       await company.update(companyId, {
         name: name.trim(),
@@ -90,106 +94,124 @@ export default function CompanySettingsDialog({ open, onClose }) {
       enqueueSnackbar('Unternehmen gespeichert.', { variant: 'success' });
       onClose();
     } catch (err) {
-      setError(err.message);
+      this.setState({ error: err.message });
     } finally {
-      setBusy(false);
+      this.setState({ busy: false });
     }
-  };
+  }
 
-  return (
-    <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
-      <DialogTitle>Unternehmen bearbeiten</DialogTitle>
-      <Box component="form" onSubmit={handleSubmit} noValidate>
-        <DialogContent>
-          {error ? (
-            <Alert severity="error" sx={{ mb: 2 }}>
-              {error}
-            </Alert>
-          ) : null}
+  render() {
+    const { open, onClose } = this.props;
+    const { loading, busy, error, name, iso639, taxrate, reducedtaxrate } = this.state;
+    const parsedTaxrate = parseTaxRate(taxrate);
+    const parsedReducedtaxrate = parseTaxRate(reducedtaxrate);
+    const canSave =
+      name.trim() !== '' &&
+      ISO639_OPTIONS.includes(iso639) &&
+      parsedTaxrate != null &&
+      parsedReducedtaxrate != null;
 
-          {loading ? (
-            <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
-              <CircularProgress />
-            </Box>
-          ) : (
-            <Stack spacing={2}>
-              <TextField
-                fullWidth
-                required
-                size="small"
-                label="Name"
-                value={name}
-                disabled={busy}
-                onChange={(e) => setName(e.target.value)}
-                autoComplete="organization"
-                autoFocus
-              />
+    return (
+      <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
+        <DialogTitle>Unternehmen bearbeiten</DialogTitle>
+        <Box component="form" onSubmit={this.handleSubmit} noValidate>
+          <DialogContent>
+            {error ? (
+              <Alert severity="error" sx={{ mb: 2 }}>
+                {error}
+              </Alert>
+            ) : null}
 
-              <FormControl required>
-                <FormLabel sx={{ mb: 0.5 }}>Sprache</FormLabel>
-                <ToggleButtonGroup
-                  exclusive
-                  required
-                  size="small"
-                  value={iso639}
-                  disabled={busy}
-                  onChange={(_event, value) => {
-                    if (value) setIso639(value);
-                  }}
-                >
-                  <ToggleButton value="de">Deutsch</ToggleButton>
-                  <ToggleButton value="en">English</ToggleButton>
-                </ToggleButtonGroup>
-              </FormControl>
-
-              <Stack direction="row" spacing={1}>
+            {loading ? (
+              <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+                <CircularProgress />
+              </Box>
+            ) : (
+              <Stack spacing={2}>
                 <TextField
                   fullWidth
                   required
                   size="small"
-                  type="number"
-                  label="Normalsatz"
-                  value={taxrate}
+                  label="Name"
+                  value={name}
                   disabled={busy}
-                  onChange={(e) => setTaxrate(e.target.value)}
-                  error={taxrate !== '' && parsedTaxrate == null}
-                  slotProps={{
-                    input: {
-                      endAdornment: <InputAdornment position="end">%</InputAdornment>,
-                    },
-                    htmlInput: { min: 0, max: 100, step: 0.01, required: true },
-                  }}
-                />
-                <TextField
-                  fullWidth
-                  required
-                  size="small"
-                  type="number"
-                  label="Ermäßigter Satz"
-                  value={reducedtaxrate}
-                  disabled={busy}
-                  onChange={(e) => setReducedtaxrate(e.target.value)}
-                  error={reducedtaxrate !== '' && parsedReducedtaxrate == null}
-                  slotProps={{
-                    input: {
-                      endAdornment: <InputAdornment position="end">%</InputAdornment>,
-                    },
-                    htmlInput: { min: 0, max: 100, step: 0.01, required: true },
-                  }}
+                  onChange={(e) => this.setState({ name: e.target.value })}
+                  autoComplete="organization"
+                  autoFocus
                 />
+
+                <FormControl required>
+                  <FormLabel sx={{ mb: 0.5 }}>Sprache</FormLabel>
+                  <ToggleButtonGroup
+                    exclusive
+                    required
+                    size="small"
+                    value={iso639}
+                    disabled={busy}
+                    onChange={(_event, value) => {
+                      if (value) this.setState({ iso639: value });
+                    }}
+                  >
+                    <ToggleButton value="de">Deutsch</ToggleButton>
+                    <ToggleButton value="en">English</ToggleButton>
+                  </ToggleButtonGroup>
+                </FormControl>
+
+                <Stack direction="row" spacing={1}>
+                  <TextField
+                    fullWidth
+                    required
+                    size="small"
+                    type="number"
+                    label="Normalsatz"
+                    value={taxrate}
+                    disabled={busy}
+                    onChange={(e) => this.setState({ taxrate: e.target.value })}
+                    error={taxrate !== '' && parsedTaxrate == null}
+                    slotProps={{
+                      input: {
+                        endAdornment: <InputAdornment position="end">%</InputAdornment>,
+                      },
+                      htmlInput: { min: 0, max: 100, step: 0.01, required: true },
+                    }}
+                  />
+                  <TextField
+                    fullWidth
+                    required
+                    size="small"
+                    type="number"
+                    label="Ermäßigter Satz"
+                    value={reducedtaxrate}
+                    disabled={busy}
+                    onChange={(e) => this.setState({ reducedtaxrate: e.target.value })}
+                    error={reducedtaxrate !== '' && parsedReducedtaxrate == null}
+                    slotProps={{
+                      input: {
+                        endAdornment: <InputAdornment position="end">%</InputAdornment>,
+                      },
+                      htmlInput: { min: 0, max: 100, step: 0.01, required: true },
+                    }}
+                  />
+                </Stack>
               </Stack>
-            </Stack>
-          )}
-        </DialogContent>
-        <DialogActions sx={{ px: 3, pb: 2 }}>
-          <Button onClick={onClose} disabled={busy}>
-            Abbrechen
-          </Button>
-          <Button type="submit" variant="contained" disabled={busy || loading || !canSave}>
-            Speichern
-          </Button>
-        </DialogActions>
-      </Box>
-    </Dialog>
-  );
+            )}
+          </DialogContent>
+          <DialogActions sx={{ px: 3, pb: 2 }}>
+            <Button onClick={onClose} disabled={busy}>
+              Abbrechen
+            </Button>
+            <Button type="submit" variant="contained" disabled={busy || loading || !canSave}>
+              Speichern
+            </Button>
+          </DialogActions>
+        </Box>
+      </Dialog>
+    );
+  }
 }
+
+const mapStateToProps = (state) => ({
+  user: selectAuthUser(state),
+});
+
+export default connect(mapStateToProps)(CompanySettingsDialog);