From ea7a6e1dd3285401eec0b729b11f499d82c0300f Mon Sep 17 00:00:00 2001
From: Josef Skladanka <jskladan@redhat.com>
Date: Feb 05 2019 13:24:24 +0000
Subject: Configurable visibility of elements on landing page


---

diff --git a/package-lock.json b/package-lock.json
index d04a7cc..8f7f577 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -885,6 +885,16 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "@types/cookie": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.2.tgz",
+      "integrity": "sha512-aHQA072E10/8iUQsPH7mQU/KUyQBZAGzTVRCUvnSz8mSvbrYsP4xEO2RSA0Pjltolzi0j8+8ixrm//Hr4umPzw=="
+    },
+    "@types/object-assign": {
+      "version": "4.0.30",
+      "resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
+      "integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI="
+    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz",
@@ -5629,13 +5639,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5648,18 +5656,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5762,8 +5767,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5773,7 +5777,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5786,20 +5789,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5816,7 +5816,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5889,8 +5888,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5900,7 +5898,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6006,7 +6003,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -15912,6 +15908,17 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "universal-cookie": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-3.0.7.tgz",
+      "integrity": "sha512-wfZRbaEzFTDbP64fzTfGDfokB3pWkDNjtsuRAZQWaiuj/Up+3/0AEvN4IhFHPK24iGNtGJ6PNIxv1GQzMSiyMw==",
+      "requires": {
+        "@types/cookie": "^0.3.1",
+        "@types/object-assign": "^4.0.30",
+        "cookie": "^0.3.1",
+        "object-assign": "^4.1.0"
+      }
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
diff --git a/package.json b/package.json
index 76fe853..10acca3 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.3",
     "reactstrap": "^6.5.0",
-    "typeface-open-sans": "0.0.54"
+    "typeface-open-sans": "0.0.54",
+    "universal-cookie": "^3.0.7"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/index.css b/src/index.css
index b7a0531..27f6835 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,6 +27,10 @@ h1 {
   font-size: 1.25rem !important;
 }
 
+.bgcl {
+  background-color: lightgrey;
+}
+
 .card-body ul {
   margin-block-end: 0px;
 }
diff --git a/src/landingpage/Hideable.js b/src/landingpage/Hideable.js
new file mode 100644
index 0000000..d92bdb9
--- /dev/null
+++ b/src/landingpage/Hideable.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+
+class Hideable extends Component {
+    constructor(props) {
+        super(props);
+        this.id = _.uniqueId('hideable-id-');
+    }
+
+
+    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':''}>
+                <a href="#"  className={this.props.config_mode?'d-block text-right':'d-none'} onClick={e => this.props.toggle_handler(e, this.props.component_name)}>
+                    {this.props.is_enabled?'Disable':'Enable'}
+                </a>
+                {this.props.children}
+            </div>
+        )
+    }
+
+}
+
+
+export default Hideable;
diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js
index 6fd2982..c12311e 100644
--- a/src/landingpage/LandingPage.js
+++ b/src/landingpage/LandingPage.js
@@ -6,65 +6,115 @@ import Timeline from "./Timeline";
 import Events from "./Events";
 import Blockers from "./Blockers";
 import Minutes from "./Minutes";
+import Hideable from "./Hideable";
 import {oraculumApiUrl_v1} from "../config";
 
