Skip to content

Commit bbae389

Browse files
mattcuentomattcuento
committed
Merge branch 'dev' of https://github.com/CPSECapstone/webrew into task-styling
2 parents d8a8167 + b22e354 commit bbae389

File tree

7 files changed

+160
-10
lines changed

7 files changed

+160
-10
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
- [Environment Directions](docs/environment_directions.md)
99
- [Code Contribution Guidlines](docs/linter_info.md)
1010
- [Use Chrome Debugger In VS Code](docs/use_chrome_debugger_in_vscode.md)
11+
- [Generate GraphQL Types](docs/codegen.md)
1112

1213
### References
1314

‎codegen.yml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
overwrite: true
2-
schema: 'https://18wi8h43il.execute-api.us-east-1.amazonaws.com/dev-flipted/graphql'
2+
schema:
3+
[
4+
{
5+
'https://18wi8h43il.execute-api.us-east-1.amazonaws.com/dev-flipted/graphql':
6+
{ headers: { Authorization: ${AUTH_TOKEN} } },
7+
},
8+
]
9+
310
documents:
411
- src/hooks/*.graphql
512
generates:

‎docs/codegen.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
### Code Generation Manual
2+
3+
### Directions
4+
5+
1. Log in to the front-end app with valid credentials
6+
2. Collect the JWT Auhtorization token by navigating to local storage and copying the "jwt" value
7+
3. Run the following command
8+
9+
```
10+
AUTH_TOKEN=xxxxx npm run generate
11+
```
12+
*replace the xxxx with the token as is, no added quotations

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"aws-amplify": "^3.3.26",
2626
"aws-amplify-react": "^4.2.30",
2727
"bootstrap": "^4.6.0",
28+
"clsx": "^1.1.1",
2829
"eslint-plugin-react": "^7.23.1",
2930
"formik": "^2.2.6",
3031
"get-video-id": "^3.2.0",

‎src/Screens/TaskView/Rubric/Rubric.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Checkbox, MenuItem } from '@material-ui/core';
1+
import { Checkbox, MenuItem, Typography } from '@material-ui/core';
22
import { useState } from 'react';
3-
import { Navbar, Nav, Form, Button, Dropdown } from 'react-bootstrap';
3+
4+
import { Form } from 'react-bootstrap';
45
import { RubricRequirement } from '../../../__generated__/types';
56

67
function Rubric({ requirement }: { requirement: RubricRequirement }) {
@@ -9,17 +10,17 @@ function Rubric({ requirement }: { requirement: RubricRequirement }) {
910
const handleChange = () => {
1011
setComplete(!complete);
1112
};
13+
1214
return (
13-
<MenuItem>
15+
<MenuItem style={{ width: '100%' }}>
1416
<Form.Group>
1517
<Checkbox
1618
checked={complete}
1719
onChange={handleChange}
1820
inputProps={{ 'aria-label': 'primary checkbox' }}
1921
color="default"
2022
/>
21-
{/* <Form.Check required checked={requirement.isComplete} /> */}
22-
<Form.Label>{requirement.description}</Form.Label>
23+
<Typography>{requirement.description}</Typography>
2324
</Form.Group>
2425
</MenuItem>
2526
);

