Merge pull request #33 from NicolasOmar/feature/created-pets-widget

Feature | Create Widget to look created Pets and its composition | Front end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-pets",
-  "version": "0.1.82",
+  "version": "0.2.0",
   "author": "Nicolás Omar González Passerino",
   "license": "MIT",
   "private": false,

src/components/app/app.test.js

@@ -1,17 +1,17 @@
 import { render, screen } from '@testing-library/react'
 import { MockedProvider } from '@apollo/client/testing'
 import { Provider } from 'react-redux'
-import { createStore } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
 // REDUX
-import store from '../../redux/reducers'
+import reducer from '../../redux/reducers'
 // COMPONENTS
 import App from './app'
 
 describe.skip('[App]', () => {
   describe('[HAPPY PATH]', () => {
     test('Renders without props', () => {
       render(
-        <Provider store={createStore(store)}>
+        <Provider store={configureStore({ reducer })}>
           <MockedProvider mocks={[]} addTypefile={false}>
             <App />
           </MockedProvider>

src/components/atoms/Column/index.jsx

@@ -36,7 +36,7 @@ export default Column
 Column.propTypes = {
   _key: string.isRequired,
   testId: string.isRequired,
-  width: oneOf(parseObjKeys(columnSizes, true)),
+  width: oneOf([...parseObjKeys(columnSizes, true), ...parseObjKeys(columnSizes)]),
   isCentered: bool,
   isContainer: bool,
   isMultiline: bool,

src/components/atoms/ProgressBar/index.jsx

@@ -10,7 +10,7 @@ const { colors, sizes } = BULMA_STYLES
 const ProgressBar = ({
   value = 0,
   maxValue = 100,
-  isLoading = false,
+  isInfiniteLoading = false,
   color = parseObjKeys(colors)[7],
   size = parseObjKeys(sizes)[1]
 }) => {
@@ -19,7 +19,7 @@ const ProgressBar = ({
     otherClasses: [colors[color], sizes[size]]
   })
 
-  return isLoading ? (
+  return isInfiniteLoading ? (
     <progress
       data-testid="test-loading-progress-bar"
       className={progressClasses}
@@ -43,7 +43,7 @@ ProgressBar.propTypes = {
   // BASE PROPS
   value: number,
   maxValue: number,
-  isLoading: bool,
+  isInfiniteLoading: bool,
   // STYLE PROPS
   color: oneOf(parseObjKeys(colors)),
   size: oneOf(parseObjKeys(sizes))

src/components/atoms/ProgressBar/index.mocks.json

@@ -8,7 +8,7 @@
   "isLargeSize": {
     "size": "large"
   },
-  "isLoading": {
-    "isLoading": true
+  "isInfiniteLoading": {
+    "isInfiniteLoading": true
   }
 }

src/components/atoms/ProgressBar/index.stories.jsx

@@ -45,9 +45,9 @@ IsLargeSize.args = {
   ...mocks.isLargeSize
 }
 
-export const isLoading = Template.bind({})
-isLoading.storyName = 'Is just loading'
-isLoading.args = {
+export const IsInfiniteLoading = Template.bind({})
+IsInfiniteLoading.storyName = 'With infinite loading'
+IsInfiniteLoading.args = {
   ...IsLargeSize.args,
-  ...mocks.isLoading
+  ...mocks.IsInfiniteLoading
 }

src/components/pages/Home/config.json

@@ -0,0 +1,27 @@
+{
+  "petPopulationWidget": {
+    "key": "widget-item",
+    "cardContent": [
+      {
+        "type": "title",
+        "content": {
+          "titleText": "My Pets",
+          "titleSize": "normal",
+          "styles": { "marginBottom": "20px" }
+        }
+      },
+      {
+        "type": "section",
+        "content": null
+      }
+    ]
+  },
+  "cardListTitle": {
+    "titleSize": "bigger",
+    "subText": "Welcome to our beautiful place",
+    "subSize": "small",
+    "isCentered": true,
+    "childWidth": 12,
+    "styles": { "margin": "20px 0px" }
+  }
+}

src/components/pages/Home/index.jsx

@@ -1,55 +1,80 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+// GRAPHQL CLIENT
+import { useLazyQuery } from '@apollo/client'
+import { GET_MY_PETS_POPULATION } from '../../../graphql/queries'
 // COMPONENTS
 import CardsListTemplate from '../../templates/CardsListTemplate'
 import TagList from '../../molecules/TagList'
-// HELPER FUNCTIONS
+import ProgressBar from '../../atoms/ProgressBar'
+// FUNCTIONS
 import { getLoggedUser } from '../../../functions/local-storage'
+// MOCKS
+import config from './config.json'
+
+const { cardListTitle, petPopulationWidget } = config
 
 const Home = () => {
   const [user] = useState(getLoggedUser())
-
-  const cardsListTitle = {
-    titleText: `HELLO ${user?.name?.toUpperCase()}`,
-    titleSize: 'bigger',
-    subText: 'Welcome to our beautiful place',
-    subSize: 'small',
-    isCentered: true,
-    childWidth: 12,
-    styles: { margin: '20px 0px' }
-  }
-
-  const cardListData = [
+  const [cardListData, setCardListData] = useState([
     {
-      key: `widget-item`,
+      ...petPopulationWidget,
       cardContent: [
+        petPopulationWidget.cardContent[0],
         {
-          type: 'title',
-          content: {
-            titleText: 'First widget test',
-            titleSize: 'normal',
-            styles: { marginBottom: '20px' }
-          }
-        },
-        {
-          type: 'section',
-          content: (
-            <TagList
-              {...{
-                dataList: Array(13)
-                  .fill(null)
-                  .map((_, i) => ({
-                    text: `widget-test-${++i}`,
-                    color: i % 2 ? 'success' : 'danger'
-                  }))
-              }}
-            />
-          )
+          ...petPopulationWidget.cardContent[1],
+          content: <ProgressBar isInfiniteLoading={true} />
         }
       ]
     }
-  ]
+  ])
+  const [getData, { data }] = useLazyQuery(GET_MY_PETS_POPULATION)
+
+  useEffect(() => {
+    const asyncGetData = async () => await getData()
+    asyncGetData()
+  }, [getData])
+
+  useEffect(() => {
+    if (data) {
+      const [all, ...pets] = data.getMyPetsPopulation
+      setCardListData([
+        {
+          ...petPopulationWidget,
+          cardContent: [
+            {
+              ...petPopulationWidget.cardContent[0],
+              content: {
+                ...petPopulationWidget.cardContent[0].content,
+                titleText: `${
+                  all.quantity === 0 ? `No created Pets yet` : `Created Pets: ${all.quantity}`
+                }`
+              }
+            },
+            {
+              ...petPopulationWidget.cardContent[1],
+              content: (
+                <TagList
+                  {...{
+                    dataList: pets.map(({ name, quantity }, i) => ({
+                      text: `${name}s: ${quantity}`,
+                      color: i % 2 ? 'success' : 'danger'
+                    }))
+                  }}
+                />
+              )
+            }
+          ]
+        }
+      ])
+    }
+  }, [data])
+
+  const cardsListTitle = {
+    ...cardListTitle,
+    titleText: `HELLO ${user?.name?.toUpperCase()}`
+  }
 
-  return <CardsListTemplate {...{ isFetching: false, cardsListTitle, cardListData }} />
+  return <CardsListTemplate {...{ cardsListTitle, cardListData }} />
 }
 
 export default Home

src/components/pages/Home/index.test.js

@@ -1,3 +1,4 @@
+import { MockedProvider } from '@apollo/client/testing'
 import { render, screen } from '@testing-library/react'
 // COMPONENTS
 import Home from '.'
@@ -12,7 +13,11 @@ describe('[Home]', () => {
   })
 
   test('Renders with a dummy logged User', () => {
-    render(<Home />)
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <Home />
+      </MockedProvider>
+    )
     expect(screen.getByText(`HELLO ${nameMock.toUpperCase()}`)).toBeInTheDocument()
   })
 })

src/components/pages/ListMyPets/index.test.js

@@ -17,7 +17,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockUseNavigate
 }))
 
-describe.skip('[ListMyPets]', () => {
+describe('[ListMyPets]', () => {
   test('Should render the page with its inputs', () => {
     render(
       <Provider store={configureStore({ reducer })}>
@@ -27,7 +27,7 @@ describe.skip('[ListMyPets]', () => {
       </Provider>
     )
 
-    expect(() => screen.getByText('My list of Pets')).toThrow()
-    expect(screen.getByTestId('test-progress-bar')).toBeInTheDocument()
+    expect(screen.getByText('My list of Pets')).toBeInTheDocument()
+    expect(screen.getByTestId('test-loading-progress-bar')).toBeInTheDocument()
   })
 })

src/components/templates/CardsListTemplate/index.jsx

@@ -40,7 +40,7 @@ const CardsListTemplate = ({
 }) => {
   const parseCardsList = () =>
     isFetching
-      ? [<ProgressBar key={`card-progress-bar`} isLoading={true} />]
+      ? [<ProgressBar key={`card-progress-bar`} isInfiniteLoading={true} />]
       : cardListData.map(
           ({ key, cardHeader, cardImage, cardContent, cardFooter, childWidth = 3 }, cardI) => {
             const cardConfig = {

src/graphql/queries.js

@@ -67,3 +67,12 @@ export const GET_PET = gql`
     }
   }
 `
+
+export const GET_MY_PETS_POPULATION = gql`
+  query {
+    getMyPetsPopulation {
+      name
+      quantity
+    }
+  }
+`