PR#56: Converted all class components to functional components in the LandingPage folder as well as removed redundant codes - fedora-qa/landingpage

fedora-qa / landingpage

#56 Converted all class components to functional components in the LandingPage folder as well as removed redundant codes

Closed 2 years ago by lbrabec. Opened 3 years ago by gift_.

fedora-qa/ gift_/landingpage convert_to_functional_component into master

Converted all class components to functional components in the LandingPage folder as well as removed redundant codes

Gift • 3 years ago

91ae964

src/landingpage/Blockers.js

file modified

+72 -79

		`@@ -1,85 +1,78 @@`
		`- import React, { Component } from "react"`
		`+ import React from "react"`
		`import { Row } from "reactstrap"`
		`import SourceLink from "./SourceLink"`
		`+ const Blockers =(props)=>{`
		`+`
		`+ if (props.data)`
		`+ return (`
		`+ <div>`
		`+ <h1 className="padded">`
		`+ Fedora {props.release} blockers and FEs{" "}`
		`+ <SourceLink href="https://qa.fedoraproject.org/blockerbugs/" />`
		`+ </h1>`
		`+ <Row>`
		`+ <div className="col-md-6">`
		`+ <table className="events">`
		`+ <thead>`
		`+ <tr>`
		`+ <td colSpan="2">`
		`+ <b>Beta</b>`
		`+ </td>`
		`+ </tr>`
		`+ </thead>`
		`+ <tbody>`
		`+ <tr>`
		`+ <td>Proposed Blockers</td>`
		`+ <td className="bugscount">{props.data.beta_blockers_proposed}</td>`
		`+ </tr>`
		`+ <tr>`
		`+ <td>Accepted Blockers</td>`
		`+ <td className="bugscount">{props.data.beta_blockers}</td>`
		`+ </tr>`
		`+ <tr>`
		`+ <td>Proposed FEs</td>`
		`+ <td className="bugscount">{props.data.beta_fe_proposed}</td>`
		`+ </tr>`
		`+ <tr>`
		`+ <td>Accepted FEs</td>`
		`+ <td className="bugscount">{props.data.beta_fe}</td>`
		`+ </tr>`
		`+ </tbody>`
		`+ </table>`
		`+ </div>`

		`- class Blockers extends Component {`
		`- constructor(props) {`
		`- super(props)`
		`- this.state = { blockerbugs: {}, release: 0 }`
		`- }`
		`-`
		`- render() {`
		`- if (this.props.data)`
		`- return (`
		`- <div>`
		`- <h1 className="padded">`
		`- Fedora {this.props.release} blockers and FEs{" "}`
		`- <SourceLink href="https://qa.fedoraproject.org/blockerbugs/" />`
		`- </h1>`
		`- <Row>`
		`- <div className="col-md-6">`
		`- <table className="events">`
		`- <thead>`
		`- <tr>`
		`- <td colSpan="2">`
		`- <b>Beta</b>`
		`- </td>`
		`- </tr>`
		`- </thead>`
		`- <tbody>`
		`- <tr>`
		`- <td>Proposed Blockers</td>`
		`- <td className="bugscount">{this.props.data.beta_blockers_proposed}</td>`
		`- </tr>`
		`- <tr>`
		`- <td>Accepted Blockers</td>`
		`- <td className="bugscount">{this.props.data.beta_blockers}</td>`
		`- </tr>`
		`- <tr>`
		`- <td>Proposed FEs</td>`
		`- <td className="bugscount">{this.props.data.beta_fe_proposed}</td>`
		`- </tr>`
		`- <tr>`
		`- <td>Accepted FEs</td>`
		`- <td className="bugscount">{this.props.data.beta_fe}</td>`
		`- </tr>`
		`- </tbody>`
		`- </table>`
		`- </div>`
		`-`
		`- <div className="col-md-6">`
		`- <table className="events">`
		`- <thead>`
		`- <tr>`
		`- <td colSpan="2">`
		`- <b>Final</b>`
		`- </td>`
		`- </tr>`
		`- </thead>`
		`- <tbody>`
		`- <tr>`
		`- <td>Proposed Blockers</td>`
		`- <td className="bugscount">{this.props.data.final_blockers_proposed}</td>`
		`- </tr>`
		`- <tr>`
		`- <td>Accepted Blockers</td>`
		`- <td className="bugscount">{this.props.data.final_blockers}</td>`
		`- </tr>`
		`- <tr>`
		`- <td>Proposed FEs</td>`
		`- <td className="bugscount">{this.props.data.final_fe_proposed}</td>`
		`- </tr>`
		`- <tr>`
		`- <td>Accepted FEs</td>`
		`- <td className="bugscount">{this.props.data.final_fe}</td>`
		`- </tr>`
		`- </tbody>`
		`- </table>`
		`- </div>`
		`- </Row>`
		`- </div>`
		`- )`
		`- }`
		`+ <div className="col-md-6">`
		`+ <table className="events">`
		`+ <thead>`
		`+ <tr>`
		`+ <td colSpan="2">`
		`+ <b>Final</b>`
		`+ </td>`
		`+ </tr>`
		`+ </thead>`
		`+ <tbody>`
		`+ <tr>`
		`+ <td>Proposed Blockers</td>`
		`+ <td className="bugscount">{props.data.final_blockers_proposed}</td>`
		`+ </tr>`
		`+ <tr>`
		`+ <td>Accepted Blockers</td>`
		`+ <td className="bugscount">{props.data.final_blockers}</td>`
		`+ </tr>`
		`+ <tr>`
		`+ <td>Proposed FEs</td>`
		`+ <td className="bugscount">{props.data.final_fe_proposed}</td>`
		`+ </tr>`
		`+ <tr>`
		`+ <td>Accepted FEs</td>`
		`+ <td className="bugscount">{props.data.final_fe}</td>`
		`+ </tr>`
		`+ </tbody>`
		`+ </table>`
		`+ </div>`
		`+ </Row>`
		`+ </div>`
		`+ )`
		`}`

		`export default Blockers`

