Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin' into 207-add-markdown-documenta…
Browse files Browse the repository at this point in the history 
…tion-for-rsc
  • Loading branch information
@chrtorres
chrtorres committed May 8, 2024
2 parents d7323e7 + aaae644 commit fd5152e
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 41 deletions.
13 changes: 8 additions & 5 deletions frontend/src/components/ReadySetCyber/RSCDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,10 @@ export const RSCDetail: React.FC = () => {
<RSCSideNav categories={categories} />
</Grid>
<Grid item xs={12} sm={8}>
<Box sx={{ marginBottom: 2, display: { sm: 'none' } }}>
<RSCAccordionNav categories={categories} />
</Box>
<Stack spacing={2}>
<Box sx={{ marginBottom: 2, display: { sm: 'none' } }}>
<RSCAccordionNav categories={categories} />
</Box>
<Box
sx={{
flexGrow: 1,
Expand All @@ -78,9 +78,12 @@ export const RSCDetail: React.FC = () => {
direction="row"
justifyContent="space-between"
alignItems="center"
padding={2}
>
<Typography variant="h5" component="div">
<Typography
variant="h3"
component="div"
style={{ color: '#003E67', fontWeight: 'bold' }}
>
Summary and Resources
</Typography>
<Button
Expand Down
90 changes: 58 additions & 32 deletions frontend/src/components/ReadySetCyber/RSCQuestion.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import { Box, Button, Grid, Typography, Radio } from '@mui/material';
import { Box, Button, Grid, Typography, Radio, Divider } from '@mui/material';
import { isResourceVisible } from './helpers/index';
import { IconFilter } from './components/index';
import { Stack } from '@mui/system';

interface Props {
categories: Category[];
Expand Down Expand Up @@ -47,6 +48,7 @@ export const RSCQuestion: React.FC<Props> = ({ categories }) => {
component="div"
sx={{ marginTop: 2, color: '#1976d2' }}
id={category.name}
style={{ fontWeight: 'bold', color: '#003E67' }}
>
{category.name}
</Typography>
Expand All @@ -55,13 +57,18 @@ export const RSCQuestion: React.FC<Props> = ({ categories }) => {
key={entryIndex}
sx={{
width: '100%',
bgcolor: '#f0f0f0',
bgcolor: '#F5FAFC',
padding: 2,
borderRadius: 2,
marginBottom: 2
marginBottom: 2,
border: '.1rem solid #B8D9E8'
}}
>
<Typography variant="h6" gutterBottom>
<Typography
variant="h6"
gutterBottom
style={{ color: '#003E67' }}
>
Question {questionNumber(entry.question.number)}
</Typography>
<Typography variant="subtitle1" gutterBottom>
Expand All @@ -73,21 +80,24 @@ export const RSCQuestion: React.FC<Props> = ({ categories }) => {
</Typography>
)}
<Typography variant="subtitle2" gutterBottom>
Response:
<Grid
container
sx={{
alignItems: 'center',
backgroundColor: 'white',
width: 'fit-content',
border: '2px solid #ccc',
borderRadius: 0
border: '.1rem solid #0078AE',
borderRadius: 1
}}
>
<Grid item marginLeft={'-0.25em'}>
<Radio checked={true} disabled={true} />
</Grid>
<Grid item paddingRight={'0.5em'}>
<Grid
item
paddingRight={'0.5em'}
style={{ color: '#0078AE', fontWeight: 'bold' }}
>
{entry.selection}
</Grid>
</Grid>
Expand All @@ -102,44 +112,60 @@ export const RSCQuestion: React.FC<Props> = ({ categories }) => {
marginTop: 1
}}
>
<Typography variant="h6" gutterBottom>
<Typography
variant="h6"
gutterBottom
style={{ color: '#003E67' }}
>
Recommended Resources
</Typography>
{entry.question.resources.map((resource, resIndex) => (
<Box
key={resIndex}
sx={{
borderBottom: '1px solid #ccc',
paddingBottom: 1,
marginBottom: 1
}}
>
<Grid container alignItems={'center'}>
<Grid item paddingRight={'0.25em'}>
<Stack spacing={2}>
<Stack
direction="row"
spacing={2}
alignItems="center"
>
<IconFilter type={resource.type} />
</Grid>

<Grid item>
<Typography variant="subtitle1">
<Typography
variant="subtitle1"
style={{ color: '#00528' }}
>
{resource.type.charAt(0).toUpperCase() +
resource.type.slice(1)}
</Typography>
</Grid>
</Grid>
<Typography variant="subtitle2">
{resource.name}
</Typography>
<Typography variant="body2">
{resource.description}
</Typography>
<Button
variant="outlined"
color="primary"
href={resource.url}
target="_blank"
>
Visit Resource
</Button>
</Stack>

<Typography
variant="subtitle2"
style={{ color: '#0078ae' }}
>
{resource.name}
</Typography>
<Typography variant="body2">
{resource.description}
</Typography>
<Button
variant="contained"
href={resource.url}
target="_blank"
style={{
color: 'white',
backgroundColor: '#0078ae'
}}
sx={{ width: 'fit-content' }}
>
Visit Resource
</Button>
<Divider />
</Stack>
</Box>
))}
</Box>
Expand Down
26 changes: 22 additions & 4 deletions frontend/src/components/ReadySetCyber/RSCResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,29 @@ interface Props {
}

export const RSCResult: React.FC<Props> = (props) => {
const { id, type, createdAt: date } = props;
const { id, type, createdAt } = props;
const history = useHistory();
const handleClick = () => {
history.push(`/readysetcyber/result/${id}`);
};

const formatDate = new Date(createdAt).toLocaleDateString();

const removeUnderscores = (str: string) => {
return str.replace(/_/g, ' ');
};
const capitalizeFirstLetterOfEachWord = (str: string) => {
return str
.split(' ')
.map((word) => {
return word.charAt(0).toUpperCase() + word.slice(1);
})
.join(' ');
};
const formatName = (str: string) => {
return capitalizeFirstLetterOfEachWord(removeUnderscores(str));
};

return (
<Card onClick={handleClick}>
<Box sx={{ width: '100%', bgcolor: 'background.paper', p: 2 }}>
Expand All @@ -27,10 +45,10 @@ export const RSCResult: React.FC<Props> = (props) => {
justifyContent={'space-between'}
alignItems="center"
>
<Typography variant="h5" component="div">
{type}
<Typography variant="h6" component="div">
{formatName(type)}
</Typography>
<Typography variant="h5">{date}</Typography>
<Typography variant="h6">Created: {formatDate}</Typography>
</Stack>
</Box>
</Card>
Expand Down

0 comments on commit fd5152e

Please sign in to comment.