‎src/Screens/TaskView/Rubric/RubricMenu.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import {
2+
createStyles,
3+
Divider,
4+
Drawer,
5+
IconButton,
6+
makeStyles,
7+
Theme,
8+
useTheme,
9+
Typography,
10+
} from '@material-ui/core';
11+
import { Form, Button, NavDropdown } from 'react-bootstrap';
12+
import { ChevronLeft, ChevronRight, Menu } from '@material-ui/icons';
13+
import clsx from 'clsx';
14+
import React from 'react';
15+
import { RubricRequirement } from '../../../__generated__/types';
16+
import Rubric from './Rubric';
17+
18+
const useStyles = makeStyles((theme: Theme) =>
19+
createStyles({
20+
root: {
21+
display: 'flex',
22+
},
23+
appBar: {
24+
transition: theme.transitions.create(['margin', 'width'], {
25+
easing: theme.transitions.easing.sharp,
26+
duration: theme.transitions.duration.leavingScreen,
27+
}),
28+
},
29+
appBarShift: {
30+
transition: theme.transitions.create(['margin', 'width'], {
31+
easing: theme.transitions.easing.easeOut,
32+
duration: theme.transitions.duration.enteringScreen,
33+
}),
34+
},
35+
title: {
36+
flexGrow: 1,
37+
},
38+
hide: {
39+
display: 'none',
40+
},
41+
drawer: {
42+
flexShrink: 0,
43+
},
44+
drawerPaper: {},
45+
drawerHeader: {
46+
display: 'flex',
47+
alignItems: 'center',
48+
padding: theme.spacing(0, 1),
49+
// necessary for content to be below app bar
50+
...theme.mixins.toolbar,
51+
justifyContent: 'flex-start',
52+
},
53+
content: {
54+
flexGrow: 1,
55+
padding: theme.spacing(3),
56+
transition: theme.transitions.create('margin', {
57+
easing: theme.transitions.easing.sharp,
58+
duration: theme.transitions.duration.leavingScreen,
59+
}),
60+
},
61+
contentShift: {
62+
transition: theme.transitions.create('margin', {
63+
easing: theme.transitions.easing.easeOut,
64+
duration: theme.transitions.duration.enteringScreen,
65+
}),
66+
marginRight: 0,
67+
},
68+
})
69+
);
70+
71+
function RubricMenu({ requirements }: { requirements: RubricRequirement[] }) {
72+
const classes = useStyles();
73+
const theme = useTheme();
74+
const [open, setOpen] = React.useState(false);
75+
76+
const handleDrawerOpen = () => {
77+
setOpen(true);
78+
};
79+
80+
const handleDrawerClose = () => {
81+
setOpen(false);
82+
};
83+
return (
84+
<div>
85+
<IconButton
86+
color="inherit"
87+
aria-label="open drawer"
88+
edge="end"
89+
onClick={handleDrawerOpen}
90+
className={clsx(open && classes.hide)}
91+
>
92+
<Menu />
93+
<Typography>Task Rubric</Typography>
94+
</IconButton>
95+
<Drawer
96+
className={classes.drawer}
97+
variant="persistent"
98+
anchor="right"
99+
open={open}
100+
classes={{
101+
paper: classes.drawerPaper,
102+
}}
103+
>
104+
<div className={classes.drawerHeader}>
105+
<IconButton onClick={handleDrawerClose}>
106+
{theme.direction === 'rtl' ? <ChevronLeft /> : <ChevronRight />}
107+
</IconButton>
108+
<Typography>Task Rubric</Typography>
109+
</div>
110+
<Divider />
111+
<Form>
112+
{requirements.map((requirement: RubricRequirement) => (
113+
<Rubric requirement={requirement} />
114+
))}
115+
<NavDropdown.Divider />
116+
<Button className="mx-auto" type="submit">
117+
Submit Task
118+
</Button>
119+
</Form>
120+
</Drawer>
121+
</div>
122+
);
123+
}
124+
125+
export default RubricMenu;

‎src/Screens/TaskView/TaskNavbar/TaskNavbar.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Dispatch, SetStateAction } from 'react';
44
import { Navbar, Nav, Form, Button, NavDropdown, Dropdown } from 'react-bootstrap';
55
import { RubricRequirement } from '../../../__generated__/types';
66
import Rubric from '../Rubric/Rubric';
7+
import RubricMenu from '../Rubric/RubricMenu';
78
import './TaskNavbar.css';
89

910
function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
@@ -12,7 +13,7 @@ function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
1213
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
1314
<Navbar.Collapse id="responsive-navbar-nav">
1415
<Nav className="container-fluid">
15-
<Form inline>
16+
<Form className="mr-3" inline>
1617
<Button className="rounded-circle btn-light" type="submit" href="/">
1718
<FontAwesomeIcon icon={faCaretLeft} />
1819
</Button>
@@ -22,8 +23,10 @@ function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
2223
<FontAwesomeIcon icon={faHandPaper} />
2324
</Button>
2425
</Form>
25-
26-
<NavDropdown drop="left" title="Task Rubric" id="rubric-dropdown" className="ml-2">
26+
<div className="ml-1 mr-0">
27+
<RubricMenu requirements={rubric} />
28+
</div>
29+
{/* <NavDropdown drop="left" title="Task Rubric" id="rubric-dropdown" className="ml-2">
2730
<Form>
2831
{rubric.map((requirement: RubricRequirement) => (
2932
<Rubric requirement={requirement} />
@@ -33,7 +36,7 @@ function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
3336
Submit Task
3437
</Button>
3538
</Form>
36-
</NavDropdown>
39+
</NavDropdown> */}
3740
</Nav>
3841
</Navbar.Collapse>
3942
</Navbar>

0 commit comments

Comments
 (0)