Implemented logic for posting and rendering Markdown Content - #11

client/package.json

@@ -16,6 +16,7 @@
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
     "axios": "^1.5.1",
+    "mui-markdown": "^1.1.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",

client/src/components/post/MakePostModal.tsx

@@ -1,7 +1,10 @@
 
 import { getAuthorId } from "../../utils/localStorageUtils";
 import React, { useState} from "react";
-import { Modal, Box, Button, IconButton, Grid, Typography } from "@mui/material";
+
+import { Modal, Box, Button, TextField, IconButton, Grid, Typography,Switch,FormControlLabel,Checkbox} from "@mui/material";
+import { styled } from "@mui/material";
+
 
 import CloseIcon from "@mui/icons-material/Close";
 import NotesIcon from '@mui/icons-material/Notes';
@@ -51,23 +54,33 @@ const MakePostModal = ({
   const [textType, setTextType] = useState(true);
   const [imageType, setImageType] = useState(false);
   const [imagePrev, setImagePrev] = useState("");
+
+  const [markdownCheckbox, setMarkdownCheckbox] = useState(false);
   const [visibility, setVisibility] = useState(ShareType.PUBLIC);
   const [unlisted, setUnlisted] = useState(false);
+
   const handleClose = () => {setIsModalOpen(false); setImagePrev(''); handleTextContent()};
+
 
   const handleTextContent = () => {
     setTextType(true);
     setImageType(false);
     setCategories([]);
     setContent("");
     setImagePrev("")
+    setMarkdownCheckbox(false);
   }
 
   const handleImageContent = () => {
     setImageType(true);
     setTextType(false);
     setContent("");
   }
+  const handleMarkdownContent = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setMarkdownCheckbox(event.target.checked);
+    if (event.target.checked) setContentType("text/markdown");
+    else setContentType("text/plain");
+  };
 
   const handleSubmit = async (
     title: string,
@@ -183,6 +196,20 @@ const MakePostModal = ({
               > 
                 <ImageIcon fontSize="medium"/> 
               </IconButton>
+            </Grid>
+             <Grid item>
+
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={markdownCheckbox}
+                  onChange={handleMarkdownContent}
+                />
+              }
+              label="Markdown"
+            />
+
+
             </Grid>
             <Button
               variant="contained"

client/src/components/post/PostsList.tsx

@@ -6,8 +6,10 @@ import { formatDateTime } from "../../utils/dateUtils";
 import { getAuthorId } from "../../utils/localStorageUtils";
 import DeleteIcon from '@mui/icons-material/Delete';
 import { renderVisibility }from '../../utils/visibilityRenderUtils';
+import { MuiMarkdown } from 'mui-markdown';
 import PostCategories from "./PostCategories";
 
+
 const PostsList = ({
   posts, deletePost
 }: {
@@ -70,6 +72,15 @@ const PostsList = ({
               post.contentType === "text/plain" && (
                 <Typography variant="body1">{post.content}</Typography>)
             )}
+            {post.contentType === "text/markdown" && (
+                <CardContent sx={{ padding: 0}}>
+                  <div style={{ display: "flex", justifyContent: "flex-start" }}>
+
+                   {/* https://www.npmjs.com/package/mui-markdown */}
+                  <MuiMarkdown>{`${post.content}`}</MuiMarkdown>
+                </div>
+                </CardContent>
+            )}
             {post.contentType.includes("base64") && (
               <CardContent sx={{ padding: 0}}>
                 <div style={{ display: "flex", justifyContent: "center" }}>

server/socialdistribution/serializers.py

@@ -4,7 +4,7 @@
 import base64
 
 from .models import *
-from .utils import build_default_author_uri, build_default_post_uri, is_image
+from .utils import build_default_author_uri, build_default_post_uri, is_image, is_text
 
 
 class AuthorSerializer(serializers.ModelSerializer):
@@ -71,7 +71,7 @@ def get_id_url(self, obj):
 
     def get_content(self, obj):
         """decode content as it's a binary field"""
-        if obj.contentType == Post.ContentType.PLAIN and obj.content:
+        if is_text(obj.contentType) and obj.content:
             return obj.content.decode("utf-8")
         elif is_image(obj.contentType) and obj.content:
             base64_encoded = base64.b64encode(obj.content)

server/socialdistribution/utils/general_utils.py

@@ -1,7 +1,13 @@
 from socialdistribution.models.post import Post
 
+
 def is_image(data):
     return (data == Post.ContentType.JPEG or
           data == Post.ContentType.BASE64 or
           data == Post.ContentType.PNG or
           data == Post.ContentType.WEBP)
+
+
+def is_text(contentType):
+    return (contentType == Post.ContentType.PLAIN or
+            contentType == Post.ContentType.MARKDOWN)

server/socialdistribution/utils/views_utils.py

@@ -56,7 +56,7 @@ def create_post(author, data, post_id=None):
         post.categories.add(category_object)
 
     # creating a binary-suitable object for content field
-    if data["contentType"] == Post.ContentType.PLAIN:
+    if is_text(data["contentType"]):
         post.content = data["content"].encode("utf-8")
     elif is_image(data["contentType"]):
         base64_content = data["content"].split("base64,")[1]