From 80c5e89cc2d78424860018212309fece74613686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Santos=20Sousa?= <m_santos_sousa@hotmail.com>
Date: Sat, 7 Sep 2024 10:27:22 +0100
Subject: [PATCH] Dowload e-cordel and add new fields to review page (#46)

---
 src/components/CordelCard/index.tsx           | 44 +++++----------
 .../CordelCard/tests/CordelCard.test.tsx      | 24 ---------
 src/components/CordelGridViewer/index.tsx     |  4 +-
 .../CordelViewer/TextBlockUtils.tsx           | 12 +++--
 src/components/CordelViewer/index.tsx         | 53 +++++++++++--------
 .../CordelViewer/tests/TextBlockUtils.test.ts |  9 ++--
 src/pages/cordels/review/CordelReview.tsx     | 46 +++++++++++++---
 src/theme.tsx                                 | 21 ++------
 src/types/index.ts                            |  4 ++
 9 files changed, 108 insertions(+), 109 deletions(-)
 delete mode 100644 src/components/CordelCard/tests/CordelCard.test.tsx

diff --git a/src/components/CordelCard/index.tsx b/src/components/CordelCard/index.tsx
index cf90f87..fdcff67 100644
--- a/src/components/CordelCard/index.tsx
+++ b/src/components/CordelCard/index.tsx
@@ -2,61 +2,41 @@ import {
   Button,
   Card,
   CardActions,
-  CardContent,
+  CardHeader,
   CardMedia,
-  Link,
-  Typography,
 } from "@mui/material";
 import { useNavigate } from "react-router";
+import { CordelSummary } from "../../types";
 
 interface CordelCardProps {
-  id: number;
-  title: string;
-  authorName: string;
-  xilogravuraUrl: string;
-  authorId: number;
+  cordel: CordelSummary;
 }
 
-export default function CordelCard({
-  id,
-  title,
-  authorName,
-  authorId,
-  xilogravuraUrl,
-}: CordelCardProps) {
+export default function CordelCard({cordel}: CordelCardProps) {
   const navigate = useNavigate();
 
   const handleCordel = () => {
-    navigate(`/cordeis/${id}`);
+    navigate(`/cordeis/${cordel.id}`);
   };
 
   return (
     <Card
       sx={{
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
+        height: "100%"
       }}
     >
+      <CardHeader  title={cordel.title} subheader={cordel.authorName} />
       <CardMedia
         sx={{
           paddingTop: "100%",
         }}
-        image={xilogravuraUrl ? xilogravuraUrl : "/cover_not_found.png"}
+        image={cordel.xilogravuraUrl ? cordel.xilogravuraUrl : "/cover_not_found.png"}
         title="Image title"
       />
-      <CardContent sx={{ flexGrow: 1 }}>
-        <Typography gutterBottom variant="subtitle1" component="h2">
-          {title}
-        </Typography>
-        <Typography variant="subtitle2">
-          <Link href={`/autores/${authorId}`} underline="none">{authorName}</Link>
-        </Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="small" color="primary" onClick={handleCordel}>
-          Visualizar
-        </Button>
+      <CardActions >
+          <Button size="small" onClick={handleCordel}>
+            Visualizar
+          </Button>
       </CardActions>
     </Card>
   );
diff --git a/src/components/CordelCard/tests/CordelCard.test.tsx b/src/components/CordelCard/tests/CordelCard.test.tsx
deleted file mode 100644
index 1fe0640..0000000
--- a/src/components/CordelCard/tests/CordelCard.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { BrowserRouter } from "react-router-dom";
-import CordelCard from "..";
-import { render, screen } from "@testing-library/react";
-
-describe("CordelCard component", () => {
-  
-  it("should render a link with author id", async () => {
-    const summary = {
-      id: 1,
-      authorId:2,
-      authorName: "author",
-      title: "title",
-      xilogravuraUrl: ""
-    }
-    render(
-      <BrowserRouter>
-        <CordelCard {...summary} ></CordelCard>
-      </BrowserRouter>
-    );
-
-    const authorLink = await screen.findAllByRole("link", { name: "author"})
-    expect(authorLink).toBeInTheDocument
-  })
-})
\ No newline at end of file
diff --git a/src/components/CordelGridViewer/index.tsx b/src/components/CordelGridViewer/index.tsx
index c9b570c..f9a6d9f 100644
--- a/src/components/CordelGridViewer/index.tsx
+++ b/src/components/CordelGridViewer/index.tsx
@@ -10,9 +10,7 @@ export const CordelGridViewer = ({cordels}: any) => {
             cordels?.map(
                 ( cordel: CordelSummary) => (
                     <Grid item key={cordel.id} xs={12} sm={6} md={4}>
-                        <CardCordel
-                            {...cordel}
-                        ></CardCordel>
+                        <CardCordel cordel={cordel}></CardCordel>
                     </Grid>
                 )
             )
diff --git a/src/components/CordelViewer/TextBlockUtils.tsx b/src/components/CordelViewer/TextBlockUtils.tsx
index 19718d1..c45c33a 100644
--- a/src/components/CordelViewer/TextBlockUtils.tsx
+++ b/src/components/CordelViewer/TextBlockUtils.tsx
@@ -1,15 +1,21 @@
+import { Typography } from "@mui/material";
 import React from "react";
 
-export const toParagraphs = (fullText: string): JSX.Element[] => {
+export const toParagraphs = (fullText: string) => {
   const indexOfBlock = fullText.indexOf('\n\n')
+  // TODO review. Usar campo source do cordel
   const indexOfSource = fullText.indexOf('Fonte:')
 
   const text = indexOfSource === -1 ? fullText : fullText.substring(0, indexOfSource)
 
+  let paragraphs = [<p role='paragraph'>{fullText}</p>];
   if (indexOfBlock >= 0) {
-    return text.split('\n\n').map((block, index) => (<p key={`block-${index}`}>{toLines(block)}</p>));
+    paragraphs = text.split('\n\n').map((block, index) => (<p key={`block-${index}`} role='paragraph'>{toLines(block)}</p>));
   }
-  return ([<p>{fullText}</p>]);
+  return <section>
+    <Typography variant="h5">Texto do cordel</Typography>
+    {paragraphs}
+  </section>;
 }
 
 export const toLines = (textBlock: string) => {
diff --git a/src/components/CordelViewer/index.tsx b/src/components/CordelViewer/index.tsx
index 4e4cab8..8c718be 100644
--- a/src/components/CordelViewer/index.tsx
+++ b/src/components/CordelViewer/index.tsx
@@ -1,7 +1,8 @@
-import { Card, Container, Link, Skeleton, Typography as T, useTheme } from "@mui/material";
+import { Box, Button, Container, Link, Skeleton, Typography as T, useTheme } from "@mui/material";
 import { useMemo } from "react";
-import { getSourceLink, toParagraphs } from "./TextBlockUtils";
+import { toParagraphs } from "./TextBlockUtils";
 import { Cordel } from "../../types";
+import { Download } from "@mui/icons-material";
 
 type CordelViewerProps = {
   cordel: Cordel
@@ -11,31 +12,39 @@ export const CordelViewer = ({ cordel }: CordelViewerProps) => {
 
   const theme = useTheme();
   const paragraphs = useMemo(() => toParagraphs(cordel.content), [cordel]);
-  const sourceLink = useMemo(() => getSourceLink(cordel.content), [cordel]);
 
   return (
-    <Container component="main" maxWidth="xs" sx={{
-      marginTop: theme.spacing(3),
-      marginBottom: theme.spacing(3),
-    }}>
+    <Container component="main"
+      sx={{
+        marginTop: theme.spacing(3),
+        marginBottom: theme.spacing(3),
+      }}
+    >
       <T variant="h3" >{cordel.title} </T>
-      <Link variant="subtitle1" underline="none" href={`/autores/${cordel.author.id}`}>{cordel.author.name}</Link>
-      <Card sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: theme.spacing(3)
-      }}>
-        <img
-          src={cordel.xilogravuraUrl}
-          alt={cordel.title}
-          style={{
-            flex: 1,
-          }} />
-      </Card>
+
+      <Box
+        component="img"
+        src={cordel.xilogravuraUrl}
+        alt={cordel.title}
+        sx={{
+          width: '100%',
+          maxWidth: '400px',
+          height: 'auto',
+          borderRadius: '8px',
+          marginBottom: '10px'
+        }}
+      />
+
+      <T variant="body1" paragraph >{cordel.description}</T>
+      <T variant="subtitle2">Autor: <Link underline="none" href={`/autores/${cordel.author.id}`}>{cordel.author.name}</Link></T>
+      {cordel.year && <T variant="subtitle2">Publicado em: {cordel.year}</T>}
+      {cordel.source && <T variant="subtitle2">Fonte: {cordel.source}</T>}
+      {cordel.ebookUrl && <Button href={cordel.ebookUrl} variant="outlined" endIcon={<Download />}>
+        Baixar e-cordel
+      </Button>}
 
       {paragraphs}
-      {sourceLink}
+
     </Container>);
 }
 
diff --git a/src/components/CordelViewer/tests/TextBlockUtils.test.ts b/src/components/CordelViewer/tests/TextBlockUtils.test.ts
index 04b882d..34b0d24 100644
--- a/src/components/CordelViewer/tests/TextBlockUtils.test.ts
+++ b/src/components/CordelViewer/tests/TextBlockUtils.test.ts
@@ -1,16 +1,19 @@
 import { getSourceLink, toParagraphs, toLines } from "../TextBlockUtils";
+import {render, screen} from "@testing-library/react"
 
 describe('paragraphs', () => {
 
   it('should build paragraphs', () => {
     const textWithParagraphs = 'Lorem ipsum dolor sit amet,\n consectetur adipiscing elit,\n sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n Donec pretium vulputate sapien\n nec sagittis aliquam malesuada bibendum.\n Ut diam quam nulla porttitor massa id neque.\n Cras tincidunt lobortis feugiat vivamus at.'
-    const paragraphs = toParagraphs(textWithParagraphs);
+    render(toParagraphs(textWithParagraphs));
+    const paragraphs = screen.getAllByRole("paragraph");
     expect(paragraphs).toHaveLength(2);
   });
 
   it('should build text with a single paragraph', () => {
     const textWithoutParagraphs = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dui est, pellentesque non sagittis nec, volutpat id ante. In pharetra lacus tortor, vitae bibendum erat mattis a. Etiam efficitur lacinia ipsum quis elementum'
-    const paragraphs = toParagraphs(textWithoutParagraphs);
+    render(toParagraphs(textWithoutParagraphs));
+    const paragraphs = screen.getAllByRole("paragraph");
     expect(paragraphs).toHaveLength(1);
   });
 
@@ -46,4 +49,4 @@ describe('line breaks', () => {
     const text = toLines(textblockWithoutLineBreaks);
     expect(text).toBe(textblockWithoutLineBreaks)
   });
-})
\ No newline at end of file
+})
diff --git a/src/pages/cordels/review/CordelReview.tsx b/src/pages/cordels/review/CordelReview.tsx
index d6d4ce8..24e7196 100644
--- a/src/pages/cordels/review/CordelReview.tsx
+++ b/src/pages/cordels/review/CordelReview.tsx
@@ -26,7 +26,10 @@ interface CordelReviewValues {
   title: string;
   content: string;
   published: boolean;
-  xilogravuraUrl: string
+  xilogravuraUrl: string;
+  year: number;
+  ebookUrl: string;
+  source: string;
 }
 
 interface CordelUpdateValues {
@@ -91,15 +94,13 @@ export default function CordelReview() {
     try {
 
       const data: CordelUpdateValues = {
+        ...cordelReviewFields,
         author: {
           id: Number(cordel?.author.id),
         },
-        title: cordelReviewFields.title,
+        // TODO add description to the page
         description: cordel?.description || '',
-        content: cordelReviewFields.content,
-        xilogravuraUrl: cordelReviewFields?.xilogravuraUrl || '',
         tags: cordel?.tags || [],
-        published: cordelReviewFields.published
       }
 
       await api.put(`cordels/${id}`, data);
@@ -156,6 +157,18 @@ export default function CordelReview() {
               autoFocus
               {...register("title")}
             />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="year"
+              label="Ano de publicação"
+              autoComplete="year"
+              defaultValue={cordel.year}
+              autoFocus
+              {...register("year")}
+            />
             <TextField
               variant="outlined"
               margin="normal"
@@ -173,13 +186,34 @@ export default function CordelReview() {
               margin="normal"
               required
               fullWidth
-              label="Url da Xilogravura"
+              label="URL da Xilogravura"
               type="xilogravuraUrl"
               id="xilogravuraUrl"
               defaultValue={cordel.xilogravuraUrl}
               autoComplete="xilogravuraUrl"
               {...register("xilogravuraUrl")}
             />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              fullWidth
+              label="e-book URL"
+              type="ebookUrl"
+              id="ebookUrl"
+              defaultValue={cordel.ebookUrl}
+              {...register("ebookUrl")}
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              fullWidth
+              label="URL de origem, fonte ou referência"
+              type="source"
+              id="source"
+              defaultValue={cordel.source}
+              autoComplete="source"
+              {...register("source")}
+            />
             <TextField
               variant="outlined"
               margin="normal"
diff --git a/src/theme.tsx b/src/theme.tsx
index f1ea23b..2c15389 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -2,7 +2,7 @@ import { createTheme } from "@mui/material/styles";
 
 export type ModeTypes = "dark" | "light";
 export const getTheme = (mode: ModeTypes = "light") => {
-  return createTheme({
+  const theme = createTheme({
     palette: {
       mode,
       primary: {
@@ -11,14 +11,12 @@ export const getTheme = (mode: ModeTypes = "light") => {
       secondary: {
         main: "#ab003c",
       },
-      // error: {
-      //   main: red.A400,
-      // },
-      // background: {
-      //   default: "#fff",
-      // },
     },
   });
+
+  theme.spacing(2); // `${8 * 2}px` = '16px'
+
+  return theme;
 };
 
 export const theme = createTheme({
@@ -27,14 +25,5 @@ export const theme = createTheme({
     primary: {
       main: "#556cd6",
     },
-    // secondary: {
-    //   main: '#19857b',
-    // },
-    // error: {
-    //   main: red.A400,
-    // },
-    // background: {
-    //   default: "#fff",
-    // },
   },
 });
diff --git a/src/types/index.ts b/src/types/index.ts
index 134b618..1e2406e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -12,6 +12,9 @@ export interface Cordel {
   published: boolean;
   tags: Array<string>;
   xilogravuraUrl: string;
+  year: number;
+  ebookUrl: string;
+  source: string;
 }
 
 export interface CordelSummary {
@@ -20,6 +23,7 @@ export interface CordelSummary {
   xilogravuraUrl: string;
   authorName: string;
   authorId: number;
+  ebookUrl: string;
 }
 
 export interface Author {