Refactor classroom view and a extract function
This commit is contained in:
parent
c1cf91dde6
commit
ec083e97a4
7 changed files with 412 additions and 385 deletions
203
src/screens/Classroom/AnnouncementsTab/index.js
Normal file
203
src/screens/Classroom/AnnouncementsTab/index.js
Normal file
|
|
@ -0,0 +1,203 @@
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Container,
|
||||||
|
Grid,
|
||||||
|
Link,
|
||||||
|
Skeleton,
|
||||||
|
Stack,
|
||||||
|
} from '@mui/material';
|
||||||
|
import AnnouncementCard from '../../../components/AnnouncementCard';
|
||||||
|
import { createArrayFrom1ToN } from '../../../utils/createArrayFrom1ToN';
|
||||||
|
|
||||||
|
import styles from './styles';
|
||||||
|
import jitsiLogo from '../../../assets/jitsi.svg';
|
||||||
|
|
||||||
|
function AnnouncementsTab({ layoutType, announcementsTabData }) {
|
||||||
|
const { container } = styles[layoutType];
|
||||||
|
if (layoutType === 'desktop') {
|
||||||
|
return announcementsTabData === null ? (
|
||||||
|
<Grid sx={container} container spacing={2}>
|
||||||
|
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
||||||
|
{createArrayFrom1ToN(2).map(i => (
|
||||||
|
<Skeleton
|
||||||
|
key={i}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={200}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
||||||
|
{createArrayFrom1ToN(4).map(i => (
|
||||||
|
<Skeleton
|
||||||
|
key={i}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={250}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
) : (
|
||||||
|
<Grid sx={container} container spacing={2}>
|
||||||
|
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
||||||
|
<Stack gap="30px">
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<Container
|
||||||
|
disableGutters
|
||||||
|
sx={{ display: 'flex', justifyContent: 'row' }}
|
||||||
|
>
|
||||||
|
<img src={jitsiLogo} alt="Jitsi Meet" />
|
||||||
|
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
href="https://google.com"
|
||||||
|
target="__blank"
|
||||||
|
>
|
||||||
|
Entrar
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
||||||
|
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||||
|
<Link sx={{ fontSize: '15px' }} key={ua.id}>
|
||||||
|
{ua.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
||||||
|
<Stack
|
||||||
|
sx={{ width: '100%', paddingTop: 0 }}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
|
>
|
||||||
|
{announcementsTabData.announcements.map(announcement => (
|
||||||
|
<AnnouncementCard
|
||||||
|
key={announcement.id}
|
||||||
|
announcement={announcement}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
} else if (layoutType === 'mobile') {
|
||||||
|
return announcementsTabData === null ? (
|
||||||
|
<Stack
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
|
sx={{ marginTop: '30px' }}
|
||||||
|
>
|
||||||
|
{createArrayFrom1ToN(2).map(i => (
|
||||||
|
<Skeleton
|
||||||
|
key={i}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={200}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{createArrayFrom1ToN(4).map(i => (
|
||||||
|
<Skeleton
|
||||||
|
key={i}
|
||||||
|
variant="rectangular"
|
||||||
|
width="100%"
|
||||||
|
height={250}
|
||||||
|
sx={{ marginBottom: '30px' }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
) : (
|
||||||
|
<Stack
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
|
sx={{ marginTop: '30px' }}
|
||||||
|
>
|
||||||
|
<Stack gap="30px">
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<Container
|
||||||
|
disableGutters
|
||||||
|
sx={{ display: 'flex', justifyContent: 'row' }}
|
||||||
|
>
|
||||||
|
<img src={jitsiLogo} alt="Jitsi Meet" />
|
||||||
|
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
href="https://google.com"
|
||||||
|
target="__blank"
|
||||||
|
>
|
||||||
|
Entrar
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
<Card
|
||||||
|
sx={{ width: '100%', padding: '20px' }}
|
||||||
|
elevation={4}
|
||||||
|
variant="elevation"
|
||||||
|
>
|
||||||
|
<Stack justifyContent="flex-start" spacing={1}>
|
||||||
|
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
||||||
|
{announcementsTabData.upcomingAssignments.map(ua => (
|
||||||
|
<Link sx={{ fontSize: '15px' }} key={ua.id}>
|
||||||
|
{ua.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
sx={{ width: '100%' }}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
flexWrap="wrap"
|
||||||
|
direction="row"
|
||||||
|
gap="30px"
|
||||||
|
>
|
||||||
|
{announcementsTabData.announcements.map(announcement => (
|
||||||
|
<AnnouncementCard
|
||||||
|
key={announcement.id}
|
||||||
|
announcement={announcement}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AnnouncementsTab;
|
||||||
34
src/screens/Classroom/AnnouncementsTab/styles.js
Normal file
34
src/screens/Classroom/AnnouncementsTab/styles.js
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
// ========== Desktop ==========
|
||||||
|
const desktopContainer = {
|
||||||
|
width: '100%',
|
||||||
|
height: '100vh',
|
||||||
|
backgroundColor: '#red',
|
||||||
|
padding: 0,
|
||||||
|
margin: 0,
|
||||||
|
marginTop: '50px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktop = {
|
||||||
|
container: desktopContainer,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Mobile ==========
|
||||||
|
const mobileContainer = {
|
||||||
|
width: '90%',
|
||||||
|
backgroundColor: '#red',
|
||||||
|
padding: 0,
|
||||||
|
marginTop: '30px',
|
||||||
|
paddingBottom: '100px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobile = {
|
||||||
|
container: mobileContainer,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Unset ==========
|
||||||
|
const unset = {
|
||||||
|
container: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = { desktop, mobile, unset };
|
||||||
|
export default styles;
|
||||||
57
src/screens/Classroom/Header/index.js
Normal file
57
src/screens/Classroom/Header/index.js
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
AvatarGroup,
|
||||||
|
Container,
|
||||||
|
Paper,
|
||||||
|
Skeleton,
|
||||||
|
Stack,
|
||||||
|
Tab,
|
||||||
|
Tabs,
|
||||||
|
Tooltip,
|
||||||
|
Typography,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { TAB_OPTIONS } from '../tabOptions';
|
||||||
|
import styles from './styles';
|
||||||
|
|
||||||
|
function Header({
|
||||||
|
layoutType,
|
||||||
|
classroom,
|
||||||
|
selectedTabOption,
|
||||||
|
onSelectTabOption,
|
||||||
|
}) {
|
||||||
|
const { title, paper, tabs, avatar, tooltip } = styles[layoutType];
|
||||||
|
return classroom === null ? (
|
||||||
|
<Skeleton variant="rectangular" width="100%" height={240} />
|
||||||
|
) : (
|
||||||
|
<Container disableGutters>
|
||||||
|
<Paper sx={paper(classroom.color)} elevation={4} variant="elevation">
|
||||||
|
<h1 style={title}>{classroom.name}</h1>
|
||||||
|
<Stack alignItems="center" direction="row" spacing={1}>
|
||||||
|
<AvatarGroup total={classroom.teachers.length}>
|
||||||
|
{classroom.teachers.map(t => (
|
||||||
|
<Avatar key={t.name} alt={t.name} src={t.avatar} sx={avatar} />
|
||||||
|
))}
|
||||||
|
</AvatarGroup>
|
||||||
|
<Tooltip title={classroom.teachers.map(t => t.name).join(', ')}>
|
||||||
|
<Typography sx={tooltip} variant="body3" color="text.secondary">
|
||||||
|
{classroom.teachers.map(t => t.name).join(', ')}
|
||||||
|
</Typography>
|
||||||
|
</Tooltip>
|
||||||
|
</Stack>
|
||||||
|
<Tabs
|
||||||
|
value={selectedTabOption}
|
||||||
|
onChange={onSelectTabOption}
|
||||||
|
aria-label="Tabs para informações da disciplina"
|
||||||
|
variant="fullWidth"
|
||||||
|
sx={tabs}
|
||||||
|
>
|
||||||
|
{TAB_OPTIONS.map(option => (
|
||||||
|
<Tab key={option.value} label={option.lable} />
|
||||||
|
))}
|
||||||
|
</Tabs>
|
||||||
|
</Paper>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
||||||
90
src/screens/Classroom/Header/styles.js
Normal file
90
src/screens/Classroom/Header/styles.js
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
// ========== Desktop ==========
|
||||||
|
const desktopTitle = {
|
||||||
|
fontWeight: 500,
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopPaper = classColor => ({
|
||||||
|
width: '100%',
|
||||||
|
borderTop: `5px solid ${classColor}`,
|
||||||
|
padding: '20px',
|
||||||
|
});
|
||||||
|
|
||||||
|
const desktopTabs = {
|
||||||
|
marginLeft: '-20px',
|
||||||
|
marginRight: '-20px',
|
||||||
|
marginBottom: '-20px',
|
||||||
|
marginTop: '30px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopAvatar = {
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktopTooltip = {
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
};
|
||||||
|
|
||||||
|
const desktop = {
|
||||||
|
title: desktopTitle,
|
||||||
|
paper: desktopPaper,
|
||||||
|
tabs: desktopTabs,
|
||||||
|
avatar: desktopAvatar,
|
||||||
|
tooltip: desktopTooltip,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Mobile ==========
|
||||||
|
const mobileTitle = {
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: '25px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobilePaper = classColor => ({
|
||||||
|
width: '100%',
|
||||||
|
borderTop: `5px solid ${classColor}`,
|
||||||
|
padding: '10px',
|
||||||
|
});
|
||||||
|
|
||||||
|
const mobileTabs = {
|
||||||
|
marginLeft: '-10px',
|
||||||
|
marginRight: '-10px',
|
||||||
|
marginBottom: '-10px',
|
||||||
|
marginTop: '30px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileAvatar = {
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileTooltip = {
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
display: '-webkit-box',
|
||||||
|
WebkitLineClamp: 2,
|
||||||
|
WebkitBoxOrient: 'vertical',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobile = {
|
||||||
|
title: mobileTitle,
|
||||||
|
paper: mobilePaper,
|
||||||
|
tabs: mobileTabs,
|
||||||
|
avatar: mobileAvatar,
|
||||||
|
tooltip: mobileTooltip,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ========== Unset ==========
|
||||||
|
const unset = {
|
||||||
|
title: null,
|
||||||
|
paper: null,
|
||||||
|
tabs: null,
|
||||||
|
avatar: null,
|
||||||
|
tooltip: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = { desktop, mobile, unset };
|
||||||
|
export default styles;
|
||||||
|
|
@ -1,24 +1,9 @@
|
||||||
import {
|
import { Container } from '@mui/material';
|
||||||
Avatar,
|
|
||||||
AvatarGroup,
|
import Header from './Header';
|
||||||
Button,
|
import AnnouncementsTab from './AnnouncementsTab';
|
||||||
Card,
|
|
||||||
Container,
|
|
||||||
Grid,
|
|
||||||
Link,
|
|
||||||
Paper,
|
|
||||||
Skeleton,
|
|
||||||
Stack,
|
|
||||||
Tab,
|
|
||||||
Tabs,
|
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
} from '@mui/material';
|
|
||||||
import { TAB_OPTIONS } from './tabOptions';
|
|
||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
import AnnouncementCard from '../../components/AnnouncementCard';
|
|
||||||
import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
|
|
||||||
import jitsiLogo from '../../assets/jitsi.svg';
|
|
||||||
|
|
||||||
function View({
|
function View({
|
||||||
layoutType,
|
layoutType,
|
||||||
|
|
@ -27,288 +12,21 @@ function View({
|
||||||
onSelectTabOption,
|
onSelectTabOption,
|
||||||
announcementsTabData,
|
announcementsTabData,
|
||||||
}) {
|
}) {
|
||||||
const { title, container, paper, tabs, avatar, tooltip } = styles[layoutType];
|
const { container } = styles[layoutType];
|
||||||
if (layoutType === 'desktop') {
|
|
||||||
return (
|
return (
|
||||||
<Container disableGutters sx={container}>
|
<Container disableGutters sx={container}>
|
||||||
{classroom === null ? (
|
<Header
|
||||||
<Skeleton variant="rectangular" width="100%" height={240} />
|
layoutType={layoutType}
|
||||||
) : (
|
classroom={classroom}
|
||||||
<Container disableGutters>
|
selectedTabOption={selectedTabOption}
|
||||||
<Paper
|
onSelectTabOption={onSelectTabOption}
|
||||||
sx={paper(classroom.color)}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<h1 style={title}>{classroom.name}</h1>
|
|
||||||
<Stack alignItems="center" direction="row" spacing={1}>
|
|
||||||
<AvatarGroup total={classroom.teachers.length}>
|
|
||||||
{classroom.teachers.map(t => (
|
|
||||||
<Avatar
|
|
||||||
key={t.name}
|
|
||||||
alt={t.name}
|
|
||||||
src={t.avatar}
|
|
||||||
sx={avatar}
|
|
||||||
/>
|
/>
|
||||||
))}
|
<AnnouncementsTab
|
||||||
</AvatarGroup>
|
layoutType={layoutType}
|
||||||
<Tooltip title={classroom.teachers.map(t => t.name).join(', ')}>
|
announcementsTabData={announcementsTabData}
|
||||||
<Typography
|
|
||||||
sx={tooltip}
|
|
||||||
variant="body3"
|
|
||||||
color="text.secondary"
|
|
||||||
>
|
|
||||||
{classroom.teachers.map(t => t.name).join(', ')}
|
|
||||||
</Typography>
|
|
||||||
</Tooltip>
|
|
||||||
</Stack>
|
|
||||||
<Tabs
|
|
||||||
value={selectedTabOption}
|
|
||||||
onChange={onSelectTabOption}
|
|
||||||
aria-label="Tabs para informações da disciplina"
|
|
||||||
variant="fullWidth"
|
|
||||||
sx={tabs}
|
|
||||||
>
|
|
||||||
{TAB_OPTIONS.map(option => (
|
|
||||||
<Tab key={option.value} label={option.lable} />
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
</Paper>
|
|
||||||
</Container>
|
|
||||||
)}
|
|
||||||
{announcementsTabData === null ? (
|
|
||||||
<Grid sx={container} container spacing={2}>
|
|
||||||
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
|
||||||
{createArrayFrom1ToN(2).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={200}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
/>
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
|
||||||
{createArrayFrom1ToN(4).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={250}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
) : (
|
|
||||||
<Grid sx={container} container spacing={2}>
|
|
||||||
<Grid sx={{ padding: '0 !important' }} item xs={4}>
|
|
||||||
<Stack gap="30px">
|
|
||||||
<Card
|
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
|
||||||
<Container
|
|
||||||
disableGutters
|
|
||||||
sx={{ display: 'flex', justifyContent: 'row' }}
|
|
||||||
>
|
|
||||||
<img src={jitsiLogo} alt="Jitsi Meet" />
|
|
||||||
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
href="https://google.com"
|
|
||||||
target="__blank"
|
|
||||||
>
|
|
||||||
Entrar
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
<Card
|
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
|
||||||
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
|
||||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
|
||||||
<Link sx={{ fontSize: '15px' }} key={ua.id}>
|
|
||||||
{ua.title}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
<Grid sx={{ paddingTop: '0 !important' }} item xs={8}>
|
|
||||||
<Stack
|
|
||||||
sx={{ width: '100%', paddingTop: 0 }}
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
>
|
|
||||||
{announcementsTabData.announcements.map(announcement => (
|
|
||||||
<AnnouncementCard
|
|
||||||
key={announcement.id}
|
|
||||||
announcement={announcement}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
} else if (layoutType === 'mobile') {
|
|
||||||
return (
|
|
||||||
<Container disableGutters sx={container}>
|
|
||||||
{classroom === null ? (
|
|
||||||
<Skeleton variant="rectangular" width="100%" height={240} />
|
|
||||||
) : (
|
|
||||||
<Container disableGutters>
|
|
||||||
<Paper
|
|
||||||
sx={paper(classroom.color)}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<h1 style={title}>{classroom.name}</h1>
|
|
||||||
<Stack alignItems="center" direction="row" spacing={1}>
|
|
||||||
<AvatarGroup total={classroom.teachers.length}>
|
|
||||||
{classroom.teachers.map(t => (
|
|
||||||
<Avatar
|
|
||||||
key={t.name}
|
|
||||||
alt={t.name}
|
|
||||||
src={t.avatar}
|
|
||||||
sx={avatar}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</AvatarGroup>
|
|
||||||
<Tooltip title={classroom.teachers.map(t => t.name).join(', ')}>
|
|
||||||
<Typography
|
|
||||||
sx={tooltip}
|
|
||||||
variant="body3"
|
|
||||||
color="text.secondary"
|
|
||||||
>
|
|
||||||
{classroom.teachers.map(t => t.name).join(', ')}
|
|
||||||
</Typography>
|
|
||||||
</Tooltip>
|
|
||||||
</Stack>
|
|
||||||
<Tabs
|
|
||||||
value={selectedTabOption}
|
|
||||||
onChange={onSelectTabOption}
|
|
||||||
aria-label="Tabs para informações da disciplina"
|
|
||||||
variant="fullWidth"
|
|
||||||
sx={tabs}
|
|
||||||
>
|
|
||||||
{TAB_OPTIONS.map(option => (
|
|
||||||
<Tab key={option.value} label={option.lable} />
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
</Paper>
|
|
||||||
</Container>
|
|
||||||
)}
|
|
||||||
{announcementsTabData === null ? (
|
|
||||||
<Stack
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
sx={{ marginTop: '30px' }}
|
|
||||||
>
|
|
||||||
{createArrayFrom1ToN(2).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={200}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{createArrayFrom1ToN(4).map(i => (
|
|
||||||
<Skeleton
|
|
||||||
key={i}
|
|
||||||
variant="rectangular"
|
|
||||||
width="100%"
|
|
||||||
height={250}
|
|
||||||
sx={{ marginBottom: '30px' }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
) : (
|
|
||||||
<Stack
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
sx={{ marginTop: '30px' }}
|
|
||||||
>
|
|
||||||
<Stack gap="30px">
|
|
||||||
<Card
|
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
|
||||||
<Container
|
|
||||||
disableGutters
|
|
||||||
sx={{ display: 'flex', justifyContent: 'row' }}
|
|
||||||
>
|
|
||||||
<img src={jitsiLogo} alt="Jitsi Meet" />
|
|
||||||
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
href="https://google.com"
|
|
||||||
target="__blank"
|
|
||||||
>
|
|
||||||
Entrar
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
<Card
|
|
||||||
sx={{ width: '100%', padding: '20px' }}
|
|
||||||
elevation={4}
|
|
||||||
variant="elevation"
|
|
||||||
>
|
|
||||||
<Stack justifyContent="flex-start" spacing={1}>
|
|
||||||
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
|
|
||||||
{announcementsTabData.upcomingAssignments.map(ua => (
|
|
||||||
<Link sx={{ fontSize: '15px' }} key={ua.id}>
|
|
||||||
{ua.title}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
</Stack>
|
|
||||||
<Stack
|
|
||||||
sx={{ width: '100%' }}
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
flexWrap="wrap"
|
|
||||||
direction="row"
|
|
||||||
gap="30px"
|
|
||||||
>
|
|
||||||
{announcementsTabData.announcements.map(announcement => (
|
|
||||||
<AnnouncementCard
|
|
||||||
key={announcement.id}
|
|
||||||
announcement={announcement}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</Stack>
|
|
||||||
)}
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default View;
|
export default View;
|
||||||
|
|
|
||||||
|
|
@ -31,14 +31,15 @@ function Classroom() {
|
||||||
setClassroom(result.data);
|
setClassroom(result.data);
|
||||||
}
|
}
|
||||||
|
|
||||||
getClassroomById(params.id);
|
function updateDocumentTitle() {
|
||||||
}, [fetchClassroomById, params]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (classroom !== null) {
|
if (classroom !== null) {
|
||||||
document.title = classroom.name;
|
document.title = classroom.name;
|
||||||
}
|
}
|
||||||
}, [classroom]);
|
}
|
||||||
|
|
||||||
|
getClassroomById(params.id);
|
||||||
|
updateDocumentTitle();
|
||||||
|
}, [fetchClassroomById, params, classroom]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function getSelectedTabData() {
|
async function getSelectedTabData() {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,4 @@
|
||||||
// ========== Desktop ==========
|
// ========== Desktop ==========
|
||||||
const desktopTitle = {
|
|
||||||
fontWeight: 500,
|
|
||||||
};
|
|
||||||
|
|
||||||
const desktopContainer = {
|
const desktopContainer = {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100vh',
|
height: '100vh',
|
||||||
|
|
@ -12,47 +8,11 @@ const desktopContainer = {
|
||||||
marginTop: '50px',
|
marginTop: '50px',
|
||||||
};
|
};
|
||||||
|
|
||||||
const desktopPaper = classColor => ({
|
|
||||||
width: '100%',
|
|
||||||
borderTop: `5px solid ${classColor}`,
|
|
||||||
padding: '20px',
|
|
||||||
});
|
|
||||||
|
|
||||||
const desktopTabs = {
|
|
||||||
marginLeft: '-20px',
|
|
||||||
marginRight: '-20px',
|
|
||||||
marginBottom: '-20px',
|
|
||||||
marginTop: '30px',
|
|
||||||
};
|
|
||||||
|
|
||||||
const desktopAvatar = {
|
|
||||||
width: 30,
|
|
||||||
height: 30,
|
|
||||||
};
|
|
||||||
|
|
||||||
const desktopTooltip = {
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 2,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
};
|
|
||||||
|
|
||||||
const desktop = {
|
const desktop = {
|
||||||
title: desktopTitle,
|
|
||||||
container: desktopContainer,
|
container: desktopContainer,
|
||||||
paper: desktopPaper,
|
|
||||||
tabs: desktopTabs,
|
|
||||||
avatar: desktopAvatar,
|
|
||||||
tooltip: desktopTooltip,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// ========== Mobile ==========
|
// ========== Mobile ==========
|
||||||
const mobileTitle = {
|
|
||||||
fontWeight: 500,
|
|
||||||
fontSize: '25px',
|
|
||||||
};
|
|
||||||
|
|
||||||
const mobileContainer = {
|
const mobileContainer = {
|
||||||
width: '90%',
|
width: '90%',
|
||||||
backgroundColor: '#red',
|
backgroundColor: '#red',
|
||||||
|
|
@ -61,49 +21,13 @@ const mobileContainer = {
|
||||||
paddingBottom: '100px',
|
paddingBottom: '100px',
|
||||||
};
|
};
|
||||||
|
|
||||||
const mobilePaper = classColor => ({
|
|
||||||
width: '100%',
|
|
||||||
borderTop: `5px solid ${classColor}`,
|
|
||||||
padding: '10px',
|
|
||||||
});
|
|
||||||
|
|
||||||
const mobileTabs = {
|
|
||||||
marginLeft: '-10px',
|
|
||||||
marginRight: '-10px',
|
|
||||||
marginBottom: '-10px',
|
|
||||||
marginTop: '30px',
|
|
||||||
};
|
|
||||||
|
|
||||||
const mobileAvatar = {
|
|
||||||
width: 30,
|
|
||||||
height: 30,
|
|
||||||
};
|
|
||||||
|
|
||||||
const mobileTooltip = {
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
display: '-webkit-box',
|
|
||||||
WebkitLineClamp: 2,
|
|
||||||
WebkitBoxOrient: 'vertical',
|
|
||||||
};
|
|
||||||
|
|
||||||
const mobile = {
|
const mobile = {
|
||||||
title: mobileTitle,
|
|
||||||
container: mobileContainer,
|
container: mobileContainer,
|
||||||
paper: mobilePaper,
|
|
||||||
tabs: mobileTabs,
|
|
||||||
avatar: mobileAvatar,
|
|
||||||
tooltip: mobileTooltip,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// ========== Unset ==========
|
// ========== Unset ==========
|
||||||
const unset = {
|
const unset = {
|
||||||
title: null,
|
|
||||||
container: null,
|
container: null,
|
||||||
paper: null,
|
|
||||||
tabs: null,
|
|
||||||
avatar: null,
|
|
||||||
tooltip: null,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = { desktop, mobile, unset };
|
const styles = { desktop, mobile, unset };
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue