Merge pull request #164 from dev-protocol/feat/calendar

Feat/calendar

Author: KukretiShubham

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/huddle01-clubs-plugin",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"type": "module",
 	"description": "Repository for using Clubs-Huddle01 Plugin",
 	"main": "dist/index.js",

src/components/Meeting/AddToCal.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { toCompactISOTimeFromISO } from '../../fixtures'
+
+const props = defineProps<{
+	redirectToUrl: (calendarLink: string | undefined) => void
+	meetingLink: string | undefined
+	roomType: string
+	startTime: string | undefined
+	expiryTime: string | undefined
+	description: string | undefined
+}>()
+
+const compactStartTime = computed(() => {
+	return toCompactISOTimeFromISO(props.startTime as string)
+})
+const compactExpiryTime = computed(() => {
+	return toCompactISOTimeFromISO(props.expiryTime as string)
+})
+
+const timeZone = new Intl.DateTimeFormat('en-US', {
+	timeZoneName: 'short',
+}).resolvedOptions().timeZone
+
+console.log('starttime', props.startTime)
+const calendarLink = computed(() => {
+	return `https://calendar.google.com/calendar/r/eventedit?action=TEMPLATE&dates=${compactStartTime.value}%2F${compactExpiryTime.value}&text=${encodeURIComponent(props.description ? props.description : '')}&details=${encodeURIComponent(props.description ? props.description : '')}&location=${encodeURIComponent(props.meetingLink ? props.meetingLink : '')}&stz=${timeZone}&etz=${timeZone}`
+})
+</script>
+<template>
+	<button
+		class="is-fullwidth w-full gap-4 font-bold border border-black rounded-full text-black hover:bg-[#D9D9D9]"
+		@click="
+			() => {
+				redirectToUrl(calendarLink)
+			}
+		"
+	>
+		Add to Calendar 🗓️
+	</button>
+</template>

src/components/feed-after-post-content.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { currentPost } from '@devprotocol/clubs-plugin-posts/plugin-helper'
 import Join from './Meeting/Join.vue'
+import AddToCal from './Meeting/AddToCal.vue'
 import type { Posts } from '@devprotocol/clubs-plugin-posts'
 import type { Meet } from '../types.ts'
 import { connection } from '@devprotocol/clubs-core/connection'
@@ -51,6 +52,15 @@ const redirectToUrl = (url: string | undefined) => {
 					:roomType="currentMeet.roomType"
 					:startTime="currentMeet.startTime"
 					:expiryTime="currentMeet.expiryTime"
+					class="mb-4"
+				/>
+				<AddToCal
+					:redirectToUrl="redirectToUrl"
+					:meetingLink="currentMeet.meetingLink"
+					:roomType="currentMeet.roomType"
+					:startTime="currentMeet.startTime"
+					:expiryTime="currentMeet.expiryTime"
+					:description="currentMeet.description"
 				/>
 			</section>
 		</div>

src/fixtures/index.ts

@@ -29,6 +29,21 @@ export const formatISOTimestamp = (isoTimestamp: string) => {
 	return `${hours}:${minutes} ${amPm} (${day}:${month}:${year}) ${timeZone}`
 }
 
+export const toCompactISOTimeFromISO = (isoTimestamp: string) => {
+	const date = new Date(isoTimestamp)
+	const pad = (number: number) => number.toString().padStart(2, '0')
+
+	// Extract components
+	const year = date.getUTCFullYear()
+	const month = pad(date.getUTCMonth() + 1) // Months are zero-indexed
+	const day = pad(date.getUTCDate())
+	const hours = pad(date.getUTCHours())
+	const minutes = pad(date.getUTCMinutes())
+	const seconds = pad(date.getUTCSeconds())
+
+	return `${year}${month}${day}T${hours}${minutes}${seconds}Z`
+}
+
 export const isFutureTimestamp = (isoTimestamp: string) => {
 	if (isoTimestamp === undefined) {
 		return true