Merge pull request #924 from appwrite/fix-event-card-button

Disable view event button for past events
appwrite · Jun 5, 2024 · e05daed · e05daed
2 parents 84433f2 + 1d5e708
commit e05daed
Show file tree

Hide file tree

Showing 2 changed files with 11 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:
@@ -19,7 +19,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:
@@ -32,7 +32,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:

diff --git a/src/routes/community/EventCard.svelte b/src/routes/community/EventCard.svelte
@@ -25,6 +25,12 @@
     export let description: $$Props['description'];
     export let buttonText: $$Props['buttonText'];
     export let headingLevel: $$Props['headingLevel'] = 5;
+    const hasPast: boolean = (new Date()) > (new Date(date));
+    const dateString: string = new Date(date).toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+    });
     $: headingTag = `h${headingLevel}`;
 </script>
 
@@ -36,7 +42,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 +59,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>