Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

38/pagina detalhe topico #46

Merged
merged 14 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,567 changes: 218 additions & 1,349 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions public/assets/503-bad-request.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/app/Autoestudo/[detailingTheme]/[detailingTopic]/page.tsx
Original file line number Diff line number Diff line change
@@ -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)
}
11 changes: 11 additions & 0 deletions src/app/Nivelamento/[detailingTheme]/[detailingTopic]/page.tsx
Original file line number Diff line number Diff line change
@@ -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)
}
2 changes: 1 addition & 1 deletion src/app/Nivelamento/[detailingTheme]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ export default function DetailingTheme({
params: { detailingTheme: string };
}) {
const id = params.detailingTheme;

return RenderDetailingThemePage(id)
}
24 changes: 15 additions & 9 deletions src/app/config/theme.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ declare module "@mui/material/styles" {
backgroundColor: string;
maxWidth: number;
borderWidth: number;
maxHeight: number;
height: string;
"&:hover": {
transform: string;
}
Expand All @@ -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;
Expand Down Expand Up @@ -294,7 +296,7 @@ declare module "@mui/material/styles" {
backgroundColor?: string;
maxWidth?: number;
borderWidth?: number;
maxHeight?: number;
height?: string;
"&:hover": {
transform?: string;
}
Expand All @@ -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;
Expand Down Expand Up @@ -460,7 +464,7 @@ const theme = createTheme({
backgroundColor: themePalette.whiteBg,
maxWidth: 316,
borderWidth: 2,
maxHeight: 256,
height: "100%",
"&:hover": {
transform: "scale(1.1)"
}
Expand All @@ -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',
Expand Down
13 changes: 13 additions & 0 deletions src/components/BadRequest/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
9 changes: 2 additions & 7 deletions src/components/ButtonCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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}
Expand All @@ -41,10 +40,6 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({ title, description, rout
</Typography>
</CardContent>
</CardActionArea>
<CardActions sx={{cardActionsStyle}}>
<StatusSelect />
</CardActions>
</Card>
</ThemeProvider>
);
}
8 changes: 4 additions & 4 deletions src/components/CardVideo/index.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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];
Expand All @@ -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}>
Expand Down
9 changes: 6 additions & 3 deletions src/components/Description/DescriptionFull/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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
Expand All @@ -34,7 +37,7 @@ export const DescriptionFull: React.FC<DescriptionFullProps> = ({
sx={{
color: themePalette.descriptionCard,
textDecorationColor: themePalette.descriptionCard,
display: "block",
display: "inline-block",
}}
{...props}
/>
Expand Down
18 changes: 14 additions & 4 deletions src/components/Description/DescriptionWithVideo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -38,7 +48,7 @@ export const DescriptionWithVideo: React.FC<DescriptionWithVideoProps> = ({
<CardVideo
text={textVideo}
title={title}
linkVideo={linkVideo}
videoLink={videoLink}
references={references}
/>
</Grid>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)
};
Original file line number Diff line number Diff line change
Expand Up @@ -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(",");
Wander06 marked this conversation as resolved.
Show resolved Hide resolved
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}
Expand All @@ -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>
))}
Expand Down
46 changes: 22 additions & 24 deletions src/components/PageElements/Content/DetailingThemeContent/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,31 @@ interface DetailingContentProps {
}

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]);
const ThemeContent: React.FC<{ field: ThemeField }> = ({ field }) => (
Wander06 marked this conversation as resolved.
Show resolved Hide resolved
<>
<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}
/>
</>
)

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