text: import React from "react";
  import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
  import ckeditor, { CKEditor } from "@ckeditor/ckeditor5-react";
  import baseurl from "../../../services/apiconfig";
  //Bootstrap and jQuery libraries
  import "bootstrap/dist/css/bootstrap.min.css";
  import "jquery/dist/jquery.min.js";
  import $ from "jquery";
  import { ToastContainer, toast } from "react-toastify";
  import "react-toastify/dist/ReactToastify.css";
  const axios = require("axios");
  class EditArticle extends React.Component {
    componentDidMount() {
      $(document).on("input", ".number", function () {
        this.value = this.value.replace(/\D/g, "");
      });
  
      //Getting ID From URL
      var url = window.location.pathname;
      var id = url.substring(url.lastIndexOf("/") + 1);
      //For User By ID
      axios
        .get(baseurl.baseurl + `/article/getarticlebyid?id=${id}`)
        .then((res) => {
          
          this.setState({
            id: res.data.data.id,
            author_name: res.data.data.author_name,
            title: res.data.data.title,
            article_banner: res.data.data.article_banner,
            tag: res.data.data.tag,
            description: res.data.data.description,
            meta_title: res.data.data.meta_title,
            meta_keyword: res.data.data.meta_keyword,
            meta_description: res.data.data.meta_description,
          });
        })
        .catch((err) => {
          //console.log("err",err)
          toast.error("Error occurred at API end (" + err.message + ")");
        });
    }
    constructor() {
      super();
      this.state = {
        author_name: "",
        title: "",
        article_banner: "",
        tag: "",
        description: "",
        meta_title: "",
        meta_keyword: "",
        meta_description: "",
        updated_by: "",
      };
    }
    handleChange(evt) {
      this.setState({
        [evt.target.name]: evt.target.value,
      });
    }
  
    updateArticle(evt, id) {
      evt.preventDefault();
      const fileInput = document.querySelector("#article_banner");
      const formData = new FormData();
      formData.append("article_banner", fileInput.files[0]);
  
      const postData = {
        author_name: this.state.author_name,
        title: this.state.title,
        article_banner: formData.get("article_banner").name,
        tag: this.state.tag,
        description: this.state.description,
        meta_title: this.state.meta_title,
        meta_keyword: this.state.meta_keyword,
        meta_description: this.state.meta_description,
        updated_by: this.state.updated_by,
      };
      axios
        .put(baseurl.baseurl + `/article/update/${id}`, postData)
        .then((res) => {
          toast.success(res.data.message);
          window.location.reload();
        })
        .catch((err) => {
          //console.log("err",err)
          toast.error("Error occurred at API end (" + err.message + ")");
        });
    }
    render() {
      return (
        <section className="content">
          <ToastContainer />
          <div className="row">
            <div className="col-md-12">
              <div className="box box-primary">
                <div className="box-header">
                  <h3 className="box-title">Edit Article</h3>
                </div>
                <hr />
                <form>
                  <div className="box-body row">
                    <div className="col-lg-6 col-sm-6 col-xs-12">
                      <div className="form-group">
                        <label>Author Name</label>
                        <input
                          type="text"
                          name="author_name"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.author_name}
                          placeholder="Enter author name"
                          className="form-control"
                          id="author_name"
                        />
                      </div>
                    </div>
                    <div className="col-lg-6 col-sm-6 col-xs-12">
                      <div className="form-group">
                        <label>Title</label>
                        <input
                          type="text"
                          name="title"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.title}
                          placeholder="Enter title"
                          className="form-control"
                          id="title"
                        />
                      </div>
                    </div>
                    <div className="col-lg-6 col-sm-6 col-xs-12">
                      <div className="form-group">
                        <label>Article Banner</label>
                        <input
                          type="file"
                          name="article_banner"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.article_banner}
                          className="form-control"
                          id="article_banner"
                        />
                      </div>
                    </div>
                    <div className="col-lg-6 col-sm-6 col-xs-12">
                      <div className="form-group">
                        <label>Tags</label>
                        <input
                          type="text"
                          name="tag"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.tag}
                          className="form-control"
                          id="tags"
                        />
                      </div>
                    </div>
                    <div className="col-lg-12 col-sm-12 col-xs-12">
                      <div className="form-group">
                        <label for="courseTextarea">Description</label>
                        <textarea
                          id="keywordsTextarea"
                          className="form-control"
                          rows="3"
                          name="description"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.description}
                        ></textarea>
                      </div>
                    </div>
                    <div
                      className="col-lg-12 col-sm-12 col-xs-12"
                      style={{
                        padding: "8px 12px 0 5px",
                        "background-color": "#ebedef",
                      }}
                    >
                      <div className="form-group">
                        <label for="courseTextarea">
                          <strong>Meta Tags Settings</strong>
                        </label>
                      </div>
                    </div>
                    <div className="col-lg-12 col-sm-12 col-xs-12">
                      <div className="form-group">
                        <label>Meta Title</label>
                        <input
                          type="texrt"
                          name="meta_title"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.meta_title}
                          className="form-control"
                          placeholder="Enter meta title"
                        />
                      </div>
                    </div>
                    <div className="col-lg-12 col-sm-12 col-xs-12">
                      <div className="form-group">
                        <label for="keywordsTextarea">Meta Keywords</label>
                        <textarea
                          id="keywordsTextarea"
                          className="form-control"
                          rows="3"
                          name="meta_keyword"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.meta_keyword}
                          placeholder="Enter meta keywords"
                        ></textarea>
                      </div>
                    </div>
                    <div className="col-lg-12 col-sm-12 col-xs-12">
                      <div className="form-group">
                        <label>Meta Description</label>
                        <textarea
                          id="keywordsTextarea"
                          className="form-control"
                          rows="3"
                          name="meta_description"
                          onChange={(evt) => this.handleChange(evt)}
                          defaultValue={this.state.meta_description}
                        ></textarea>
                      </div>
                    </div>
  
                    <div className="col-lg-12 col-sm-12 col-xs-12">
                      <div className="form-group">
                        <center>
                          <input
                            className="btn btn-warning"
                            type="submit"
                            value="Update"
                            onClick={(evt) =>
                              this.updateArticle(evt, this.state.id)
                            }
                          />
                        </center>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </section>
      );
    }
  }
  export default EditArticle;
  