PR#34: Converted enebling/disabling of info cards to collapse using reactstrap - fedora-qa/landingpage

fedora-qa / landingpage

#34 Converted enebling/disabling of info cards to collapse using reactstrap

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

fedora-qa/ alisina92/landingpage Enhancing-the-info-card-Alisina into master

Converted enebling/disabling of info cards to collapse using reactstrap

[Alisina92] • 3 years ago

1c65abc

src/landingpage/Hideable.js

file modified

+41 -33

		`@@ -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;`

alisina92 commented 3 years ago

This pull request is related to https://pagure.io/fedora-qa/landingpage/issue/24

/I have converted the disabling/enabling to the collapse functionality to reduce a button clicks to enhance the functionality /
/if a user clicks on Configure visibility of the info-cards they can collapse to display that component and hide the component /
/ if they save it will take effect on the landing page./

divyanshisingh commented 3 years ago

I was working on this. I have already done it @alisina92
Please get it assigned or comment on an issue and then work on it to avoid multiple people working on it.

alisina92 commented 3 years ago

Dear divyanshisingh,

I have Spoken With @lbrabec@redhat.com lbrabec@redhat.com on the chat
channel https://webchat.freenode.net/?channels=#fedora-qa I asked him how
can I start everybody is working on a component he told we have stopped
assigning people to tickets so you can start working on any then we compare
works and we choose the best one.

Kind Regards,

Alisina

On Fri, 2 Apr 2021 at 18:52, Divyanshi Singh pagure@pagure.io wrote:

divyanshisingh commented on the pull-request: Converted enebling/disabling of info cards to collapse using reactstrap that you are
following:
I was working on this. I have already done it @alisina92 Please get it assigned or comment on an issue and then work on it to avoid multiple people working on it.

To reply, visit the link below or just reply to this email
https://pagure.io/fedora-qa/landingpage/pull-request/34

divyanshisingh commented 3 years ago

No issues :)

lbrabec commented 2 years ago

Thanks for participating in contribution period of Outreachy. This pull-request has not been selected to be merged and will be closed for housecleaning purposes. We may revisit this pull-request later, but as of now we will focus on merging pull-requests from our accepted intern.