Remove redux from apps table component

feature/appm-store/pbac
Jayasanka 5 years ago
parent ff7158bf00
commit 3a3de0ff00

@ -1,60 +0,0 @@
import {
Skeleton, Switch, Card, Icon, Avatar, Typography
} from 'antd';
import React from "react";
import config from "../../../public/conf/config.json";
import {openReleasesModal} from "../../js/actions";
import {connect} from "react-redux";
const { Meta } = Card;
const { Text } = Typography;
const mapDispatchToProps = dispatch => ({
openReleasesModal: (app) => dispatch(openReleasesModal(app))
});
class ConnectedAppCard extends React.Component {
constructor(props){
super(props);
this.handleReleasesClick = this.handleReleasesClick.bind(this);
}
handleReleasesClick(){
this.props.openReleasesModal(this.props.app);
}
render() {
const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default;
if(defaultPlatformIcons.hasOwnProperty(this.props.platform)){
icon = defaultPlatformIcons[this.props.platform];
}
let descriptionText = this.props.description;
if(descriptionText.length>50){
descriptionText = descriptionText.substring(0,50)+"...";
}
const description = (
<div>
<p>{descriptionText}</p>
<Text code>{this.props.type}</Text>
<Text> {this.props.subType}</Text>
</div>
);
return (
<Card style={{marginTop: 16 }} actions={[<Icon type="edit" />, <Icon type="delete" />, <Icon type="appstore" theme="twoTone" onClick={this.handleReleasesClick} />]}>
<Meta
avatar={<Avatar src={icon} />}
title={this.props.name}
description={description}
/>
</Card>
);
}
}
const AppCard = connect(null,mapDispatchToProps)(ConnectedAppCard);
export default AppCard;

@ -1,42 +0,0 @@
import React from "react";
import AppCard from "./AppCard";
import {Col, Row} from "antd";
import {connect} from "react-redux";
import {getApps} from "../../js/actions";
// connecting state.apps with the component
const mapStateToProps= state => {
return {apps : state.apps}
};
class ConnectedAppList extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.getApps();
}
render() {
return (
<Row gutter={16}>
{this.props.apps.map(app => (
<Col key={app.id} xs={24} sm={12} md={6} lg={6}>
<AppCard key={app.id}
app = {app}
name={app.name}
platform={app.deviceType}
type={app.type}
subType={app.subType}
description={app.description}/>
</Col>
))}
</Row>
);
}
}
const AppList = connect(mapStateToProps,{getApps})(ConnectedAppList);
export default AppList;

@ -7,11 +7,6 @@ import config from "../../../../public/conf/config.json";
const {Title} = Typography;
// connecting state.apps with the component
const mapStateToProps = state => {
return {apps: state.apps}
};
const columns = [
{
title: '',
@ -71,7 +66,7 @@ const columns = [
},
];
class ConnectedAppsTable extends React.Component {
class AppsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -175,6 +170,4 @@ class ConnectedAppsTable extends React.Component {
}
}
const AppsTable = connect(mapStateToProps, {getApps})(ConnectedAppsTable);
export default AppsTable;

@ -1,60 +0,0 @@
import React from "react";
import "antd/dist/antd.css";
import {PageHeader, Typography,Input, Button, Row, Col} from "antd";
import AppList from "../../../components/apps/AppList";
import ReleaseModal from "../../../components/apps/ReleaseModal";
const Search = Input.Search;
const routes = [
{
path: 'index',
breadcrumbName: 'Publisher',
},
{
path: 'first',
breadcrumbName: 'Dashboard',
},
{
path: 'second',
breadcrumbName: 'Apps',
},
];
class Apps extends React.Component {
routes;
constructor(props) {
super(props);
this.routes = props.routes;
}
render() {
return (
<div>
<PageHeader
breadcrumb={{routes}}
/>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
<Row style={{padding:10}}>
<Col span={6} offset={18}>
<Search
placeholder="search"
onSearch={value => console.log(value)}
style={{ width: 200}}
/>
<Button style={{margin:5}}>Advanced Search</Button>
</Col>
</Row>
<ReleaseModal/>
<AppList/>
</div>
</div>
);
}
}
export default Apps;
Loading…
Cancel
Save