38/pagina detalhe topico

src/app/Autoestudo/[detailingTheme]/[detailingTopic]/page.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { RenderDetailingTopicPage } from "@/components/PageElements/Renders/RenderDetailingTopicPage";
+
+export default function DetailingTopic({
+  params,
+}: {
+  params: { DetailingTopic: string };
+}) {
+  const id = params.DetailingTopic;
+
+  return RenderDetailingTopicPage(id)
+}

src/app/Nivelamento/[detailingTheme]/[detailingTopic]/page.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { RenderDetailingTopicPage } from "@/components/PageElements/Renders/RenderDetailingTopicPage";
+
+export default function DetailingTopic({
+  params,
+}: {
+  params: { detailingTopic: string };
+}) {
+  const id = params.detailingTopic;
+  console.log("DETALHAMENTO ", id)
+  return RenderDetailingTopicPage(id)
+}

src/app/Nivelamento/[detailingTheme]/page.tsx

@@ -7,6 +7,6 @@ export default function DetailingTheme({
   params: { detailingTheme: string };
 }) {
   const id = params.detailingTheme;
-
+  
   return RenderDetailingThemePage(id)
 }

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',

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="Imagem de gatinho sobre erro de requisição"/>
+            <Typography variant="caption">Opss, estamos enfrentando dificuldades em baixar o conteúdo, tente novamente mais tarde!</Typography>
+            <Link target="_blank" rel="noferrer" href="https://storyset.com/internet">Internet illustrations by Storyset</Link>
+        </Box>
+    )
+}

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>
     );
 }

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}>

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}
       />

src/components/Description/DescriptionWithVideo/index.tsx

@@ -12,22 +12,33 @@ 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,
 }) => {
 
+console.log(videoLink)
+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 +49,7 @@ export const DescriptionWithVideo: React.FC<DescriptionWithVideoProps> = ({
             <CardVideo
               text={textVideo}
               title={title}
-              linkVideo={linkVideo}
+              videoLink={videoLink}
               references={references}
             />
           </Grid>

src/components/PageElements/Container/ContainerCardsExercises/index.tsx

@@ -0,0 +1,49 @@
+import { Grid, Typography, useMediaQuery } from "@mui/material";
+import React from "react";
+import { BaseCard } from "@/components/BaseCard";
+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)
+  function ExercisesSeparator(value: string) {
+    return value.split(",");
+  }
+  return (
+    <Grid container spacing={2} columnSpacing={1} >
+      {exercises.trim() == "Untitle"|| !exercises.trim() || !exercisesDescription.trim() || !exercisesInfo.trim()? 
+        <DescriptionFull text="## Nenhum exercício encontrado"/>
+
+       : ExercisesSeparator(exercises).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={ExercisesSeparator(exercisesDescription)[index]}
+            route={`${currentPath}/${ExercisesSeparator(exercisesInfo)[index]}-${exercise}`} />
+        </Grid>
+      ))
+     }
+    </Grid>
+  )
+
+
+
+};

src/components/PageElements/Content/DetailingTopicContent/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import { BreadCrumb } from "@/components/BreadCrumb";
+import { Title } from "@/components/title";
+import { ContainerCardTopics } from "../../Container/ContainerCardsTopics";
+import { ApiResponse, DataItem, TopicField } from "@/types/type";
+import { DescriptionDivider } from "../../../Description/DescriptionDivider";
+import { DescriptionReference } from "@/components/Description/DescriptionReference";
+import { ContainerCardsExercises } from "../../Container/ContainerCardsExercises";
+import { DescriptionWithVideo } from "@/components/Description/DescriptionWithVideo";
+
+interface DetailingContentProps {
+  data: ApiResponse;
+  id: string;
+}
+
+export const DetailingTopicContent: React.FC<DetailingContentProps> = ({ data, id }) => {
+  function extractID(pathname: string) {
+    return pathname.split("-")[0];
+  }
+
+  return (
+    <>
+      {data && data.data
+        .filter((element: DataItem) => element.id === extractID(id))
+        .map((element: DataItem) => {
+          const field = element.field as TopicField;
+          return (
+          <>
+            <Grid item xl={12} lg={9} md={6} sm={3}>
+              <BreadCrumb />
+              <Title text={field.title} />
+            </Grid>           
+              <DescriptionWithVideo textDescription={field.description} textVideo={field.videoDescription} title={field.video} videoLink={field.videoLink} references={field.videoReference}/>
+            <Grid item xl={12} lg={9} md={6} sm={3}>
+              <Title text={"Exercícios"} />
+            </Grid>
+            <ContainerCardsExercises  
+              exercises={field.exercises}
+              exercisesDescription={field.exercisesDescription}
+              exercisesInfo={field.exercisesInfo}/>
+            <Grid item xl={12} lg={9} md={6} sm={3}>
+              <Title text={"Referências"} />
+            </Grid>
+              <DescriptionReference text={field.references}/>
+          </>
+        )})}
+    </>
+  );
+};

src/components/PageElements/Renders/RenderDetailingThemePage/index.tsx

@@ -3,12 +3,16 @@ import { Loading } from "@/components/Loading";
 import { LayoutPage } from "../../LayoutPage";
 import React from "react";
 import { DetailingThemeContent } from "../../Content/DetailingThemeContent";
+import { BadRequest } from "@/components/BadRequest";
 
 export const RenderDetailingThemePage = (id: string)=> {
-    const { data: renderData } = useFetchData('/api/stackbyApi/Themes');
+    const { data: renderData,  statusCode: code } = useFetchData('/api/stackbyApi/Themes');
     if (!renderData) {
         return <Loading/>
     }
+    if(code !== 200){
+      return <BadRequest/>
+     }
 
   return (
     <LayoutPage>

src/components/PageElements/Renders/RenderDetailingTopicPage/index.tsx

@@ -0,0 +1,25 @@
+import useFetchData from "@/components/fetchData";
+import { Loading } from "@/components/Loading";
+import { LayoutPage } from "../../LayoutPage";
+import React from "react";
+import { DetailingTopicContent } from "../../Content/DetailingTopicContent";
+import { DescriptionFull } from "@/components/Description/DescriptionFull";
+import { Box, Typography } from "@mui/material";
+import { BadRequest } from "@/components/BadRequest";
+
+export const RenderDetailingTopicPage = (id: string)=> {
+    const { data: renderData,  statusCode: code} = useFetchData('/api/stackbyApi/Topics');
+    console.log(code)
+    if (!renderData) {
+        return <Loading/>
+    }
+    if(code !== 200){
+     return <BadRequest/>
+    }
+
+  return (
+    <LayoutPage>
+      <DetailingTopicContent data={renderData} id={id} />
+    </LayoutPage>
+  );
+}