Refactor code structure for improved readability and maintainability

Author: mashharuki

frontend_vapi/components/TaskList.tsx

@@ -1,5 +1,5 @@
 import { usePrivy } from "@privy-io/react-auth";
-import { Calendar, Clock, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Calendar, Clock, Download, ExternalLink, Plus, RefreshCw, Trash2 } from "lucide-react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { VAPIClient } from "../lib/api-client";
@@ -229,20 +229,28 @@ export function TaskList({ className }: TaskListProps) {
 
   const handleAddToCalendar = async (task: Task, calendarType: "google" | "ios") => {
     try {
+      let result;
       if (calendarType === "google") {
-        await apiClient.addToGoogleCalendar(task);
+        result = await apiClient.addToGoogleCalendar(task);
       } else {
-        await apiClient.addToIosCalendar(task);
+        result = await apiClient.addToIosCalendar(task);
+      }
+
+      if (result.success) {
+        showToast({
+          type: "success",
+          title: calendarType === "google" 
+            ? "Google Calendar opened with event details" 
+            : "Calendar file downloaded successfully",
+        });
+      } else {
+        throw new Error("Calendar operation failed");
       }
-      showToast({
-        type: "success",
-        title: `Added to ${calendarType === "google" ? "Google" : "iOS"} Calendar`,
-      });
     } catch (err) {
       console.error("Failed to add to calendar:", err);
       showToast({
         type: "error",
-        title: "Failed to add to calendar",
+        title: `Failed to add to ${calendarType === "google" ? "Google" : "iOS"} Calendar`,
       });
     }
   };
@@ -454,37 +462,37 @@ export function TaskList({ className }: TaskListProps) {
                           </div>
                         )}
                         <span className="px-2 py-1 bg-gray-100 rounded text-xs">{task.type}</span>
+                      </div>                    {!task.completed && (
+                      <div className="flex gap-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleAddToCalendar(task, "google")}
+                          className="text-xs flex items-center gap-1"
+                        >
+                          <ExternalLink size={12} />
+                          Google
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleAddToCalendar(task, "ios")}
+                          className="text-xs flex items-center gap-1"
+                        >
+                          <Download size={12} />
+                          iOS
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleDeleteTask(task.id)}
+                          className="text-xs text-red-600 hover:text-red-700 hover:border-red-300"
+                        >
+                          <Trash2 size={12} className="mr-1" />
+                          Delete
+                        </Button>
                       </div>
-
-                      {!task.completed && (
-                        <div className="flex gap-2">
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => handleAddToCalendar(task, "google")}
-                            className="text-xs"
-                          >
-                            Google Calendar
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => handleAddToCalendar(task, "ios")}
-                            className="text-xs"
-                          >
-                            iOS Calendar
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => handleDeleteTask(task.id)}
-                            className="text-xs text-red-600 hover:text-red-700 hover:border-red-300"
-                          >
-                            <Trash2 size={12} className="mr-1" />
-                            Delete
-                          </Button>
-                        </div>
-                      )}
+                    )}
                     </div>
                   </div>
                 </div>

frontend_vapi/lib/api-client.ts

@@ -163,43 +163,80 @@ export class VAPIClient {
   }
 
   /**
-   * Add task to Google Calendar
+   * Add task to Google Calendar (using Google Calendar URL)
    */
   async addToGoogleCalendar(task: Task): Promise<{ success: boolean; eventId?: string }> {
     try {
-      const response = await fetch(`${this.baseURL}/api/calendar/google/add`, {
-        method: "POST",
-        headers: this.getHeaders(),
-        body: JSON.stringify({ task }),
+      // Import calendar utilities (dynamic import for client-side only)
+      const { openGoogleCalendar } = await import("./calendar-utils");
+
+      console.log("📅 Adding task to Google Calendar:", task.title);
+
+      // Open Google Calendar with pre-filled event
+      const result = await openGoogleCalendar({
+        id: task.id,
+        title: task.title,
+        description: task.description,
+        dueDate: task.dueDate,
+        type: task.type,
       });
 
-      if (!response.ok) {
-        throw new Error(`Failed to add to Google Calendar: ${response.statusText}`);
+      if (result.success) {
+        return {
+          success: true,
+          eventId: task.id, // Return task ID as event identifier
+        };
+      } else {
+        // Even if popup was blocked, we can still consider it a success
+        // since the URL is available for manual opening
+        if (result.url) {
+          console.log("📋 Google Calendar URL (popup blocked):", result.url);
+          return {
+            success: true,
+            eventId: task.id,
+          };
+        }
+        throw new Error("Failed to create Google Calendar event");
       }
-
-      return await response.json();
     } catch (error) {
       console.error("Error adding to Google Calendar:", error);
       throw error;
     }
   }
 
   /**
-   * Add task to iOS calendar (using Web API)
+   * Add task to iOS calendar (using .ics file download)
+   * Based on: https://qiita.com/bananbo/items/281f2c98419355d7324c
    */
   async addToIosCalendar(task: Task): Promise<{ success: boolean; eventId?: string }> {
     try {
-      const response = await fetch(`${this.baseURL}/api/calendar/ios/add`, {
-        method: "POST",
-        headers: this.getHeaders(),
-        body: JSON.stringify({ task }),
-      });
+      // Import calendar utilities (dynamic import for client-side only)
+      const { createAndDownloadIcsFile, isIcsDownloadSupported } = await import("./calendar-utils");
 
-      if (!response.ok) {
-        throw new Error(`Failed to add to iOS Calendar: ${response.statusText}`);
+      // Check if .ics download is supported
+      if (!isIcsDownloadSupported()) {
+        throw new Error("Calendar file download is not supported in this environment");
       }
 
-      return await response.json();
+      console.log("📱 Adding task to iOS Calendar via .ics download:", task.title);
+
+      // Create and download .ics file
+      const result = await createAndDownloadIcsFile({
+        id: task.id,
+        title: task.title,
+        description: task.description,
+        dueDate: task.dueDate,
+        type: task.type,
+      });
+
+      if (result.success) {
+        return {
+          success: true,
+          eventId: result.filename, // Return filename as event identifier
+        };
+      } else {
+        throw new Error("Failed to create calendar file");
+      }
     } catch (error) {
       console.error("Error adding to iOS Calendar:", error);
       throw error;