Question

This question is based on react js. Please don't do it if you don't have thorough knowledge of React,node,mongodb, express.angular and vue.js. So i am designing an engineering dashboard with live api tracking system with frontend in react and backend in node js. You need to design a fully functional dashboard you can take any dummy database make apis test them and then add pagination in it.

Please don't attempt it if you don;t have knowledge of rest api,react and node

import React from "react";

import { Container, Row, Col, Card, CardHeader, CardBody } from "shards-react";

import { getData } from "../apis/table";

import PageTitle from "../components/common/PageTitle";

import Tablerow from "../components/custom-wrappers/table-row";

import {

getChannels,

getCategories,

getDepartments,

getLocales,

numberOfrecords

} from "../apis/table";

import ReactPaginate from "react-paginate";

import "./style.css";

import { FormInput, InputGroup } from "shards-react";

import { MdSearch } from "react-icons/md";

class Tables extends React.Component {

constructor(props) {

super(props);

this.state = {

tabeldata: [],

channeldata: [],

categorydata: [],

departmentdata: [],

localesdata: [],

activerow: false,

perPage: 50,

offset: 0,

pageCount: 10,

searchname: "",

searchchid: "",

searchlid: "",

searchdid: "",

searchurl: "",

searchactive: "",

searchmeta: "",

searchcid: ""

};

this.handleActiverow = this.handleActiverow.bind(this);

this.handlePageClick = this.handlePageClick.bind(this);

}

componentDidMount() {

getData(this.state.perPage, this.state.offset).then(data =>

this.setState({

tabeldata: data

})

);

numberOfrecords().then(data => {

let counts = data[0].count;

let totalpages = Math.ceil(counts / this.state.perPage);

this.setState({

pageCount: totalpages

});

});

getChannels().then(data =>

this.setState({

channeldata: data

})

);

getCategories().then(data =>

this.setState({

categorydata: data

})

);

getDepartments().then(data =>

this.setState({

departmentdata: data

})

);

getLocales().then(data =>

this.setState({

localesdata: data

})

);

}

handlePageClick = data => {

if (this.state.activerow) alert("Some row is clicked!");

else {

let selected = data.selected;

let offset = Math.ceil(selected * this.state.perPage);

this.setState(

{

offset: offset

},

() => {

getData(this.state.perPage, this.state.offset).then(data =>

this.setState({

tabeldata: data

})

);

}

);

}

};

handleActiverow() {

this.setState({

activerow: !this.state.activerow

});

}

render() {

return (

<Container fluid className="main-content-container px-4">

<Row noGutters className="page-header py-4">

<PageTitle

sm="4"

title="Add New Post"

subtitle="Blog Posts"

className="text-sm-left"

/>

</Row>

<Row>

<Col>

<Card small className="mb-4">

<CardHeader className="border-bottom">

<h6 className="m-0"> Channels </h6>

</CardHeader>

<CardBody className="p-0 pb-3">

<table class="table mb-0">

<thead class="bg-light">

<tr>

<th scope="col" class="border-0">

Actions

</th>

<th scope="col" class="border-0">

Name

</th>

<th scope="col" class="border-0">

Channel ID

</th>

<th scope="col" class="border-0">

Locale ID

</th>

<th scope="col" class="border-0">

Category ID

</th>

<th scope="col" class="border-0">

Department ID

</th>

<th scope="col" class="border-0">

URL

</th>

<th scope="col" class="border-0">

Is Active

</th>

<th scope="col" class="border-0">

Meta Data

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

<h4 align="center">

<MdSearch></MdSearch>

</h4>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchname: e.target.value });

console.log(this.state.searchname);

}}

/>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchchid: e.target.value });

console.log(this.state.searchchid);

}}

/>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchlid: e.target.value });

console.log(this.state.searchlid);

}}

/>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchcid: e.target.value });

console.log(this.state.searchcid);

}}

/>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchdid: e.target.value });

console.log(this.state.searchdid);

}}

/>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchurl: e.target.value });

console.log(this.state.searchurl);

}}

/>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchactive: e.target.value });

console.log(this.state.searchactive);

}}

/>

</td>

<td>

<FormInput

onChange={e => {

this.setState({ searchmeta: e.target.value });

console.log(this.state.searchmeta);

}}

/>

</td>

</tr>

{this.state.tabeldata.map(item => (

<Tablerow

handle={this.state.activerow}

label={item}

channeldata={this.state.channeldata}

categorydata={this.state.categorydata}

departmentdata={this.state.departmentdata}

localesdata={this.state.localesdata}

handleActiverow={this.handleActiverow}

/>

))}

</tbody>

</table>

</CardBody>

</Card>

</Col>

</Row>

<ReactPaginate

previousLabel={"previous"}

nextLabel={"next"}

breakLabel={"..."}

breakClassName={"break-me"}

pageCount={this.state.pageCount}

marginPagesDisplayed={2}

pageRangeDisplayed={5}

onPageChange={this.handlePageClick}

containerClassName={"pagination"}

subContainerClassName={"pages pagination"}

activeClassName={"active"}

/>

</Container>

);

}

}

export default Tables;

Answer 1

/* Below is your code, please find the attached output for the same*/

import React from "react";

import { FormInput, InputGroup } from "shards-react";

import { FaEdit } from "react-icons/fa";

import { FormCheckbox } from "shards-react";

import { IoMdCheckmark,IoMdClose } from "react-icons/io";

import DropDownContainer from "./DropDown-container";

let channelmap = [];

let departmentmap = [];

let localemap = [];

let categorymap = [];

export default class Tablerow extends React.Component {

constructor(props) {

super(props);

this.state = {

clicked: false,

active: true

};

this.handlePopUpClick = this.handlePopUpClick.bind(this);

}

componentWillReceiveProps(nextProps) {

this.getJSONfromArr(nextProps.channeldata, channelmap);

this.getJSONfromArr(nextProps.localesdata, localemap);

this.getJSONfromArr(nextProps.categorydata, categorymap);

this.getJSONfromArr(nextProps.departmentdata, departmentmap);

}

handlePopUpClick() {

if (this.props.handle) alert("Some row is already clicked");

else {

this.setState({ clicked: !this.state.clicked });

this.props.handleActiverow();

}

}

handleChange(e, active) {

const newState = {};

newState[active] = !this.state[active];

this.setState({ ...this.state, ...newState });

}

getJSONfromArr(data, variable) {

data.map(item => (variable[item.id] = item.name));

}

render() {

const {

handle,

label,

channeldata,

categorydata,

departmentdata,

localesdata,

onclick

} = this.props;

return this.state.clicked ? (

<tr key={label.id}>

<td align="center">

<h4>

<IoMdCheckmark

style={{ border: "1px solid lightgrey" }}

onClick={() => {

this.setState({ clicked: false });

this.props.handleActiverow();

}}

></IoMdCheckmark>

<IoMdClose

style={{ border: "1px solid lightgrey" }}

onClick={() => {

this.setState({ clicked: false });

this.props.handleActiverow();

}}

></IoMdClose>

</h4>

</td>

<td>{label.id}</td>

<td align="center">

<DropDownContainer label={channeldata} />

</td>

<td align="center">

<DropDownContainer label={localesdata} />

</td>

<td align="center">

<DropDownContainer label={categorydata} />

</td>

<td align="center">

<DropDownContainer label={departmentdata} />

</td>

<td>

<InputGroup className="mb-3">

<FormInput autoFocus={true} Value={label.url} />

</InputGroup>

</td>

<td>

<FormCheckbox

checked={this.state.active}

defaultChecked={label.is_active}

onChange={e => this.handleChange(e, "active")}

></FormCheckbox>

</td>

<td>

<InputGroup className="mb-3">

<FormInput autoFocus={true} Value={JSON.stringify(label.meta)} />

</InputGroup>

</td>

</tr>

) : (

<tr>

<td align="center">

<h4>

<FaEdit onClick={this.handlePopUpClick}></FaEdit>

</h4>

</td>

<td align="center">{label.id}</td>

<td align="center">{channelmap[label.channel_id]}</td>

<td align="center">{localemap[label.locale_id]} </td>

<td align="center">{categorymap[label.category_id]}</td>

<td align="center">{departmentmap[label.department_id]}</td>

<td>

<a href={label.url} target="_blank">

{label.url.length >= 25 ? (

<div>{label.url.substring(0, 25) + "..."}</div>

) : (

<div>{label.url}</div>

)}

</a>

</td>

<td>

<FormCheckbox

checked={this.state.active}

defaultChecked={label.is_active}

disabled

></FormCheckbox>

</td>

<td>{JSON.stringify(label.meta)}</td>

</tr>

);

}

}