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 9 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.
13 changes: 13 additions & 0 deletions src/app/Autoestudo/[detailingTheme]/[detailingTopic]/page.tsx
Original file line number Diff line number Diff line change
@@ -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;
Lip29bm marked this conversation as resolved.
Show resolved Hide resolved

return RenderDetailingTopicPage(id)
}
13 changes: 13 additions & 0 deletions src/app/Nivelamento/[detailingTheme]/[detailingTopic]/page.tsx
Original file line number Diff line number Diff line change
@@ -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)
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
return RenderDetailingTopicPage(id)
}
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="Imagem de gatinho sobre erro de requisição"/>
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
<Typography variant="caption">Opss, estamos enfrentando dificuldades em baixar o conteúdo, tente novamente mais tarde!</Typography>
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
<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
19 changes: 15 additions & 4 deletions src/components/Description/DescriptionWithVideo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
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 +49,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,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) {
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
return value.split(",");
}
return (
<Grid container spacing={2} columnSpacing={1} >
{exercises.trim() == "Untitle"|| !exercises.trim() || !exercisesDescription.trim() || !exercisesInfo.trim()?
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
<DescriptionFull text="## Nenhum exercício encontrado"/>

: ExercisesSeparator(exercises).map((exercise, index) => (
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
<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>
)

stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved


};
Original file line number Diff line number Diff line change
@@ -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) {
Lip29bm marked this conversation as resolved.
Show resolved Hide resolved
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 (
<>
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>
<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}/>
</>
)})}
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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)
stephanybrazeir0 marked this conversation as resolved.
Show resolved Hide resolved
if (!renderData) {
return <Loading/>
}
if(code !== 200){
return <BadRequest/>
}

return (
<LayoutPage>
<DetailingTopicContent data={renderData} id={id} />
</LayoutPage>
);
}
Loading
Loading