316-delete-mocks (IT-Academy-BCN#320)

mitild · Jun 28, 2023 · fb47c81 · fb47c81
1 parent d040181
commit fb47c81
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 411 deletions.
diff --git a/front/src/__tests__/pages/Resource.test.tsx → front/src/__tests__/pages/Category.test.tsx b/front/src/__tests__/pages/Resource.test.tsx → front/src/__tests__/pages/Category.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/react'
 import { vi } from 'vitest'
 import { render, screen } from '../test-utils'
-import { Resource } from '../../pages'
+import { Category } from '../../pages'
 
 vi.mock('react-router-dom', async () => {
   const actual: Record<number, unknown> = await vi.importActual(
@@ -15,15 +15,15 @@ vi.mock('react-router-dom', async () => {
 
 describe('Resource', () => {
   it('renders correctly', () => {
-    render(<Resource />)
+    render(<Category />)
 
-    expect(screen.getByText(/temas/i)).toBeInTheDocument()
+    expect(screen.getByTestId('category-title')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: '+' })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Cursos' })).toBeInTheDocument()
   })
 
   it('modal opens and closes correctly', () => {
-    render(<Resource />)
+    render(<Category />)
 
     fireEvent.click(screen.getByRole('button', { name: /\+/i }))
     const modalTitle = screen.getByRole('heading', {

diff --git a/front/src/components/organisms/index.ts b/front/src/components/organisms/index.ts
@@ -6,6 +6,8 @@ import { TopicsRadioWidget } from './TopicsRadioWidget'
 import { Navbar } from './Navbar'
 import { MyFavoritesList } from './MyFavoritesList'
 import { MyResources } from './MyResources'
+import Login from './Login'
+import Register from './Register'
 
 export {
   ResourceCardList,
@@ -16,4 +18,6 @@ export {
   ResourceForm,
   Navbar,
   MyFavoritesList,
+  Login,
+  Register,
 }
diff --git a/front/src/pages/Category.tsx b/front/src/pages/Category.tsx
@@ -1,77 +1,30 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { Link, useLocation, useParams } from 'react-router-dom'
 import styled from 'styled-components'
+import { useQuery } from '@tanstack/react-query'
 import { FlexBox, colors, device, dimensions } from '../styles'
-import { Icon, Text, Title } from '../components/atoms'
+import { Button, Icon, Text, Title } from '../components/atoms'
 import {
   InputGroup,
+  Modal,
+  SelectGroup,
   StatusFilterWidget,
   TypesFilterWidget,
 } from '../components/molecules'
 import {
   CategoriesList,
   MyFavoritesList,
   MyResources,
+  Navbar,
   ResourceCardList,
+  ResourceForm,
   TopicsRadioWidget,
+  Login,
+  Register,
 } from '../components/organisms'
-import { Resource } from './Resource'
 import icons from '../assets/icons'
-import { paths } from '../constants'
-
-type TFakeResource = {
-  id: string
-  title: string
-  createdBy: string
-  createdOn: string
-  description: string
-  img: string
-  url: string
-  likes: number
-}
-
-export const resources: TFakeResource[] = [
-  {
-    id: 'resourceId1',
-    title: 'JavaScript en 45 segundos!',
-    createdBy: 'Ona Costa',
-    createdOn: '1995-12-17T03:07:00',
-    description: 'Proyecto práctico',
-    img: icons.profileAvatar,
-    url: 'https://www.google.com/search?q=link1',
-    likes: 5,
-  },
-  {
-    id: 'resourceId2',
-    title: 'REST API de cero a  ninja!',
-    createdBy: 'Ona Costa',
-    createdOn: '1995-12-17T03:07:00',
-    description: 'Teoria con ejemplos',
-    img: icons.profileAvatar,
-    url: 'https://www.google.com/search?q=link2',
-    likes: 22,
-  },
-  {
-    id: 'resourceId3',
-    title: 'Context en 5 minutos!',
-    createdBy: 'Ona Costa',
-    createdOn: '1995-12-17T03:07:00',
-    description: 'Teoria con ejemplos',
-    img: icons.profileAvatar,
-    url: 'https://www.google.com/search?q=link3',
-    likes: 56,
-  },
-  {
-    id: 'resourceId4',
-    title: 'Redux para principiantes!',
-    createdBy: 'Ona Costa',
-    createdOn: '1995-12-17T03:07:00',
-    description: 'Teoria con ejemplos',
-    img: icons.profileAvatar,
-    url: 'https://www.google.com/search?q=link4',
-    likes: 125,
-  },
-]
+import { paths, urls } from '../constants'
+import { useAuth } from '../context/AuthProvider'
 
 export const MobileStyled = styled.div`
   display: block;
@@ -161,10 +114,123 @@ const MiddleColumnContainer = styled(FlexBox)`
 `
 // END style Desktop
 
+const HeaderContainerStyled = styled(FlexBox)`
+  background-color: ${colors.gray.gray5};
+  padding: 5rem ${dimensions.spacing.base} ${dimensions.spacing.xl};
+  ${SelectGroup} {
+    border-radius: ${dimensions.borderRadius.sm};
+    color: ${colors.black.black1};
+    font-weight: 700;
+  }
+`
+const ButtonAddStyled = styled(Button)`
+  border-radius: 50%;
+  font-size: xx-large;
+  font-weight: 400;
+  height: 52px;
+  width: 52px;
+`
+
+const ButtonStyled = styled(Button)`
+  margin: ${dimensions.spacing.none};
+`
+
+const ButtonContainterStyled = styled(FlexBox)`
+  margin-top: 0.8rem;
+
+  ${Button} {
+    background-color: ${colors.white};
+    border-radius: ${dimensions.borderRadius.sm};
+    border: none;
+    color: ${colors.gray.gray3};
+    font-weight: 500;
+    padding: ${dimensions.spacing.xs} ${dimensions.spacing.base};
+    width: fit-content;
+
+    &:hover {
+      background-color: ${colors.primary};
+      border: none;
+      color: ${colors.white};
+    }
+  }
+`
+
+const SubHeaderContainerStyled = styled(FlexBox)`
+  padding: ${dimensions.spacing.base};
+`
+
+const TextContainerStyled = styled(FlexBox)`
+  gap: 0.8rem;
+`
+const ImgStyled = styled.img`
+  height: 100px;
+  width: 100px;
+`
+
+const TextStyled = styled(Text)`
+  text-align: center;
+  font-weight: 500;
+  margin: 0 auto ${dimensions.spacing.xxl} auto;
+`
+
+const RestrictedStyled = styled(FlexBox)`
+  gap: ${dimensions.spacing.sm};
+  padding: ${dimensions.spacing.lg};
+`
+
+const TitleStyled = styled(Title)`
+  width: 100%;
+  text-align: center;
+`
+
+type TMappedTopics = {
+  id: string
+  name: string
+}
+
 const Category: FC = () => {
   const { state } = useLocation()
   const { slug } = useParams()
 
+  const { user } = useAuth()
+  const [isRegisterOpen, setIsRegisterOpen] = useState(false)
+  const [isLoginOpen, setIsLoginOpen] = useState(false)
+
+  const handleRegisterModal = () => {
+    setIsRegisterOpen(!isRegisterOpen)
+  }
+
+  const handleLoginModal = () => {
+    setIsLoginOpen(!isLoginOpen)
+  }
+
+  const getTopics = () =>
+    fetch(`${urls.getTopics}?slug=${slug}`)
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`Error fetching topics: ${res.statusText}`)
+        }
+        return res.json()
+      })
+      .catch((err) => {
+        throw new Error(`Error fetching topics: ${err.message}`)
+      })
+
+  const { data: fetchedTopics } = useQuery({
+    queryKey: ['getTopics', slug],
+    queryFn: getTopics,
+  })
+
+  const mappedTopics = fetchedTopics?.topics.map((topic: TMappedTopics) => {
+    const selectOptions = { value: topic.id, label: topic.name }
+    return selectOptions
+  })
+
+  const [isOpen, setIsOpen] = useState(false)
+  const openModal = () => {
+    setIsOpen(!isOpen)
+  }
+
   const handleTypesFilter = (selectedTypes: string[]) => {
     // TODO: Use this info to filter resources by type
     // eslint-disable-next-line no-console
@@ -180,7 +246,115 @@ const Category: FC = () => {
   return (
     <>
       <MobileStyled>
-        <Resource />
+        <HeaderContainerStyled align="stretch">
+          <Navbar title="Wiki" />
+          <FlexBox direction="row" justify="space-between">
+            <Title as="h1" fontWeight="bold" data-testid="category-title">
+              Recursos de {slug}
+            </Title>
+            <ButtonAddStyled onClick={openModal}>+</ButtonAddStyled>
+
+            {/* TODO: MOVE MODALS TO SEPARATE ORGANISMS */}
+            {user ? (
+              // ADD RESOURCE MODAL
+              <Modal
+                isOpen={isOpen}
+                toggleModal={() => setIsOpen(false)}
+                title="Nuevo Recurso"
+              >
+                <ResourceForm selectOptions={mappedTopics} />
+                <ButtonStyled outline onClick={() => setIsOpen(false)}>
+                  Cancelar
+                </ButtonStyled>
+              </Modal>
+            ) : (
+              // RESTRICTED ACCESS MODAL
+              <>
+                <Modal isOpen={isOpen} toggleModal={() => setIsOpen(false)}>
+                  <RestrictedStyled justify="space-between">
+                    <ImgStyled src={icons.lockDynamic} />
+                    <TitleStyled as="h2" fontWeight="bold">
+                      Acceso restringido
+                    </TitleStyled>
+                    <TextStyled>
+                      Regístrate para subir o votar contenido
+                    </TextStyled>
+                    <ButtonStyled
+                      onClick={() => {
+                        setIsOpen(false)
+                        handleRegisterModal()
+                      }}
+                    >
+                      Registrarme
+                    </ButtonStyled>
+                    <ButtonStyled
+                      outline
+                      onClick={() => {
+                        setIsOpen(false)
+                        handleLoginModal()
+                      }}
+                    >
+                      Entrar
+                    </ButtonStyled>
+                  </RestrictedStyled>
+                </Modal>
+                <Modal
+                  isOpen={isLoginOpen || isRegisterOpen}
+                  toggleModal={() =>
+                    isLoginOpen
+                      ? setIsLoginOpen(false)
+                      : setIsRegisterOpen(false)
+                  }
+                >
+                  {isLoginOpen && (
+                    <Login
+                      handleLoginModal={handleLoginModal}
+                      handleRegisterModal={handleRegisterModal}
+                    />
+                  )}
+                  {isRegisterOpen && (
+                    <Register
+                      handleLoginModal={handleLoginModal}
+                      handleRegisterModal={handleRegisterModal}
+                    />
+                  )}
+                </Modal>
+              </>
+            )}
+          </FlexBox>
+
+          <Text fontWeight="bold">Temas</Text>
+
+          <SelectGroup
+            label="Context API"
+            placeholder="Selecciona tema"
+            id="theme"
+            name="theme"
+            options={mappedTopics}
+            color="blue"
+          />
+
+          <ButtonContainterStyled
+            direction="row"
+            align="start"
+            justify="flex-start"
+          >
+            <Button>Vídeos</Button>
+            <Button>Cursos</Button>
+            <Button>Blogs</Button>
+          </ButtonContainterStyled>
+        </HeaderContainerStyled>
+
+        <SubHeaderContainerStyled direction="row" justify="space-between">
+          <Text fontWeight="bold">23 resultados</Text>
+
+          <TextContainerStyled direction="row">
+            <Text fontWeight="bold">Votos ↓</Text>
+
+            <Text color={colors.gray.gray3}>Fecha</Text>
+          </TextContainerStyled>
+        </SubHeaderContainerStyled>
+        <ResourceCardList />
       </MobileStyled>
       <DesktopStyled>
         <MainContainer>