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>

);

}

}

Channels Actions Name Channel ID Locale ID Category 1 156 Default Boots Nordstrom US Myntra Default Blazers Myntra Default T-Shirts 12 Myntra Default Backpac! Myntra Default Legging