Commit 1173a165 authored by Markus Mößler's avatar Markus Mößler
Browse files

updated create blog entries component

parent 990663f0

react-frontend/my-react-app/src/components/CreateBlogEntry.js

+61 −45
Original line number Diff line number Diff line 
// ./react-frontend/my-react-app/src/components/CreateBlogEntry.js



import React, { useState } from 'react';

import { Link } from "react-router-dom";

import Cookies from 'js-cookie';



const CreateBlogEntry = () => {
@@ -6,6 +9,7 @@ const CreateBlogEntry = () => { 
  const [markdown, setMarkdown] = useState('');

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

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

  const [isSubmitted, setIsSubmitted] = useState(false);



  const handleSubmit = async (event) => {

    event.preventDefault();
@@ -14,7 +18,7 @@ const CreateBlogEntry = () => { 
      setError(null);

      setSuccess(null);



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

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



      // Define headers for request

      const headers = {
@@ -39,6 +43,7 @@ const CreateBlogEntry = () => { 
        setSuccess('Blog post created successfully!');

        setTitle('');

        setMarkdown('');

        setIsSubmitted(true); // Set submitted state to true

      } else {

        const errorData = await response.json();

        setError(errorData.message || 'Failed to create the blog post.');
@@ -50,13 +55,23 @@ const CreateBlogEntry = () => { 
  };



  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>}

    <div>

      <h2>Create Blog Entry</h2>

      <hr />

      {error && 

        <div class="alert alert-warning" role="alert">

        {error}

        </div>

      }

      {success && 

        <div class="alert alert-success" role="alert">

        {success}

        </div>

      }

      {!isSubmitted ? (

        <form onSubmit={handleSubmit}>

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

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

          <div className="mb-3 mt-3">

            <label htmlFor="title" className="form-label">

              Title:

            </label>

            <input
@@ -65,38 +80,39 @@ const CreateBlogEntry = () => { 
              value={title}

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

              required

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

              className="form-control"

            />

          </div>



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

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

            Markdown:

          <div className="mb-3">

            <label htmlFor="markdown" className="form-label">

              Content:

            </label>

            <textarea

              id="markdown"

              value={markdown}

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

              required

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

              className="form-control"

              row="10"

              style={{ minHeight: '200px' }}              

            ></textarea>

          </div>



          <button

            type="submit"

          style={{

            padding: '10px 20px',

            backgroundColor: '#007BFF',

            color: '#fff',

            border: 'none',

            borderRadius: '5px',

            cursor: 'pointer',

            fontSize: '16px',

          }}

            className="btn btn-hoh-blue"

          >

          Submit

            Create Entry

          </button>

        </form>

      ) : (

        <div>

          <Link to="/blog-entries" className="btn btn-hoh-blue">

            Go to Blog Entries

          </Link>

        </div>

      )}      

    </div>

  );

};