Open venkat27raman opened 6 years ago
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of TeamMatesView
. .Getting still this only,so please help to me for solve this issue
hi @venkat27raman
I don't reproduce this issue, so it would be better to have a piece of code to understand what's happening on your implementation.
// @flow weak
import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { AnimatedView, Panel, TeamMates, TeamMember, TeamMateAddButton } from '../../components'; import Highlight from 'react-highlight'; import axios from 'axios'; import { render } from "react-dom"; import { Link } from 'react-router-dom'; import AlertContainer from 'react-alert'; import Title from 'react-title-component'; import ReactConfirmAlert, { confirmAlert } from 'react-confirm-alert'; // Import import 'react-confirm-alert/src/react-confirm-alert.css' // Import css import auth from '../../services/auth'; import ReactTable from "react-table"; import "react-table/react-table.css"; import moment from 'moment';
var self = ''; var apiBaseUrl = "http://testapp.pacifyr.net:8080/pacifyr/v1/"; class TeamMatesView extends PureComponent { static propTypes= { // react-router 4: match: PropTypes.object.isRequired, location: PropTypes.object.isRequired, history: PropTypes.object.isRequired, // views props: currentView: PropTypes.string.isRequired,
actions: PropTypes.shape({
enterLogin: PropTypes.func.isRequired,
leaveLogin: PropTypes.func.isRequired
}).isRequired
}; constructor() { super();
this.renderEditable = this.renderEditable.bind(this);
}
enterAnimationTimer = null; alertOptions = { offset: 14, position: 'bottom right', theme: 'dark', time: 5000, transition: 'scale' } showAlert = () => { this.msg.show('Some text or component', { time: 3000, type: 'success', icon: }) }
state = { members: [],
mem_len: []
};
componentWillMount() { const { actions: { enterTeamMatesView } } = this.props; enterTeamMatesView(); if(localStorage.data){
}else{ console.log(event) if (event) { event.preventDefault(); event.stopPropagation(); }
// clear all application storage
auth.clearAllAppStorage();
// redirect to login
const { history } = this.props;
history.push('/login');
} }
componentDidMount() {
var dt = JSON.parse(localStorage.data); var addemp_flag = JSON.parse(localStorage.addemployee); console.log(addemp_flag); if(addemp_flag == true){ this.msg.success('Employee Added Successfull'); localStorage.setItem('addemployee',false); }else{
}
var edtemp_flag = JSON.parse(localStorage.editemployee); console.log(edtemp_flag); if(edtemp_flag == 1){ this.msg.success('Employee Updated Successfull'); localStorage.setItem('editemployee',0); }
var compid = dt.user.companyId;
var headers ={
headers: {
'Content-Type': 'application/json',
'AccessToken': dt.accessToken
}
};
axios.get(apiBaseUrl+'admin/employees?companyId='+compid, headers).then(res =>{
for(var i=0;i<res.data.length;i++){
res.data[i].dates = moment(res.data[i].createdAt).format('DD/MM/YYYY');
res.data[i].tools = '';
if(res.data[i].alreadyRegistered == false){
res.data[i].register = "No";
}else{
res.data[i].register = "Yes"
}
}
this.setState({ mem_len: res.data.length});
this.setState({ members: res.data});
self = this;
})
}
componentWillUnmount() { const { actions: { leaveTeamMatesView } } = this.props; leaveTeamMatesView(); clearTimeout(this.enterAnimationTimer); } handleChange(event) { console.log('Selected file:', event.target.files[0]);
var dtn= JSON.parse(localStorage.data);
var filetype = event.target.files[0];
var formdata = new FormData();
formdata.append('file', filetype);
formdata.append("data", "{\"companyId\":\""+dtn.user.companyId+"\"}");
console.log(formdata);
var headers ={
headers: {
'AccessToken': dtn.accessToken,
'enctype':'multipart/form-data'
}
};
axios.post(apiBaseUrl+'upload/approve/employees',formdata, headers).then(res =>{
console.log(res);
axios.get(apiBaseUrl+'admin/employees?companyId='+dtn.user.companyId, headers).then(res1 =>{ console.log(res1.data);
for(var i=0;i<res1.data.length;i++){
res1.data[i].dates = moment(res1.data[i].createdAt).format('DD/MM/YYYY');
res1.data[i].tools = '';
if(res1.data[i].alreadyRegistered == false){
res1.data[i].register = "No";
}else{
res1.data[i].register = "Yes"
}
}
self.msg.success(res.data.message);
self.setState({members: res1.data});
self.setState({ mem_len: res1.data.length})
})
})
}
renderEditable(cellInfo) {
return (
<div
style={{ backgroundColor: "#fafafa" }}
contentEditable
suppressContentEditableWarning
onBlur={e => {
const data = [...this.state.members];
data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
this.setState({ members });
}}
dangerouslySetInnerHTML={{
__html: this.state.members[cellInfo.index][cellInfo.column.id]
}}
/>
);
} edit_employee = (emp) => { var emp_dtls = JSON.stringify(emp);
localStorage.setItem('employeeid',emp_dtls);
const { history } = this.props;
history.push({ pathname: '/editemployee'});
}
cnfrmdelete = (emp_id) => {
console.log(this.state);
console.log("confirm");
var dtn= JSON.parse(localStorage.data);
var headers ={
headers: {
'AccessToken': dtn.accessToken,
'enctype':'multipart/form-data'
}
};
axios.delete(apiBaseUrl+'admin/deleteemployee/'+emp_id, headers).then(res =>{
console.log(res);
axios.get(apiBaseUrl+'admin/employees?companyId='+dtn.user.companyId, headers).then(res1 =>{
console.log(res1.data);
for(var i=0;i<res1.data.length;i++){
res1.data[i].dates = moment(res1.data[i].createdAt).format('DD/MM/YYYY');
res1.data[i].tools = '';
if(res1.data[i].alreadyRegistered == false){
res1.data[i].register = "No";
}else{
res1.data[i].register = "Yes"
}
}
self.msg.success(res.data.message);
self.setState({members: res1.data});
self.setState({ mem_len: res1.data.length})
})
})
} cnfrmcncl = () => { console.log("cancel") } submit = (empl) => { console.log(empl); confirmAlert({ title: '', // Title dialog message: 'Are you sure want to do delete this employee ?', // Message dialog
confirmLabel: 'Confirm', // Text button confirm
cancelLabel: 'Cancel', // Text button cancel
onConfirm: () => this.cnfrmdelete(empl.id), // Action after Confirm
onCancel: () => this.cnfrmcncl() // Action after Cancel
})
}; render() { const { members } = this.state; const { mem_len } = this.state;
console.log(members)
console.log(mem_len)
const Header = ["Employee", "Email", "Phone", "Created At", "Registered", "No of Sessions","Tools" ];
return(
<AnimatedView>
<Title render="Employees"/>
<div className="row">
<div className="col-xs-12">
<Panel className="post_rel"
hasTitle={true}
title={'Employees'} hasLink={true} importfunc={this.handleChange} linktitle={'Add Employee'} linkto={'/Manage/addemployee'} hasimport={true} importitle={'Import Employee'}>
<span className="upld"><a href="http://dev.ceino.com/pacifyr_template/template.csv" target="_blank" download="template.csv" className="dwnld_temp" title="Import Template" ><i className="fa fa-download" aria-hidden="true"></i> Downdload Template</a></span>
<div>
<ReactTable
data={members}
columns={[
{
Header: "First Name",
accessor: "firstName"
}, {
Header: "Last Name",
accessor: "lastName"
}, {
Header: "Gender",
minWidth:60,
accessor: "gender"
}, {
Header: "Date of Birth",
minWidth:75,
minHeight:75,
accessor: "dateOfBirth"
}, {
Header: "Marital Status",
minWidth:60,
accessor: "maritalStatus"
},
{
Header: "Email",
minWidth:100,
accessor: "email"
},
{
Header: "Phone",
minWidth:90,
accessor: "phoneNumber"
},
{
Header: "Created At",
minWidth:75,
accessor: "dates"
},
{
Header: "Registered",
minWidth:60,
accessor: "register"
},
{
Header: "No of Sessions",
minWidth:70,
accessor: "numberOfSessions"
},
{
Header: "Tools",
minWidth:75,
accessor: "id",
Cell: row => (
<span>
<a href="javascript://void(0)" onClick={() => { this.edit_employee(row.original) }} >
<i className="fa fa-pencil-square-o blck" aria-hidden="true"></i>
</a>
<a href="javascript://void(0)" onClick={() => { this.submit(row.original) }}>
<i className="fa fa-trash-o red mrgl10" aria-hidden="true" ></i>
</a>
</span>
)
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
<TeamMates>
</TeamMates>
<AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
</Panel>
</div>
</div>
</AnimatedView>
);
} }
TeamMatesView.propTypes= { actions: PropTypes.shape({ enterTeamMatesView: PropTypes.func.isRequired, leaveTeamMatesView: PropTypes.func.isRequired }) };
export default TeamMatesView;
This is a piece of code for teammates.js
Hi Team,
We are getting the issue in render method of teammatesview. please check and advice.