Merge pull request #46 from aceleradora-TW/38/pagina-detalhe-topico

38/pagina detalhe topico
aceleradora-TW · Sep 6, 2024 · 1caf021 · 1caf021
2 parents 0f8c773 + 05c7dc8
commit 1caf021
Show file tree

Hide file tree

Showing 20 changed files with 272 additions and 1,215 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/assets/503-bad-request.svg b/public/assets/503-bad-request.svg
diff --git a/src/app/Autoestudo/[detailingTheme]/[detailingTopic]/page.tsx b/src/app/Autoestudo/[detailingTheme]/[detailingTopic]/page.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { RenderDetailingTopicPage } from "@/components/PageElements/Renders/RenderDetailingTopicPage";
+
+export default function DetailingTopic({
+  params,
+}: {
+  params: { DetailingTopic: string };
+}) {
+  return RenderDetailingTopicPage(params.DetailingTopic)
+}
diff --git a/src/app/Nivelamento/[detailingTheme]/[detailingTopic]/page.tsx b/src/app/Nivelamento/[detailingTheme]/[detailingTopic]/page.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { RenderDetailingTopicPage } from "@/components/PageElements/Renders/RenderDetailingTopicPage";
+
+export default function DetailingTopic({
+  params,
+}: {
+  params: { detailingTopic: string };
+}) {
+  return RenderDetailingTopicPage(params.detailingTopic)
+}
diff --git a/src/app/Nivelamento/[detailingTheme]/page.tsx b/src/app/Nivelamento/[detailingTheme]/page.tsx
@@ -7,6 +7,6 @@ export default function DetailingTheme({
   params: { detailingTheme: string };
 }) {
   const id = params.detailingTheme;
-
+  
   return RenderDetailingThemePage(id)
 }
