From fb181ca8d93142d507979cca22380559a33bb9bf Mon Sep 17 00:00:00 2001
From: kunal prakash <kunalprakash1309@gmail.com>
Date: Apr 27 2021 10:13:02 +0000
Subject: Added mapStateToProps to landingpage sub-componets(Blockers.js, Eventss.js, Minutes.js, Timeline.js) for better access of state


same method i.e mapStateToProps added to fraction of wizard section

---

diff --git a/src/landingpage/Blockers.js b/src/landingpage/Blockers.js
index 30b923a..589bc97 100644
--- a/src/landingpage/Blockers.js
+++ b/src/landingpage/Blockers.js
@@ -1,19 +1,17 @@
 import React, { Component } from "react"
+import {connect} from 'react-redux'
 import { Row } from "reactstrap"
 import SourceLink from "./SourceLink"
 
 class Blockers extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { blockerbugs: {}, release: 0 }
-  }
 
   render() {
-    if (this.props.data)
+    const {blockerbugs, release} = this.props
+    if (blockerbugs)
       return (
         <div>
           <h1 className="padded">
-            Fedora {this.props.release} blockers and FEs{" "}
+            Fedora {release} blockers and FEs{" "}
             <SourceLink href="https://qa.fedoraproject.org/blockerbugs/" />
           </h1>
           <Row>
@@ -29,19 +27,19 @@ class Blockers extends Component {
                 <tbody>
                   <tr>
                     <td>Proposed Blockers</td>
-                    <td className="bugscount">{this.props.data.beta_blockers_proposed}</td>
+                    <td className="bugscount">{blockerbugs.beta_blockers_proposed}</td>
                   </tr>
                   <tr>
                     <td>Accepted Blockers</td>
-                    <td className="bugscount">{this.props.data.beta_blockers}</td>
+                    <td className="bugscount">{blockerbugs.beta_blockers}</td>
                   </tr>
                   <tr>
                     <td>Proposed FEs</td>
-                    <td className="bugscount">{this.props.data.beta_fe_proposed}</td>
+                    <td className="bugscount">{blockerbugs.beta_fe_proposed}</td>
                   </tr>
                   <tr>
                     <td>Accepted FEs</td>
-                    <td className="bugscount">{this.props.data.beta_fe}</td>
+                    <td className="bugscount">{blockerbugs.beta_fe}</td>
                   </tr>
                 </tbody>
               </table>
@@ -59,19 +57,19 @@ class Blockers extends Component {
                 <tbody>
                   <tr>
                     <td>Proposed Blockers</td>
-                    <td className="bugscount">{this.props.data.final_blockers_proposed}</td>
+                    <td className="bugscount">{blockerbugs.final_blockers_proposed}</td>
                   </tr>
                   <tr>
                     <td>Accepted Blockers</td>
-                    <td className="bugscount">{this.props.data.final_blockers}</td>
+                    <td className="bugscount">{blockerbugs.final_blockers}</td>
                   </tr>
                   <tr>
                     <td>Proposed FEs</td>
-                    <td className="bugscount">{this.props.data.final_fe_proposed}</td>
+                    <td className="bugscount">{blockerbugs.final_fe_proposed}</td>
                   </tr>
                   <tr>
                     <td>Accepted FEs</td>
-                    <td className="bugscount">{this.props.data.final_fe}</td>
+                    <td className="bugscount">{blockerbugs.final_fe}</td>
                   </tr>
                 </tbody>
               </table>
@@ -82,4 +80,9 @@ class Blockers extends Component {
   }
 }
 
-export default Blockers
+const mapStateToProps = (state) => ({
+  blockerbugs: state.landing_page.blockerbugs,
+  release: state.landing_page.release
+})
+
+export default connect(mapStateToProps)(Blockers)
diff --git a/src/landingpage/Events.js b/src/landingpage/Events.js
index 54eb80b..409f233 100644
--- a/src/landingpage/Events.js
+++ b/src/landingpage/Events.js
@@ -1,15 +1,12 @@
 import React, { Component } from "react"
+import {connect} from 'react-redux'
 import dateFormat from "dateformat"
 import SourceLink from './SourceLink'
 
 class Events extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { meetings: [] }
-  }
 
   render() {
-    const meetings = this.props.data.map((meeting) => {
+    const meetings = this.props.meetings.map((meeting) => {
       const old = new Date(meeting.start)
       var meeting_start = dateFormat(
         new Date(old.getTime() - old.getTimezoneOffset() * 60000),
@@ -42,12 +39,13 @@ class Events extends Component {
 
 class Event extends Component {
   render() {
+    const {start, summary, link} = this.props
     return (
-      <li key={this.props.start + this.props.summary}>
-        <b>{this.props.start}</b>
+      <li key={start + summary}>
+        <b>{start}</b>
         <br />
-        <a target="_blank" rel="noopener noreferrer" href={this.props.link}>
-          {this.props.summary}
+        <a target="_blank" rel="noopener noreferrer" href={link}>
+          {summary}
         </a>
         <br />
       </li>
@@ -55,4 +53,8 @@ class Event extends Component {
   }
 }
 
-export default Events
+const mapStateToProps = (state) => ({
+  meetings: state.landing_page.meetings
+}) 
+
+export default connect(mapStateToProps)(Events)
diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js
index b1bee82..24f6c21 100644
--- a/src/landingpage/LandingPage.js
+++ b/src/landingpage/LandingPage.js
@@ -26,12 +26,6 @@ class LandingPage extends Component {
       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,
     }
@@ -66,9 +60,9 @@ class LandingPage extends Component {
 
   render() {
     const available_components = {
-      events: <Events data={this.props.meetings} />,
-      blockers: <Blockers data={this.props.blockerbugs} release={this.props.devel} />,
-      minutes: <Minutes data={this.props.last_qa_meeting} />,
+      events: <Events />,
+      blockers: <Blockers />,
+      minutes: <Minutes />,
     }
     let components = _.chunk(
       this.state.config_mode ? this.available_components : this.state.enabled_components,
@@ -95,7 +89,7 @@ class LandingPage extends Component {
           <Container>
             <Row>
               <div className="col-md-12">
-                <Timeline data={this.props.schedule} />
+                <Timeline />
               </div>
             </Row>
           </Container>
diff --git a/src/landingpage/Minutes.js b/src/landingpage/Minutes.js
index 4f88f2b..7df5217 100644
--- a/src/landingpage/Minutes.js
+++ b/src/landingpage/Minutes.js
@@ -1,13 +1,15 @@
 import React, { Component } from "react"
+import {connect} from 'react-redux'
 
 class Events extends Component {
   render() {
+    const {data} = this.props
     return (
       <div>
         <h1 className="padded">Fedora QA Meeting Minutes</h1>
         <div className="events">
-          <a target="_blank" href={this.props.data.link} rel="noopener noreferrer">
-            Latest minutes from {this.props.data.date}
+          <a target="_blank" href={data.link} rel="noopener noreferrer">
+            Latest minutes from {data.date}
           </a>
           <br />
           Visit{" "}
@@ -25,4 +27,8 @@ class Events extends Component {
   }
 }
 
-export default Events
+const mapStateToProps = (state) => ({
+  data: state.landing_page.last_qa_meeting
+})
+
+export default connect(mapStateToProps)(Events)
diff --git a/src/landingpage/Timeline.js b/src/landingpage/Timeline.js
index 1de10c5..30bd1f9 100644
--- a/src/landingpage/Timeline.js
+++ b/src/landingpage/Timeline.js
@@ -1,11 +1,8 @@
 import React, { Component } from "react"
 import SourceLink from './SourceLink'
+import {connect} from 'react-redux'
 
 class Timeline extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { schedule: [] }
-  }
 
   get_title(summary) {
     summary = summary.toLowerCase()
@@ -20,7 +17,9 @@ class Timeline extends Component {
   }
 
   render() {
-    const line = this.props.data.map((milestone) => {
+    const {timeline} = this.props
+    
+    const line = timeline.map((milestone) => {
       return (
         <td key={"line" + milestone.summary}>
           <Line color={milestone.current ? "#2371ae" : "#dcdcdc"} />
@@ -28,7 +27,7 @@ class Timeline extends Component {
       )
     })
 
-    const dates = this.props.data.map((milestone) => {
+    const dates = timeline.map((milestone) => {
       return (
         <td key={"dates" + milestone.summary} width="150">
           <b>{milestone.date}</b>
@@ -36,7 +35,7 @@ class Timeline extends Component {
       )
     })
 
-    const schedule = this.props.data.map((milestone) => {
+    const schedule = timeline.map((milestone) => {
       return (
         <td
           key={"schedule" + milestone.summary}
@@ -81,4 +80,8 @@ class Line extends Component {
   }
 }
 
-export default Timeline
+const mapStateToProps = (state) => ({
+  timeline: state.landing_page.schedule
+})
+
+export default connect(mapStateToProps)(Timeline);
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index a9ecb3e..48b523a 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -1,7 +1,6 @@
 import React, { Component } from "react"
 import WizardForm from "./WizardForm"
 import Layout from "../layout/Layout"
-import { oraculumApiUrl_v1 } from "../config"
 import Actions from "./Actions"
 import { Container, Row } from "reactstrap"
 
@@ -17,15 +16,6 @@ class Wizard extends Component {
   }
 
   componentDidMount() {
-    fetch(oraculumApiUrl_v1 + "actions/all")
-      .then((resp) => resp.json())
-      .then((data) => {
-        this.setState({
-          providers: data.providers,
-          all_actions: data.actions,
-        })
-      })
-
     this.props.dispatch(loadWizardData())
   }
 
@@ -40,8 +30,6 @@ class Wizard extends Component {
           <Container>
             <WizardForm
               show_actions={this.show_actions.bind(this)}
-              actions={this.props.all_actions}
-              providers={this.props.providers}
             />
             <h1>Nothing sparked joy?</h1>
             <div>
diff --git a/src/wizard/WizardForm.js b/src/wizard/WizardForm.js
index 795d166..766eb8d 100644
--- a/src/wizard/WizardForm.js
+++ b/src/wizard/WizardForm.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react"
 import { Row, Button } from "reactstrap"
+import {connect} from 'react-redux'
 import _ from "lodash"
 
 const durationString = {
@@ -136,4 +137,9 @@ class Tags extends Component {
   }
 }
 
-export default WizardForm
+const mapStateToProps = (state) => ({
+  actions: state.wizard.all_actions,
+  providers: state.wizard.providers
+})
+
+export default connect(mapStateToProps)(WizardForm)