src/landingpage/Events.js

file modified

+40 -50

		`@@ -1,58 +1,48 @@`
		`- import React, { Component } from "react"`
		`+ import React from "react"`
		`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 old = new Date(meeting.start)`
		`- var meeting_start = dateFormat(`
		`- new Date(old.getTime() - old.getTimezoneOffset() * 60000),`
		`- "d mmm yyyy - HH:MM"`
		`- )`
		`- if (meeting.fullday) {`
		`- meeting_start = meeting_start.slice(0, -5) + "All day"`
		`- }`
		`- return (`
		`- <Event`
		`- key={meeting_start + meeting.summary}`
		`- start={meeting_start}`
		`- summary={meeting.summary}`
		`- link={meeting.link}`
		`- info={meeting.info}`
		`- />`
		`- )`
		`- })`
		`- return (`
		`- <div>`
		`- <h1 className="padded">`
		`- Meetings and testdays in the next 7 days{" "}`
		`- <SourceLink href="https://apps.fedoraproject.org/calendar/QA/" />`
		`- </h1>`
		`- <ul className="events">{meetings}</ul>`
		`- </div>`
		`+ const Events = props=>{`
		`+ const meetings = props.data.map((meeting) => {`
		`+ const old = new Date(meeting.start)`
		`+ var meeting_start = dateFormat(`
		`+ new Date(old.getTime() - old.getTimezoneOffset() * 60000),`
		`+ "d mmm yyyy - HH:MM"`
		`)`
		`- }`
		`- }`
		`-`
		`- class Event extends Component {`
		`- render() {`
		`+ if (meeting.fullday) {`
		`+ meeting_start = meeting_start.slice(0, -5) + "All day"`
		`+ }`
		`return (`
		`- <li key={this.props.start + this.props.summary}>`
		`- <b>{this.props.start}</b>`
		`- <br />`
		`- <a target="_blank" rel="noopener noreferrer" href={this.props.link}>`
		`- {this.props.summary}`
		`- </a>`
		`- <br />`
		`- </li>`
		`+ <Event`
		`+ key={meeting_start + meeting.summary}`
		`+ start={meeting_start}`
		`+ summary={meeting.summary}`
		`+ link={meeting.link}`
		`+ info={meeting.info}`
		`+ />`
		`)`
		`- }`
		`+ })`
		`+ return (`
		`+ <div>`
		`+ <h1 className="padded">`
		`+ Meetings and testdays in the next 7 days{" "}`
		`+ <SourceLink href="https://apps.fedoraproject.org/calendar/QA/" />`
		`+ </h1>`
		`+ <ul className="events">{meetings}</ul>`
		`+ </div>`
		`+ )`
		`+ }`
		`+ const Event =props=>{`
		`+ return (`
		`+ <li key={props.start + props.summary}>`
		`+ <b>{props.start}</b>`
		`+ <br />`
		`+ <a target="_blank" rel="noopener noreferrer" href={props.link}>`
		`+ {props.summary}`
		`+ </a>`
		`+ <br />`
		`+ </li>`
		`+ )`
		`}`

		`+`
		`export default Events`

