Use observation summary in list view

Exact content TBD

2 files changed, 37 insertions, 25 deletions

diff --git a/src/components/List.js b/src/components/List.js
index 8b48307..76270fa 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -115,7 +115,13 @@ class List extends React.Component {
                 </div>
                 <div id="main">
                     {this.state.objects.map(data => {
-                        return <ObjectComponent {...data} key={data._id} />;
+                        return (
+                            <ObjectComponent
+                                summary={true}
+                                {...data}
+                                key={data._id}
+                            />
+                        );
                     })}
                 </div>
                 <div id="pagination">
diff --git a/src/components/ObjectComponent.js b/src/components/ObjectComponent.js
index 5074aa9..9650c86 100644
--- a/src/components/ObjectComponent.js
+++ b/src/components/ObjectComponent.js
@@ -42,36 +42,25 @@ class ObjectComponent extends React.Component {
                         </tr>
                     </tbody>
                 </table>
-
-                {this.props.user_presentation.description && (
-                    <Alert severity="info" sx={{ marginTop: "1em" }}>
-                        {this.props.user_presentation.description}
-                    </Alert>
-                )}
-
-                <UserPresentation
-                    description={this.props.user_presentation.description}
-                    data={this.props.user_presentation.data}
-                />
+                {!this.props.summary && <Details {...this.props} />}
             </Card>
         );
     }
 }
 
-function GenericTable(props) {
+function Details(props) {
     return (
-        <table>
-            <tbody>
-                {Object.entries(props.data).map(([key, value]) => {
-                    return (
-                        <tr key={key}>
-                            <td>{key}</td>
-                            <td>{value}</td>
-                        </tr>
-                    );
-                })}
-            </tbody>
-        </table>
+        <>
+            {props.user_presentation.description && (
+                <Alert severity="info" sx={{ marginTop: "1em" }}>
+                    {props.user_presentation.description}
+                </Alert>
+            )}
+            <UserPresentation
+                description={props.user_presentation.description}
+                data={props.user_presentation.data}
+            />
+        </>
     );
 }
 
@@ -105,4 +94,21 @@ function UserPresentationElement(props) {
     );
 }
 
+function GenericTable(props) {
+    return (
+        <table>
+            <tbody>
+                {Object.entries(props.data).map(([key, value]) => {
+                    return (
+                        <tr key={key}>
+                            <td>{key}</td>
+                            <td>{value}</td>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+}
+
 export default ObjectComponent;