added react component to display blog entries

import React, { useState } from 'react';

import Cookies from 'js-cookie';

const CreateBlogEntry = () => {

  const [title, setTitle] = useState('');

  const [markdown, setMarkdown] = useState('');

  const [error, setError] = useState(null);

  const [success, setSuccess] = useState(null);

  const handleSubmit = async (event) => {

    event.preventDefault();

    try {

      setError(null);

      setSuccess(null);

      console.log('Data sent to backen: ', JSON.stringify({ title, markdown }))

      // Define headers for request

      const headers = {

        'Content-Type': 'application/json',

      };

      // Retrieve the CSRF token from the cookie

      const csrfToken = Cookies.get('_xsrf');

      console.log('CSRF Token:', csrfToken);

      if (csrfToken) {

        headers['X-XSRFToken'] = csrfToken; // Add the CSRF token to the headers

      }      

      const response = await fetch('/tornado-backend/create-blog-entry', {

        method: 'POST',

        headers: headers,

        credentials: 'include', // To include cookies for authentication

        body: JSON.stringify({ title, markdown }),

      });

      if (response.ok) {

        const data = await response.json();

        setSuccess('Blog post created successfully!');

        setTitle('');

        setMarkdown('');

      } else {

        const errorData = await response.json();

        setError(errorData.message || 'Failed to create the blog post.');

      }

    } catch (err) {

      console.error('Error creating blog post:', err);

      setError('An unexpected error occurred.');

    }

  };

  return (

    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>

      <h2>Create Blog Post</h2>

      {error && <p style={{ color: 'red' }}>{error}</p>}

      {success && <p style={{ color: 'green' }}>{success}</p>}

      <form onSubmit={handleSubmit}>

        <div style={{ marginBottom: '10px' }}>

          <label htmlFor="title" style={{ display: 'block', marginBottom: '5px' }}>

            Title:

          </label>

          <input

            type="text"

            id="title"

            value={title}

            onChange={(e) => setTitle(e.target.value)}

            required

            style={{ width: '100%', padding: '8px', fontSize: '16px' }}

          />

        </div>

        <div style={{ marginBottom: '10px' }}>

          <label htmlFor="markdown" style={{ display: 'block', marginBottom: '5px' }}>

            Markdown:

          </label>

          <textarea

            id="markdown"

            value={markdown}

            onChange={(e) => setMarkdown(e.target.value)}

            required

            style={{ width: '100%', padding: '8px', fontSize: '16px', height: '150px' }}

          ></textarea>

        </div>

        <button

          type="submit"

          style={{

            padding: '10px 20px',

            backgroundColor: '#007BFF',

            color: '#fff',

            border: 'none',

            borderRadius: '5px',

            cursor: 'pointer',

            fontSize: '16px',

          }}

        >

          Submit

        </button>

      </form>

    </div>

  );

};

export default CreateBlogEntry;