Soroka 67 Connecting covers in card lists (#49)

SOROKA-67: Connecting covers in card lists
dh-center · Nov 29, 2022 · 647ce3f · 647ce3f
1 parent bc5e0bb
commit 647ce3f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/src/components/dashboard/ListCard.css b/src/components/dashboard/ListCard.css
@@ -0,0 +1,5 @@
+.list-card {
+    height: 150px;
+    background-color: #ffffff;
+    object-fit: cover;
+}
diff --git a/src/components/dashboard/ListCard.tsx b/src/components/dashboard/ListCard.tsx
@@ -1,32 +1,53 @@
-import React from 'react'
 import { Badge, Card, Container } from 'react-bootstrap'
 import { CardImage } from 'react-bootstrap-icons'
 import { FormattedMessage } from 'react-intl'
 import { useNavigate } from 'react-router-dom'
 import { getCardById } from 'utils/urls'
+import './ListCard.css'
 
 type ListCardProps = {
     id: number
     name: string
     isFilled: boolean
+    cover: string | null
 }
 
-const ListCard = ({ id, name, isFilled = true }: ListCardProps) => {
+const ListCard = ({ id, name, isFilled = true, cover = null }: ListCardProps) => {
     const navigate = useNavigate()
 
+    let cardCover = ''
+    if (cover) {
+        try {
+            const fileJSON = JSON.parse(cover)
+            cardCover = fileJSON.url
+        } catch (e) {
+            console.warn('There is a problem with cover:', cover)
+        }
+    }
+
+    const badgeElement = !isFilled && (
+        <Container className="position-absolute bottom-0 start-0 p-2 d-flex justify-content-end">
+            <Badge bg="warning" text="dark">
+                <FormattedMessage id="notFilled" />
+            </Badge>
+        </Container>
+    )
+
     return (
         <Card onClick={() => navigate(getCardById(id))} role="button">
-            <Card.Img as={Container} variant="top" className="position-relative">
-                <div style={{ height: '150px', backgroundColor: 'white' }}></div>
-                <CardImage size={48} color="black" className="position-absolute top-50 start-50 translate-middle" />
-                {!isFilled && (
-                    <Container className="position-absolute bottom-0 start-0 p-2 d-flex justify-content-end">
-                        <Badge bg="warning" text="dark">
-                            <FormattedMessage id="notFilled" />
-                        </Badge>
-                    </Container>
-                )}
-            </Card.Img>
+            {cardCover ? (
+                <>
+                    <Card.Img variant="top" className="position-relative list-card" src={cardCover} />
+                    {badgeElement}
+                </>
+            ) : (
+                <Card.Img as={Container} variant="top" className="position-relative">
+                    <div className="list-card"></div>
+                    <CardImage size={48} color="black" className="position-absolute top-50 start-50 translate-middle" />
+                    {badgeElement}
+                </Card.Img>
+            )}
+
             <Card.Footer>{name}</Card.Footer>
         </Card>
     )

diff --git a/src/components/dashboard/ListOfCards.tsx b/src/components/dashboard/ListOfCards.tsx
@@ -55,9 +55,9 @@ const ListOfCards = () => {
 
             <Row xs={1} sm={3} md={4} lg={5} xl={6} className="g-2">
                 {hasCards ? (
-                    cards.results.map(({ id, name, isFilled }) => (
+                    cards.results.map(({ id, name, isFilled, cover }) => (
                         <Col key={id}>
-                            <ListCard id={id} name={name} isFilled={isFilled} />
+                            <ListCard id={id} name={name} isFilled={isFilled} cover={cover} />
                         </Col>
                     ))
                 ) : (