src/landingpage/Hideable.js

file modified

+13 -19

		`@@ -1,37 +1,31 @@`
		`- import React, { Component } from "react"`
		`+ import React from "react"`
		`import _ from "lodash"`

		`- class Hideable extends Component {`
		`- constructor(props) {`
		`- super(props)`
		`- this.id = _.uniqueId("hideable-id-")`
		`+ const Hideable =props=>{`
		`+ const id = _.uniqueId("hideable-id-")`
		`+ if (props.component_name === undefined) {`
		`+ return <div key={id} />`
		`}`
		`-`
		`- render() {`
		`- if (this.props.component_name === undefined) {`
		`- return <div key={this.id} />`
		`- }`
		`- return (`
		`+ return (`
		`<div`
		`- key={this.id}`
		`+ key={id}`
		`className={`
		`- this.props.config_mode`
		`- ? this.props.is_enabled`
		`+ props.config_mode`
		`+ ? props.is_enabled`
		`? "border border-dark"`
		`: "bgcl border border-dark"`
		`: ""`
		`}>`
		`- {this.props.children}`
		`+ {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)}`
		`+ className={props.config_mode ? "d-block text-center badge badge-primary" : "d-none"}`
		`+ onClick={(e) => props.toggle_handler(e, props.component_name)}`
		`role="button">`
		`- {this.props.is_enabled ? "Disable" : "Enable"}`
		`+ {props.is_enabled ? "Disable" : "Enable"}`
		`</a>`
		`</div>`
		`)`
		`- }`
		`}`

		`export default Hideable`

src/landingpage/Minutes.js

file modified

+17 -20

		`@@ -1,28 +1,25 @@`
		`- import React, { Component } from "react"`
		`+ import React from "react"`

		`- class Events extends Component {`
		`- render() {`
		`- 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>`
		`- <br />`
		`+ const Events = props=>{`
		`+ return (`
		`+ <div>`
		`+ <h1 className="padded">Fedora QA Meeting Minutes</h1>`
		`+ <div className="events">`
		`+ <a target="_blank" href={props.data.link} rel="noopener noreferrer">`
		`+ Latest minutes from {props.data.date}`
		`+ </a>`
		`+ <br />`
		`Visit{" "}`
		`- <a`
		`- target="_blank"`
		`- href="https://meetbot.fedoraproject.org/sresults/?group_id=fedora-qa&type=team"`
		`- rel="noopener noreferrer">`
		`- meetbot`
		`+ <a`
		`+ target="_blank"`
		`+ href="https://meetbot.fedoraproject.org/sresults/?group_id=fedora-qa&type=team"`
		`+ rel="noopener noreferrer">`
		`+ meetbot`
		`</a>{" "}`
		`to see older.`
		`<br />`
		`- </div>`
		`</div>`
		`- )`
		`- }`
		`+ </div>`
		`+ )`
		`}`
		`-`
		`export default Events`

src/landingpage/SourceLink.js

file modified

+11 -13

		`@@ -1,17 +1,15 @@`
		`- import React, {Component} from 'react'`
		`+ import React from 'react'`

		`- class SourceLink extends Component {`
		`- render() {`
		`- return (`
		`- <a`
		`- target="_blank"`
		`- rel="noopener noreferrer"`
		`- href={this.props.href}`
		`- className="smallsuper">`
		`- <i className="fas fa-external-link-alt"></i>`
		`- </a>`
		`- )`
		`- }`
		`+ const SourceLink =props=>{`
		`+ return (`
		`+ <a`
		`+ target="_blank"`
		`+ rel="noopener noreferrer"`
		`+ href={props.href}`
		`+ className="smallsuper">`
		`+ <i className="fas fa-external-link-alt"></i>`
		`+ </a>`
		`+ )`
		`}`

		`export default SourceLink`

src/landingpage/Timeline.js

file modified

