connect api

.env.dev

-REDWOOD_ENV_API_URL=https://localhost:8080
+REDWOOD_ENV_API_URL=https://localhost:8080/api

web/package.json

@@ -22,7 +22,8 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "ts-pattern": "^5.0.8"
   },
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.1.0",
@@ -31,8 +32,7 @@
     "@types/react-dom": "18.2.15"
   },
   "scripts": {
-    "start_new": "yarn run copy-env && rw dev",
-    "start_aux": "rw",
+    "start": "yarn run copy-env && rw dev",
     "test": "rw test a",
     "test:watch": "rw test --watch",
     "test-coverage": "rw test a --no-watch --collect-coverage",

web/public/env.js

-window.env = {"REDWOOD_ENV_API_URL":"http://localhost:8080"};
\ No newline at end of file
+window.env = {"REDWOOD_ENV_API_URL":"http://localhost:8080/api"};
\ No newline at end of file

web/scripts/copy-env.js

@@ -15,9 +15,6 @@ const convertFile = (source, destination) => {
     if (err) {
       throw err
     }
-
-    // eslint-disable-next-line no-console
-    console.log(`Converted ${source} to ${destination}`)
   })
 }
 

web/src/pages/Patterns/patterns.tsx

@@ -16,20 +16,20 @@ import {
   HStack,
   Icon,
   IconButton,
+  Spinner,
 } from '@chakra-ui/react'
 import { FaEdit, FaEye, FaPlus, FaTrash } from 'react-icons/fa'
 import { Link, routes } from '@redwoodjs/router'
 import { patterns } from '.'
 import { Pattern } from 'src/models'
 import { GetPatternsQuery } from './query-builder'
+import { match } from 'ts-pattern'
 
 const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']
 
 export const Patterns: React.FC = () => {
   const patternsQuery = GetPatternsQuery.useQuery({})
 
-  console.log({ status: patternsQuery.status, data: patternsQuery.data })
-
   return (
     <VStack alignItems="flex-start" spacing="0">
       <Heading as="h2" px="6">
@@ -46,30 +46,38 @@ export const Patterns: React.FC = () => {
             </Tr>
           </Thead>
           <Tbody>
-            {patterns.map((pattern, index) => (
-              <Tr key={`pattern-${pattern.title}-${index}`}>
-                <Td>
-                  <Link to={routes.pattern({ id: pattern.id })}>
-                    {pattern.title}
-                  </Link>
-                </Td>
-                <Td>
-                  <Tooltip label={pattern.description} hasArrow>
-                    <Text isTruncated maxW="sm">
-                      {pattern.description}
-                    </Text>
-                  </Tooltip>
-                </Td>
-                <Td>
-                  <Text textAlign="center">
-                    {pattern.numberOfImplementations}
-                  </Text>
-                </Td>
-                <Td>
-                  <ActionsRow pattern={pattern} />
-                </Td>
-              </Tr>
-            ))}
+            {match(patternsQuery)
+              .with({ status: 'success', data: [] }, () => (
+                <Text>No se encontraron patrones</Text>
+              ))
+              .with({ status: 'success' }, ({ data }) =>
+                data.map((pattern, index) => (
+                  <Tr key={`pattern-${pattern.title}-${index}`}>
+                    <Td>
+                      <Link to={routes.pattern({ id: pattern.id })}>
+                        {pattern.title}
+                      </Link>
+                    </Td>
+                    <Td>
+                      <Tooltip label={pattern.description} hasArrow>
+                        <Text isTruncated maxW="sm">
+                          {pattern.description}
+                        </Text>
+                      </Tooltip>
+                    </Td>
+                    <Td>
+                      <Text textAlign="center">
+                        {pattern.numberOfImplementations}
+                      </Text>
+                    </Td>
+                    <Td>
+                      <ActionsRow pattern={pattern} />
+                    </Td>
+                  </Tr>
+                ))
+              )
+              .with({ status: 'loading' }, () => <Spinner />)
+              .otherwise(() => null)}
           </Tbody>
         </Table>
       </TableContainer>

web/src/services/axios-service.ts

 import axios from 'axios'
 
 const axiosService = axios.create({
-  baseURL: process.env.REDWOOD_ENV_API_URL || 'https://localhost:8080',
+  baseURL: process.env.REDWOOD_ENV_API_URL || 'https://localhost:8080/api',
 })
 
 export default axiosService

yarn.lock

@@ -23685,6 +23685,13 @@ __metadata:
   languageName: node
   linkType: hard
+"ts-pattern@npm:^5.0.8":
+  version: 5.0.8
+  resolution: "ts-pattern@npm:5.0.8"
+  checksum: c0767f4a4ce960cc87e69274f750d4672e37e865b779f8aed472fb22566baaedd584caf7dfd454905c25138aabe88f3abb5c2351487b223e822a3affae9611eb
+  languageName: node
+  linkType: hard
+
 "ts-toolbelt@npm:9.6.0":
   version: 9.6.0
   resolution: "ts-toolbelt@npm:9.6.0"
@@ -24650,6 +24657,7 @@ __metadata:
     react: 18.2.0
     react-dom: 18.2.0
     react-query: ^3.39.3
+    ts-pattern: ^5.0.8
   languageName: unknown
   linkType: soft