From 1c65abc980c5286db2c65edff8d22672ba29cf33 Mon Sep 17 00:00:00 2001
From: [Alisina92] <asb92.jobs@gmail.com>
Date: Apr 02 2021 14:59:47 +0000
Subject: Converted enebling/disabling of info cards to collapse using reactstrap


---

diff --git a/src/landingpage/Hideable.js b/src/landingpage/Hideable.js
index aac075a..e932eac 100644
--- a/src/landingpage/Hideable.js
+++ b/src/landingpage/Hideable.js
@@ -1,37 +1,45 @@
-import React, { Component } from "react"
-import _ from "lodash"
+import React, { useState } from "react";
+import { Collapse, Button, CardBody, Card } from "reactstrap";
+import _ from "lodash";
 
-class Hideable extends Component {
-  constructor(props) {
-    super(props)
-    this.id = _.uniqueId("hideable-id-")
-  }
+const Hideable = (props) => {
+  const [id, setId] = useState(_.uniqueId("hideable-id-"));
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const toggler = () => setIsCollapsed(!isCollapsed);
 
-  render() {
-    if (this.props.component_name === undefined) {
-      return <div key={this.id} />
-    }
-    return (
-      <div
-        key={this.id}
-        className={
-          this.props.config_mode
-            ? this.props.is_enabled
-              ? "border border-dark"
-              : "bgcl border border-dark"
-            : ""
-        }>
-        {this.props.children}
-        <a
-          href="#"
-          className={this.props.config_mode ? "d-block text-center badge badge-primary" : "d-none"}
-          onClick={(e) => this.props.toggle_handler(e, this.props.component_name)}
-          role="button">
-          {this.props.is_enabled ? "Disable" : "Enable"}
-        </a>
-      </div>
-    )
+  if (props.component_name === undefined) {
+    return <div key={id} />;
   }
-}
+  return (
+    <div
+      key={id}
+      className={
+        props.config_mode
+          ? props.is_enabled
+            ? "border border-dark"
+            : "bgcl border border-dark"
+          : ""
+      }
+    >
+      <Button
+        className={
+          props.config_mode
+            ? "d-block text-center badge badge-primary"
+            : "d-none"
+        }
+        onClick={(e) => toggler(e, props.component_name)}
+        role="button"
+        style={{ width:'100%' }}
+      >
+        {isCollapsed ? "hide" : "display"}
+      </Button>
+      <Collapse isOpen={isCollapsed}>
+        <Card>
+          <CardBody>{props.children}</CardBody>
+        </Card>
+      </Collapse>
+    </div>
+  );
+};
 
-export default Hideable
+export default Hideable;