Dowload e-cordel and add new fields to review page (#46)

e-cordel · Sep 7, 2024 · 80c5e89 · 80c5e89
1 parent 82c07b8
commit 80c5e89
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 109 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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)
   });
-})
+})
diff --git 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
@@ -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
@@ -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 {