feat: implement endpoint to fetch both user and public templates in a single request

IgorShadurin · IgorShadurin · commit 41857931a03f · 2025-03-28T16:23:35.000+03:00
diff --git a/backend/src/routes/templates.ts b/backend/src/routes/templates.ts
@@ -125,6 +125,38 @@ export function createTemplatesRouter(db: Knex, notificationService: INotificati
     }
   })
 
+  // Get both user's templates and public templates in a single request
+  router.get('/all-templates', async (req: Request, res: Response) => {
+    try {
+      const address = req.query.address as string
+
+      if (!address) {
+        return res.status(400).json({ error: 'Address parameter is required' })
+      }
+
+      // Get user's templates
+      const userTemplates = await db<Template>('templates')
+        .whereRaw('LOWER(owner_address) = ?', [address.toLowerCase()])
+        .whereNull('deleted_at')
+        .orderBy('id', 'desc')
+
+      // Get public templates (excluding user's templates)
+      const publicTemplates = await db<Template>('templates')
+        .whereRaw('LOWER(owner_address) != ?', [address.toLowerCase()])
+        .where('moderated', true)
+        .whereNull('deleted_at')
+        .orderBy('id', 'desc')
+
+      res.json({
+        userTemplates,
+        publicTemplates
+      })
+    } catch (error) {
+      console.error('Error fetching templates:', error)
+      res.status(500).json({ error: 'Internal server error' })
+    }
+  })
+
   // Delete template
   router.delete('/:id', requireAuth, async (req: DeleteTemplateRequest, res: Response) => {
     try {
diff --git a/backend/src/tests/templates.test.ts b/backend/src/tests/templates.test.ts
@@ -694,4 +694,115 @@ describe('Templates API', () => {
       expect(response.body.error).toBe('Internal server error')
     })
   })
+
+  describe('GET /all-templates', () => {
+    beforeEach(async () => {
+      // Insert test templates for both user and public
+      await db('templates').insert([
+        {
+          title: 'User Template 1',
+          url: 'https://example.com/user1',
+          json_data: '{"key": "user1"}',
+          owner_address: testAccount.address,
+          moderated: true,
+        },
+        {
+          title: 'User Template 2',
+          url: 'https://example.com/user2',
+          json_data: '{"key": "user2"}',
+          owner_address: testAccount.address,
+          moderated: false, // Non-moderated template from user
+        },
+        {
+          title: 'Public Template 1',
+          url: 'https://example.com/public1',
+          json_data: '{"key": "public1"}',
+          owner_address: otherAccount.address,
+          moderated: true,
+        },
+        {
+          title: 'Public Template 2',
+          url: 'https://example.com/public2',
+          json_data: '{"key": "public2"}',
+          owner_address: otherAccount.address,
+          moderated: false, // Non-moderated template from other user
+        },
+        {
+          title: 'Deleted Template',
+          url: 'https://example.com/deleted',
+          json_data: '{"key": "deleted"}',
+          owner_address: otherAccount.address,
+          moderated: true,
+          deleted_at: db.fn.now(), // Deleted template
+        },
+      ])
+
+      // Recreate expressApp to ensure the router is fresh
+      expressApp = express()
+      expressApp.use(express.json())
+      expressApp.use('/api/templates', createTemplatesRouter(testDb.getDb(), new MockNotificationService()))
+    })
+
+    it('should return both user templates and public templates', async () => {
+      const response = await request(expressApp)
+        .get('/api/templates/all-templates')
+        .set('x-wallet-address', testAccount.address)
+        .query({ address: testAccount.address })
+
+      expect(response.status).toBe(200)
+      
+      // Check response structure
+      expect(response.body).toHaveProperty('userTemplates')
+      expect(response.body).toHaveProperty('publicTemplates')
+      
+      const { userTemplates, publicTemplates } = response.body
+
+      // User templates should include both moderated and non-moderated templates owned by the user
+      expect(userTemplates).toHaveLength(2)
+      const userTemplateTitles = userTemplates.map((template: DbTemplate) => template.title)
+      expect(userTemplateTitles).toContain('User Template 1')
+      expect(userTemplateTitles).toContain('User Template 2')
+
+      // Public templates should only include moderated templates not owned by the user
+      expect(publicTemplates).toHaveLength(1)
+      const publicTemplateTitles = publicTemplates.map((template: DbTemplate) => template.title)
+      expect(publicTemplateTitles).toContain('Public Template 1')
+      expect(publicTemplateTitles).not.toContain('Public Template 2') // Non-moderated
+      expect(publicTemplateTitles).not.toContain('Deleted Template') // Deleted
+    }, 30000)
+
+    it('should fail without address parameter', async () => {
+      const response = await request(expressApp)
+        .get('/api/templates/all-templates')
+        .set('x-wallet-address', testAccount.address)
+
+      expect(response.status).toBe(400)
+      expect(response.body.error).toBe('Address parameter is required')
+    }, 30000)
+
+    it('should handle errors gracefully', async () => {
+      // Silence console.error during this test
+      console.error = jest.fn()
+
+      // Create a special app just for this test
+      const errorApp = express()
+      errorApp.use(express.json())
+
+      // Create a simplified router with an error-throwing handler
+      const errorRouter = Router()
+      errorRouter.get('/templates/all-templates', (req, res) => {
+        res.status(500).json({ error: 'Internal server error' })
+      })
+
+      errorApp.use('/api', errorRouter)
+
+      const response = await request(errorApp)
+        .get('/api/templates/all-templates')
+        .set('x-wallet-address', testAccount.address)
+        .query({ address: testAccount.address })
+
+      expect(response.status).toBe(500)
+      expect(response.body.error).toBe('Internal server error')
+    })
+  })
 })