diff --git a/src/app/config/theme.tsx b/src/app/config/theme.tsx
@@ -128,7 +128,7 @@ declare module "@mui/material/styles" {
         backgroundColor: string;
         maxWidth: number;
         borderWidth: number;
-        maxHeight: number;
+        height: string;
         "&:hover": {
           transform: string;
       }
@@ -138,8 +138,10 @@ declare module "@mui/material/styles" {
         height: string;
       };
       cardButtonContent:{
-        paddingBottom: number;
-        paddingTop: number;
+        display: string; 
+        flexDirection: string; 
+        alignItems: string;
+        height: string;
       };
       cardMedia: {
         height: number;
@@ -294,7 +296,7 @@ declare module "@mui/material/styles" {
         backgroundColor?: string;
         maxWidth?: number;
         borderWidth?: number; 
-        maxHeight?: number;
+        height?: string;
         "&:hover": {
           transform?: string;
       }
@@ -304,8 +306,10 @@ declare module "@mui/material/styles" {
         height?: string;
       };
       cardButtonContent?:{
-        paddingBottom?: number; 
-        paddingTop?: number;
+        display?: string; 
+        flexDirection?: string; 
+        alignItems?: string;
+        height?: string;
       };
       cardMedia?: {
         height?: number;
@@ -460,7 +464,7 @@ const theme = createTheme({
       backgroundColor: themePalette.whiteBg,
       maxWidth: 316, 
       borderWidth: 2, 
-      maxHeight: 256, 
+      height: "100%", 
       "&:hover": {
        transform: "scale(1.1)"
       }
@@ -470,8 +474,10 @@ const theme = createTheme({
       height: "100%"
     },
     cardButtonContent:{
-      paddingBottom: 1, 
-      paddingTop: 2
+      display: "flex", 
+      flexDirection: "column", 
+      alignItems: "flex-start",
+      height: "100%"
     }, 
     centralizeContent: {
       display: 'flex',

diff --git a/src/components/BadRequest/index.tsx b/src/components/BadRequest/index.tsx
@@ -0,0 +1,13 @@
+import { Box, Link, Typography } from "@mui/material"
+import svgBadRequest from "../../../public/assets/503-bad-request.svg"
+import Image from "next/image"
+
+export const BadRequest = () => {
+    return (
+        <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "calc(100vh - 80px)", boxSizing: "border-box" }}>
+            <Image src={svgBadRequest} alt="Ilustração de um gato brincando com um novelo de lã, com os números 503 indicando erro de serviço indisponível."/>
+            <Typography variant="caption">Estamos passando por dificuldades para carregar o conteúdo. Por favor, tente novamente em instantes.</Typography>
+            <Link target="_blank" rel="noferrer" href="https://storyset.com/internet">Internet illustrations by Storyset</Link>
+        </Box>
+    )
+}
diff --git a/src/components/ButtonCard/index.tsx b/src/components/ButtonCard/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import { CardActionArea, CardActions, ThemeProvider } from '@mui/material';
+import { CardActionArea, CardActions } from '@mui/material';
 import StatusSelect from '../StatusSelect';
 import { useRouter } from 'next/navigation';
 import { theme } from '../../app/config/theme';
@@ -29,9 +29,8 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({ title, description, rout
         router.push(`/${route}`)
     }
     return (
-        <ThemeProvider theme={theme}>
             <Card sx={theme.customStyles.cardButtonContainer}>
-                <CardActionArea onClick={() => handleClick(route)}>
+                <CardActionArea onClick={() => handleClick(route)} sx={{height: "100%"}}>
                     <CardContent sx={theme.customStyles.cardButtonContent}>
                         <Typography gutterBottom variant="h2" component="div" sx={theme.customStyles.cardTitle}>
                             {title}
@@ -41,10 +40,6 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({ title, description, rout
                         </Typography>
                     </CardContent>
                 </CardActionArea>
-                <CardActions sx={{cardActionsStyle}}>
-                    <StatusSelect />
-                </CardActions>
             </Card>
-        </ThemeProvider>
     );
 }
diff --git a/src/components/CardVideo/index.tsx b/src/components/CardVideo/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
 import { theme } from "../../app/config/theme";
-import StatusSelect from "@/components/StatusSelect";
 import ReactMarkdown from "react-markdown";
 
 const components = {
@@ -15,10 +14,10 @@ const components = {
 interface CardVideoProps{
   text: string;
   title: string;
-  linkVideo: string;
+  videoLink: string;
   references?: string;
 }
-export const CardVideo: React.FC<CardVideoProps>=({ text, title, linkVideo, references }) => {
+export const CardVideo: React.FC<CardVideoProps>=({ text, title, videoLink, references }) => {
 
   function getYouTubeEmbedUrl(url: string): string {
     const videoId = url.split('v=')[1]?.split('&')[0];
@@ -31,7 +30,8 @@ export const CardVideo: React.FC<CardVideoProps>=({ text, title, linkVideo, refe
         <iframe
           width="100%"
           height="332"
-          src={getYouTubeEmbedUrl(linkVideo)}
+          src={getYouTubeEmbedUrl(videoLink)}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen
         />
         <Box sx={theme.customStyles.cardVideoNumber}>
           <ReactMarkdown components={components}>

diff --git a/src/components/Description/DescriptionFull/index.tsx b/src/components/Description/DescriptionFull/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Box, Link, Typography, Snackbar, Alert, Grid } from "@mui/material";
+import { Box, Link, Typography, Snackbar, Alert, Grid, List } from "@mui/material";
 import { theme, themePalette } from "@/app/config/theme";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -24,7 +24,10 @@ export const DescriptionFull: React.FC<DescriptionFullProps> = ({
 
   const components = {
     p: (props: React.HTMLAttributes<HTMLParagraphElement>) => (
-      <Typography variant="body1" sx={{ marginBottom: 3 }} {...props} />
+      <Typography variant="body1" sx={{marginTop: 2 }} {...props} />
+    ),
+    ul: (props: React.HTMLAttributes<HTMLUListElement>) => (  
+      <ul  {...props}></ul>
     ),
     a: (props: React.HTMLAttributes<HTMLAnchorElement>) => (
       <Link
@@ -34,7 +37,7 @@ export const DescriptionFull: React.FC<DescriptionFullProps> = ({
         sx={{
           color: themePalette.descriptionCard,
           textDecorationColor: themePalette.descriptionCard,
-          display: "block",
+          display: "inline-block",
         }}
         {...props}
       />

diff --git a/src/components/Description/DescriptionWithVideo/index.tsx b/src/components/Description/DescriptionWithVideo/index.tsx
@@ -12,22 +12,32 @@ interface DescriptionWithVideoProps {
   textDescription: string;
   textVideo: string;
   title: string;
-  linkVideo: string;
+  videoLink: string;
   references: string;
 }
 
+const isValidURL = (url: string): boolean => {
+  try {
+    new URL(url);
+    return true;
+  } catch (_) {
+    return false;
+  }
+};
+
 export const DescriptionWithVideo: React.FC<DescriptionWithVideoProps> = ({
   textDescription,
   textVideo,
   title,
-  linkVideo,
+  videoLink,
   references,
 }) => {
 
+const isLinkValid = isValidURL(videoLink);
 
   return (
     <>
-      {!linkVideo.trim() || !textVideo.trim() || !title.trim() ? (
+      {!isLinkValid ? (
         <DescriptionFull text={textDescription} />
       ) : (
         <Grid container columnSpacing={3} rowSpacing={3} alignItems="stretch">
@@ -38,7 +48,7 @@ export const DescriptionWithVideo: React.FC<DescriptionWithVideoProps> = ({
             <CardVideo
               text={textVideo}
               title={title}
-              linkVideo={linkVideo}
+              videoLink={videoLink}
               references={references}
             />
           </Grid>

diff --git a/src/components/PageElements/Container/ContainerCardsExercises/index.tsx b/src/components/PageElements/Container/ContainerCardsExercises/index.tsx
@@ -0,0 +1,52 @@
+import { Grid,  useMediaQuery } from "@mui/material";
+import React from "react";
+import { usePathname } from 'next/navigation';
+import { ButtonCard } from "@/components/ButtonCard";
+import { DescriptionFull } from "@/components/Description/DescriptionFull";
+interface ContainerCardsExercisesProps {
+  exercises: string;
+  exercisesDescription: string;
+  exercisesInfo: string;
+}
+
+export const ContainerCardsExercises: React.FC<ContainerCardsExercisesProps> = ({ exercises, exercisesDescription, exercisesInfo }) => {
+  const between = useMediaQuery('(min-width: 800px) and (max-width: 899px)')
+  const between2 = useMediaQuery('(min-width: 445px) and (max-width: 599px)')
+  const pathname = usePathname()
+  const currentPath = pathname.slice(1)
+
+  const splitValues = (value: string):string[] => value.split(",");
+  const exercisesArray = splitValues(exercises);
+  const descriptionsArray = splitValues(exercisesDescription);
+  const infoArray = splitValues(exercisesInfo);
+
+  const isInvalidData = exercises.trim() == "Untitle"|| !exercises.trim() || !exercisesDescription.trim() || !exercisesInfo.trim(); 
+
+  if(isInvalidData) {
+    return <DescriptionFull text="## Nenhum exercício encontrado"/>
+  }
+
+
+  return (
+    <Grid container spacing={2} columnSpacing={1} >
+      {exercisesArray.map((exercise, index) => (
+        <Grid
+          item
+          xl={3}
+          lg={3}
+          md={4}
+          sm={between ? 4 : 6}
+          xs={between2 ? 6 : 12}
+          key={index}
+          spacing={3}
+        >
+          <ButtonCard
+            title={exercise}
+            description={descriptionsArray[index]}
+            route={`${currentPath}/${infoArray[index]}-${exercise}`} />
+        </Grid>
+      ))
+     }
+    </Grid>
+  )
+};
diff --git a/src/components/PageElements/Container/ContainerCardsTopics/index.tsx b/src/components/PageElements/Container/ContainerCardsTopics/index.tsx
@@ -13,13 +13,15 @@ export const ContainerCardTopics: React.FC<ContainerCardTopicsProps> = ({ topics
   const between2 = useMediaQuery('(min-width: 445px) and (max-width: 599px)');
   const pathname = usePathname()
   const currentPath = pathname.slice(1)
-  function TopicsSeparator(value: string) {
-    return value.split(",");
-  }
+
+  const splitValues = (value: string):string[] => value.split(",");
+  const topicsArray = splitValues(topics);
+  const descriptionsArray = splitValues(topicsDescription);
+  const infoArray = splitValues(topicsInfo);
 
   return (
     <Grid container spacing={2} columnSpacing={1}>
-      {TopicsSeparator(topics).map((topic, index) => (
+      {topicsArray.map((topic, index) => (
         <Grid
           item
           xl={3}
@@ -32,8 +34,8 @@ export const ContainerCardTopics: React.FC<ContainerCardTopicsProps> = ({ topics
         >
           <BaseCard
             title={topic}
-            description={TopicsSeparator(topicsDescription)[index]}
-            route={`${currentPath}/${TopicsSeparator(topicsInfo)[index]}-${topic}`}
+            description={descriptionsArray[index]}
+            route={`${currentPath}/${infoArray[index]}-${topic}`}
           />
         </Grid>
       ))}

diff --git a/src/components/PageElements/Content/DetailingThemeContent/index.tsx b/src/components/PageElements/Content/DetailingThemeContent/index.tsx
@@ -10,35 +10,32 @@ interface DetailingContentProps {
   data: ApiResponse;
   id: string;
 }
-
+const ThemeContent: React.FC<{ field: ThemeField }> = ({ field }) => (
+  <>
+    <Grid item xl={12} lg={9} md={6} sm={3}>
+      <BreadCrumb />
+      <Title text={field.title} />
+    </Grid>
+    <DescriptionDivider text={field.description} />
+    <Grid item xl={12} lg={9} md={6} sm={3}>
+      <Title text={"Tópicos"} />
+    </Grid>
+    <ContainerCardTopics
+      topics={field.topics}
+      topicsDescription={field.topicsDescription}
+      topicsInfo={field.topicsInfo}
+    />
+  </>
+)
 export const DetailingThemeContent: React.FC<DetailingContentProps> = ({ data, id }) => {
-  function extractID(pathname: string) {
-    return pathname.split("-")[0];
-  }
-
+  const filteredData = data?.data.filter((element: DataItem) => element.id === id.split("-")[0]);
+
   return (
     <>
-      {data && data.data
-        .filter((element: DataItem) => element.id === extractID(id))
-        .map((element: DataItem) => {
-          const field = element.field as ThemeField;
-          return (
-          <>
-            <Grid item xl={12} lg={9} md={6} sm={3}>
-              <BreadCrumb />
-              <Title text={element.field.title} />
-            </Grid>
-              <DescriptionDivider text={element.field.description} />
-            <Grid item xl={12} lg={9} md={6} sm={3}>
-              <Title text={"Tópicos"} />
-            </Grid>
-            <ContainerCardTopics 
-              topics={field.topics}
-              topicsDescription={field.topicsDescription}
-              topicsInfo={field.topicsInfo}
-            />
-          </>
-        )})}
+      {filteredData
+        .map((element: DataItem) => (
+          <ThemeContent key={element.id} field={element.field as ThemeField} />
+        ))}
     </>
   );
 };