How to use Draft.js WYSWYG with Next.js and Strapi Backend, Edit/Update Saved Article

async processAuthor(articles, loggedinUser) {
  if (articles && articles.length > 0) {
    let currentUserEmail = null;
    if (loggedinUser && loggedinUser.email) {
      currentUserEmail = loggedinUser.email;
    }

    if (currentUserEmail) {
      for (let i=0; i<articles.length; i++) {
        if (articles[i].author.email == currentUserEmail) {
          articles[i].myArticle = true;
        }
      }
    }
  }

  return articles;
}

export default function Article(props) {
  if (props.error) {
    return <SimpleLayout>
      <ErrorPage statusCode={props.error.statusCode} />
    </SimpleLayout>
  }
  const [ session, loading ] = useSession();

  const body = draftToHtml(JSON.parse(props.body));
  const showEditOption = props.myArticle;
  return (
    <SimpleLayout>
      <h1>{props.title}</h1>
      {showEditOption && 
        <Link href={`/nodes/${props.id}/edit`}>
          <a>
            Edit
          </a>
        </Link>
      }
      <h4>Author: {props.author.username}</h4>
      <div dangerouslySetInnerHTML={{__html: body}}></div>
    </SimpleLayout>
  )
}

export async function getServerSideProps(context) {
  const session = await getSession(context);

  try {
    let data = await apiClient.getArticleBySlug(context.query.slug[0]);
    if (!data || data.length == 0) {
      return {props: {error: {statusCode: 404}}}
    }

    //process author
    // console.log(data);
    data = await contentProcessor.processAuthor(data, session.user);
    return {props: data[0]}
  } catch(error) {
    return {props: {error: {statusCode: 404}}}
  }
}

import React, { Component } from 'react'
import apiClient from '../api/api_client'
import { Form, Button, Card } from 'react-bootstrap';
import { withRouter } from 'next/router'
import ArticleEditor from '../editor/editor'

class EditArticle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.article.id || null,
      title: props.article.title || "",
      body: props.article.body || null,
      isNew: props.article.body ? false : true,

      // this is to make sure we dont do stringify again
      articleUpdated: false
    };

    this.handleInputs = this.handleInputs.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  handleInputs = (event) => {
    let {name, value} = event.target
    this.setState({
      [name]: value
    });
  }
  handleEditorContent = (content) => {
    this.setState({
      body: content,
      articleUpdated: true
    });
  }

  submitForm = async (event) => {
    event.preventDefault()
    let article;
    if (this.state.isNew) {
      article = await apiClient.saveArticle({
        title: this.state.title,
        body: JSON.stringify(this.state.body)
      })
    }
    else {
      let articleContent = this.state.body;
      if (this.state.articleUpdated) {
        articleContent = JSON.stringify(articleContent);
      }
      article = await apiClient.updateArticle({
        id: this.state.id,
        title: this.state.title,
        body: articleContent
      })
    }
    this.props.router.push(`/articles/${article.slug}`);
  }

  render() {
    return (
        <Form onSubmit={this.submitForm}>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Headline</Form.Label>
            <Form.Control type="text" 
              name="title"
              value={this.state.title}
              onChange={this.handleInputs} />
            <Form.Text className="text-muted">
              Give a nice title to your article
            </Form.Text>
          </Form.Group>

          <Form.Group controlId="exampleForm.ControlTextarea2">
            <Form.Label>Body</Form.Label>
            <Card className="p-2">
              <ArticleEditor 
                handleContent={this.handleEditorContent}
                initialContent={this.state.body}
                />
            </Card>
          </Form.Group>
          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
    )
  }
}

export default withRouter(EditArticle);

/nodes/[id]/edit

import SimpleLayout from '../../../components/layout/simple'
import apiClient from '../../../components/api/api_client'
import EditArticle from '../../../components/editor/editArticle';

import React, { Component } from 'react'

export default class EditNode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.article.id,
      title: props.article.title,
      body: props.article.body,
    };
  }

  render() {
    return (
      <SimpleLayout>
      <div className="row">
        <div className="col-8">
          <EditArticle 
            article={this.state}
          />
        </div>
        <div className="col-4">
          Hey
        </div>
      </div>
    </SimpleLayout>
    )
  }
}

export async function getServerSideProps(context) {
  try {
    let data = await apiClient.getArticleById(context.query.id);
    return {props: {
      article: data
    }}
  } catch(error) {
    return {props: {}}
  }
}