fix: prisma + posts service

front/package.json

@@ -7,8 +7,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.4",
+    "markdown-it": "^14.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "react-markdown-editor-lite": "^1.3.4",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

front/src/Posts.js

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import ReactMarkdown from 'react-markdown';
+import MarkdownEditor from 'react-markdown-editor-lite';
+import 'react-markdown-editor-lite/lib/index.css';
+import MarkdownIt from 'markdown-it';
+
+// Инициализация MarkdownIt
+const mdParser = new MarkdownIt();
 
 const Posts = () => {
   const [posts, setPosts] = useState([]);
   const [text, setText] = useState('');
-  const [media, setMedia] = useState('');
-  const [mediaType, setMediaType] = useState('');
-  const [code, setCode] = useState('');
 
   const axiosInstance = axios.create({
     baseURL: 'http://localhost:3000',
@@ -31,45 +35,28 @@ const Posts = () => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      const newPost = { text, media, mediaType, code };
+      const newPost = { text };
       await axiosInstance.post('/posts', newPost);
       fetchPosts(); // Обновляем список постов после создания нового
       setText('');
-      setMedia('');
-      setMediaType('');
-      setCode('');
     } catch (error) {
       console.error('Error creating post:', error);
     }
   };
 
+  const handleEditorChange = ({ text }) => {
+    setText(text);
+  };
+
   return (
     <div>
       <h1>Posts</h1>
       <form onSubmit={handleSubmit}>
-        <input
-          type="text"
-          placeholder="Text"
+        <MarkdownEditor
           value={text}
-          onChange={(e) => setText(e.target.value)}
-        />
-        <input
-          type="text"
-          placeholder="Media URL"
-          value={media}
-          onChange={(e) => setMedia(e.target.value)}
-        />
-        <input
-          type="text"
-          placeholder="Media Type"
-          value={mediaType}
-          onChange={(e) => setMediaType(e.target.value)}
-        />
-        <input
-          type="text"
-          placeholder="Code"
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
+          style={{ height: '300px' }}
+          renderHTML={(text) => mdParser.render(text)}
+          onChange={handleEditorChange}
         />
         <button type="submit">Create Post</button>
       </form>
@@ -77,10 +64,7 @@ const Posts = () => {
       <ul>
         {posts.map((post, index) => (
           <li key={index}>
-            <p>{post.text}</p>
-            {post.media && <img src={post.media} alt="Post media" />}
-            <p>Media Type: {post.mediaType}</p>
-            <p>Code: {post.code}</p>
+            <ReactMarkdown>{post.text}</ReactMarkdown>
           </li>
         ))}
       </ul>
@@ -88,4 +72,4 @@ const Posts = () => {
   );
 };
 
-export default Posts;
+export default Posts;