Add support for long posts

Author: The-DevBlog

devblog/devblog/ClientApp/package-lock.json

@@ -25,6 +25,7 @@
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.8.1",
     "react-scripts": "^5.0.1",
+    "react-spinners": "^0.13.8",
     "reactstrap": "^9.1.3",
     "rimraf": "^3.0.2",
     "web-vitals": "^2.1.4",

devblog/devblog/ClientApp/package.json

@@ -1,6 +1,7 @@
 import { FormEvent, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { GetIsAdmin } from "../components/AuthenticationService";
+import { BarLoader, BeatLoader, BounceLoader, ClimbingBoxLoader, ClockLoader, GridLoader, FadeLoader, HashLoader, PuffLoader, RingLoader, RiseLoader, CircleLoader, PulseLoader, ScaleLoader } from "react-spinners";
 import "./styles/AddPost.css";
 
 const AddPost = () => {
@@ -17,9 +18,11 @@ const AddPost = () => {
     const [postToDiscord, setPostToDiscord] = useState(false);
     const [postToMastodon, setPostToMastodon] = useState(false);
     const [postToDevBlog, setPostToDevBlog] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
 
     const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+        setIsLoading(true);
 
         const formData = new FormData();
         if (files != null) {
@@ -42,7 +45,6 @@ const AddPost = () => {
                 if (postToDevBlog) {
                     setDevBlogUploadStatus(data.devBlogStatus.statusCode);
                     setDevBlogErrMessage(data.devBlogStatus.reasonPhrase);
-                    console.log(data);
                 }
 
                 if (postToDiscord) {
@@ -57,6 +59,8 @@ const AddPost = () => {
             }
         })
             .catch(e => console.log("Error uploading file: ", e));
+
+        setIsLoading(false);
     }
 
     useEffect(() => {
@@ -105,6 +109,8 @@ const AddPost = () => {
                             </li>
                         </ul>
 
+                        <PulseLoader className="loader" color="WHITE" loading={isLoading} />
+
                         {/* Upload Statuses */}
                         <div className="upload-status">
                             {/* discord */}
@@ -148,6 +154,7 @@ const AddPost = () => {
 
                         <label>Description
                             <p>Mastodon character limit: {charCount}/500</p>
+                            <p>Discord character limit: {charCount}/2000</p>
                             <div className="addpost-description">
                                 <textarea placeholder="Write description here..." onChange={(e) => setDescription(e.currentTarget.value)} />
                             </div>

devblog/devblog/ClientApp/src/pages/AddPost.tsx

@@ -21,6 +21,10 @@
     list-style: none;
 }
 
+.loader {
+    padding: 10px;
+}
+
 .create-post {
     align-items: center;
     justify-content: center;
@@ -51,14 +55,14 @@ a {
     border: .15em solid rgb(70, 68, 60);
     border-radius: .5em;
     padding: 10px 20px;
+    margin-bottom: 100px;
 }
 
 .addpost-description {
     display: flex;
 }
 
 .addpost-description>textarea {
-    /* background-color: rgb(26, 32, 41); */
     width: 100%;
     min-height: 100px;
     resize: none;
@@ -71,7 +75,6 @@ a {
     padding: 20px;
     margin-bottom: 20px;
     min-height: 100px;
-    /* background-color: rgb(26, 32, 41); */
 }
 
 .create-post {

devblog/devblog/ClientApp/src/pages/styles/AddPost.css

@@ -7,6 +7,7 @@
 using Mastonet;
 using System.Net;
 using devblog.Controllers;
+using Microsoft.Extensions.Hosting;
 
 namespace devblog.Services
 {
@@ -166,14 +167,40 @@ private async Task<HttpResponseMessage> PostToDiscord(string description, IFormF
             var channel = await _discordClient.GetChannelAsync(_config.GetValue<ulong>("DiscordChannelId")) as IMessageChannel;
             var res = new HttpResponseMessage();
 
+            List<string> descriptions = new List<string>();
+            int posts = (int)Math.Ceiling(description.Length / 1988.0);
+
             // add imgs to request
             List<FileAttachment> attachments = new List<FileAttachment>();
             foreach (var file in files)
                 attachments.Add(new FileAttachment(file.OpenReadStream(), file.FileName));
 
             try
             {
-                await channel.SendFilesAsync(attachments, description);
+                // because discords post chararacter limit is 2000, the description needs to broken into incriments 
+                // of 2000 (including the 'part' string variable below)
+                for (int i = 1; i < posts; i++)
+                {
+                    string postDescription = description.Substring(0, 1988);
+                    description = description.Remove(0, 1988);
+                    descriptions.Add(postDescription);
+                }
+
+                descriptions.Add(description);
+
+                for (int i = 1; i <= descriptions.Count; i++)
+                {
+                    string part = $"(Part {i}/{descriptions.Count}) ";
+
+                    if (i == 1)
+                    {
+                        await channel.SendFilesAsync(attachments, part + descriptions[i - 1]);
+                    } else
+                    {
+                        await channel.SendMessageAsync(part + descriptions[i - 1]);
+                    }
+                }
+
                 await _discordClient.StopAsync();
             }
             catch (Exception e)
@@ -199,16 +226,40 @@ private async Task<HttpResponseMessage> PostToMastodon(string description, IForm
 
             // add imgs to request
             List<string> attachments = new List<string>();
+            List<string> descriptions = new List<string>();
+            int posts = (int)Math.Ceiling(description.Length / 488.0);
 
             try
             {
-                foreach (var file in files)
+                // because mastodons post chararacter limit is 500, the description needs to broken into incriments 
+                // of 500 (including the 'part' string variable below)
+                for (int i = 1; i < posts; i++)
                 {
-                    var media = new MediaDefinition(file.OpenReadStream(), file.FileName);
-                    var mediaId = await client.UploadMedia(media);
-                    attachments.Add(mediaId.Id);
+                    string postDescription = description.Substring(0, 488);
+                    description = description.Remove(0, 488);
+                    descriptions.Add(postDescription);
+                }
+
+                descriptions.Add(description);
+
+                for (int i = 1; i <= descriptions.Count; i++)
+                {
+                    string part = $"(Part {i}/{descriptions.Count}) ";
+
+                    if(i == 1)
+                    {
+                        foreach (var file in files)
+                        {
+                            var media = new MediaDefinition(file.OpenReadStream(), file.FileName);
+                            var mediaId = await client.UploadMedia(media);
+                            attachments.Add(mediaId.Id);
+                        }
+                        await client.PublishStatus(part + descriptions[i - 1], mediaIds: attachments);
+                    } else
+                    {
+                        await client.PublishStatus(part + descriptions[i - 1]);
+                    }
                 }
-                await client.PublishStatus(description, mediaIds: attachments);
             }
             catch (Exception e)
             {