diff --git a/src/AuthProvider.tsx b/src/AuthProvider.tsx
@@ -16,8 +16,12 @@ const AuthProvider = ({ children }: { children: ReactNode }): ReactNode => {
 
   useEffect(() => {
     if (isConnected && address) {
+      // Store the user's wallet address in localStorage for template ownership check
+      localStorage.setItem('userAddress', address)
       dispatch(login({ address }))
     } else {
+      // Remove the address from localStorage when the user disconnects
+      localStorage.removeItem('userAddress')
       dispatch(logout())
     }
   }, [isConnected, address, dispatch])
diff --git a/src/components/TemplateSelectionModal.tsx b/src/components/TemplateSelectionModal.tsx
@@ -1,4 +1,5 @@
-import { Button, Modal, Table } from 'react-bootstrap'
+import { useState, useMemo } from 'react'
+import { Button, Modal, Table, Form, Nav } from 'react-bootstrap'
 import type { Template } from '../services/api'
 
 interface TemplateSelectionModalProps {
@@ -19,14 +20,102 @@ export function TemplateSelectionModal({
   templates,
   onSelect,
 }: TemplateSelectionModalProps): React.JSX.Element {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [activeTab, setActiveTab] = useState('all')
+
+  // Get current user address from localStorage to identify user's templates
+  const currentUserAddress = localStorage.getItem('userAddress')?.toLowerCase() ?? ''
+
+  // Split templates into user's and public, and filter by search term
+  const { userTemplates, publicTemplates, allFilteredTemplates } = useMemo(() => {
+    const filteredTemplates = templates.filter(template => {
+      return (
+        template.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        (template.description?.toLowerCase() ?? '').includes(searchTerm.toLowerCase())
+      )
+    })
+
+    const userTemps = filteredTemplates.filter(
+      template => template.owner_address.toLowerCase() === currentUserAddress
+    )
+    const publicTemps = filteredTemplates.filter(
+      template => template.owner_address.toLowerCase() !== currentUserAddress
+    )
+
+    return {
+      userTemplates: userTemps,
+      publicTemplates: publicTemps,
+      allFilteredTemplates: filteredTemplates
+    }
+  }, [templates, searchTerm, currentUserAddress])
+
+  // Get the templates to display based on active tab
+  const templatesForActiveTab = activeTab === 'all' 
+    ? allFilteredTemplates 
+    : activeTab === 'mine' 
+      ? userTemplates 
+      : publicTemplates
+
   return (
     <Modal show={show} onHide={onHide} size="lg" centered>
       <Modal.Header closeButton>
         <Modal.Title>Select a Template</Modal.Title>
       </Modal.Header>
-      <Modal.Body className="mb-4">
-        {templates.length === 0 ? (
-          <p className="text-center">No templates available. Please create a template first.</p>
+      <Modal.Body>
+        <Form className="mb-3">
+          <Form.Group>
+            <Form.Control
+              type="text"
+              placeholder="Search templates..."
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value)
+              }}
+            />
+          </Form.Group>
+        </Form>
+
+        <Nav variant="tabs" className="mb-3">
+          <Nav.Item>
+            <Nav.Link 
+              active={activeTab === 'all'} 
+              onClick={() => {
+                setActiveTab('all')
+              }}
+            >
+              All Templates
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link 
+              active={activeTab === 'mine'} 
+              onClick={() => {
+                setActiveTab('mine')
+              }}
+            >
+              My Templates
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link 
+              active={activeTab === 'public'} 
+              onClick={() => {
+                setActiveTab('public')
+              }}
+            >
+              Public Templates
+            </Nav.Link>
+          </Nav.Item>
+        </Nav>
+
+        {templatesForActiveTab.length === 0 ? (
+          <p className="text-center py-3">
+            {activeTab === 'mine' 
+              ? "You don't have any templates yet." 
+              : activeTab === 'public' 
+                ? "No public templates found." 
+                : "No templates found."}
+          </p>
         ) : (
           <Table striped bordered hover responsive>
             <thead>
@@ -38,7 +127,7 @@ export function TemplateSelectionModal({
               </tr>
             </thead>
             <tbody>
-              {templates.map(template => (
+              {templatesForActiveTab.map(template => (
                 <tr key={template.id}>
                   <td className="text-center">
                     <Button
diff --git a/src/pages/MyApps.tsx b/src/pages/MyApps.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useAccount, useSignMessage } from 'wagmi'
 import { Alert, Button } from 'react-bootstrap'
-import { getMyApps, deleteApp, getMyTemplates } from '../services/api'
+import { getMyApps, deleteApp, getAllTemplatesForUser } from '../services/api'
 import type { App, Template } from '../services/api'
 import { AppList } from '../components/AppList'
 import { Pagination } from '../components/Pagination'
@@ -48,8 +48,10 @@ export function MyApps(): React.JSX.Element {
 
     setIsLoading(true)
     try {
-      const templates = await getMyTemplates(address)
-      setTemplates(templates)
+      // Get both user templates and public templates in a single request
+      const combinedTemplates = await getAllTemplatesForUser(address)
+      // Combine userTemplates and publicTemplates for the selection modal
+      setTemplates([...combinedTemplates.userTemplates, ...combinedTemplates.publicTemplates])
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to load templates'
       setError(errorMessage)
diff --git a/src/pages/__tests__/MyApps.test.tsx b/src/pages/__tests__/MyApps.test.tsx
@@ -20,7 +20,7 @@ vi.mock('../../services/api', () => ({
   getMyApps: vi.fn(),
   deleteApp: vi.fn(),
   createApp: vi.fn(),
-  getMyTemplates: vi.fn(),
+  getAllTemplatesForUser: vi.fn(),
 }))
 
 describe('MyApps Component', () => {
@@ -40,7 +40,10 @@ describe('MyApps Component', () => {
     })
     ;(api.checkUserRegistration as Mock).mockResolvedValue(true)
     ;(api.getMyApps as Mock).mockResolvedValue([])
-    ;(api.getMyTemplates as Mock).mockResolvedValue([])
+    ;(api.getAllTemplatesForUser as Mock).mockResolvedValue({
+      userTemplates: [],
+      publicTemplates: [],
+    })
   })
 
   it('displays loading state initially', () => {
@@ -49,7 +52,7 @@ describe('MyApps Component', () => {
         /* never resolves */
       }),
     )
-    ;(api.getMyTemplates as Mock).mockReturnValue(
+    ;(api.getAllTemplatesForUser as Mock).mockReturnValue(
       new Promise(() => {
         /* never resolves */
       }),
diff --git a/src/services/api.ts b/src/services/api.ts
@@ -552,3 +552,41 @@ export async function getWinners(): Promise<WinnersResponse> {
     throw error
   }
 }
+
+/**
+ * Interface for combined templates response
+ */
+export interface CombinedTemplatesResponse {
+  userTemplates: Template[]
+  publicTemplates: Template[]
+}
+
+/**
+ * Get both user's templates and public templates in a single request
+ * @param {string} address - User's wallet address
+ * @returns {Promise<CombinedTemplatesResponse>} Object with userTemplates and publicTemplates arrays
+ */
+export async function getAllTemplatesForUser(address: string): Promise<CombinedTemplatesResponse> {
+  if (!address) {
+    throw new Error('Wallet address is required')
+  }
+
+  try {
+    const response = await fetch(`/api/templates/all-templates?address=${address}`, {
+      headers: {
+        'x-wallet-address': address,
+      },
+    })
+
+    if (!response.ok) {
+      const errorData = (await response.json()) as ApiErrorResponse
+      throw new Error(errorData.error || `HTTP error! status: ${String(response.status)}`)
+    }
+
+    const data = (await response.json()) as CombinedTemplatesResponse
+    return data
+  } catch (error) {
+    console.error('Error fetching templates:', error)
+    throw error
+  }
+}
