frontend-hamroun 1.2.75 → 1.2.77

package/templates/fullstack-app/src/components/StateDemo.tsx

@@ -0,0 +1,207 @@
+import { jsx, useState, useEffect, useMemo } from 'frontend-hamroun';
+
+// Define our state types for better type safety
+interface CounterState {
+  count: number;
+  lastUpdated: string | null;
+  history: number[];
+}
+
+export default function StateDemo() {
+  // More comprehensive state with history tracking
+  const [state, setState] = useState<CounterState>({
+    count: 0,
+    lastUpdated: null,
+    history: []
+  });
+  
+  // Track UI state separately
+  const [isLoading, setIsLoading] = useState(false);
+  const [showHistory, setShowHistory] = useState(false);
+  
+  // Check for server-side rendering
+  const isSSR = typeof window === 'undefined';
+  
+  // Calculate derived state with useMemo for performance
+  const stats = useMemo(() => {
+    // Ensure we have a valid history array
+    if (isSSR || !state || !state.history || state.history.length === 0) {
+      return { avg: 0, max: 0, min: 0 };
+    }
+    
+    try {
+      const sum = state.history.reduce((a, b) => a + b, 0);
+      return {
+        avg: parseFloat((sum / state.history.length).toFixed(1)),
+        max: Math.max(...state.history),
+        min: Math.min(...state.history)
+      };
+    } catch (error) {
+      console.error('Error calculating stats:', error);
+      return { avg: 0, max: 0, min: 0 };
+    }
+  }, [state?.history]);
+  
+  // Handle increment with history tracking
+  const increment = () => {
+    if (isSSR) return;
+    
+    setIsLoading(true);
+    
+    // Simulate async operation
+    setTimeout(() => {
+      setState(prevState => ({
+        count: prevState.count + 1,
+        lastUpdated: new Date().toLocaleTimeString(),
+        history: [...(prevState.history || []), prevState.count + 1]
+      }));
+      setIsLoading(false);
+    }, 300);
+  };
+  
+  // Handle decrement with bounds checking
+  const decrement = () => {
+    if (isSSR) return;
+    
+    setIsLoading(true);
+    
+    // Simulate async operation
+    setTimeout(() => {
+      setState(prevState => ({
+        count: Math.max(0, prevState.count - 1),
+        lastUpdated: new Date().toLocaleTimeString(),
+        history: prevState.count > 0 ? [...(prevState.history || []), prevState.count - 1] : (prevState.history || [])
+      }));
+      setIsLoading(false);
+    }, 300);
+  };
+  
+  // Reset counter
+  const reset = () => {
+    if (isSSR) return;
+    
+    setState({
+      count: 0,
+      lastUpdated: new Date().toLocaleTimeString(),
+      history: []
+    });
+  };
+  
+  // Toggle history visibility
+  const toggleHistory = () => {
+    if (isSSR) return;
+    
+    setShowHistory(prev => !prev);
+  };
+  
+  // For SSR, return a simpler version of the component
+  if (isSSR) {
+    return (
+      <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">
+          State Management Demo
+        </h2>
+        <div className="flex items-center justify-between mb-4">
+          <button className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg">-</button>
+          <span className="text-2xl font-bold mx-4">0</span>
+          <button className="px-4 py-2 bg-blue-600 text-white rounded-lg">+</button>
+        </div>
+        <p className="text-sm text-gray-500">Interactive counter (client-side only)</p>
+      </div>
+    );
+  }
+  
+  // Regular client-side render
+  return (
+    <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
+      <h2 className="text-xl font-semibold text-gray-800 mb-4">
+        State Management Demo
+      </h2>
+      
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <button 
+            onClick={decrement}
+            className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50"
+            disabled={state.count === 0 || isLoading}
+          >
+            {isLoading ? '...' : '-'}
+          </button>
+          
+          <span className="text-2xl font-bold mx-4">{state.count}</span>
+          
+          <button 
+            onClick={increment}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+            disabled={isLoading}
+          >
+            {isLoading ? '...' : '+'}
+          </button>
+        </div>
+        
+        <button
+          onClick={reset}
+          className="text-sm text-gray-600 hover:text-red-600"
+          disabled={state.count === 0 && (!state.history || state.history.length === 0)}
+        >
+          Reset Counter
+        </button>
+      </div>
+      
+      {state.lastUpdated && (
+        <div className="mb-4">
+          <p className="text-sm text-gray-500">
+            Last updated: {state.lastUpdated}
+          </p>
+        </div>
+      )}
+      
+      {state.history && state.history.length > 0 && (
+        <div className="border-t pt-4 mt-4">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-md font-medium text-gray-700">Statistics</h3>
+            <button
+              onClick={toggleHistory}
+              className="text-sm text-blue-600 hover:underline"
+            >
+              {showHistory ? 'Hide History' : 'Show History'}
+            </button>
+          </div>
+          
+          <div className="grid grid-cols-3 gap-2 mb-3">
+            <div className="bg-blue-50 p-2 rounded text-center">
+              <div className="text-xs text-gray-500">Average</div>
+              <div className="font-bold">{stats.avg}</div>
+            </div>
+            <div className="bg-green-50 p-2 rounded text-center">
+              <div className="text-xs text-gray-500">Maximum</div>
+              <div className="font-bold">{stats.max}</div>
+            </div>
+            <div className="bg-red-50 p-2 rounded text-center">
+              <div className="text-xs text-gray-500">Minimum</div>
+              <div className="font-bold">{stats.min}</div>
+            </div>
+          </div>
+          
+          {showHistory && (
+            <div className="mt-3">
+              <h4 className="text-sm font-medium text-gray-600 mb-1">
+                History ({state.history.length} events)
+              </h4>
+              <div className="bg-gray-50 p-2 rounded max-h-24 overflow-y-auto text-xs">
+                {state.history.map((value, index) => (
+                  <span 
+                    key={index} 
+                    className="inline-block bg-gray-200 rounded px-2 py-1 m-1"
+                  >
+                    {value}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/fullstack-app/src/components/UserList.tsx

@@ -1,27 +1,44 @@
 import { jsx } from 'frontend-hamroun';
 
-const UserList = ({ users }) => {
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+interface UserListProps {
+  users: User[];
+}
+
+export default function UserList({ users }: UserListProps) {
   if (!users || users.length === 0) {
     return (
-      <div className="p-4 bg-gray-50 rounded-lg border border-gray-200 my-4">
-        <p className="text-gray-500 italic">No users found or still loading...</p>
+      <div className="empty-state p-4 text-center bg-gray-50 rounded">
+        <p className="text-gray-500">No users available</p>
       </div>
     );
   }
-
+  
   return (
-    <div className="rounded-lg overflow-hidden my-4">
-      <h3 className="text-lg font-medium mb-3">Users ({users.length})</h3>
-      <ul className="divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
+    <div className="user-list">
+      <ul className="divide-y divide-gray-100">
         {users.map(user => (
-          <li key={user.id} className="flex justify-between items-center p-4 hover:bg-gray-50">
-            <span className="font-medium text-gray-800">{user.name}</span>
-            <span className="text-gray-500 text-sm">{user.email}</span>
+          <li key={user.id} className="py-3">
+            <div className="flex justify-between">
+              <div>
+                <p className="font-medium text-gray-900">{user.name}</p>
+                <p className="text-sm text-gray-500">{user.email}</p>
+              </div>
+              <a 
+                href={`/users/${user.id}`}
+                className="text-blue-600 hover:underline text-sm self-center"
+              >
+                View Profile
+              </a>
+            </div>
           </li>
         ))}
       </ul>
     </div>
   );
-};
-
-export default UserList;
+}

package/templates/fullstack-app/src/data/api.ts

@@ -1,22 +1,42 @@
-// General API utility for data fetching
+/**
+ * API utilities for making requests to the backend
+ */
+import { batchUpdates } from 'frontend-hamroun';
+
+// Cache for API responses
+const apiCache = new Map<string, { data: any, timestamp: number }>();
+const CACHE_DURATION = 60000; // 1 minute cache
 
 /**
- * Fetch data from an API endpoint
- * @param endpoint The API endpoint to fetch from (without /api prefix)
- * @param options Additional fetch options
- * @returns The parsed JSON response or null if there was an error
+ * Fetch data from the API with caching
  */
-export async function fetchApi(endpoint: string, options = {}) {
+export async function fetchApi(
+  endpoint: string, 
+  options: RequestInit & { 
+    useCache?: boolean,
+    forceFresh?: boolean 
+  } = {}
+): Promise<any> {
   const url = endpoint.startsWith('/') ? `/api${endpoint}` : `/api/${endpoint}`;
+  const { useCache = true, forceFresh = false, ...fetchOptions } = options;
+  
+  // Check cache first if enabled
+  if (useCache && !forceFresh) {
+    const cached = apiCache.get(url);
+    if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
+      console.log(`[API] Using cached data for: ${url}`);
+      return cached.data;
+    }
+  }
   
   try {
     console.log(`[API] Fetching data from: ${url}`);
     const response = await fetch(url, {
       headers: {
         'Content-Type': 'application/json',
-        'Accept': 'application/json'
+        'Accept': 'application/json',
       },
-      ...options
+      ...fetchOptions
     });
     
     if (!response.ok) {
@@ -25,47 +45,162 @@ export async function fetchApi(endpoint: string, options = {}) {
     
     const data = await response.json();
     console.log(`[API] Successfully fetched data from: ${url}`);
+    
+    // Cache the response if caching is enabled
+    if (useCache) {
+      apiCache.set(url, { data, timestamp: Date.now() });
+    }
+    
     return data;
   } catch (error) {
     console.error(`[API] Error fetching from ${url}:`, error);
-    return null;
+    throw error;
   }
 }
 
 /**
- * User-related API calls
+ * Clear the API cache
  */
+export function clearApiCache(endpoint?: string): void {
+  if (endpoint) {
+    const url = endpoint.startsWith('/') ? `/api${endpoint}` : `/api/${endpoint}`;
+    apiCache.delete(url);
+  } else {
+    apiCache.clear();
+  }
+}
+
+// Sample data for development
+const sampleUsers = [
+  { id: 1, name: 'User 1', email: 'user1@example.com' },
+  { id: 2, name: 'User 2', email: 'user2@example.com' },
+  { id: 3, name: 'User 3', email: 'user3@example.com' }
+];
+
+const samplePosts = [
+  { id: 1, title: 'Post 1', content: 'Content for post 1', authorId: 1 },
+  { id: 2, title: 'Post 2', content: 'Content for post 2', authorId: 2 },
+  { id: 3, title: 'Post 3', content: 'Content for post 3', authorId: 1 }
+];
+
+// Helper to simulate network delay
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+// User API client
 export const UserApi = {
-  getAll: () => fetchApi('/users'),
-  getById: (id: number | string) => fetchApi(`/users/${id}`),
-  create: (data: any) => fetchApi('/users', {
-    method: 'POST',
-    body: JSON.stringify(data)
-  }),
-  update: (id: number | string, data: any) => fetchApi(`/users/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(data)
-  }),
-  delete: (id: number | string) => fetchApi(`/users/${id}`, {
-    method: 'DELETE'
-  })
+  // Get all users
+  async getAll() {
+    try {
+      // In a real app, we'd fetch from API
+      // const response = await fetch('/api/users');
+      // if (!response.ok) throw new Error('Failed to fetch users');
+      // return await response.json();
+      
+      // Simulate API delay
+      await delay(300);
+      return [...sampleUsers]; // Return a copy to avoid mutations
+    } catch (error) {
+      console.error('Error fetching users:', error);
+      return [];
+    }
+  },
+  
+  // Get user by ID
+  async getById(id: number | string) {
+    try {
+      // In a real app, we'd fetch from API
+      // const response = await fetch(`/api/users/${id}`);
+      // if (!response.ok) throw new Error('User not found');
+      // return await response.json();
+      
+      // Convert ID to number if it's a string
+      const userId = typeof id === 'string' ? parseInt(id, 10) : id;
+      
+      // Simulate API delay
+      await delay(200);
+      
+      // Find user
+      const user = sampleUsers.find(u => u.id === userId);
+      if (!user) throw new Error('User not found');
+      
+      return { ...user }; // Return a copy to avoid mutations
+    } catch (error) {
+      console.error(`Error fetching user ${id}:`, error);
+      return null;
+    }
+  },
+  
+  // Get posts (all or by author)
+  async getPosts(authorId?: number | string) {
+    try {
+      // In a real app, we'd fetch from API
+      // const url = authorId ? `/api/posts?authorId=${authorId}` : '/api/posts';
+      // const response = await fetch(url);
+      // if (!response.ok) throw new Error('Failed to fetch posts');
+      // return await response.json();
+      
+      // Convert authorId to number if it's a string
+      const userId = authorId ? (typeof authorId === 'string' ? parseInt(authorId, 10) : authorId) : undefined;
+      
+      // Simulate API delay
+      await delay(400);
+      
+      // Filter posts if authorId is provided
+      const posts = userId
+        ? samplePosts.filter(p => p.authorId === userId)
+        : samplePosts;
+      
+      return [...posts]; // Return a copy to avoid mutations
+    } catch (error) {
+      console.error('Error fetching posts:', error);
+      return [];
+    }
+  }
 };
 
-/**
- * Post-related API calls
- */
-export const PostApi = {
-  getAll: () => fetchApi('/posts'),
-  getById: (id: number | string) => fetchApi(`/posts/${id}`),
-  create: (data: any) => fetchApi('/posts', {
+// WASM API service
+export const WasmApi = {
+  calculate: (operation: 'add' | 'multiply', a: number, b: number) => 
+    fetchApi(`/wasm/calculate?op=${operation}&a=${a}&b=${b}`),
+    
+  processJson: (data: any) => fetchApi('/wasm/process-json', {
     method: 'POST',
-    body: JSON.stringify(data)
-  }),
-  update: (id: number | string, data: any) => fetchApi(`/posts/${id}`, {
-    method: 'PUT',
-    body: JSON.stringify(data)
-  }),
-  delete: (id: number | string) => fetchApi(`/posts/${id}`, {
-    method: 'DELETE'
+    body: JSON.stringify(data),
+    useCache: false
   })
 };
+
+// Batch multiple API calls for efficiency
+export const batchApiCalls = async <T>(
+  apiFunctions: Array<() => Promise<T>>
+): Promise<T[]> => {
+  const results: T[] = [];
+  let errors: Error[] = [];
+  
+  // Execute all API calls in parallel
+  const promises = apiFunctions.map(fn => fn());
+  
+  try {
+    const settledResults = await Promise.allSettled(promises);
+    
+    // Process results
+    batchUpdates(() => {
+      settledResults.forEach(result => {
+        if (result.status === 'fulfilled') {
+          results.push(result.value);
+        } else {
+          errors.push(result.reason);
+        }
+      });
+    });
+    
+    if (errors.length) {
+      console.error('[API] Some batch API calls failed:', errors);
+    }
+    
+    return results;
+  } catch (error) {
+    console.error('[API] Batch API calls failed:', error);
+    throw error;
+  }
+};