Question

Will dislike if you don't code efficiently, you must have knowledge of next.js,vue.js,immutable.js,react,js.

Develop an api for distance measurements,you can use any database, make it,make tables then implement the api in backend use node.js,then interpret it using frontend(all the above mentioned technologies). Build 8-10 pages(atleast) in the frontend.

Don't attempt if no thorough knowledge.

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>

);

}

}