u

src/components/CompanySettingsDialog.jsx

@@ -16,19 +16,21 @@ import TextField from '@mui/material/TextField';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { enqueueSnackbar } from 'notistack';
-import { company } from '../api';
+import BackendError from './BackendError';
 import { selectAuthUser } from '../store/authSlice';
 import {
-  ISO639_OPTIONS,
-  companyLanguageToIso639,
-  parseTaxRate,
-} from '../utils/companyForm';
+  loadCurrentCompany,
+  selectCompanyStatus,
+  selectCurrentCompany,
+  updateCompany as updateCompanyThunk,
+} from '../store/companySlice';
+import { ISO639_OPTIONS, parseTaxRate } from '../utils/companyForm';
+import { backendErrorFrom, isBackendFailure } from '../utils/backendError';
 
 class CompanySettingsDialog extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      loading: false,
       busy: false,
       error: null,
       name: '',
@@ -37,39 +39,37 @@ class CompanySettingsDialog extends Component {
       reducedtaxrate: '',
     };
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.syncFormFromCompany = this.syncFormFromCompany.bind(this);
   }
 
   componentDidUpdate(prevProps) {
-    const { open, user } = this.props;
-    const companyId = user?.selectedCompanyId;
-    if (open && !prevProps.open && companyId) {
-      void this.loadCompany(companyId);
+    const { open, company, companyStatus } = this.props;
+    if (open && !prevProps.open) {
+      this.setState({ error: null });
+      if (company) {
+        this.syncFormFromCompany(company);
+      } else if (companyStatus !== 'loading') {
+        void this.props.loadCurrentCompany();
+      }
+    }
+    if (open && company && company !== prevProps.company) {
+      this.syncFormFromCompany(company);
     }
   }
 
-  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 });
-    }
+  syncFormFromCompany(company) {
+    this.setState({
+      name: company.name ?? '',
+      iso639: company.iso639 ?? 'de',
+      taxrate: company.taxrate != null ? String(company.taxrate) : '',
+      reducedtaxrate: company.reducedtaxrate != null ? String(company.reducedtaxrate) : '',
+    });
   }
 
   async handleSubmit(event) {
     event.preventDefault();
-    const { user, onClose } = this.props;
+    const { onClose } = this.props;
     const { name, iso639, taxrate, reducedtaxrate } = this.state;
-    const companyId = user?.selectedCompanyId;
     const parsedTaxrate = parseTaxRate(taxrate);
     const parsedReducedtaxrate = parseTaxRate(reducedtaxrate);
     const canSave =
@@ -78,31 +78,34 @@ class CompanySettingsDialog extends Component {
       parsedTaxrate != null &&
       parsedReducedtaxrate != null;
 
-    if (!companyId || !canSave) {
+    if (!canSave) {
       this.setState({ error: 'Bitte alle Pflichtfelder ausfüllen.' });
       return;
     }
 
     this.setState({ busy: true, error: null });
     try {
-      await company.update(companyId, {
-        name: name.trim(),
-        iso639,
-        taxrate: parsedTaxrate,
-        reducedtaxrate: parsedReducedtaxrate,
-      });
+      await this.props
+        .updateCompany({
+          name: name.trim(),
+          iso639,
+          taxrate: parsedTaxrate,
+          reducedtaxrate: parsedReducedtaxrate,
+        })
+        .unwrap();
       enqueueSnackbar('Unternehmen gespeichert.', { variant: 'success' });
       onClose();
     } catch (err) {
-      this.setState({ error: err.message });
+      this.setState({ error: backendErrorFrom(err) });
     } finally {
       this.setState({ busy: false });
     }
   }
 
   render() {
-    const { open, onClose } = this.props;
-    const { loading, busy, error, name, iso639, taxrate, reducedtaxrate } = this.state;
+    const { open, onClose, companyStatus } = this.props;
+    const { busy, error, name, iso639, taxrate, reducedtaxrate } = this.state;
+    const loading = companyStatus === 'loading' && !busy;
     const parsedTaxrate = parseTaxRate(taxrate);
     const parsedReducedtaxrate = parseTaxRate(reducedtaxrate);
     const canSave =
@@ -117,9 +120,13 @@ class CompanySettingsDialog extends Component {
         <Box component="form" onSubmit={this.handleSubmit} noValidate>
           <DialogContent>
             {error ? (
-              <Alert severity="error" sx={{ mb: 2 }}>
-                {error}
-              </Alert>
+              isBackendFailure(error) ? (
+                <BackendError error={error} sx={{ mb: 2 }} />
+              ) : (
+                <Alert severity="error" sx={{ mb: 2 }}>
+                  {typeof error === 'string' ? error : error.message}
+                </Alert>
+              )
             ) : null}
 
             {loading ? (
@@ -212,6 +219,13 @@ class CompanySettingsDialog extends Component {
 
 const mapStateToProps = (state) => ({
   user: selectAuthUser(state),
+  company: selectCurrentCompany(state),
+  companyStatus: selectCompanyStatus(state),
 });
 
-export default connect(mapStateToProps)(CompanySettingsDialog);
+const mapDispatchToProps = (dispatch) => ({
+  loadCurrentCompany: () => dispatch(loadCurrentCompany()),
+  updateCompany: (payload) => dispatch(updateCompanyThunk(payload)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CompanySettingsDialog);