Skip to content

Commit 518a378

Browse files
Aksh-Bansal-devAksh-Bansal-dev
committed
feat(frontend): add Event & Poll component
1 parent d75421a commit 518a378

18 files changed

Lines changed: 647 additions & 60 deletions

‎frontend/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@date-io/date-fns": "1.x",
67
"@material-ui/core": "^4.11.4",
78
"@material-ui/icons": "^4.11.2",
89
"@material-ui/lab": "^4.0.0-alpha.58",
10+
"@material-ui/pickers": "^3.3.10",
911
"@testing-library/jest-dom": "^5.11.4",
1012
"@testing-library/react": "^11.1.0",
1113
"@testing-library/user-event": "^12.1.10",
14+
"date-fns": "^2.22.1",
1215
"formik": "^2.2.6",
1316
"query-string": "^7.0.0",
1417
"react": "^17.0.1",

‎frontend/src/components/Buttons/MoreOptions.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎frontend/src/components/Buttons/MoreOptionsButton.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { IconButton, IconButtonProps } from "@material-ui/core";
2+
import { MoreHoriz } from "@material-ui/icons";
3+
import React from "react";
4+
import MenuOptions from "../Meeting/MenuOptions";
5+
6+
type MoreOptionsInterface = {
7+
formType: number;
8+
} & IconButtonProps;
9+
const MoreOptionsButton: React.FC<MoreOptionsInterface> = ({
10+
formType,
11+
...props
12+
}) => {
13+
const [menuOpen, setMenuOpen] = React.useState(false);
14+
const someRef = React.useRef(null);
15+
const handleClose = () => {
16+
setMenuOpen(false);
17+
};
18+
return (
19+
<>
20+
<IconButton onClick={() => setMenuOpen(true)} {...props}>
21+
<MoreHoriz ref={someRef} />
22+
</IconButton>
23+
<MenuOptions
24+
type={formType}
25+
parent={someRef.current}
26+
close={handleClose}
27+
open={menuOpen}
28+
/>
29+
</>
30+
);
31+
};
32+
33+
export default MoreOptionsButton;

‎frontend/src/components/FormikDateTimeField.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import "date-fns";
2+
import DateFnsUtils from "@date-io/date-fns";
3+
import { Grid } from "@material-ui/core";
4+
import {
5+
MuiPickersUtilsProvider,
6+
KeyboardDatePicker,
7+
KeyboardTimePicker,
8+
} from "@material-ui/pickers";
9+
import { FieldHookConfig, useField, useFormikContext } from "formik";
10+
import React from "react";
11+
12+
type FormikDateTimeFieldProps = {
13+
// eslint-disable-next-line @typescript-eslint/ban-types
14+
} & FieldHookConfig<string>;
15+
16+
const FormikDateTimeField: React.FC<FormikDateTimeFieldProps> = ({
17+
...props
18+
}) => {
19+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
20+
const [field, meta] = useField<any>(props);
21+
const { setFieldValue } = useFormikContext();
22+
const errorText = meta.error && meta.touched ? meta.error : "";
23+
// const obj = {
24+
// label,
25+
// type,
26+
// };
27+
return (
28+
<MuiPickersUtilsProvider utils={DateFnsUtils}>
29+
<Grid container direction="column" justify="center">
30+
<KeyboardDatePicker
31+
{...field}
32+
margin="normal"
33+
id="date-picker-dialog"
34+
label="Date"
35+
format="MM/dd/yyyy"
36+
helperText={errorText}
37+
error={!!errorText}
38+
onChange={(val) => setFieldValue(field.name, val)}
39+
KeyboardButtonProps={{
40+
"aria-label": "change date",
41+
}}
42+
/>
43+
<KeyboardTimePicker
44+
{...field}
45+
margin="normal"
46+
id="time-picker"
47+
label="Time"
48+
helperText={errorText}
49+
onChange={(val) => setFieldValue(field.name, val)}
50+
error={!!errorText}
51+
KeyboardButtonProps={{
52+
"aria-label": "change time",
53+
}}
54+
/>
55+
</Grid>
56+
</MuiPickersUtilsProvider>
57+
);
58+
};
59+
60+
export default FormikDateTimeField;

frontend/src/components/RegistrationForm/FormikTextField.tsx renamed to frontend/src/components/FormikTextField.tsx

File renamed without changes.

‎frontend/src/components/Meeting/CreateButton.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { IconButton, IconButtonProps } from "@material-ui/core";
2+
import { Create } from "@material-ui/icons";
3+
import React from "react";
4+
import { createStyles, makeStyles } from "@material-ui/core/styles";
5+
import MeetingForm from "./meetingStuff/MeetingForm";
6+
import PollForm from "./pollStuff/PollForm";
7+
8+
const useStyles = makeStyles(() =>
9+
createStyles({
10+
root: {
11+
background: "rgba(255, 255, 255, 0.5)",
12+
position: "fixed",
13+
bottom: "20px",
14+
right: "20px",
15+
zIndex: 3,
16+
},
17+
})
18+
);
19+
20+
type CreateButtonProps = {
21+
formType: number;
22+
} & IconButtonProps;
23+
const CreateButton: React.FC<CreateButtonProps> = ({ formType, ...props }) => {
24+
const classes = useStyles();
25+
const [formOpen, setFormOpen] = React.useState(false);
26+
const forms = [
27+
<MeetingForm open={formOpen} close={() => setFormOpen(false)} />,
28+
<PollForm open={formOpen} close={() => setFormOpen(false)} />,
29+
];
30+
return (
31+
<>
32+
<IconButton
33+
color="inherit"
34+
className={classes.root}
35+
onClick={() => setFormOpen(true)}
36+
{...props}
37+
>
38+
<Create />
39+
</IconButton>
40+
{forms[formType]}
41+
</>
42+
);
43+
};
44+
45+
export default CreateButton;

