animations list

web/src/pages/animations/animations.tsx

@@ -23,16 +23,18 @@ import { FaPlay, FaTrash } from 'react-icons/fa'
 import { Animation, Pattern } from 'src/models'
 import { GetPatternQuery } from '../patterns/query-builder'
 import { AddAnimationModal } from './add-animation'
+import { GetAnimationsQuery } from './query-builder'
 
-const tableHeaders = ['Titulo', 'Descripcion', 'Fecha de creacion', '']
+const tableHeaders = ['Nombre', 'Descripcion', '']
 
 export type AnimationsProps = {
   patternId: Pattern['id']
 }
 export const Animations: React.FC<AnimationsProps> = ({ patternId }) => {
   const patternQuery = GetPatternQuery.useQuery({ id: patternId })
+  const animationsQuery = GetAnimationsQuery.useQuery({ patternId })
   const addAnimationDisclosure = useDisclosure()
-  const animations = []
+  const animations = animationsQuery.data ?? []
 
   const tableCaption =
     animations.length === 0
@@ -53,8 +55,8 @@ export const Animations: React.FC<AnimationsProps> = ({ patternId }) => {
           </Thead>
           <Tbody>
             {animations.map((animation, index) => (
-              <Tr key={`animation-${animation.title}-${index}`}>
-                <Td>{animation.title}</Td>
+              <Tr key={`animation-${animation.name}-${index}`}>
+                <Td>{animation.name}</Td>
                 <Td>
                   <Tooltip label={animation.description} hasArrow>
                     <Text isTruncated maxW="sm">
@@ -62,7 +64,6 @@ export const Animations: React.FC<AnimationsProps> = ({ patternId }) => {
                     </Text>
                   </Tooltip>
                 </Td>
-                <Td>{new Date(animation.creationDate).toUTCString()}</Td>
                 <Td>
                   <ActionsRow _animation={animation} />
                 </Td>

web/src/pages/animations/query-builder/get-animations-query.ts

+import { AxiosError } from 'axios'
+import { useQuery as useRQ, UseQueryOptions } from 'react-query'
+
+import { Animation, Pattern } from 'src/models'
+import axiosService from 'src/services/axios-service'
+
+export namespace GetAnimationsQuery {
+  export type Params = { patternId: Pattern['id'] }
+
+  export type Response = Animation[]
+
+  export const key = ['animations']
+
+  export const getKey = (params: Params) => [...key, params]
+
+  export const queryFn = (params: Params) =>
+    axiosService
+      .get<Response>(`/patterns/${params.patternId}/animations`)
+      .then((res) => res.data)
+
+  export const useQuery = <Select = Response>(
+    params: Params,
+    options: UseQueryOptions<Response, AxiosError, Select> = {}
+  ) => {
+    return useRQ(getKey(params), () => queryFn(params), {
+      ...options,
+    })
+  }
+}

web/src/pages/animations/query-builder/index.ts

 export * from './create-animation-mutation'
+export * from './get-animations-query'