diff --git a/devblog/devblog/ClientApp/package-lock.json b/devblog/devblog/ClientApp/package-lock.json index 9d62ac8f..50f03928 100644 --- a/devblog/devblog/ClientApp/package-lock.json +++ b/devblog/devblog/ClientApp/package-lock.json @@ -30,6 +30,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", @@ -16322,6 +16323,15 @@ "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-spinners": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-test-renderer": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz", @@ -30783,6 +30793,12 @@ "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" } }, + "react-spinners": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "requires": {} + }, "react-test-renderer": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz", diff --git a/devblog/devblog/ClientApp/package.json b/devblog/devblog/ClientApp/package.json index 100c3981..414c23a4 100644 --- a/devblog/devblog/ClientApp/package.json +++ b/devblog/devblog/ClientApp/package.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", diff --git a/devblog/devblog/ClientApp/src/pages/AddPost.tsx b/devblog/devblog/ClientApp/src/pages/AddPost.tsx index 9fa0c3a6..5b9b022f 100644 --- a/devblog/devblog/ClientApp/src/pages/AddPost.tsx +++ b/devblog/devblog/ClientApp/src/pages/AddPost.tsx @@ -1,6 +1,7 @@ import { FormEvent, useEffect, useState } from "react"; import ReactMarkdown from "react-markdown"; import { GetIsAdmin } from "../components/AuthenticationService"; +import { PulseLoader } 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) => { 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 = () => { + + {/* Upload Statuses */}
{/* discord */} @@ -148,6 +154,7 @@ const AddPost = () => {