react-hot-toast animation for indicating success and failure in the client side

package.json

@@ -42,6 +42,7 @@
     "react-bootstrap": "^2.6.0",
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.7",
+    "react-hot-toast": "^2.4.0",
     "react-scripts": "5.0.1",
     "workbox-core": "^6.5.4",
     "workbox-expiration": "^6.5.4",

src/App.js

@@ -5,6 +5,8 @@ import NavigationBar from './NavigationBar';
 import AuthDialog from './AuthDialog';
 import UploadInterface from './UploadInterface';
 import ProjectForm from './ProjectForm';
+import { githubUpload } from './github-upload';
+import toast, { Toaster } from 'react-hot-toast';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -18,7 +20,7 @@ function App() {
   const [token, setToken] = useState(null);
   const [repository, setRepository] = useState(null);
   const [show, setShow] = useState(true);
-  const isAuthorized = token && repository;
+  const isAuthorized = token && repository && true;
 
   return (
     <>
@@ -33,12 +35,28 @@ function App() {
       <AuthDialog show={show} setShow={setShow} setToken={setToken} setRepository={setRepository} />
       <Stack direction={'row'}>
         <Item>
-          <UploadInterface isAuthorized={isAuthorized} />
+          <UploadInterface
+            isAuthorized={isAuthorized}
+            uploadFile={(file) => {
+              let loadId = toast.loading('Uploading Image...');
+              githubUpload(token, repository, file)
+                .then(() => {
+                  toast.dismiss(loadId);
+                  toast.success('Image uploaded successfully!');
+                })
+                .catch((e) => {
+                  toast.dismiss(loadId);
+                  toast.error('Image upload failed!');
+                  console.error(e);
+                });
+            }}
+          />
         </Item>
         <Item>
           <ProjectForm />
         </Item>
       </Stack>
+      <Toaster position="bottom-left" />
     </>
   );
 }

src/UploadInterface.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 const fileTypes = ["jpg", "jpeg", "png", "bmp", "gif"];
 
-function UploadInterface({ isAuthorized }) {
+function UploadInterface({ isAuthorized, uploadFile }) {
   const [image, setImage] = useState(null);
   const imgPreviewEl = useRef(null);
 
@@ -55,6 +55,9 @@ function UploadInterface({ isAuthorized }) {
               variant="success"
               className="mt-3"
               disabled={!(isAuthorized && image)}
+              onClick={() => {
+                uploadFile(image);
+              }}
             >
               Upload
             </Button>
@@ -66,7 +69,8 @@ function UploadInterface({ isAuthorized }) {
 }
 
 UploadInterface.propTypes = {
-  isAuthorized:PropTypes.bool
+  isAuthorized:PropTypes.bool,
+  uploadFile: PropTypes.func
 }
 
-export default UploadInterface
+export default UploadInterface