Merge pull request #73 from GEWIS/feature/redux-state-errors

Feature/fix redux state errors
GEWIS · Mar 4, 2024 · 374092c · 374092c
2 parents c343d3c + 5a153fa
commit 374092c
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 16 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -36,6 +36,17 @@ class App extends React.Component<{}, State> {
     }));
   }
 
+  private getContent() {
+    if (this.state.hasError) {
+      return (
+        <AlertContainer />
+      );
+    }
+    return (
+      <Routes />
+    );
+  }
+
   public render() {
     if (this.state.hasError) {
       return (
@@ -46,7 +57,7 @@ class App extends React.Component<{}, State> {
     return (
       <Provider store={store}>
         <ReduxRouter history={history} routerSelector={routerSelector}>
-          <Routes />
+          {this.getContent()}
         </ReduxRouter>
       </Provider>
     );

diff --git a/src/components/entities/company/CompanyContactList.tsx b/src/components/entities/company/CompanyContactList.tsx
@@ -37,8 +37,7 @@ class CompanyContactList extends React.Component<Props, State> {
       );
     }
 
-    const { contacts } = company;
-    sortContactsByFunction(contacts, true);
+    const contacts = sortContactsByFunction(company.contacts, true);
 
     if (contacts.length === 0) {
       return (

diff --git a/src/components/entities/company/CompanySelector.tsx b/src/components/entities/company/CompanySelector.tsx
@@ -18,7 +18,7 @@ function CompanySelector(props: Props & DropdownProps) {
   const {
     value, onChange, options, disabled,
   } = props;
-  const dropdownOptions = options.filter((c) => c.status !== CompanyStatus.INACTIVE)
+  const dropdownOptions = [...options].filter((c) => c.status !== CompanyStatus.INACTIVE)
     .sort((c1, c2) => {
       const n1 = c1.name.toUpperCase();
       const n2 = c2.name.toUpperCase();

diff --git a/src/components/entities/contact/ContactSelector.tsx b/src/components/entities/contact/ContactSelector.tsx
@@ -21,7 +21,7 @@ function ContactSelector(props: Props & DropdownProps) {
     value, onChange, options, disabled, companyId, placeholder,
   } = props;
 
-  const dropdownOptions = sortContactsByFunction(options, true)
+  const dropdownOptions = sortContactsByFunction([...options], true)
     .filter((c) => c.companyId === companyId && c.function !== ContactFunction.OLD)
     .map((x) => ({
       key: x.id,

diff --git a/src/components/entities/contract/ContractCompactTable.tsx b/src/components/entities/contract/ContractCompactTable.tsx
@@ -110,7 +110,7 @@ class ContractCompactTable extends React.Component<Props, State> {
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {productInstances
+              {[...productInstances]
                 .sort((a, b) => { return b.updatedAt.getTime() - a.updatedAt.getTime(); })
                 .map((p) => <ContractCompactRow key={p.id} contract={p.contract} />)}
             </Table.Body>

diff --git a/src/components/entities/contract/ContractProductList.tsx b/src/components/entities/contract/ContractProductList.tsx
@@ -130,7 +130,7 @@ class ContractProductList extends React.Component<Props, State> {
 
           </Table.Header>
           <Table.Body>
-            {products.sort((a, b) => a.id - b.id).map((product) => (
+            {[...products].sort((a, b) => a.id - b.id).map((product) => (
               <ContractProductRow
                 key={product.id}
                 productInstance={product}

diff --git a/src/components/entities/contract/ContractProductRow.tsx b/src/components/entities/contract/ContractProductRow.tsx
@@ -22,7 +22,7 @@ function showRecentStatus(productInstance: ProductInstance): string {
     return null;
   });
 
-  const sortedArray = statusArray.sort((a, b) => (b.createdAt.getTime() - a.createdAt.getTime()));
+  const sortedArray = [...statusArray].sort((a, b) => (b.createdAt.getTime() - a.createdAt.getTime()));
   if (sortedArray.length === 0) return '';
   return sortedArray[0].subType!;
 }

diff --git a/src/components/entities/product/ProductSelector.tsx b/src/components/entities/product/ProductSelector.tsx
@@ -20,7 +20,7 @@ function ProductSelector(props: Props & DropdownProps) {
   const {
     value, onChange, options,
   } = props;
-  const dropdownOptions = options
+  const dropdownOptions = [...options]
     .filter((p) => p.status === ProductStatus.ACTIVE)
     .sort((p1, p2) => {
       const n1 = currentLanguage === 'nl-NL' ? p1.nameDutch.toUpperCase() : p1.nameEnglish.toUpperCase();

diff --git a/src/components/entities/product/ProductVatSelector.tsx b/src/components/entities/product/ProductVatSelector.tsx
@@ -18,7 +18,7 @@ function ProductVATSelector(props: Props & DropdownProps) {
     value, onChange, options,
   } = props;
 
-  const dropdownOptions = options.sort((v1, v2) => {
+  const dropdownOptions = [...options].sort((v1, v2) => {
     return v1.amount >= v2.amount ? 1 : -1;
   }).map((x) => ({
     key: x.id,

diff --git a/src/components/entities/productcategories/ProductCategorySelector.tsx b/src/components/entities/productcategories/ProductCategorySelector.tsx
@@ -17,7 +17,7 @@ function ProductCategorySelector(props: Props & DropdownProps) {
   const {
     value, onChange, options,
   } = props;
-  const dropdownOptions = options.sort((c1, c2) => {
+  const dropdownOptions = [...options].sort((c1, c2) => {
     const n1 = c1.name.toUpperCase();
     const n2 = c2.name.toUpperCase();
     if (n1 < n2) return -1;

diff --git a/src/components/entities/user/UserSelector.tsx b/src/components/entities/user/UserSelector.tsx
@@ -25,7 +25,7 @@ function UserSelector(props: Props & DropdownProps) {
   const filteredOptions = role !== undefined
     ? options.filter((u) => u.roles.includes(role))
     : options;
-  const dropdownOptions = filteredOptions.sort((u1, u2) => {
+  const dropdownOptions = [...filteredOptions].sort((u1, u2) => {
     const n1 = formatContactName(u1.firstName, u1.lastNamePreposition, u1.lastName).toUpperCase();
     const n2 = formatContactName(u2.firstName, u2.lastNamePreposition, u2.lastName).toUpperCase();
     if (n1 < n2) return -1;

diff --git a/src/components/files/FilesList.tsx b/src/components/files/FilesList.tsx
@@ -83,7 +83,7 @@ class FilesList extends React.Component<Props, State> {
       <Table compact fixed singleLine unstackable className="files">
         <Table.Body>
           {createRow}
-          {files
+          {[...files]
             .sort((a, b) => { return b.createdAt.getTime() - a.createdAt.getTime(); })
             .map((file) => (
               <SingleFile

diff --git a/src/helpers/contact.ts b/src/helpers/contact.ts
@@ -45,8 +45,9 @@ export function sortContactsByFunction(
   contacts: Contact[] | ContactSummary[],
   sortAlphabetically?: boolean,
 ): Contact[] | ContactSummary[] {
+  let c = [...contacts];
   if (sortAlphabetically) {
-    contacts.sort((c1, c2) => {
+    c.sort((c1, c2) => {
       const n1 = formatContactName(c1.firstName, c1.lastNamePreposition, c1.lastName).toUpperCase();
       const n2 = formatContactName(c2.firstName, c2.lastNamePreposition, c2.lastName).toUpperCase();
       if (n1 < n2) return -1;
@@ -55,7 +56,7 @@ export function sortContactsByFunction(
     });
   }
 
-  contacts.sort((c1, c2) => {
+  c.sort((c1, c2) => {
     switch (c1.function) {
       case ContactFunction.PRIMARY: return -1;
       case ContactFunction.NORMAL:
@@ -79,5 +80,5 @@ export function sortContactsByFunction(
     }
   });
 
-  return contacts;
+  return c;
 }