Disable view event button for past events

appwrite · Apr 25, 2024 · 36d8f05 · 36d8f05
1 parent eee623f
commit 36d8f05
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
@@ -6,7 +6,7 @@
                 src: '/images/community/events/28march-office-hours.png',
                 alt: ''
             },
-            date: 'March 28th, 2024',
+            date: '2024-03-28',
             location: 'Discord',
             title: 'Office Hours: Ask me anything!',
             description: 'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
@@ -18,7 +18,7 @@
                 src: '/images/community/events/4april-office-hours.png',
                 alt: ''
             },
-            date: 'April 4th, 2024',
+            date: '2024-04-04',
             location: 'Discord',
             title: 'Office Hours: Ask me anything!',
             description: 'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
@@ -30,7 +30,7 @@
                 src: '/images/community/events/11april-office-hours.png',
                 alt: ''
             },
-            date: 'April 11th, 2024',
+            date: '2024-04-11',
             location: 'Discord',
             title: 'Office Hours: Ask me anything!',
             description: 'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',

diff --git a/src/routes/community/EventCard.svelte b/src/routes/community/EventCard.svelte
@@ -26,6 +26,13 @@
     export let buttonText: $$Props['buttonText'];
     export let headingLevel: $$Props['headingLevel'] = 5;
     $: headingTag = `h${headingLevel}`;
+    let hasPast: boolean = (new Date()) > (new Date(date));
+    console.log(hasPast);
+    let dateString: string = new Date(date).toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+    });
 </script>
 
 <a class="web-grid-articles-item" {href} target="_blank" rel="noopener noreferrer">
@@ -36,7 +43,7 @@
         <ul class="u-flex u-flex-wrap web-u-list-inline-dot-sep">
             <li class="u-flex u-cross-baseline u-gap-4">
                 <span class="web-icon-calendar web-u-color-text-tertiary" aria-hidden="true" />
-                <time class="">{date}</time>
+                <time class="">{dateString}</time>
             </li>
             <li class="u-flex u-cross-baseline u-gap-4">
                 <span class="web-icon-location web-u-color-text-tertiary" aria-hidden="true" />
@@ -53,12 +60,9 @@
             {description}
         </p>
         <div class="u-flex u-flex-wrap u-gap-8 u-padding-block-start-16 mbs-auto">
-            <button class="web-button is-secondary">
+            <button class="web-button is-secondary" disabled={hasPast}>
                 <span>{buttonText}</span>
             </button>
-            <!-- <button class="web-button is-text">
-        <span>Add to calendar</span>
-      </button> -->
         </div>
     </div>
 </a>