feat: full backend (untested)

2026-01-14 11:37:44 -05:00
parent 4a0db63a30
commit d585cf8613
32 changed files with 1317 additions and 57 deletions
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -0,0 +1,4 @@
+node_modules
+.git
+.gitignore
+dist
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 8080
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2859,6 +2859,7 @@
      "integrity": "sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "undici-types": "~6.21.0"
      }
@@ -2876,6 +2877,7 @@
      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@@ -2887,6 +2889,7 @@
      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "@types/react": "^18.0.0"
      }
@@ -2937,6 +2940,7 @@
      "integrity": "sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.38.0",
        "@typescript-eslint/types": "8.38.0",
@@ -3169,6 +3173,7 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -3373,6 +3378,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "caniuse-lite": "^1.0.30001726",
        "electron-to-chromium": "^1.5.173",
@@ -3706,6 +3712,7 @@
      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/kossnocorp"
@@ -3787,7 +3794,8 @@
      "version": "8.6.0",
      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/embla-carousel-react": {
      "version": "8.6.0",
@@ -3885,6 +3893,7 @@
      "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -5406,6 +5415,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -5592,6 +5602,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
@@ -5618,6 +5629,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0",
        "scheduler": "^0.23.2"
@@ -5631,6 +5643,7 @@
      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.61.1.tgz",
      "integrity": "sha512-2vbXUFDYgqEgM2RcXcAT2PwDW/80QARi+PKmHy5q2KhuKvOlG8iIYgf7eIlIANR5trW9fJbP4r5aub3a4egsew==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=18.0.0"
      },
@@ -6184,6 +6197,7 @@
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
@@ -6308,6 +6322,7 @@
      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -6487,6 +6502,7 @@
      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.21.3",
        "postcss": "^8.4.43",
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,78 @@
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
+
+export interface ParticipantAPI {
+  id: string;
+  name: string;
+  email: string;
+  ics_url: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TimeSlotAPI {
+  day: string;
+  hour: number;
+  availability: 'full' | 'partial' | 'none';
+  availableParticipants: string[];
+}
+
+export interface CreateParticipantRequest {
+  name: string;
+  email: string;
+  ics_url: string;
+}
+
+async function handleResponse<T>(response: Response): Promise<T> {
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: 'Request failed' }));
+    throw new Error(error.detail || 'Request failed');
+  }
+  return response.json();
+}
+
+export async function fetchParticipants(): Promise<ParticipantAPI[]> {
+  const response = await fetch(`${API_URL}/api/participants`);
+  return handleResponse<ParticipantAPI[]>(response);
+}
+
+export async function createParticipant(data: CreateParticipantRequest): Promise<ParticipantAPI> {
+  const response = await fetch(`${API_URL}/api/participants`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  return handleResponse<ParticipantAPI>(response);
+}
+
+export async function deleteParticipant(id: string): Promise<void> {
+  const response = await fetch(`${API_URL}/api/participants/${id}`, {
+    method: 'DELETE',
+  });
+  if (!response.ok) {
+    throw new Error('Failed to delete participant');
+  }
+}
+
+export async function fetchAvailability(participantIds: string[]): Promise<TimeSlotAPI[]> {
+  const response = await fetch(`${API_URL}/api/availability`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ participant_ids: participantIds }),
+  });
+  const data = await handleResponse<{ slots: TimeSlotAPI[] }>(response);
+  return data.slots;
+}
+
+export async function syncCalendars(): Promise<void> {
+  const response = await fetch(`${API_URL}/api/sync`, { method: 'POST' });
+  if (!response.ok) {
+    throw new Error('Failed to sync calendars');
+  }
+}
+
+export async function syncParticipant(id: string): Promise<void> {
+  const response = await fetch(`${API_URL}/api/sync/${id}`, { method: 'POST' });
+  if (!response.ok) {
+    throw new Error('Failed to sync participant calendar');
+  }
+}
--- a/frontend/src/components/AvailabilityHeatmap.tsx
+++ b/frontend/src/components/AvailabilityHeatmap.tsx
@@ -1,5 +1,4 @@
 import { TimeSlot, Participant } from '@/types/calendar';
