d1s 0.2.1

package/src/context/database-context.js

@@ -0,0 +1,510 @@
+// context/database-context.js
+'use client';
+
+import React, { 
+  createContext, 
+  useContext, 
+  useState, 
+  useCallback, 
+  useEffect, 
+  useRef,
+  useMemo 
+} from 'react';
+import { useToast } from '@/hooks/use-toast';
+import { deduplicateRequest } from '@/lib/request-deduplication';
+
+const DatabaseContext = createContext(undefined);
+
+// Simple cache implementation
+class TableCache {
+  constructor() {
+    this.cache = new Map();
+  }
+
+  get(tableName) {
+    const entry = this.cache.get(tableName);
+    if (!entry) return null;
+    return entry;
+  }
+
+  set(tableName, data, schema, meta) {
+    this.cache.set(tableName, {
+      data,
+      schema,
+      meta,
+      timestamp: Date.now()
+    });
+  }
+
+  update(tableName, data, schema, meta) {
+    const entry = this.cache.get(tableName);
+    if (entry) {
+      this.cache.set(tableName, {
+        data: data || entry.data,
+        schema: schema || entry.schema,
+        meta: meta || entry.meta,
+        timestamp: Date.now()
+      });
+    }
+  }
+
+  invalidate(tableName) {
+    this.cache.delete(tableName);
+  }
+
+  clear() {
+    this.cache.clear();
+  }
+}
+
+class OperationQueue {
+  constructor() {
+    this.queue = [];
+    this.processing = false;
+  }
+
+  async add(operation) {
+    return new Promise((resolve, reject) => {
+      this.queue.push({ operation, resolve, reject });
+      this.process();
+    });
+  }
+
+  async process() {
+    if (this.processing || this.queue.length === 0) return;
+    
+    this.processing = true;
+    const { operation, resolve, reject } = this.queue.shift();
+    
+    try {
+      const result = await operation();
+      resolve(result);
+    } catch (error) {
+      reject(error);
+    } finally {
+      this.processing = false;
+      this.process();
+    }
+  }
+}
+
+export function DatabaseProvider({ children }) {
+  const { toast } = useToast();
+  const [tables, setTables] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [currentDatabase, setCurrentDatabase] = useState(null);
+  const operationQueue = useRef(new OperationQueue());
+  const [activeTable, setActiveTable] = useState(null);
+  const tableCache = useRef(new TableCache()).current;
+
+  // Cache management functions
+  const getCachedTable = useCallback((tableName, page = 1, limit = 50) => {
+    const key = `table-${tableName}-${page}-${limit}`;
+    return tableCache.get(key);
+  }, []);  
+
+  const invalidateTable = useCallback((tableName) => {
+    // Invalidate all keys that start with `table-${tableName}-`
+    tableCache.cache.forEach((_, key) => {
+      if (key.startsWith(`table-${tableName}-`)) {
+        tableCache.invalidate(key);
+      }
+    });
+  }, []);  
+
+  const updateTableCache = useCallback((tableName, data, schema, meta, page = 1, limit = 50) => {
+    const key = `table-${tableName}-${page}-${limit}`;
+    tableCache.update(key, data, schema, meta);
+  }, []);  
+
+  const executeQuery = useCallback(async (query) => {
+    const requestKey = `query-${query}`;
+  
+    return deduplicateRequest(
+      requestKey,
+      async () => {
+        try {
+          const response = await fetch('/api/query', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query })
+          });
+  
+          if (!response.ok) {
+            let errorMessage = 'Failed to execute query';
+            try {
+              const errorData = await response.json();
+              errorMessage = errorData?.error?.message || errorMessage;
+            } catch (e) {
+              // Ignore parsing errors
+            }
+            throw new Error(errorMessage);
+          }
+  
+          const data = await response.json();
+          if (!data.success) {
+            throw new Error(data.error || 'Query execution failed');
+          }
+  
+          return data;
+        } catch (error) {
+          throw error || new Error("An unknown error occurred");
+        }
+      },
+      1000
+    );
+  }, []);  
+
+  const fetchTableSchema = useCallback(async (tableName) => {
+    try {
+      const response = await fetch(`/api/tables/${tableName}`);
+      const data = await response.json();
+
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || 'Failed to fetch table schema');
+      }
+
+      return data.schema || [];
+    } catch (error) {
+      console.error('Schema fetch error:', error);
+      toast({
+        variant: "destructive",
+        title: "Schema Fetch Failed",
+        description: error.message,
+      });
+      throw error;
+    }
+  }, [toast]);
+
+  // Fetch table data with deduplication
+  const fetchTableData = useCallback(async (tableName, options = {}) => {
+    const { forceFetch = false, page = 1, limit = 50 } = options;
+  
+    const cacheKey = `table-${tableName}-${page}-${limit}`;
+    if (!forceFetch) {
+      const cached = tableCache.get(cacheKey);
+      if (cached) {
+        return cached;
+      }
+    }
+
+    // Generate unique request key based on table name and pagination
+    const requestKey = `table-${tableName}-${page}-${limit}`;
+  
+    return deduplicateRequest(
+      requestKey,
+      async () => {
+        try {
+          const response = await fetch(
+            `/api/tables/${tableName}?page=${page}&limit=${limit}`,
+            {
+              headers: {
+                'Cache-Control': 'no-cache',
+                'Pragma': 'no-cache'
+              }
+            }
+          );
+  
+          if (!response.ok) {
+            throw new Error('Failed to fetch table data');
+          }
+  
+          const result = await response.json();
+          if (!result.success) {
+            throw new Error(result.error || 'Failed to fetch table data');
+          }
+  
+          // Update cache with fresh data using the composite key
+          tableCache.set(cacheKey, result.data, result.schema, result.meta);
+
+          return result;
+        } catch (error) {
+          console.error('Error fetching table data:', error);
+          toast({
+            variant: "destructive",
+            title: "Data Fetch Failed",
+            description: error.message,
+          });
+          throw error;
+        }
+      },
+      1000 // 1 second TTL for deduplication
+    );
+  }, [toast]);
+
+  const updateTableData = useCallback(async (tableName) => {
+    try {
+      tableCache.invalidate(tableName);
+      const result = await fetchTableData(tableName, { forceFetch: true });
+      return result;
+    } catch (error) {
+      console.error('Error updating table data:', error);
+      toast({
+        variant: "destructive",
+        title: "Update Failed",
+        description: error.message,
+      });
+      throw error;
+    }
+  }, [fetchTableData, toast]);
+
+  // Switch active table
+  const switchTable = useCallback(async (tableName, options = {}) => {
+    setActiveTable(tableName);
+    return await fetchTableData(tableName, options);
+  }, [fetchTableData]);
+
+  // Refresh tables list with deduplication
+  const refreshTables = useCallback(async () => {
+    return deduplicateRequest(
+      'refresh-tables',
+      async () => {
+        setIsLoading(true);
+        setError(null);
+
+        try {
+          const response = await fetch('/api/tables');
+          if (!response.ok) {
+            throw new Error('Failed to fetch tables');
+          }
+
+          const data = await response.json();
+          if (data.error) {
+            throw new Error(data.error);
+          }
+
+          setTables(data.tables || []);
+          return data.tables || [];
+        } catch (err) {
+          setError(err.message);
+          toast({
+            variant: "destructive",
+            title: "Refresh Failed",
+            description: err.message,
+          });
+          throw err;
+        } finally {
+          setIsLoading(false);
+        }
+      },
+      2000
+    );
+  }, [toast]);
+
+  // Table operations
+  const createTable = useCallback(async (query) => {
+    try {
+      await executeQuery(query);
+      tableCache.clear(); // Clear all cache since schema changed
+      await refreshTables();
+      toast({
+        title: "Success",
+        description: "Table created successfully",
+      });
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Create Table Failed",
+        description: error.message,
+      });
+      throw new Error(`Failed to create table: ${error.message}`);
+    }
+  }, [executeQuery, refreshTables, toast]);
+
+  const dropTable = useCallback(async (tableName) => {
+    try {
+      await executeQuery(`DROP TABLE ${tableName};`);
+      tableCache.invalidate(tableName);
+      await refreshTables();
+      toast({
+        title: "Success",
+        description: "Table dropped successfully",
+      });
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Drop Table Failed",
+        description: error.message,
+      });
+      throw new Error(`Failed to drop table: ${error.message}`);
+    }
+  }, [executeQuery, refreshTables, toast]);
+
+  const syncMigrations = useCallback(async (credentials) => {
+    try {
+      const response = await fetch('/api/migrations/sync', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(credentials)
+      });
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error?.message || 'Failed to sync migrations');
+      }
+
+      const result = await response.json();
+      toast({
+        title: "Success",
+        description: "Migrations synced successfully",
+      });
+      return result;
+    } catch (error) {
+      console.error('Error syncing migrations:', error);
+      toast({
+        variant: "destructive",
+        title: "Sync Failed",
+        description: error.message,
+      });
+      throw error;
+    }
+  }, [toast]);
+
+  const pullFromRemote = useCallback(async () => {
+    try {
+      const storedCreds = localStorage.getItem('cf_credentials');
+      if (!storedCreds) {
+        throw new Error('No Cloudflare credentials found. Please connect to Cloudflare first.');
+      }
+  
+      const credentials = JSON.parse(storedCreds);
+      if (!credentials.accountId || !credentials.apiToken) {
+        throw new Error('Invalid credentials stored. Please reconnect to Cloudflare.');
+      }
+  
+      // Call the confirm endpoint to actually apply the remote migrations
+      const response = await fetch('/api/pull-remote/confirm', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          accountId: credentials.accountId,
+          apiToken: credentials.apiToken
+        })
+      });
+  
+      const data = await response.json();
+  
+      if (!response.ok || !data.success) {
+        throw new Error(data.error?.message || 'Failed to pull from remote');
+      }
+  
+      // Clear local caches and refresh the table list to reflect the new state.
+      tableCache.clear();
+      await refreshTables();
+  
+      toast({
+        title: "Success",
+        description: `Remote state applied successfully. Migrations applied: ${data.details.appliedMigrations.join(', ')}`,
+      });
+  
+      return data;
+    } catch (error) {
+      console.error('Error pulling from remote:', error);
+      toast({
+        variant: "destructive",
+        title: "Pull Failed",
+        description: error.message,
+      });
+      throw error;
+    }
+  }, [refreshTables, toast]);  
+
+  const pushToRemote = useCallback(async (credentials) => {
+    try {
+      const response = await fetch('/api/push-remote', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(credentials)
+      });
+  
+      const data = await response.json();
+  
+      if (!response.ok) {
+        throw new Error(data.error?.message || 'Failed to push to remote');
+      }
+  
+      // // Show a success toast.
+      // toast({
+      //   title: "Success",
+      //   description: "Successfully pushed to remote",
+      // });
+  
+      return data;
+    } catch (error) {
+      console.error('Error pushing to remote:', error);
+      // toast({
+      //   variant: "destructive",
+      //   title: "Push Failed",
+      //   description: error.message,
+      // });
+      throw error;
+    }
+  }, [toast]);
+
+  // Initial load
+  useEffect(() => {
+    refreshTables();
+    return () => {
+      tableCache.clear(); // Clear cache on unmount
+    };
+  }, [refreshTables]);
+
+  const value = useMemo(() => ({
+    tables,
+    currentDatabase,
+    isLoading,
+    error,
+    activeTable,
+    refreshTables,
+    executeQuery,
+    fetchTableSchema,
+    fetchTableData,
+    updateTableData,
+    createTable,
+    dropTable,
+    syncMigrations,
+    pullFromRemote,
+    pushToRemote,
+    getCachedTable,
+    updateTableCache,
+    invalidateTable,
+    switchTable
+  }), [
+    tables,
+    currentDatabase,
+    isLoading,
+    error,
+    activeTable,
+    refreshTables,
+    executeQuery,
+    fetchTableSchema,
+    fetchTableData,
+    updateTableData,
+    createTable,
+    dropTable,
+    syncMigrations,
+    pullFromRemote,
+    pushToRemote,
+    getCachedTable,
+    updateTableCache,
+    invalidateTable,
+    switchTable
+  ]);
+
+  return (
+    <DatabaseContext.Provider value={value}>
+      {children}
+    </DatabaseContext.Provider>
+  );
+}
+
+export function useDatabase() {
+  const context = useContext(DatabaseContext);
+  if (!context) {
+    throw new Error('useDatabase must be used within a DatabaseProvider');
+  }
+  return context;
+}

package/src/hooks/use-mobile.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}

package/src/hooks/use-sql-error.ts

@@ -0,0 +1,23 @@
+// hooks/use-sql-error.js
+import { useState, useCallback } from 'react';
+import { parseSQLError } from '@/lib/parse-sql-error';
+
+export function useSQLError() {
+  const [sqlError, setSQLError] = useState(null);
+
+  const handleSQLError = useCallback((error) => {
+    const parsedError = parseSQLError(error);
+    setSQLError(parsedError);
+    return parsedError;
+  }, []);
+
+  const clearSQLError = useCallback(() => {
+    setSQLError(null);
+  }, []);
+
+  return {
+    sqlError,
+    handleSQLError,
+    clearSQLError
+  };
+}

package/src/hooks/use-toast.js

@@ -0,0 +1,155 @@
+"use client";
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST"
+}
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString();
+}
+
+const toastTimeouts = new Map()
+
+const addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+}
+
+const listeners = []
+
+let memoryState = { toasts: [] }
+
+function dispatch(action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+function toast({
+  ...props
+}) {
+  const id = genId()
+
+  const update = (props) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    };
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast }