Added toaster on all pages

shriyadindi · Nov 4, 2024 · 712b27b · 712b27b
1 parent 7a80999
commit 712b27b
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 29 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "firebase": "^11.0.1",
+    "toastr": "^2.1.4",
     "wordwise-frontend": "file:"
   }
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -1,11 +1,30 @@
 import { renderNavbar } from './components/Navbar.js';
 import { renderFooter } from './components/Footer.js';
 import { router } from './utils/router.js';
+import 'toastr/build/toastr.min.css';
 
 document.addEventListener('DOMContentLoaded', () => {
     renderNavbar();
     renderFooter();
     router();
 });
 
+toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": true,
+    "positionClass": "toast-top-right",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+}
+
 window.addEventListener('popstate', router);
diff --git a/frontend/src/pages/About.js b/frontend/src/pages/About.js
@@ -1,3 +1,4 @@
+import toastr from "toastr";
 export function renderAbout(container) {
     container.innerHTML = `
         <div class="container mx-auto px-4 py-8">
@@ -119,12 +120,15 @@ export function renderAbout(container) {
             if (response.ok) {
                 console.log("Form successfully submitted:", formData);
                 document.getElementById('formSuccess').classList.remove('hidden');
+                toastr.info('We will reach you soon !')
                 this.reset();
             } else {
+                toastr.warning('Form submission failed')
                 console.error("Form submission failed:", response.statusText);
                 alert("There was an issue submitting the form. Please try again.");
             }
         } catch (error) {
+            toastr.error('Error submitting form')
             console.error("Error submitting form:", error);
             alert("There was an error connecting to the server. Please try again.");
         }
@@ -159,3 +163,23 @@ function renderContributor(username, profileUrl, avatarUrl) {
         </div>
     `;
 }
+
+
+
+toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": true,
+    "positionClass": "toast-top-right",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+}
diff --git a/frontend/src/pages/AddBlog.js b/frontend/src/pages/AddBlog.js
@@ -1,3 +1,5 @@
+import toastr from 'toastr';
+
 export function renderAddBlog(container) {
     container.innerHTML = `
         <div class="container mx-auto px-4 py-8">
@@ -108,18 +110,34 @@ export function renderAddBlog(container) {
 
             if (response.ok) {
                 const result = await response.json();
-                console.log('Blog post created:', result);
-                alert('Blog post successfully created!');
+                toastr.success('Blog post created successfully')
                 form.reset(); // Reset the form after successful submission
             } else {
                 console.error('Error creating blog post:', response.statusText);
-                alert('Failed to create blog post. Please try again.');
+                toastr.error('Failed to create blog post. Please try again.')
             }
         } catch (error) {
             console.error('Error:', error);
             alert('An error occurred. Please try again.');
+            toastr.error('An error occurred. Please try again.')
         }
     });
+}
 
-
+toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": true,
+    "positionClass": "toast-top-right",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
 }
diff --git a/frontend/src/pages/Contact.js b/frontend/src/pages/Contact.js
@@ -1,3 +1,4 @@
+import toastr from "toastr";
 export function renderContact(container) {
     container.innerHTML = `
         <div class="container mx-auto px-4 py-8">
@@ -86,16 +87,41 @@ export function renderContact(container) {
             if (response.ok) {
                 // Display success message and reset the form
                 document.getElementById('formSuccess').classList.remove('hidden');
+                toastr.info('We will contact you soon !')
                 this.reset();
             } else {
                 // Handle error response
                 const errorData = await response.json();
                 console.error("Error submitting form:", errorData.message);
+                toastr.error('Error submitting contact form ')
+
             }
         } catch (error) {
             console.error("Error submitting form:", error);
+            toastr.error('Error submitting contact form')
+
         }
     });
 
 
 }
+
+
+
+toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": true,
+    "positionClass": "toast-top-right",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+}
diff --git a/frontend/src/pages/Feedback.js b/frontend/src/pages/Feedback.js
@@ -1,3 +1,4 @@
+import toastr from "toastr";
 export function renderFeedback(container) {
     container.innerHTML = `
         <div class="container mx-auto px-4 py-8">
@@ -99,12 +100,16 @@ export function renderFeedback(container) {
                 document.getElementById('formSuccess').classList.remove('hidden');
                 this.reset();
                 document.getElementById('formSuccess').scrollIntoView({ behavior: 'smooth' });
+                toastr.info('Thanks for your feedback')
             } else {
                 const errorData = await response.json();
                 console.error("Error submitting form:", errorData);
+                toastr.error('Error submitting feedback')
             }
         } catch (error) {
             console.error("Error submitting form:", error);
+            toastr.error('Error submitting feedback')
+
         }
     });
 }
@@ -134,3 +139,22 @@ function renderTextarea(id, label, rows = 3) {
         </div>
     `;
 }
+
+
+toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "newestOnTop": true,
+    "progressBar": true,
+    "positionClass": "toast-top-right",
+    "preventDuplicates": false,
+    "onclick": null,
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+}
diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css
@@ -1077,10 +1077,6 @@ video {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
-.fill-current {
-  fill: currentColor;
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1401,14 +1397,14 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+.transition-all {
+  transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.transition-all {
-  transition-property: all;
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1423,14 +1419,14 @@ video {
   transition-duration: 150ms;
 }
 
-.duration-300 {
-  transition-duration: 300ms;
-}
-
 .duration-200 {
   transition-duration: 200ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1518,19 +1514,14 @@ body.dark-mode {
   color: rgb(55 48 163 / var(--tw-text-opacity));
 }
 
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-600:hover {
+.hover\:text-red-500:hover {
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
-.hover\:text-red-500:hover {
+.hover\:text-white:hover {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .hover\:underline:hover {
@@ -1792,14 +1783,14 @@ body.dark-mode {
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
 
-.dark\:hover\:text-white:hover:is(.dark *) {
+.dark\:hover\:text-red-400:hover:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.dark\:hover\:text-red-400:hover:is(.dark *) {
+.dark\:hover\:text-white:hover:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .dark\:focus\:ring-gray-600:focus:is(.dark *) {