-import { days, hours } from '@/data/mockData';
 import { cn } from '@/lib/utils';
 import {
  Popover,
@@ -7,13 +6,17 @@ import {
  PopoverTrigger,
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
-import { Check, X } from 'lucide-react';
+import { Check, X, Loader2 } from 'lucide-react';
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17];

 interface AvailabilityHeatmapProps {
  slots: TimeSlot[];
  selectedParticipants: Participant[];
  onSlotSelect: (slot: TimeSlot) => void;
  showPartialAvailability?: boolean;
+  isLoading?: boolean;
 }

 export const AvailabilityHeatmap = ({
@@ -21,6 +24,7 @@ export const AvailabilityHeatmap = ({
  selectedParticipants,
  onSlotSelect,
  showPartialAvailability = false,
+  isLoading = false,
 }: AvailabilityHeatmapProps) => {
  const getSlot = (day: string, hour: number) => {
    return slots.find((s) => s.day === day && s.hour === hour);
@@ -59,6 +63,15 @@ export const AvailabilityHeatmap = ({
    );
  }

+  if (isLoading) {
+    return (
+      <div className="bg-card rounded-xl shadow-card p-8 text-center animate-fade-in">
+        <Loader2 className="w-8 h-8 mx-auto mb-4 animate-spin text-primary" />
+        <p className="text-muted-foreground">Loading availability...</p>
+      </div>
+    );
+  }
+
  return (
    <div className="bg-card rounded-xl shadow-card p-6 animate-slide-up">
      <div className="mb-6">
@@ -72,7 +85,6 @@ export const AvailabilityHeatmap = ({

      <div className="overflow-x-auto">
        <div className="min-w-[600px]">
-          {/* Header */}
          <div className="grid grid-cols-[60px_repeat(5,1fr)] gap-1 mb-2">
            <div></div>
            {days.map((day) => (
@@ -85,7 +97,6 @@ export const AvailabilityHeatmap = ({
            ))}
          </div>

-          {/* Grid */}
          <div className="space-y-1">
            {hours.map((hour) => (
              <div key={hour} className="grid grid-cols-[60px_repeat(5,1fr)] gap-1">
@@ -157,7 +168,6 @@ export const AvailabilityHeatmap = ({
        </div>
      </div>

-      {/* Legend */}
      <div className="flex items-center justify-center gap-6 mt-6 pt-4 border-t border-border">
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded bg-availability-full"></div>
--- a/frontend/src/pages/Index.tsx
+++ b/frontend/src/pages/Index.tsx
@@ -1,10 +1,9 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { Header } from '@/components/Header';
 import { ParticipantSelector } from '@/components/ParticipantSelector';
 import { ParticipantManager } from '@/components/ParticipantManager';
 import { AvailabilityHeatmap } from '@/components/AvailabilityHeatmap';
 import { ScheduleModal } from '@/components/ScheduleModal';
-import { generateMockAvailability } from '@/data/mockData';
 import { Participant, TimeSlot } from '@/types/calendar';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Switch } from '@/components/ui/switch';
@@ -15,39 +14,48 @@ import {
  PopoverTrigger,
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
-import { Users, CalendarDays, Settings } from 'lucide-react';
+import { Users, CalendarDays, Settings, RefreshCw } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import {
+  fetchParticipants,
+  createParticipant,
+  deleteParticipant,
+  fetchAvailability,
+  syncCalendars,
+  ParticipantAPI,
+} from '@/api/client';

-const STORAGE_KEY = 'calendar-participants';
 const SETTINGS_KEY = 'calendar-settings';

-interface Settings {
+interface SettingsState {
  showPartialAvailability: boolean;
 }

-const defaultSettings: Settings = {
+const defaultSettings: SettingsState = {
  showPartialAvailability: false,
 };

+function apiToParticipant(p: ParticipantAPI): Participant {
+  return {
+    id: p.id,
+    name: p.name,
+    email: p.email,
+    icsLink: p.ics_url,
+    connected: true,
+  };
+}
+
 const Index = () => {
  const [participants, setParticipants] = useState<Participant[]>([]);
  const [selectedParticipants, setSelectedParticipants] = useState<Participant[]>([]);
+  const [availabilitySlots, setAvailabilitySlots] = useState<TimeSlot[]>([]);
  const [selectedSlot, setSelectedSlot] = useState<TimeSlot | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [settings, setSettings] = useState<Settings>(defaultSettings);
+  const [settings, setSettings] = useState<SettingsState>(defaultSettings);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSyncing, setIsSyncing] = useState(false);
+  const { toast } = useToast();

-  // Load participants from localStorage on mount
-  useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored) {
-      try {
-        setParticipants(JSON.parse(stored));
-      } catch (e) {
-        console.error('Failed to parse stored participants');
-      }
-    }
-  }, []);
-
-  // Load settings from localStorage on mount
  useEffect(() => {
    const stored = localStorage.getItem(SETTINGS_KEY);
    if (stored) {
@@ -59,37 +67,112 @@ const Index = () => {
    }
  }, []);

-  // Save participants to localStorage when changed
-  useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(participants));
-  }, [participants]);
-
-  // Save settings to localStorage when changed
  useEffect(() => {
    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
  }, [settings]);

-  const handleAddParticipant = (data: { name: string; email: string; icsLink: string }) => {
-    const newParticipant: Participant = {
-      id: crypto.randomUUID(),
-      name: data.name,
-      email: data.email,
-      icsLink: data.icsLink,
-      connected: true,
-    };
-    setParticipants((prev) => [...prev, newParticipant]);
-  };
+  useEffect(() => {
+    loadParticipants();
+  }, []);

-  const handleRemoveParticipant = (id: string) => {
-    setParticipants((prev) => prev.filter((p) => p.id !== id));
-    setSelectedParticipants((prev) => prev.filter((p) => p.id !== id));
-  };
-
-  // Generate availability when participants change
-  const availabilitySlots = useMemo(() => {
-    return generateMockAvailability(selectedParticipants);
+  useEffect(() => {
+    if (selectedParticipants.length > 0) {
+      loadAvailability();
+    } else {
+      setAvailabilitySlots([]);
+    }
  }, [selectedParticipants]);

+  const loadParticipants = async () => {
+    try {
+      const data = await fetchParticipants();
+      setParticipants(data.map(apiToParticipant));
+    } catch (error) {
+      toast({
+        title: 'Error loading participants',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const loadAvailability = async () => {
+    setIsLoading(true);
+    try {
+      const ids = selectedParticipants.map((p) => p.id);
+      const slots = await fetchAvailability(ids);
+      setAvailabilitySlots(slots);
+    } catch (error) {
+      toast({
+        title: 'Error loading availability',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleAddParticipant = async (data: { name: string; email: string; icsLink: string }) => {
+    try {
+      const created = await createParticipant({
+        name: data.name,
+        email: data.email,
+        ics_url: data.icsLink,
+      });
+      setParticipants((prev) => [...prev, apiToParticipant(created)]);
+      toast({
+        title: 'Participant added',
+        description: `${data.name} has been added and calendar synced`,
+      });
+    } catch (error) {
+      toast({
+        title: 'Error adding participant',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleRemoveParticipant = async (id: string) => {
+    try {
+      await deleteParticipant(id);
+      setParticipants((prev) => prev.filter((p) => p.id !== id));
+      setSelectedParticipants((prev) => prev.filter((p) => p.id !== id));
+      toast({
+        title: 'Participant removed',
+      });
+    } catch (error) {
+      toast({
+        title: 'Error removing participant',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSyncCalendars = async () => {
+    setIsSyncing(true);
+    try {
+      await syncCalendars();
+      if (selectedParticipants.length > 0) {
+        await loadAvailability();
+      }
+      toast({
+        title: 'Calendars synced',
+        description: 'All calendars have been refreshed',
+      });
+    } catch (error) {
+      toast({
+        title: 'Error syncing calendars',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
  const handleSlotSelect = (slot: TimeSlot) => {
    setSelectedSlot(slot);
    setIsModalOpen(true);
@@ -132,7 +215,15 @@ const Index = () => {
          <TabsContent value="schedule" className="animate-fade-in">
            <div className="space-y-8">
              <div className="text-center relative">
-                <div className="absolute right-0 top-0">
+                <div className="absolute right-0 top-0 flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleSyncCalendars}
+                    disabled={isSyncing}
+                  >
+                    <RefreshCw className={`w-5 h-5 ${isSyncing ? 'animate-spin' : ''}`} />
+                  </Button>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button variant="ghost" size="icon">
@@ -195,6 +286,7 @@ const Index = () => {
                    selectedParticipants={selectedParticipants}
                    onSlotSelect={handleSlotSelect}
                    showPartialAvailability={settings.showPartialAvailability}
+                    isLoading={isLoading}
                  />
                </>
              )}