‎frontend/src/components/Meeting/MeetingTabs.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import AppBar from "@material-ui/core/AppBar";
55
import Tabs from "@material-ui/core/Tabs";
66
import Tab from "@material-ui/core/Tab";
77
import Box from "@material-ui/core/Box";
8-
import MeetingCard from "./MeetingCard";
8+
import MeetingCard from "./meetingStuff/MeetingCard";
99
import "./MeetingTabs.css";
10+
import PollCard from "./pollStuff/PollCard";
11+
import CreateButton from "./CreateButton";
1012

1113
interface TabPanelProps {
1214
children?: React.ReactNode;
@@ -80,7 +82,7 @@ const MeetingTabs: React.FC = () => {
8082
textColor="inherit"
8183
variant="fullWidth"
8284
>
83-
<Tab label="Meetings" {...a11yProps(0)} />
85+
<Tab label="Events" {...a11yProps(0)} />
8486
<Tab label="Polls" {...a11yProps(1)} />
8587
</Tabs>
8688
</AppBar>
@@ -91,11 +93,17 @@ const MeetingTabs: React.FC = () => {
9193
>
9294
<TabPanel value={value} index={0} dir={theme.direction}>
9395
<MeetingCard />
96+
<MeetingCard />
97+
<MeetingCard />
98+
<MeetingCard />
99+
<MeetingCard />
100+
<MeetingCard />
94101
</TabPanel>
95102
<TabPanel value={value} index={1} dir={theme.direction}>
96-
Polllllling
103+
<PollCard />
97104
</TabPanel>
98105
</SwipeableViews>
106+
<CreateButton formType={value} />
99107
</div>
100108
);
101109
};

‎frontend/src/components/Meeting/MenuOptions.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react";
2+
import Menu from "@material-ui/core/Menu";
3+
import MenuItem from "@material-ui/core/MenuItem";
4+
import MeetingForm from "./meetingStuff/MeetingForm";
5+
import PollForm from "./pollStuff/PollForm";
6+
7+
interface MenuOptionsProps {
8+
open: boolean;
9+
type: number;
10+
close: () => void;
11+
parent: HTMLElement | null;
12+
}
13+
const MenuOptions: React.FC<MenuOptionsProps> = ({
14+
type,
15+
open,
16+
close,
17+
parent,
18+
}) => {
19+
const handleClick = () => {
20+
close();
21+
};
22+
const [formOpen, setFormOpen] = React.useState(false);
23+
24+
const forms = [
25+
<MeetingForm open={formOpen} close={() => setFormOpen(false)} />,
26+
<PollForm open={formOpen} close={() => setFormOpen(false)} />,
27+
];
28+
29+
return (
30+
<div>
31+
<Menu
32+
id="option-menu"
33+
anchorEl={parent}
34+
keepMounted
35+
open={open}
36+
onClose={close}
37+
>
38+
<MenuItem onClick={() => setFormOpen(true)}>Edit</MenuItem>
39+
<MenuItem onClick={handleClick}>Delete</MenuItem>
40+
</Menu>
41+
{forms[type]}
42+
</div>
43+
);
44+
};
45+
46+
export default MenuOptions;

‎frontend/src/components/Meeting/RegisterButton.tsx‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

frontend/src/components/Meeting/MeetingCard.tsx renamed to frontend/src/components/Meeting/meetingStuff/MeetingCard.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
33
import { Card, CardContent, Grid, Typography } from "@material-ui/core";
44
import RegisterButton from "./RegisterButton";
5-
import MoreOptions from "../Buttons/MoreOptions";
5+
import MoreOptionsButton from "../../Buttons/MoreOptionsButton";
66

77
const useStyles = makeStyles((theme: Theme) =>
88
createStyles({
@@ -37,7 +37,6 @@ const useStyles = makeStyles((theme: Theme) =>
3737
justifyContent: "center",
3838
[theme.breakpoints.down("xs")]: {
3939
alignItems: "flex-start",
40-
// flexDirection: "row",
4140
},
4241
},
4342
more: {
@@ -52,6 +51,7 @@ const useStyles = makeStyles((theme: Theme) =>
5251

5352
const MeetingCard: React.FC = ({}) => {
5453
const classes = useStyles();
54+
// const [registerState, setRegisterState] = useState(0);
5555
return (
5656
<Card className={classes.root}>
5757
<CardContent>
@@ -71,11 +71,11 @@ const MeetingCard: React.FC = ({}) => {
7171
</Typography>
7272
</Grid>
7373
<Grid item xs={12} sm={6} className={classes.alignRight}>
74-
<RegisterButton />
74+
<RegisterButton btnState={1} />
7575
<Typography className={classes.minorText}>25 registers</Typography>
7676
</Grid>
7777
</Grid>
78-
<MoreOptions className={classes.more} />
78+
<MoreOptionsButton formType={0} className={classes.more} />
7979
</CardContent>
8080
</Card>
8181
);

0 commit comments

Comments
 (0)