I am trying to run Update the already present data in mySQL database.
my Api calling file => helpVideosApi.js
export const updateHelpVideoApi = (data) => {
const bodyData = JSON.stringify(data);
const allParams = "updateHelpVideo";
var apiURL = appConfig.azureFunctions.STUDY_BY_STATUS.replace("{ALLPARAMS}", allParams);
const request = new Request(apiURL, {
method: "POST",
body : bodyData
});
return fetch(request).then(response => {
return response.json().then(result => {
return result;
});
}).catch(error => {
return error;
});
}
actions
export const setVideoUpdateSuccess = (response) => {
return {
type: "SET_VIDEO_UPDATE_SUCCESS",
response
}
}
export const setEmptyVideoUpdateSuccessAction = (response) => {
return {
type: "SET_EMPTY_VIDEO_UPDATE_SUCCESS",
response
}
}
export const updateHelpVideoAction = (data) =>{
return dispatch => {
dispatch(startSpinner());
updateHelpVideoApi(data).then((result) => {
dispatch(endSpinner());
dispatch(setVideoUpdateSuccess(result));
});
}
}
reducer file
const initialState = {
}
const helpVideos = (state = initialState , action) =>{
switch (action.type) {
case 'SET_VIDEO_UPDATE_SUCCESS' :
return{
...state,
updateHelpVideoResponse : action.response
}
case 'SET_EMPTY_VIDEO_UPDATE_SUCCESS' :
return{
...state,
updateHelpVideoResponse : null
}
default:
return state;
}
};
export default helpVideos;
main component
import React, { Component } from "react";
import { Modal } from "antd";
import { connect } from "react-redux";
import {
updateHelpVideoAction,
setEmptyVideoUpdateSuccessAction
} from "../../actions/helpVideos";
import { message } from 'antd';
export class UpdateHelpVideo extends Component {
constructor(props) {
super(props);
this.state = {
title: "",
description: "",
videoId: "",
id: ""
}
}
// componentDidMount() {
// this.setState({
// title : this.props.title,
// description : this.props.description,
// videoId : this.props.videoId,
// id : this.props.id
// })
// }
componentDidUpdate(prevProps) {
if (this.props.videoId !== prevProps.videoId || this.props.title !== prevProps.title || this.props.description !== prevProps.description || this.props.id !== prevProps.id) {
this.setState({
title : this.props.title,
description : this.props.description,
videoId : this.props.videoId,
id : this.props.id
})
};
}
handleSubmit(e) {
// e.preventDefault();
const { title, description, videoId, id} = this.state;
// const data = {};
// data.videoId = videoId;
// data.title = title;
// data.description = description;
// data.id = id;
this.props.dispatch(updateHelpVideoAction(this.state));
// console.log(data);
}
onChangeHandler(event) {
let { name, value } = event.target;
this.setState({
[name]: value,
});
}
// onClickHandler(event) {
// this.handleSubmit(event)
// }
componentWillReceiveProps(nextProps) {
if(nextProps.updateHelpVideoResponse && nextProps.updateHelpVideoResponse.success) {
message.success(nextProps.updateHelpVideoResponse.message);
this.props.dispatch(setEmptyVideoUpdateSuccessAction());
// this.props.dispatch(getAllHelpVideosAction(this.state.currentPage));
this.setState({
title: "",
description: "",
videoId: "",
id: ""
})
}else if(nextProps.updateHelpVideoResponse && !nextProps.updateHelpVideoResponse.success){
message.error(nextProps.updateHelpVideoResponse.message);
this.props.dispatch(setEmptyVideoUpdateSuccessAction());
}
}
render() {
return (
<div>
<Modal
title={this.props.id}
width={750}
footer={[
]}
visible={this.props.showVideoModal}
onCancel={this.props.closeVideoModal}
>
{/* <iframe width="700" height="400" src={"https://www.youtube.com/embed/" + this.props.videoId} title={this.props.title} frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen>
</iframe> */}
<div id="">
<div className="row d-flex justify-content-between">
<div className="col-md-12 form-wrapper">
<form onSubmit={(e) => this.handleSubmit(e)} >
<div class="form-group margin-bottom">
<label htmlFor="title">Title</label>
<input
className="form-control"
type="text"
name="title"
value={this.state.title || ""}
onChange={(e) => this.onChangeHandler(e)}
placeholder={this.state.title}
/>
</div>
<div class="form-group ">
<label htmlFor="description">Description</label>
<textarea
type="text"
rows="4"
className="vimeo-desc form-control "
name="description"
value={this.state.description || ""}
onChange={(e) => this.onChangeHandler(e)}
placeholder="Enter description of the video"
></textarea>
</div>
<div class="form-group">
<label htmlFor="file">Enter Video ID</label>
<input
type="text"
name="videoId"
className="form-control"
value={this.state.videoId || ""}
placeholder="Enter videoId"
onChange={(e) => this.onChangeHandler(e)}
/>
</div>
<button name="submit" className="btn btn-primary form-control" >UPDATE</button>
</form>
</div>
</div>
</div>
</Modal>
</div>
);
}
}
const mapStateToProps=(state) =>{
return{
updateHelpVideoResponse: state.helpVideos.updateHelpVideoResponse
}
}
export default connect(mapStateToProps)(UpdateHelpVideo) ;
file from where I am entering the main file and passing some data to be used in main file.
import React, { Component } from "react";
//redux import { connect } from "react-redux";
//Actions
import {
getAllHelpVideosAction,
deleteHelpVideoAction,
setEmplteDeleteHelpVideosAction,
updateHelpVideoAction,
setVideoUpdateSuccess,
setEmptyVideoUpdateSuccessAction
} from "../../actions/helpVideos";
//Components
import { UpdateHelpVideo } from "../../components/updateHelpVideo";
//Others
import Pagination from "react-js-pagination";
import deletebutton from "../../Images/delete_ico.svg";
import subMenu from "../../Images/kebab_menu.png";
import projectedit from "../../Images/update_ico.svg";
import { Button } from "reactstrap";
import { injectIntl, FormattedMessage } from "react-intl";
class VideoDataTable extends Component {
constructor(props) {
super(props);
this.state = {
videoList: [],
totalPages: 0,
showVideoModal:false,
watchedVideoId: null,
watchedVideoDescription: null,
watchedTitle: null,
watchedId:null
};
this.handlePageChange = this.handlePageChange.bind(this);
this.closeVideoModal = this.closeVideoModal.bind(this);
this.openVideoModal = this.openVideoModal.bind(this);
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal,
});
}
closeVideoModal(){
this.setState({showVideoModal:false})
}
openVideoModal(title, description, videoId, id){
this.setState({showVideoModal:true, watchedTitle:title, watchedVideoDescription:description, watchedVideoId:videoId, watchedId:id})
// const { title, description, videoId, id} = this.state;
// const data = {};
// data.videoId = videoId;
// data.title = title;
// data.description = description;
// data.id = id;
// this.props.dispatch(updateHelpVideoAction(data));
}
softDelete(id) {
this.props.dispatch(deleteHelpVideoAction(id));
}
handlePageChange(pageNumber) {
this.props.setCurrentPage(pageNumber);
this.props.dispatch(getAllHelpVideosAction(pageNumber));
}
componentDidMount() {
this.props.dispatch(getAllHelpVideosAction(this.props.currentPage));
}
componentWillReceiveProps(nextProps) {
console.log(nextProps);
if (nextProps.getAllHelpVideos && nextProps.getAllHelpVideos.success) {
this.setState({
videoList: nextProps.getAllHelpVideos.data,
totalPages: nextProps.getAllHelpVideos.totalRecord,
});
}
if (
nextProps.getDeleteVideoResponse &&
nextProps.getDeleteVideoResponse.success
) {
alert(nextProps.getDeleteVideoResponse.message);
this.props.dispatch(setEmplteDeleteHelpVideosAction());
this.props.setCurrentPage(1);
this.props.dispatch(getAllHelpVideosAction(1));
}
if(
nextProps.getUpdateVideoResponse &&
nextProps.getUpdateVideoResponse.success
){
alert(nextProps.getUpdateVideoResponse.message);
this.props.dispatch(setEmptyVideoUpdateSuccessAction());
this.props.dispatch(getAllHelpVideosAction(1));
}
}
render() {
const { intl } = this.props;
return (
<React.Fragment>
<div className="p-3 bg-white rounded" id="video-data-table">
<div className="table-responsive role-list ">
<table className="table table-co-layout1 table-striped">
<thead>
<tr>
<th id="tblh">#</th>
<th id="tbhleft">
{intl.formatMessage({ id: "helpVideo.helpVideoTdTitle" })}
</th>
<th id="tblh">
{intl.formatMessage({
id: "helpVideo.helpVideoTdDescription",
})}
</th>
<th id="tblh">
{intl.formatMessage({ id: "helpVideo.helpVideoTdVideo" })}
</th>
{/* <th id="tblh"></th> */}
</tr>
</thead>
<tbody className="video-list">
{this.state.videoList.length > 0 ? (
this.state.videoList.map((d, i) => (
<tr key={i}>
<td>
{/* <Button
className="delete-btn"
onClick={this.softDelete.bind(this, d.id)}
>
<img
style={{ cursor: "pointer" }}
src={deletebutton}
height="20px"
width="20px"
alt=""
/>
Delete
</Button> */}
<div class="dropdown">
{/* <button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown button
</button> */}
<a
className="edit-btn"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<img
style={{ cursor: "pointer" }}
src={subMenu}
height="30px"
width="30px"
alt=""
/>
</a>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<a
className=" dropdown-item "
onClick={this.softDelete.bind(this, d.id)}
>
Delete
</a>
<a class="dropdown-item" onClick={() => this.openVideoModal(d.title, d.description, d.viemo_video_id, d.id)}>
Update
</a>
</div>
</div>
</td>
<td>{d.title}</td>
<td>{d.description}</td>
<td>
<a
href={d.viemo_video_id}
target="_blank"
style={{ cursor: "pointer" }}
>
{d.viemo_video_id}
</a>
</td>
</tr>
))
) : (
<p className="text-center">Data not found</p>
)}
</tbody>
</table>
</div>
<div
id="pageinationstyle"
className="pagination-container--helpVideo rounded"
>
{this.state.totalPages > 0 ? (
<Pagination
activePage={this.props.currentPage}
itemsCountPerPage={10}
totalItemsCount={this.state.totalPages}
pageRangeDisplayed={5}
onChange={this.handlePageChange}
/>
) : (
""
)}
</div>
</div>
<UpdateHelpVideo
showVideoModal={this.state.showVideoModal}
title={this.state.watchedTitle}
description={this.state.watchedVideoDescription}
videoId={this.state.watchedVideoId}
id={this.state.watchedId}
closeVideoModal={this.closeVideoModal}
/>
</React.Fragment>
);
}
}
const mapStateToProps = (state) => {
return {
getAllHelpVideos: state.helpVideos.getAllHelpVideosResponse,
getDeleteVideoResponse: state.helpVideos.getDeleteVideoResponse,
getUpdateVideoResponse: state.helpVideos.getUpdateVideoResponse
};
};
export default connect(mapStateToProps)(injectIntl(VideoDataTable));
