Update style with multiple manifests

src/components/AnnotationManifestsAccordion.js

@@ -10,6 +10,7 @@ import {
 } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
+import { removeDuplicates } from '../helper/utils';
 
 /**
  * AnnotationManifestsAccordion
@@ -53,6 +54,8 @@ export class AnnotationManifestsAccordion extends Component {
     } else {
       annotation.manifests = [];
     }
+
+    annotation.manifests = removeDuplicates(annotation.manifests);
     this.state = { annotation };
   }
 
@@ -110,7 +113,6 @@ export class AnnotationManifestsAccordion extends Component {
 
     return (
       <div>
-        <Typography className="test">TEST AG</Typography>
         <Accordion>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
@@ -119,7 +121,7 @@ export class AnnotationManifestsAccordion extends Component {
             <Typography className={classes.heading}>{t('manifestFound')}</Typography>
 
           </AccordionSummary>
-          <AccordionDetails className={'manifestContainer'}>
+          <AccordionDetails className={classes.manifestContainer}>
             {annotation.manifests.map(manifest => (
               <Typography >
                 <Card className={classes.root}>

src/containers/AnnotationManifestsAccordion.js

@@ -25,15 +25,10 @@ const mapDispatchToProps = {
 /** For withStyles */
 const styles = theme => ({
   manifestContainer: {
-    backgroundColor: 'red',
     display: 'flex',
     flexDirection: 'column',
     flexWrap: 'wrap',
-  },
-  test: {
-    backgroundColor: 'red',
-    color: 'red',
-    fontColor: 'red',
+    gap: '10px',
   },
 });
 

src/helper/utils.js

+/**
+ * Remove duplicate elements in array
+ *
+ * */
+export const removeDuplicates = (arr) => {
+  return arr.reduce((acc, curr) => {
+    if (!acc.includes(curr)) {
+      acc.push(curr);
+    }
+    return acc;
+  }, []);
+};