+52 -61

		`@@ -1,13 +1,8 @@`
		`- import React, { Component } from "react"`
		`+ import React from "react"`
		`import SourceLink from './SourceLink'`

		`- class Timeline extends Component {`
		`- constructor(props) {`
		`- super(props)`
		`- this.state = { schedule: [] }`
		`- }`
		`-`
		`- get_title(summary) {`
		`+ const Timeline = props=>{`
		`+ const get_title = (summary)=> {`
		`summary = summary.toLowerCase()`
		`if (summary.includes("freeze"))`
		`return "At the milestone freeze, pushes from the updates-testing to the stable repository are suspended until the release candidate is accepted."`
		`@@ -19,66 +14,62 @@`
		`return "Release candidate was accepted (violating no milestone criteria) and was released."`
		`}`

		`- render() {`
		`- const line = this.props.data.map((milestone) => {`
		`- return (`
		`- <td key={"line" + milestone.summary}>`
		`- <Line color={milestone.current ? "#2371ae" : "#dcdcdc"} />`
		`- </td>`
		`- )`
		`- })`
		`-`
		`- const dates = this.props.data.map((milestone) => {`
		`- return (`
		`- <td key={"dates" + milestone.summary} width="150">`
		`- <b>{milestone.date}</b>`
		`- </td>`
		`- )`
		`- })`
		`+ const line = props.data.map((milestone) => {`
		`+ return (`
		`+ <td key={"line" + milestone.summary}>`
		`+ <Line color={milestone.current ? "#2371ae" : "#dcdcdc"} />`
		`+ </td>`
		`+ )`
		`+ })`

		`- const schedule = this.props.data.map((milestone) => {`
		`- return (`
		`- <td`
		`- key={"schedule" + milestone.summary}`
		`- title={this.get_title(milestone.summary)}`
		`- width="150">`
		`- {milestone.summary} <i className="fas fa-question-circle light"></i>`
		`- </td>`
		`- )`
		`- })`
		`+ const dates = props.data.map((milestone) => {`
		`return (`
		`- <div>`
		`- <h1 className="padded">`
		`- Current development schedule{" "}`
		`- <SourceLink href="https://fedorapeople.org/groups/schedule/" />`
		`- </h1>`
		`- <div className="table-responsive">`
		`- <table className="timeline">`
		`- <tbody>`
		`- <tr>{line}</tr>`
		`- <tr>{dates}</tr>`
		`- <tr>{schedule}</tr>`
		`- </tbody>`
		`- </table>`
		`- </div>`
		`- </div>`
		`+ <td key={"dates" + milestone.summary} width="150">`
		`+ <b>{milestone.date}</b>`
		`+ </td>`
		`)`
		`- }`
		`- }`
		`+ })`

		`- class Line extends Component {`
		`- render() {`
		`- const lineStyle = {`
		`- stroke: this.props.color,`
		`- strokeWidth: "3",`
		`- }`
		`+ const schedule = props.data.map((milestone) => {`
		`return (`
		`- <svg width="150" height="20" version="1.1">`
		`- <line x1="0" y1="50%" x2="100%" y2="50%" style={lineStyle} />`
		`- <circle cx="50%" cy="50%" r="4" style={lineStyle} fill="#f8f9fa" />`
		`- </svg>`
		`+ <td`
		`+ key={"schedule" + milestone.summary}`
		`+ title={get_title(milestone.summary)}`
		`+ width="150">`
		`+ {milestone.summary} <i className="fas fa-question-circle light"></i>`
		`+ </td>`
		`)`
		`+ })`
		`+`
		`+ return (`
		`+ <div>`
		`+ <h1 className="padded">`
		`+ Current development schedule{" "}`
		`+ <SourceLink href="https://fedorapeople.org/groups/schedule/" />`
		`+ </h1>`
		`+ <div className="table-responsive">`
		`+ <table className="timeline">`
		`+ <tbody>`
		`+ <tr>{line}</tr>`
		`+ <tr>{dates}</tr>`
		`+ <tr>{schedule}</tr>`
		`+ </tbody>`
		`+ </table>`
		`+ </div>`
		`+ </div>`
		`+ )`
		`+ }`
		`+ const Line = props=>{`
		`+ const lineStyle = {`
		`+ stroke: props.color,`
		`+ strokeWidth: "3",`
		`}`
		`+ return (`
		`+ <svg width="150" height="20" version="1.1">`
		`+ <line x1="0" y1="50%" x2="100%" y2="50%" style={lineStyle} />`
		`+ <circle cx="50%" cy="50%" r="4" style={lineStyle} fill="#f8f9fa" />`
		`+ </svg>`
		`+ )`
		`}`

		`export default Timeline`

gift_ commented 3 years ago

Here's the link to the issue I worked on : https://pagure.io/fedora-qa/landingpage/issue/49. All class components was converted to functional components also, redundant codes were also removed.