+import _ from 'lodash';
+
+import Cookies from 'universal-cookie';
+
 
 class LandingPage extends Component {
     constructor(props) {
         super(props);
-        this.state = { 
+        this.cookies = new Cookies();
+        this.available_components = ['events', 'blockers', 'minutes'];
+        let enabled_components = this.cookies.get('landingpage_enabled_components');
+        if (enabled_components === undefined) {
+            enabled_components = this.available_components.slice();
+            this.cookies.set('landingpage_enabled_components', enabled_components, {path: '/'});
+        }
+        this.state = {
             blockerbugs: {},
             devel: 0,
             meetings: [],
             schedule: [],
             last_qa_meeting: {},
             stable: 0,
+            config_mode: false,
+            enabled_components: enabled_components
         }
-    }
+   }
 
     componentDidMount() {
         fetch(oraculumApiUrl_v1 + 'landing_page')
         .then(data => data.json())
         .then(data => {
-            console.log(data)
             this.setState(data)
         })
     }
 
+    toggle_config_mode(e) {
+        let config_mode = !this.state.config_mode;
+        this.setState({config_mode: config_mode});
+        e.preventDefault();
+    }
+
+    toggle_component_visibility(e, name){
+        if (name === undefined){
+            e.preventDefault();
+            return
+        }
+        let enabled_components = this.state.enabled_components;
+        if (enabled_components.includes(name)){
+            enabled_components.splice(enabled_components.indexOf(name), 1);
+        }
+        else
+        {
+            enabled_components.push(name);
+            enabled_components = this.available_components.filter(c => enabled_components.includes(c));
+        }
+        this.cookies.set('landingpage_enabled_components', enabled_components, {path: '/'});
+        this.setState({enabled_components: enabled_components});
+        e.preventDefault();
+    }
+
     render() {
+        const available_components = {
+            events: <Events data={this.state.meetings} />,
+            blockers: <Blockers data={this.state.blockerbugs} release={this.state.devel} />,
+            minutes: <Minutes data={this.state.last_qa_meeting} />
+        };
+        let components = _.chunk(this.state.config_mode?this.available_components:this.state.enabled_components, 2);
+        components = components.map(row => (
+            <Row>
+            {row.map(item => (
+                <div className="col-md-6">
+                <Hideable config_mode={this.state.config_mode} toggle_handler={this.toggle_component_visibility.bind(this)} component_name={item} is_enabled={this.state.enabled_components.includes(item)}>
+                    {available_components[item]}
+                </Hideable>
+                </div>
+            ))}
+            </Row>
+        ));
         return (
             <Layout>
-                <div className="bluebox">
-                <Container>
-                    <Row>
-                        <div className="col-md-12">
-                            <Timeline data={this.state.schedule} />
-                        </div>
-                    </Row>
-                </Container>
-                </div>
-                <Container>
-                    <Row>
-                        <div className="col-md-6">
-                            <Events data={this.state.meetings} />
-                        </div>
-                        <div className="col-md-6">
-                            <Blockers data={this.state.blockerbugs} release={this.state.devel} />
-                        </div>
-                    </Row>
-                    <Row>
-                        <div className="col-md-6">
-                            <Minutes data={this.state.last_qa_meeting} />
-                        </div>
-                    </Row>
-                    <Row className="padded">
-                        <div className="col-md-12 padded" >
-                            <Link className="btn btn-primary btn-block btn-wrap-text btn-lg active" to="/wizard" role="button">
-                                Do you have some spare time? Feeling like helping others? Wanna improve Fedora? Click here!
-                            </Link>
-                        </div>
-                    </Row>
-                </Container>
+              <div className="bluebox">
+                  <Container>
+                      <Row>
+                          <div className="col-md-12">
+                              <Timeline data={this.state.schedule} />
+                          </div>
+                      </Row>
+                  </Container>
+              </div>
+              <Container>
+                <Row>
+                    <a href="#" onClick={e => this.toggle_config_mode(e)} className='events text-right col-md-12'>
+                        {this.state.config_mode?'Save changes':'Configure visibility'}
+                    </a>
+                </Row>
+              </Container>
+              <Container>
+                {components}
+                <Row className="padded">
+                    <div className="col-md-12 padded" >
+                        <Link className="btn btn-primary btn-block btn-wrap-text btn-lg active" to="/wizard" role="button">
+                            Do you have some spare time? Feeling like helping others? Wanna improve Fedora? Click here!
+                        </Link>
+                    </div>
+                </Row>
+              </Container>
             </Layout>
         )
     }
diff --git a/src/landingpage/Minutes.js b/src/landingpage/Minutes.js
index 7a41ffb..dcde806 100644
--- a/src/landingpage/Minutes.js
+++ b/src/landingpage/Minutes.js
@@ -2,13 +2,12 @@ import React, { Component } from 'react';
 
 class Events extends Component {
   render() {
-    
     return (
       <div>
         <h1 className="padded">
           Fedora QA Meeting Minutes
         </h1>
-        <div class='events'>
+        <div className='events'>
             <a target='_blank' href={this.props.data.link} rel="noopener noreferrer">
                 Latest minutes from {this.props.data.date}
             </a>
@@ -18,6 +17,7 @@ class Events extends Component {
             meetbot
             </a>{' '}
             to see older.
+            <br />
         </div>
       </div>
     );