diff --git a/frontend/src/components/buttons/StepButtons.js b/frontend/src/components/buttons/StepButtons.js
new file mode 100644
index 000000000..63cfd20eb
--- /dev/null
+++ b/frontend/src/components/buttons/StepButtons.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { Button, Box } from '@material-ui/core';
+
+const useButtonStyles = makeStyles(theme => ({
+ button: {
+ marginLeft: theme.spacing(2)
+ }
+}));
+
+const StepButtons = ({ numSteps, activeStep, onBack, onNext, onFinish }) => {
+ const classes = useButtonStyles();
+ return (
+
+
+ Back
+
+
+ {activeStep === numSteps - 1 ? 'Finish' : 'Next'}
+
+
+ );
+};
+
+export default StepButtons;
diff --git a/frontend/src/components/filters/FilterForm.js b/frontend/src/components/filters/FilterForm.js
new file mode 100644
index 000000000..220298215
--- /dev/null
+++ b/frontend/src/components/filters/FilterForm.js
@@ -0,0 +1,153 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+
+import { connect } from 'react-redux';
+import { RegistrationFields, FilterTypes } from '@hackjunction/shared';
+import { makeStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import {
+ Grid,
+ Button,
+ ExpansionPanel,
+ ExpansionPanelSummary,
+ ExpansionPanelDetails,
+ ExpansionPanelActions,
+ Typography
+} from '@material-ui/core';
+
+import Select from 'components/inputs/Select';
+import FilterValueInput from './FilterValueInput';
+import * as OrganiserSelectors from 'redux/organiser/selectors';
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ padding: theme.spacing(2)
+ },
+ headingItem: {
+ marginRight: theme.spacing(1)
+ },
+ body: {
+ padding: theme.spacing(3)
+ }
+}));
+
+const FilterForm = ({ onSubmit, event }) => {
+ const classes = useStyles();
+ const [expanded, setExpanded] = useState(false);
+ const [filter, setFilter] = useState();
+ const [filterType, setFilterType] = useState();
+ const [filterValue, setFilterValue] = useState();
+
+ useEffect(() => {
+ setFilterType(undefined);
+ }, [filter]);
+
+ useEffect(() => {
+ setFilterValue(undefined);
+ }, [filterType]);
+
+ const toggleExpanded = useCallback(() => {
+ setExpanded(!expanded);
+ }, [expanded]);
+
+ const handleClear = useCallback(() => {
+ setExpanded(false);
+ setFilter(undefined);
+ setFilterType(undefined);
+ setFilterValue(undefined);
+ }, []);
+
+ const filterParams = useMemo(() => {
+ return filter ? JSON.parse(filter) : null;
+ }, [filter]);
+
+ const submitValue = useMemo(() => {
+ if (!filterParams) return null;
+ if (!filterType) return null;
+
+ return {
+ label: filterParams.label,
+ path: filterParams.path,
+ type: filterType,
+ value: filterValue
+ };
+ }, [filterParams, filterType, filterValue]);
+
+ const handleSubmit = useCallback(() => {
+ onSubmit(submitValue);
+ handleClear();
+ }, [submitValue, onSubmit, handleClear]);
+
+ const filterOptions = useMemo(() => {
+ return RegistrationFields.filters.map(filter => ({
+ value: JSON.stringify(filter),
+ label: filter.label
+ }));
+ }, []);
+
+ const filterTypeOptions = useMemo(() => {
+ if (!filterParams) return [];
+ const options = FilterTypes.filterTypesForType[filterParams.type];
+ if (!options) return [];
+
+ return options.map(option => ({
+ value: option,
+ label: FilterTypes.filterTypes[option].label
+ }));
+ }, [filterParams]);
+
+ return (
+
+
+ Add a filter
+
+
+
+
+
+
+
+ {filterTypeOptions.length > 0 && (
+
+
+
+
+
+
+ Cancel
+
+ Add
+
+
+
+ );
+};
+
+const mapState = state => ({
+ event: OrganiserSelectors.event(state)
+});
+
+export default connect(mapState)(FilterForm);
diff --git a/frontend/src/components/filters/FilterGroupMenu.js b/frontend/src/components/filters/FilterGroupMenu.js
new file mode 100644
index 000000000..91cb4d41d
--- /dev/null
+++ b/frontend/src/components/filters/FilterGroupMenu.js
@@ -0,0 +1,152 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { sortBy } from 'lodash-es';
+import { List, ListItem, ListItemText, Menu, MenuItem, Paper, Box, Divider } from '@material-ui/core';
+
+import FilterForm from './FilterForm';
+import FilterList from './FilterList';
+import FilterSaveForm from './FilterSaveForm';
+
+import * as OrganiserSelectors from 'redux/organiser/selectors';
+
+const useStyles = makeStyles(theme => ({
+ root: {}
+}));
+
+const FilterGroupMenu = ({
+ onChange = () => {},
+ onSelectedChange = () => {},
+ event,
+ filterGroups,
+ showEdit = true
+}) => {
+ const classes = useStyles();
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ const [selected, setSelected] = useState();
+ const [filters, setFilters] = useState([]);
+
+ useEffect(() => {
+ if (selected) {
+ setFilters(selected.filters);
+ } else {
+ setFilters([]);
+ }
+ }, [selected]);
+
+ useEffect(() => {
+ onSelectedChange(selected);
+ }, [selected, onSelectedChange]);
+
+ useEffect(() => {
+ onChange(filters);
+ }, [filters, onChange]);
+
+ const handleFilterAdd = useCallback(
+ filter => {
+ setFilters(filters.concat(filter));
+ },
+ [filters]
+ );
+
+ const handleClickListItem = event => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleMenuItemClick = option => {
+ if (option.isDefault) {
+ setSelected();
+ } else {
+ setSelected(option);
+ }
+ setAnchorEl(null);
+ };
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const options = useMemo(() => {
+ let items = [
+ {
+ label: 'All participants',
+ description: 'No filters',
+ filters: [],
+ isDefault: true
+ }
+ ];
+
+ if (showEdit) {
+ items.push({
+ label: 'New filters',
+ description: 'Apply a set of custom filters',
+ filters: [],
+ isAdd: true
+ });
+ }
+
+ items = items.concat(sortBy(filterGroups, 'label'));
+
+ return items;
+ }, [filterGroups, showEdit]);
+
+ const activeItem = selected || options[0];
+ const reservedLabels = options.map(option => option.label);
+
+ return (
+
+
+
+
+
+
+ {showEdit && !activeItem.isDefault && (
+
+
+ )}
+
+ );
+};
+
+const mapState = state => ({
+ filterGroups: OrganiserSelectors.filterGroups(state),
+ event: OrganiserSelectors.event(state)
+});
+
+export default connect(mapState)(FilterGroupMenu);
diff --git a/frontend/src/components/filters/FilterList.js b/frontend/src/components/filters/FilterList.js
new file mode 100644
index 000000000..6abfcbe44
--- /dev/null
+++ b/frontend/src/components/filters/FilterList.js
@@ -0,0 +1,79 @@
+import React, { useState, useCallback, useEffect } from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+import {
+ List,
+ Divider,
+ ExpansionPanel,
+ ExpansionPanelSummary,
+ ExpansionPanelDetails,
+ ExpansionPanelActions,
+ Typography,
+ Button,
+ Badge
+} from '@material-ui/core';
+import FilterListItem from 'components/filters/FilterListItem';
+
+const useStyles = makeStyles(theme => ({
+ headingItem: {
+ marginRight: theme.spacing(1)
+ },
+ badge: {
+ right: -1 * theme.spacing(2),
+ top: theme.spacing(1)
+ },
+ list: {
+ width: '100%'
+ }
+}));
+
+const FilterList = ({ activeItemKey, filters = [], onChange = () => {} }) => {
+ const classes = useStyles();
+ const [expanded, setExpanded] = useState(false);
+ const toggleExpanded = useCallback(() => setExpanded(!expanded), [expanded]);
+ const hasFilters = filters.length !== 0;
+
+ useEffect(() => {
+ setExpanded(false);
+ }, [activeItemKey]);
+
+ const handleRemove = useCallback(
+ index => {
+ const newFilters = filters.filter((filter, idx) => {
+ return idx !== index;
+ });
+ onChange(newFilters);
+ },
+ [onChange, filters]
+ );
+
+ return (
+
+
+ Active filters
+
+
+
+
+ {filters.map((filter, index) => (
+
+ {index !== 0 && handleRemove(index)} />
+
+ ))}
+
+
+
+ );
+};
+
+export default FilterList;
diff --git a/frontend/src/components/filters/FilterListItem.js b/frontend/src/components/filters/FilterListItem.js
new file mode 100644
index 000000000..825fe7a0a
--- /dev/null
+++ b/frontend/src/components/filters/FilterListItem.js
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import DeleteIcon from '@material-ui/icons/Delete';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Chip } from '@material-ui/core';
+import { FilterTypes } from '@hackjunction/shared';
+
+const useStyles = makeStyles(theme => ({
+ inline: {
+ display: 'inline'
+ },
+ chips: {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap'
+ },
+ chip: {
+ margin: 2
+ }
+}));
+
+const FilterListItem = ({ filter = {}, onRemove }) => {
+ const classes = useStyles();
+ const getType = () => {
+ const params = FilterTypes.filterTypes[filter.type];
+ return params ? params.label : filter.type;
+ };
+
+ const renderValue = (value) => {
+ if (Array.isArray(value)) {
+ return(
+
+ {value.map(item => (
+
+ ))}
+
+ )
+ }
+ return value;
+ }
+
+ return (
+
+
+
+ {getType()}
+ {' '}
+ {renderValue(filter.value)}
+
+ }
+ />
+ {typeof onRemove === 'function' && (
+
+
+
+
+ )}
+
+ );
+};
+
+export default FilterListItem;
diff --git a/frontend/src/components/filters/FilterSaveForm.js b/frontend/src/components/filters/FilterSaveForm.js
new file mode 100644
index 000000000..3b2ffc76b
--- /dev/null
+++ b/frontend/src/components/filters/FilterSaveForm.js
@@ -0,0 +1,209 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+import { withSnackbar } from 'notistack';
+import { connect } from 'react-redux';
+import {
+ ExpansionPanel,
+ ExpansionPanelSummary,
+ ExpansionPanelDetails,
+ ExpansionPanelActions,
+ Typography,
+ Button,
+ Grid,
+ CircularProgress
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import TextInput from 'components/inputs/TextInput';
+import { useFormField } from 'hooks/formHooks';
+import * as OrganiserActions from 'redux/organiser/actions';
+import * as OrganiserSelectors from 'redux/organiser/selectors';
+
+const FilterSaveForm = ({
+ createFilterGroup,
+ editFilterGroup,
+ deleteFilterGroup,
+ filters,
+ activeItem,
+ reservedLabels,
+ event,
+ enqueueSnackbar,
+ onSave,
+ onDelete
+}) => {
+ const isEdit = !activeItem.isDefault && !activeItem.isAdd;
+ const [loading, setLoading] = useState(false);
+ const [expanded, setExpanded] = useState(false);
+ const label = useFormField(isEdit ? activeItem.label : '', value => {
+ if (value.length === 0) {
+ return 'Name is required';
+ }
+
+ if (value.length > 50) {
+ return 'Name must be under 50 characters';
+ }
+
+ if (!isEdit) {
+ if (reservedLabels.indexOf(value) !== -1) {
+ return 'Name is already taken';
+ }
+ }
+
+ return;
+ });
+
+ const description = useFormField(isEdit ? activeItem.description : '', value => {
+ if (value.length > 100) {
+ return 'Description must be under 100 characters';
+ }
+
+ return;
+ });
+
+ const toggleExpanded = useCallback(
+ (event, isExpanded) => {
+ setExpanded(isExpanded);
+ label.setValue(isEdit ? activeItem.label : '');
+ description.setValue(isEdit ? activeItem.description : '');
+ },
+ [isEdit, label, description, activeItem]
+ );
+
+ useEffect(() => {
+ setExpanded(false);
+ }, [activeItem]);
+
+ const handleSubmit = () => {
+ const errs = [label.validate(), description.validate()].filter(err => err !== undefined);
+ if (errs.length > 0) {
+ return;
+ }
+
+ if (isEdit) {
+ handleEdit(label.value, description.value);
+ } else {
+ handleCreate(label.value, description.value);
+ }
+ };
+
+ const handleEdit = useCallback(
+ (label, description) => {
+ setLoading(true);
+ editFilterGroup(event.slug, label, description, filters)
+ .then(item => {
+ enqueueSnackbar('Edits saved!', { variant: 'success' });
+ toggleExpanded(null, false);
+ onSave(item);
+ })
+ .catch(err => {
+ enqueueSnackbar('Something went wrong', { variant: 'error' });
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ },
+ [onSave, toggleExpanded, enqueueSnackbar, event.slug, filters, editFilterGroup]
+ );
+
+ const handleCreate = useCallback(
+ (label, description) => {
+ setLoading(true);
+ createFilterGroup(event.slug, label, description, filters)
+ .then(item => {
+ enqueueSnackbar('Filter group created', { variant: 'success' });
+ toggleExpanded(null, false);
+ onSave(item);
+ })
+ .catch(err => {
+ enqueueSnackbar('Something went wrong', { variant: 'error' });
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ },
+ [onSave, toggleExpanded, enqueueSnackbar, event.slug, filters, createFilterGroup]
+ );
+
+ const handleDelete = useCallback(() => {
+ setLoading(true);
+ deleteFilterGroup(event.slug, label.value)
+ .then(() => {
+ enqueueSnackbar('Filter group deleted', { variant: 'success' });
+ toggleExpanded(null, false);
+ onDelete();
+ })
+ .catch(err => {
+ enqueueSnackbar('Something went wrong', { variant: 'error' });
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ }, [label, onDelete, toggleExpanded, enqueueSnackbar, deleteFilterGroup, event.slug]);
+
+ return (
+
+ {isEdit ? 'Edit these filters' : 'Save these filters'}
+
+
+
+ {!isEdit && (
+
+
+ You can save this filter group for later use. This allows you to easily view stats for
+ the group, and do things like bulk edit their applications or send an email to everyone
+ in the group.
+
+
+ )}
+
+
+
+
+
+
+
+ {loading &&
+ Delete filter group
+
+ )}
+
+ {isEdit ? 'Save edits' : 'Create new filter group'}
+
+
+
+ );
+};
+
+const mapState = state => ({
+ event: OrganiserSelectors.event(state)
+});
+
+const mapDispatch = dispatch => ({
+ createFilterGroup: (slug, label, description, filters) =>
+ dispatch(OrganiserActions.createFilterGroup(slug, label, description, filters)),
+ editFilterGroup: (slug, label, description, filters) =>
+ dispatch(OrganiserActions.editFilterGroup(slug, label, description, filters)),
+ deleteFilterGroup: (slug, label) => dispatch(OrganiserActions.deleteFilterGroup(slug, label))
+});
+
+export default withSnackbar(
+ connect(
+ mapState,
+ mapDispatch
+ )(FilterSaveForm)
+);
diff --git a/frontend/src/components/filters/FilterValueInput.js b/frontend/src/components/filters/FilterValueInput.js
new file mode 100644
index 000000000..9cad0dbb3
--- /dev/null
+++ b/frontend/src/components/filters/FilterValueInput.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { FilterTypes, FilterValues } from '@hackjunction/shared';
+
+import TextInput from 'components/inputs/TextInput';
+import Select from 'components/inputs/Select';
+
+const MULTI_TYPES = [
+ FilterTypes.filterTypes.ONE_OF.id,
+ FilterTypes.filterTypes.NOT_ONE_OF.id,
+ FilterTypes.filterTypes.CONTAINS_ONE_OF.id,
+ FilterTypes.filterTypes.NOT_CONTAINS_ONE_OF.id
+];
+
+const FilterValueInput = ({ filterType, valueType, value, onChange, event }) => {
+ const inputParams = { value, onChange };
+ switch (filterType) {
+ case FilterTypes.filterTypes.LESS_THAN.id:
+ case FilterTypes.filterTypes.NOT_LESS_THAN.id:
+ case FilterTypes.filterTypes.MORE_THAN.id:
+ case FilterTypes.filterTypes.NOT_MORE_THAN.id:
+ return (
+
+ );
+ case FilterTypes.filterTypes.CONTAINS.id:
+ case FilterTypes.filterTypes.NOT_CONTAINS.id:
+ case FilterTypes.filterTypes.EQUALS.id:
+ case FilterTypes.filterTypes.NOT_EQUALS.id:
+ case FilterTypes.filterTypes.ONE_OF.id:
+ case FilterTypes.filterTypes.NOT_ONE_OF.id:
+ case FilterTypes.filterTypes.CONTAINS_ONE_OF.id:
+ case FilterTypes.filterTypes.NOT_CONTAINS_ONE_OF.id:
+ const isMulti = MULTI_TYPES.indexOf(filterType) !== -1;
+ switch (valueType) {
+ case FilterValues.STRING:
+ return
;
+ case FilterValues.BOOLEAN:
+ return
;
+ case FilterValues.DATE:
+ return
;
+ case FilterValues.GENDER:
+ return
;
+ case FilterValues.NATIONALITY:
+ return
;
+ case FilterValues.COUNTRY:
+ return
;
+ case FilterValues.LANGUAGE:
+ return
;
+ case FilterValues.TAG:
+ const options = event.tags.map(tag => ({
+ value: tag.label,
+ label: tag.label
+ }));
+ return
;
+ case FilterValues.STATUS:
+ return
;
+ default:
+ return null;
+ }
+ case FilterTypes.filterTypes.IS_EMPTY:
+ case FilterTypes.filterTypes.NOT_EMPTY:
+ case FilterTypes.filterTypes.BOOLEAN_FALSE.id:
+ case FilterTypes.filterTypes.BOOLEAN_TRUE.id:
+ return null;
+ default:
+ return null;
+ }
+};
+
+export default FilterValueInput;
diff --git a/frontend/src/components/generic/ActionMenu/index.js b/frontend/src/components/generic/ActionMenu/index.js
new file mode 100644
index 000000000..4806b2fbe
--- /dev/null
+++ b/frontend/src/components/generic/ActionMenu/index.js
@@ -0,0 +1,57 @@
+import React, { useState, useCallback } from 'react';
+
+import { Menu, MenuItem, IconButton, Tooltip } from '@material-ui/core';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+
+const ActionMenu = ({ title = 'Actions', actions = [], actionProps }) => {
+ const [anchorEl, setAnchorEl] = useState(null);
+
+ const handleClick = useCallback(event => {
+ setAnchorEl(event.currentTarget);
+ }, []);
+
+ const handleClose = useCallback(event => {
+ setAnchorEl(null);
+ }, []);
+
+ const handleItemClick = action => {
+ action.action(...actionProps);
+ handleClose();
+ };
+
+ if (actions.length === 1) {
+ const action = actions[0];
+ return (
+
+ handleItemClick(action)}>
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export default ActionMenu;
diff --git a/frontend/src/components/generic/Empty/index.js b/frontend/src/components/generic/Empty/index.js
new file mode 100644
index 000000000..28152df5c
--- /dev/null
+++ b/frontend/src/components/generic/Empty/index.js
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { Box, Button } from '@material-ui/core';
+import InfoTwoToneIcon from '@material-ui/icons/InfoTwoTone';
+import Typography from 'antd/lib/typography/Typography';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ backgroundColor: '#efefef'
+ }
+}));
+
+const Empty = ({ isEmpty, emptyText = 'No data', button, hideIfNotEmpty = false }) => {
+ const classes = useStyles();
+
+ const renderButton = () => {
+ if (!button) return null;
+ return (
+
+ {button.text}
+
+ );
+ };
+
+ if (!isEmpty && !hideIfNotEmpty) {
+ return (
+
+ {renderButton()}
+
+ );
+ }
+
+ return (
+
+
+ {emptyText}
+
+ {button && {renderButton()} }
+
+ );
+};
+
+export default Empty;
diff --git a/frontend/src/components/generic/List/index.js b/frontend/src/components/generic/List/index.js
new file mode 100644
index 000000000..04104971b
--- /dev/null
+++ b/frontend/src/components/generic/List/index.js
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import objectPath from 'object-path';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { makeStyles } from '@material-ui/core/styles';
+
+import { List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Divider } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ padding: theme.spacing(2)
+ }
+}));
+
+const _List = ({
+ data = [],
+ rowKey,
+ renderPrimary = () => {},
+ renderSecondary = () => {},
+ emptyView = null,
+ onDelete,
+ hasDividers = true
+}) => {
+ const classes = useStyles();
+ if (data.length === 0) {
+ return emptyView;
+ }
+
+ return (
+
+ {data.map((item, index) => (
+
+ {index !== 0 &&
+
+ onDelete(item, index)}>
+
+
+ )}
+
+
+ ))}
+
+ );
+};
+
+export default _List;
diff --git a/frontend/src/components/generic/Modal/index.js b/frontend/src/components/generic/Modal/index.js
new file mode 100644
index 000000000..db59febad
--- /dev/null
+++ b/frontend/src/components/generic/Modal/index.js
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import HyperModal from 'react-hyper-modal';
+import classNames from 'classnames';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+ wrapper: {
+ display: 'flex',
+ zIndex: 100
+ },
+ wrapperPadded: {
+ padding: theme.spacing(2)
+ },
+ content: {
+ background: '#ffffff',
+ width: '100% !important',
+ maxWidth: '600px',
+ zIndex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch'
+ },
+ contentMed: {
+ maxWidth: '900px'
+ },
+ contentMax: {
+ maxWidth: 'none',
+ height: '100% !important',
+ borderRadius: '0 !important'
+ },
+ header: {
+ padding: theme.spacing(3),
+ textAlign: 'left'
+ },
+ inner: {
+ padding: '1rem',
+ flex: 1,
+ overflow: 'auto'
+ }
+}));
+
+const GenericModal = ({ title, isOpen, handleClose, size, children }) => {
+ const classes = useStyles();
+ return (
+
+
+ {title}
+
+ {children}
+
+ );
+};
+
+export default GenericModal;
diff --git a/frontend/src/components/generic/PageHeader/index.js b/frontend/src/components/generic/PageHeader/index.js
new file mode 100644
index 000000000..c1ccbb046
--- /dev/null
+++ b/frontend/src/components/generic/PageHeader/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { Box, Typography } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+ subheading: {
+ marginTop: theme.spacing(1),
+ marginLeft: theme.spacing(0.5),
+ fontFamily: 'Lato'
+ }
+}));
+
+const PageHeader = ({ heading, subheading }) => {
+ const classes = useStyles();
+ return (
+
+ {heading}
+ {subheading && (
+
+ {subheading}
+
+ )}
+
+ );
+};
+
+export default PageHeader;
diff --git a/frontend/src/components/generic/Statistic/index.js b/frontend/src/components/generic/Statistic/index.js
new file mode 100644
index 000000000..7e928ec5a
--- /dev/null
+++ b/frontend/src/components/generic/Statistic/index.js
@@ -0,0 +1,52 @@
+import React, { useState, useCallback } from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { Card, CardContent, Typography, Button, Box, CircularProgress } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+ value: {
+ textAlign: 'left'
+ },
+ suffix: {
+ marginLeft: theme.spacing(1),
+ display: 'inline-block'
+ }
+}));
+
+const Statistic = ({ label, value, suffix, action, actionText }) => {
+ const [actionLoading, setActionLoading] = useState();
+
+ const handleAction = useCallback(async () => {
+ setActionLoading(true);
+ await action();
+ setActionLoading(false);
+ }, [action]);
+ const classes = useStyles();
+ return (
+
+
+
+ {label}
+
+
+ {value}
+ {suffix && (
+
+ {suffix}
+
+ )}
+
+ {action && actionText && (
+
+ {actionLoading &&
+ {actionText}
+
+
+ )}
+
+
+ );
+};
+
+export default Statistic;
diff --git a/frontend/src/components/generic/Stepper/index.js b/frontend/src/components/generic/Stepper/index.js
new file mode 100644
index 000000000..7e068632d
--- /dev/null
+++ b/frontend/src/components/generic/Stepper/index.js
@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+
+import { Stepper, Step, StepLabel, StepContent } from '@material-ui/core';
+
+import StepButtons from 'components/buttons/StepButtons';
+
+const _Stepper = ({
+ steps = [],
+ activeStep = 0,
+ onStepChange,
+ onFinish,
+ stepperProps = { orientation: 'vertical' }
+}) => {
+ const handleNext = useCallback(() => {
+ onStepChange(activeStep + 1);
+ }, [onStepChange, activeStep]);
+
+ const handleBack = useCallback(() => {
+ onStepChange(activeStep - 1);
+ }, [onStepChange, activeStep]);
+
+ const handleDone = useCallback(() => {
+ onFinish();
+ }, [onFinish]);
+
+ return (
+
+ {steps.map((step, index) => (
+
+ {step.label}
+
+ {step.render()}
+
+
+ ))}
+
+ );
+};
+
+export default _Stepper;
diff --git a/frontend/src/components/generic/Table/TablePaginationActions.js b/frontend/src/components/generic/Table/TablePaginationActions.js
new file mode 100644
index 000000000..e0972862c
--- /dev/null
+++ b/frontend/src/components/generic/Table/TablePaginationActions.js
@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+
+import { IconButton, Box } from '@material-ui/core';
+
+import FirstPageIcon from '@material-ui/icons/FirstPage';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+import LastPageIcon from '@material-ui/icons/LastPage';
+
+const TablePaginationActions = ({ count, page, rowsPerPage, onChangePage }) => {
+ const handleFirstPageButtonClick = useCallback(
+ event => {
+ onChangePage(event, 0);
+ },
+ [onChangePage]
+ );
+
+ const handleBackButtonClick = useCallback(
+ event => {
+ onChangePage(event, page - 1);
+ },
+ [onChangePage, page]
+ );
+
+ const handleNextButtonClick = useCallback(
+ event => {
+ onChangePage(event, page + 1);
+ },
+ [onChangePage, page]
+ );
+
+ const handleLastPageButtonClick = useCallback(
+ event => {
+ onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+ },
+ [onChangePage, count, rowsPerPage]
+ );
+
+ return (
+
+
+
+
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="next page"
+ >
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="last page"
+ >
+
+
+ );
+};
+
+export default TablePaginationActions;
diff --git a/frontend/src/components/generic/Table/TableToolbar.js b/frontend/src/components/generic/Table/TableToolbar.js
new file mode 100644
index 000000000..a55bb2820
--- /dev/null
+++ b/frontend/src/components/generic/Table/TableToolbar.js
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { lighten, makeStyles } from '@material-ui/core/styles';
+import { Toolbar, Tooltip, Typography, Box, IconButton } from '@material-ui/core';
+
+import classNames from 'classnames';
+
+const useToolbarStyles = makeStyles(theme => ({
+ root: {
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(1),
+ transition: 'all 0.2s ease'
+ },
+ highlight: {
+ color: theme.palette.primary.dark,
+ backgroundColor: lighten(theme.palette.primary.main, 0.85)
+ },
+ action: {
+ transform: 'scale(0.5)',
+ transition: 'all 0.2s ease',
+ opacity: 0,
+ pointerEvents: 'none'
+ },
+ actionActive: {
+ transform: 'scale(1)',
+ opacity: 1,
+ pointerEvents: 'initial'
+ }
+}));
+
+const TableToolbar = ({ title, selectedRows, actions = [] }) => {
+ const classes = useToolbarStyles();
+ const hasSelected = selectedRows.length > 0;
+
+ return (
+
+
+ {hasSelected ? `${selectedRows.length} selected` : title}
+
+
+ {actions.map(action => (
+
+ action.action(selectedRows)} aria-label={action.label}>
+ {action.icon}
+
+
+ ))}
+
+
+ );
+};
+
+export default TableToolbar;
diff --git a/frontend/src/components/generic/Table/index.js b/frontend/src/components/generic/Table/index.js
new file mode 100644
index 000000000..07b2dd8fa
--- /dev/null
+++ b/frontend/src/components/generic/Table/index.js
@@ -0,0 +1,214 @@
+import React, { useState, useCallback, useMemo } from 'react';
+
+import { lighten, makeStyles } from '@material-ui/core/styles';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableRow,
+ TableHead,
+ TableFooter,
+ TablePagination,
+ Box,
+ Paper,
+ CircularProgress,
+ Checkbox
+} from '@material-ui/core';
+
+import objectPath from 'object-path';
+
+import TableToolbar from './TableToolbar';
+import TablePaginationActions from './TablePaginationActions';
+import ActionMenu from 'components/generic/ActionMenu';
+
+const useTableStyles = makeStyles(theme => ({
+ root: {
+ overflowX: 'auto'
+ }
+}));
+
+const usePaginationStyles = makeStyles(theme => ({
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ height: 'auto'
+ }
+}));
+
+export default ({
+ columns = [],
+ dataSource = [],
+ rowKey,
+ loading = true,
+ pagination = true,
+ rowNumber = true,
+ rowSelection = true,
+ footer,
+ title = '',
+ selectedActions = [],
+ rowActions = []
+}) => {
+ const classes = useTableStyles();
+ const paginationClasses = usePaginationStyles();
+ const [rowsPerPage, setRowsPerPage] = useState(10);
+ const [page, setPage] = useState(0);
+ const [selectedRows, setSelectedRows] = useState([]);
+
+ const handleChangePage = useCallback((event, newPage) => {
+ setPage(newPage);
+ }, []);
+
+ const handleChangeRowsPerPage = useCallback(event => {
+ setRowsPerPage(parseInt(event.target.value, 10));
+ setPage(0);
+ }, []);
+
+ const handleSelectAll = useCallback(() => {
+ if (selectedRows.length === dataSource.length) {
+ setSelectedRows([]);
+ } else {
+ setSelectedRows(dataSource.map(item => item[rowKey]));
+ }
+ }, [dataSource, rowKey, selectedRows]);
+
+ const handleSelectRow = item => {
+ const key = item[rowKey];
+ let rows = selectedRows.slice();
+ const index = rows.indexOf(key);
+ if (rows.indexOf(key) !== -1) {
+ rows.splice(index, 1);
+ } else {
+ rows = rows.concat(key);
+ }
+ setSelectedRows(rows);
+ };
+
+ const isRowSelected = item => {
+ return selectedRows.indexOf(item[rowKey]) !== -1;
+ };
+
+ const columnCount = useMemo(() => {
+ let columnCount = columns.length;
+ if (rowSelection) columnCount++;
+ if (rowNumber) columnCount++;
+ if (rowActions) columnCount++;
+ return columnCount;
+ }, [columns, rowSelection, rowActions, rowNumber]);
+
+ const data = useMemo(() => {
+ return dataSource.slice(page * rowsPerPage, (page + 1) * rowsPerPage);
+ }, [dataSource, page, rowsPerPage]);
+
+ const isAllSelected = useMemo(() => {
+ if (!dataSource.length || loading) return false;
+ return selectedRows.length === dataSource.length;
+ }, [selectedRows, dataSource, loading]);
+
+ return (
+
+
+
+
+
+ {rowSelection && (
+
+
+ )}
+ {rowNumber && # }
+ {rowActions.length > 0 && (
+
+ Actions
+
+ )}
+ {columns.map(column => (
+ {column.label}
+ ))}
+
+
+
+ {loading && (
+
+
+
+
+ )}
+ {!loading && data.length === 0 && (
+
+
+ No data
+
+
+ )}
+ {!loading &&
+ data.length > 0 &&
+ data.map((item, index) => (
+
+ {rowSelection && (
+
+ handleSelectRow(item)}
+ />
+
+ )}
+ {rowNumber && (
+ {1 + index + page * rowsPerPage}
+ )}
+ {rowActions.length > 0 && (
+
+
+ )}
+ {columns.map(column => {
+ const value = objectPath.get(item, column.path);
+ return (
+
+ {column.render ? column.render(value, item) : value}
+
+ );
+ })}
+
+ ))}
+
+ {footer && (
+
+
+
+ {footer}
+
+
+
+ )}
+
+
+ {pagination && (
+
+
+
+
+ )}
+
+ );
+};
diff --git a/frontend/src/components/inputs/Select/index.js b/frontend/src/components/inputs/Select/index.js
new file mode 100644
index 000000000..1a4236b10
--- /dev/null
+++ b/frontend/src/components/inputs/Select/index.js
@@ -0,0 +1,95 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { TextField, MenuItem, Chip } from '@material-ui/core';
+import { SelectOptions } from '@hackjunction/shared';
+
+const useStyles = makeStyles(theme => ({
+ chips: {
+ display: 'flex',
+ flexWrap: 'wrap'
+ },
+ chip: {
+ margin: 2,
+ }
+}));
+
+const _Select = ({
+ label,
+ placeholder,
+ helperText,
+ value,
+ onChange = () => {},
+ options = [],
+ type,
+ multiple = false
+}) => {
+ const classes = useStyles()
+ const handleChange = useCallback(
+ e => {
+ onChange(e.target.value);
+ },
+ [onChange]
+ );
+
+ const items = useMemo(() => {
+ switch (type) {
+ case 'country':
+ return SelectOptions.COUNTRIES;
+ case 'nationality':
+ return SelectOptions.NATIONALITIES;
+ case 'gender':
+ return SelectOptions.GENDERS;
+ case 'industry':
+ return SelectOptions.INDUSTRY;
+ case 'language':
+ return SelectOptions.LANGUAGES;
+ case 'role':
+ return SelectOptions.ROLES;
+ case 'skill':
+ return SelectOptions.SKILLS;
+ case 'theme':
+ return SelectOptions.THEMES;
+ case 'status':
+ return SelectOptions.STATUSES;
+ default:
+ return options;
+ }
+ }, [options, type]);
+
+ const valueOrDefault = value || (multiple ? [] : '');
+
+ const selectProps = { multiple };
+ if (multiple) {
+ selectProps.renderValue = (value = []) => {
+ return(
+
+ {value.map(item => (
+
+ );
+ }
+ }
+
+ return (
+
+ {items.map(item => (
+
+ {item.label}
+
+ ))}
+
+ );
+};
+
+export default _Select;
diff --git a/frontend/src/components/inputs/TextInput/index.js b/frontend/src/components/inputs/TextInput/index.js
new file mode 100644
index 000000000..cd7dffcff
--- /dev/null
+++ b/frontend/src/components/inputs/TextInput/index.js
@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+
+import { TextField } from '@material-ui/core';
+
+const TextInput = ({ label, helperText, value = '', onChange = () => {}, error, disabled, rawOnChange = false, type = 'text', multiline = false }) => {
+ const handleChange = useCallback(
+ e => {
+ if (rawOnChange) {
+ onChange(e);
+ } else {
+ onChange(e.target.value);
+ }
+ },
+ [onChange, rawOnChange]
+ );
+
+ return
;
+};
+
+export default TextInput;
diff --git a/frontend/src/components/layouts/MaterialTabsLayout/index.js b/frontend/src/components/layouts/MaterialTabsLayout/index.js
new file mode 100644
index 000000000..e860b5242
--- /dev/null
+++ b/frontend/src/components/layouts/MaterialTabsLayout/index.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { AppBar, Tabs, Tab, Typography, Box, useMediaQuery} from '@material-ui/core';
+
+function TabPanel(props) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {children}
+
+ );
+}
+
+TabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.any.isRequired,
+ value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+ return {
+ id: `scrollable-auto-tab-${index}`,
+ 'aria-controls': `scrollable-auto-tabpanel-${index}`,
+ };
+}
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ flexGrow: 1,
+ width: '100%',
+ backgroundColor: theme.palette.background.paper,
+ },
+ wrapper: {
+ textAlign: 'left',
+ alignItems: 'flex-start'
+ }
+}));
+
+const MaterialTabsLayout = ({ tabs }) => {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
+
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+ return (
+
+
+ {tabs.map((tab, index) => (
+
+
+ {tabs.map((tab, index) => (
+
+ {tab.content}
+
+ ))}
+
+
+ );
+}
+
+export default MaterialTabsLayout;
\ No newline at end of file
diff --git a/frontend/src/components/layouts/SidebarLayout/index.js b/frontend/src/components/layouts/SidebarLayout/index.js
index 451b03920..53e3671bc 100644
--- a/frontend/src/components/layouts/SidebarLayout/index.js
+++ b/frontend/src/components/layouts/SidebarLayout/index.js
@@ -118,7 +118,11 @@ const SidebarLayout = React.memo(({ renderTop, renderSidebarTop, baseRoute, loca
if (hidden) {
return null;
} else {
- return
;
+ return (
+
+ {render()}
+
+ );
}
})}
diff --git a/frontend/src/components/modals/EditRegistrationModal/index.js b/frontend/src/components/modals/EditRegistrationModal/index.js
new file mode 100644
index 000000000..bdf5d713d
--- /dev/null
+++ b/frontend/src/components/modals/EditRegistrationModal/index.js
@@ -0,0 +1,270 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { connect } from 'react-redux';
+import Modal from 'components/generic/Modal';
+import { Typography } from '@material-ui/core';
+import { withSnackbar } from 'notistack';
+import { RegistrationFields } from '@hackjunction/shared';
+import { Rate, notification, Divider as AntDivider, Tag, Drawer, List, Select, Button as AntButton, Input } from 'antd';
+import { isEqual, groupBy, find } from 'lodash-es';
+
+import PageWrapper from 'components/PageWrapper';
+import Button from 'components/generic/Button';
+import Divider from 'components/generic/Divider';
+import DescriptionItem from 'components/generic/DescriptionItem';
+
+import UserSelectModal from 'components/modals/UserSelectModal';
+import RegistrationStatusSelect from 'components/FormComponents/RegistrationStatusSelect';
+
+import * as AuthSelectors from 'redux/auth/selectors';
+import * as OrganiserSelectors from 'redux/organiser/selectors';
+import * as OrganiserActions from 'redux/organiser/actions';
+
+import RegistrationsService from 'services/registrations';
+import MiscUtils from 'utils/misc';
+
+const EditRegistrationModalInner = ({ idToken, event, registration, organisers, organisersMap, onEdit }) => {
+ const initialValues = {
+ rating: registration.rating,
+ assignedTo: registration.assignedTo,
+ tags: registration.tags,
+ status: registration.status,
+ travelGrant: registration.travelGrant
+ };
+ const [formValues, setFormValues] = useState(initialValues);
+ const dirty = !isEqual(formValues, initialValues);
+
+ const handleEdit = (field, value) => {
+ setFormValues({
+ ...formValues,
+ [field]: value
+ });
+ };
+
+ const renderAssignedTo = () => {
+ if (formValues.assignedTo) {
+ const user = organisersMap[formValues.assignedTo];
+ return user ? `${user.firstName} ${user.lastName}` : '???';
+ }
+ return 'No one';
+ };
+
+ const renderActions = () => {
+ return (
+
+
+ handleEdit('rating', value)} />}
+ >
+
+ (
+
+
+ handleEdit('tags', value)}
+ mode="multiple"
+ >
+ {event.tags.map(tag => (
+
+ {tag.label}
+
+ ))}
+
+ }
+ >
+
+
+ handleEdit('status', value)}
+ />
+ }
+ />
+
+
+ handleEdit('travelGrant', e.target.value)} />
+ }
+ />
+
+ onEdit(formValues),
+ disabled: !dirty
+ }}
+ />
+
+ );
+ };
+
+ const renderContent = () => {
+ if (!registration) return null;
+ const fields = Object.keys(registration.answers);
+ const grouped = groupBy(fields, field => RegistrationFields.getCategory(field));
+ const categoryNames = Object.keys(grouped).filter(key => key !== '');
+
+ return (
+
+ {categoryNames.map(name => (
+
+
+ {name}
+
+ {grouped[name].map(field => {
+ let label = RegistrationFields.fieldToLabelMap[field];
+ if (!label) {
+ const customField = find(event.registrationQuestions, f => f.name === field);
+ if (customField) {
+ label = customField.label;
+ }
+ }
+ return (
+
+ ))}
+ {event.customQuestions.map(section => {
+ const sectionAnswers = registration.answers[section.name] || {};
+ return (
+
+
+ {section.label}
+
+ {section.questions.map(question => {
+ return (
+
+ );
+ })}
+
+ );
+ };
+
+ return (
+
+ {renderActions()}
+ {renderContent()}
+
+ );
+};
+
+const EditRegistrationModal = ({
+ idToken,
+ registrationId,
+ onClose,
+ event,
+ editRegistration,
+ enqueueSnackbar,
+ organisers,
+ organisersMap,
+ onEdited = () => {}
+}) => {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const [registration, setRegistration] = useState();
+ const { slug } = event;
+
+ useEffect(() => {
+ if (registrationId) {
+ setLoading(true);
+ RegistrationsService.getFullRegistration(idToken, slug, registrationId)
+ .then(data => {
+ setRegistration(data);
+ })
+ .catch(err => {
+ setError(true);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ }
+ }, [idToken, registrationId, slug]);
+
+ const handleEdit = useCallback(
+ async data => {
+ setLoading(true);
+ await MiscUtils.sleep(1000);
+ editRegistration(registrationId, data, slug)
+ .then(data => {
+ enqueueSnackbar('Changes saved!', { variant: 'success' });
+ onEdited(data);
+ onClose();
+ })
+ .catch(err => {
+ enqueueSnackbar('Something went wrong', { variant: 'error' });
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ },
+ [enqueueSnackbar, editRegistration, registrationId, slug, onClose, onEdited]
+ );
+
+ return (
+
+
+
+
+ );
+};
+
+const mapState = state => ({
+ idToken: AuthSelectors.getIdToken(state),
+ event: OrganiserSelectors.event(state),
+ organisersMap: OrganiserSelectors.organisersMap(state),
+ organisers: OrganiserSelectors.organisers(state)
+});
+
+const mapDispatch = dispatch => ({
+ editRegistration: (registrationId, data, slug) =>
+ dispatch(OrganiserActions.editRegistration(registrationId, data, slug))
+});
+
+export default withSnackbar(
+ connect(
+ mapState,
+ mapDispatch
+ )(EditRegistrationModal)
+);
diff --git a/frontend/src/components/modals/VisaInvitationDrawer/VisaInvitationPDF.js b/frontend/src/components/modals/VisaInvitationDrawer/VisaInvitationPDF.js
index af54d4317..738a8518f 100644
--- a/frontend/src/components/modals/VisaInvitationDrawer/VisaInvitationPDF.js
+++ b/frontend/src/components/modals/VisaInvitationDrawer/VisaInvitationPDF.js
@@ -92,7 +92,6 @@ const VisaInvitationPDF = ({
know {arrivalCity} at their leisure and attend complementary events such as those organised by Slush
during the week after, November 18th to 25th.
-
Sincerely,
{hostName}
diff --git a/frontend/src/components/tables/AttendeeTable/index.js b/frontend/src/components/tables/AttendeeTable/index.js
index 1ad938cb1..0e5327a52 100644
--- a/frontend/src/components/tables/AttendeeTable/index.js
+++ b/frontend/src/components/tables/AttendeeTable/index.js
@@ -1,115 +1,126 @@
-import React from 'react';
+import React, { useState } from 'react';
import moment from 'moment';
-import { Table, Empty, Tag, Divider as AntDivider } from 'antd';
+import { Empty, Tag } from 'antd';
import { connect } from 'react-redux';
import { RegistrationStatuses } from '@hackjunction/shared';
+import EmailIcon from '@material-ui/icons/Email';
+import EditIcon from '@material-ui/icons/Edit';
+import Table from 'components/generic/Table';
+
import * as OrganiserSelectors from 'redux/organiser/selectors';
-import EditRegistrationDrawer from 'components/modals/EditRegistrationDrawer';
+import EditRegistrationModal from 'components/modals/EditRegistrationModal';
const AttendeeTable = ({ organiserProfilesMap, emptyRenderer, event, loading, attendees = [], footer = null }) => {
- const renderTotal = (total, range) => {
- return `${range[0]}-${range[1]} of ${total}`;
- };
+ const [editing, setEditing] = useState();
const renderTable = () => {
if (!loading) {
if (!Array.isArray(attendees) || attendees.length === 0) return null;
}
+
return (
- {
- return `${answers.firstName} ${answers.lastName}`;
- }}
- />
- rating || 'Pending'}
- />
- {
- const params = RegistrationStatuses.asObject[status];
- if (!params) return '-';
- return {params.label} ;
- }}
- />
- {
- if (!tags || !tags.length) {
- return '-';
- } else {
- return event.tags
- .filter(tag => {
- return tags.indexOf(tag.label) !== -1;
- })
- .map(({ color, label }) => (
-
- {label}
-
- ));
+ loading={loading}
+ title={`${attendees.length} results`}
+ footer={footer}
+ selectedActions={[
+ {
+ key: 'edit',
+ label: 'Edit all',
+ icon: {params.label} ;
+ }
+ },
+ {
+ key: 'tags',
+ path: 'tags',
+ label: 'Tags',
+ render: tags => {
+ if (!tags || !tags.length) {
+ return '-';
+ } else {
+ return event.tags
+ .filter(tag => {
+ return tags.indexOf(tag.label) !== -1;
+ })
+ .map(({ color, label }) => (
+
+ {label}
+
+ ));
+ }
}
- }}
- />
- moment(date).fromNow()}
- />
- {
- let text;
- if (!userId) {
- text = 'No one';
- } else if (organiserProfilesMap.hasOwnProperty(userId)) {
- const user = organiserProfilesMap[userId];
- text = `${user.firstName} ${user.lastName}`;
- } else {
- text = 'Unknown user';
+ },
+ {
+ key: 'createdAt',
+ path: 'createdAt',
+ label: 'Submitted',
+ render: date => moment(date).fromNow()
+ },
+ {
+ key: 'assignedTo',
+ path: 'assignedTo',
+ label: 'Assigned to',
+ render: (userId, record) => {
+ let text;
+ if (!userId) {
+ text = 'No one';
+ } else if (organiserProfilesMap.hasOwnProperty(userId)) {
+ const user = organiserProfilesMap[userId];
+ text = `${user.firstName} ${user.lastName}`;
+ } else {
+ text = 'Unknown user';
+ }
+ return text;
}
- return text;
- }}
- />
- {
- return
+ }
+ ]}
+ />
);
};
@@ -122,6 +133,7 @@ const AttendeeTable = ({ organiserProfilesMap, emptyRenderer, event, loading, at
return (
+
diff --git a/frontend/src/hooks/formHooks.js b/frontend/src/hooks/formHooks.js
index 899b3240b..ea5b70a7f 100644
--- a/frontend/src/hooks/formHooks.js
+++ b/frontend/src/hooks/formHooks.js
@@ -26,6 +26,17 @@ export const useFormField = (initialValue, validate = () => null, initialError =
setError(undefined);
}, []);
+ const handleValidate = useCallback(() => {
+ const err = validate(value);
+ if (err) {
+ setError(err);
+ return err;
+ } else {
+ setError();
+ return;
+ }
+ }, [value, validate]);
+
return {
value,
setValue,
@@ -33,6 +44,6 @@ export const useFormField = (initialValue, validate = () => null, initialError =
reset,
error,
setError,
- validate
+ validate: handleValidate
};
};
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 8c673a36e..db35b5790 100755
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -4,12 +4,15 @@ import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
+import { ThemeProvider } from '@material-ui/styles';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { CloudinaryContext } from 'cloudinary-react';
+import { SnackbarProvider } from 'notistack';
import configureStore, { history } from 'redux/configureStore';
import config from 'constants/config';
+import theme from './material-ui-theme';
const { store, persistor } = configureStore();
@@ -25,7 +28,17 @@ ReactDOM.render(
-
+
+
+
,
diff --git a/frontend/src/material-ui-theme.js b/frontend/src/material-ui-theme.js
new file mode 100644
index 000000000..50efdc0e6
--- /dev/null
+++ b/frontend/src/material-ui-theme.js
@@ -0,0 +1,73 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const titleFont = ['"Montserrat"', 'sans-serif'].join(',');
+const bodyFont = ['"Lato"', 'sans-serif'].join(',');
+
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ main: '#52d7af'
+ },
+ secondary: {
+ main: '#f38100'
+ }
+ },
+ typography: {
+ fontFamily: bodyFont,
+ fontWeightRegular: 300,
+ h1: {
+ fontFamily: titleFont,
+ fontWeight: 'bold'
+ },
+ h2: {
+ fontFamily: titleFont,
+ fontWeight: 'bold'
+ },
+ h3: {
+ fontFamily: titleFont,
+ fontWeight: 'bold'
+ },
+ h4: {
+ fontFamily: titleFont,
+ fontWeight: 'bold'
+ },
+ h5: {
+ fontFamily: titleFont,
+ fontWeight: 'bold'
+ },
+ h6: {
+ fontFamily: titleFont,
+ fontWeight: 'bold'
+ },
+ subtitle1: {
+ fontFamily: bodyFont,
+ fontWeight: '300'
+ },
+ subtitle2: {
+ fontFamily: bodyFont,
+ fontWeight: '300'
+ },
+ body1: {
+ fontFamily: bodyFont,
+ fontWeight: '300'
+ },
+ body2: {
+ fontFamily: bodyFont,
+ fontWeight: '300'
+ },
+ button: {
+ fontFamily: bodyFont,
+ fontWeight: '300'
+ },
+ caption: {
+ fontFamily: bodyFont,
+ fontWeight: '300'
+ },
+ overline: {
+ fontFamily: bodyFont,
+ fontWeight: '300'
+ }
+ }
+});
+
+export default theme;
diff --git a/frontend/src/pages/EventDashboard/EventDashboardHome/EventDashboardHomeRegistration/TravelGrantStatusBlock.js b/frontend/src/pages/EventDashboard/EventDashboardHome/EventDashboardHomeRegistration/TravelGrantStatusBlock.js
index 2f3e67a62..781800fad 100644
--- a/frontend/src/pages/EventDashboard/EventDashboardHome/EventDashboardHomeRegistration/TravelGrantStatusBlock.js
+++ b/frontend/src/pages/EventDashboard/EventDashboardHome/EventDashboardHomeRegistration/TravelGrantStatusBlock.js
@@ -31,28 +31,59 @@ const TravelGrantStatusBlock = ({ event, registration }) => {
}
if (registration.status === STATUSES.confirmed.id) {
- return (
-
-
-
- Please consult the{' '}
-
- FAQ section
- {' '}
- of our website for details on the travel grant amounts available for the country you're
- travelling from.
-
- }
- />
-
- );
+ if (registration.travelGrant === 0) {
+ return (
+
+ Please consult the{' '}
+
+ FAQ section
+ {' '}
+ of our website for details on the travel grant amounts available for the country you're
+ travelling from.
+
+ }
+ />
+
+ );
+ }
+
+ if (registration.travelGrant > 0) {
+ return (
+
+ {errorKeys.map(key => (
+
+ {key} {errors[key].message}
+
+ ))}
+
+ )
+ });
+ } else {
+ notification.error({
+ message: 'Unable to save changes',
+ description: message
+ });
+ }
+ })
+ .finally(() => {
+ actions.setSubmitting(false);
+ });
+ }
+
+ return (
+
+
+ {formikProps => {
+ const errorCount = Object.keys(formikProps.errors).length;
+ const hasErrors = errorCount !== 0;
+ const canSave = formikProps.dirty && !hasErrors;
+ const isPublic = formikProps.values.published;
+
+ return (
+
+
+
+ Save changes
+
+
+
+ );
+ }}
+
+
+ );
+};
+
+const mapStateToProps = state => ({
+ event: OrganiserSelectors.event(state),
+ loading: OrganiserSelectors.eventLoading(state)
+});
+
+const mapDispatchToProps = dispatch => ({
+ editEvent: (slug, data) => dispatch(OrganiserActions.editEvent(slug, data))
+});
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(OrganiserEditEventDetails);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventManage/AddOrganiserDrawer.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Manage/AddOrganiserDrawer.js
similarity index 100%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventManage/AddOrganiserDrawer.js
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Manage/AddOrganiserDrawer.js
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventManage/AddOrganiserDrawer.module.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Manage/AddOrganiserDrawer.module.scss
similarity index 100%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventManage/AddOrganiserDrawer.module.scss
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Manage/AddOrganiserDrawer.module.scss
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventManage/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Manage/index.js
similarity index 50%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventManage/index.js
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Manage/index.js
index 81934eaf8..01900b71e 100644
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventManage/index.js
+++ b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Manage/index.js
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
-import { PageHeader, Button, Table, notification, message } from 'antd';
+import { Button, Table, notification, message } from 'antd';
import { concat } from 'lodash-es';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';
@@ -8,7 +8,7 @@ import * as OrganiserActions from 'redux/organiser/actions';
import * as OrganiserSelectors from 'redux/organiser/selectors';
import AddOrganiserDrawer from './AddOrganiserDrawer';
-import Divider from 'components/generic/Divider';
+import PageHeader from 'components/generic/PageHeader';
import PageWrapper from 'components/PageWrapper';
const OrganiserEditEventManage = ({
@@ -68,71 +68,54 @@ const OrganiserEditEventManage = ({
});
}
- const testEmail = () => {
- const recipient = 'juuso.lappalainen@hackjunction.com';
- };
-
return (
(
- Manage who has access to edit this event}
- extra={[
- setDrawerOpen(true)}>
- Add organisers
-
+ setDrawerOpen(true)}>
+ Add organisers
+
+ record.firstName + ' ' + record.lastName
+ },
+ {
+ title: 'Email',
+ dataIndex: 'email',
+ key: 'email'
+ },
+ {
+ title: 'Actions',
+ dataIndex: 'userId',
+ key: 'actions',
+ render: (text, record) => {
+ if (event.owner === record.userId) {
+ return (
+
+ Owner
+
+ );
+ }
+ return (
+ handleOrganiserRemoved(record.userId)}>
+ Remove
+
+ );
+ }
+ }
]}
- footer={
-
- record.firstName + ' ' + record.lastName
- },
- {
- title: 'Email',
- dataIndex: 'email',
- key: 'email'
- },
- {
- title: 'Actions',
- dataIndex: 'userId',
- key: 'actions',
- render: (text, record) => {
- if (event.owner === record.userId) {
- return (
-
- Owner
-
- );
- }
- return (
- handleOrganiserRemoved(record.userId)}
- >
- Remove
-
- );
- }
- }
- ]}
- />
-
- Test sending email to juuso.lappalainen@hackjunction.com
-
)}
/>
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawer.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawer.js
deleted file mode 100644
index 9c283d5e2..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawer.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styles from './AttendeeDrawer.module.scss';
-
-import { connect } from 'react-redux';
-import { RegistrationFields, RegistrationStatuses } from '@hackjunction/shared';
-import { Drawer, Skeleton, Descriptions, Tabs, Button, Tag, Popconfirm } from 'antd';
-import { find, groupBy } from 'lodash-es';
-
-import * as AuthSelectors from 'redux/auth/selectors';
-import * as OrganiserActions from 'redux/organiser/actions';
-import * as OrganiserSelectors from 'redux/organiser/selectors';
-import Divider from 'components/generic/Divider';
-import AttendeeDrawerEdit from './AttendeeDrawerEdit';
-
-const AttendeeDrawer = ({
- event,
- idToken,
- slug,
- registrationId,
- isOpen,
- onClose,
- editAttendee,
- acceptAttendee,
- rejectAttendee,
- updateAttendee,
- getAttendee
-}) => {
- const [editOpen, setEditOpen] = useState(false);
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState(false);
- const registration = getAttendee(slug, registrationId);
- const { answers } = registration;
-
- useEffect(() => {
- if (registrationId) {
- setLoading(true);
- updateAttendee(slug, registrationId)
- .catch(err => {
- setError(true);
- })
- .finally(() => {
- setLoading(false);
- });
- }
- }, [registrationId, slug, updateAttendee]);
-
- function handleRegistrationEdit(values) {
- editAttendee(slug, registrationId, values);
- }
-
- function handleAccept() {
- acceptAttendee(slug, registrationId);
- }
-
- function handleReject() {
- rejectAttendee(slug, registrationId);
- }
-
- function renderError() {
- return (
-
-
Something went wrong
-
Please close the drawer and try again
-
- {currentStatus.allowEdit && (
-
-
Actions:
-
-
-
- Accept
-
-
-
-
-
- Reject
-
-
-
setEditOpen(true)}>
- Edit
-
- }
- >
- {categoryNames.map((categoryName, index) => {
- return (
-
-
- {grouped[categoryName].map(field => {
- let label = RegistrationFields.fieldToLabelMap[field];
- if (!label) {
- const customField = find(
- event.registrationQuestions,
- f => f.name === field
- );
- if (customField) {
- label = customField.label;
- }
- }
- return (
-
- {JSON.stringify(registration.answers[field])}
-
- );
- })}
-
-
- );
- })}
-
- setEditOpen(false)}
- onSubmit={handleRegistrationEdit}
- registration={registration}
- />
-
- );
- }
-
- function renderTitle() {
- const currentStatus = RegistrationStatuses.asObject[registration.status];
- return (
-
-
{registration.answers.firstName + ' ' + registration.answers.lastName}
-
-
status: {currentStatus.label}
-
-
- {error && renderError()}
- {!error && answers && renderContent()}
-
-
- );
-};
-
-const mapStateToProps = state => ({
- idToken: AuthSelectors.getIdToken(state),
- getAttendee: OrganiserSelectors.getAttendeeByEvent(state)
-});
-
-const mapDispatchToProps = dispatch => ({
- editAttendee: (slug, registrationId, data) => dispatch(OrganiserActions.editAttendee(slug, registrationId, data)),
- acceptAttendee: (slug, registrationId) => dispatch(OrganiserActions.acceptAttendee(slug, registrationId)),
- rejectAttendee: (slug, registrationId) => dispatch(OrganiserActions.rejectAttendee(slug, registrationId)),
- updateAttendee: (slug, registrationId) => dispatch(OrganiserActions.updateAttendee(slug, registrationId))
-});
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(AttendeeDrawer);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawer.module.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawer.module.scss
deleted file mode 100644
index c2dc51e53..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawer.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.drawerTitle {
- display: flex;
- flex-direction: row;
-}
-
-.buttonsWrapper {
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
- background: #ececec;
- padding: 1rem;
-}
-
-.acceptButton {
- color: green;
-}
-
-.rejectButton {
- color: red;
-}
-
-.buttonsLabel {
- font-weight: bold;
-}
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawerEdit.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawerEdit.js
deleted file mode 100644
index dc347fcbe..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawerEdit.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-import styles from './AttendeeDrawerEdit.module.scss';
-
-import { filter } from 'lodash-es';
-import { connect } from 'react-redux';
-import { RegistrationStatuses } from '@hackjunction/shared';
-import { Formik } from 'formik';
-import { Drawer, Descriptions, Button, Rate, Tag, Dropdown, Menu, Icon } from 'antd';
-import Divider from 'components/generic/Divider';
-import * as AuthSelectors from 'redux/auth/selectors';
-
-const AttendeeDrawerEdit = ({ isOpen, onClose, onSubmit, registration, session }) => {
- function buildInitial() {
- return {
- status: registration.status,
- rating: registration.rating,
- ratedBy: registration.ratedBy
- };
- }
-
- function handleSubmit(values) {
- onSubmit(values);
- onClose();
- }
-
- function handleRatingChange(rating, setFieldValue) {
- setFieldValue('rating', rating);
- setFieldValue('ratedBy', session.sub);
- }
-
- function renderStatusMenu(currentStatus, setFieldValue) {
- const statuses = RegistrationStatuses.asArray.filter(status => status.id !== currentStatus.id);
- const assignable = filter(statuses, s => s.allowAssign);
- return (
-
- {assignable.map(status => (
- setFieldValue('status', status.id)}>
- {status.label}
-
- ))}
-
- );
- }
-
- const initialValues = buildInitial();
-
- return (
-
-
- {formikProps => {
- const { values } = formikProps;
- const currentStatus = RegistrationStatuses.asObject[values.status];
- const initialStatus = RegistrationStatuses.asObject[initialValues.status];
- return (
-
-
-
-
-
- {currentStatus.label}
-
-
-
{currentStatus.description}
-
-
- handleRatingChange(value, formikProps.setFieldValue)}
- />
-
-
- {values.ratedBy}
-
-
-
- Save changes
-
-
- );
- }}
-
-
- );
-};
-
-const mapStateToProps = state => ({
- session: AuthSelectors.getCurrentUser(state)
-});
-
-export default connect(mapStateToProps)(AttendeeDrawerEdit);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawerEdit.module.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawerEdit.module.scss
deleted file mode 100644
index 9b1df2879..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeeDrawerEdit.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.statusWrapper {
- display: flex;
- align-items: flex-start;
- flex-direction: column;
-}
-
-.menuSubHeader {
- text-align: center;
- color: red;
- padding: 10px;
- width: 200px;
-}
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeesOverview.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeesOverview.js
deleted file mode 100644
index e891b0a9a..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/AttendeesOverview.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useEffect } from 'react';
-import styles from './AttendeesOverview.module.scss';
-
-import { Row, Col, Card, Statistic, Icon } from 'antd';
-import RegistrationsService from 'services/registrations';
-
-const STATS = [
- {
- label: 'Applications',
- getValue: () => 272
- },
- {
- label: 'Amount rated',
- getValue: () => 16,
- suffix: '%'
- }
-];
-
-const AttendeesOverview = () => {
- const renderStatCards = () => {
- return STATS.map(stat => {
- return (
-
-
-
- );
- });
- };
-
- return {renderStatCards()}
;
-};
-
-export default AttendeesOverview;
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/FiltersDrawer.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/FiltersDrawer.js
deleted file mode 100644
index f7ffdeaf8..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/FiltersDrawer.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from 'react';
-import styles from './FiltersDrawer.module.scss';
-import { connect } from 'react-redux';
-import { concat, filter, map } from 'lodash-es';
-import { RegistrationStatuses, RegistrationFields } from '@hackjunction/shared';
-import { Drawer, Tag, Descriptions, Input, Button, Select, Row, Col } from 'antd';
-import { Formik } from 'formik';
-
-import Divider from 'components/generic/Divider';
-import * as OrganiserSelectors from 'redux/organiser/selectors';
-import * as OrganiserActions from 'redux/organiser/actions';
-
-const FiltersDrawer = ({ onClose, isOpen, getFilters, setFilters, event }) => {
- const filters = getFilters(event.slug);
-
- function handleSubmit(values) {
- setFilters(event.slug, values);
- onClose();
- }
-
- function handleReset() {
- setFilters(event.slug, {});
- onClose();
- }
-
- function renderStatusSelect(formikProps) {
- const selected = formikProps.values.status || [];
- return RegistrationStatuses.asArray.map(status => {
- const checked = selected.indexOf(status.id) !== -1;
- return (
- {
- if (checked) {
- formikProps.setFieldValue('status', concat(selected, status.id));
- } else {
- formikProps.setFieldValue('status', filter(selected, s => s !== status.id));
- }
- }}
- >
- {status.label}
-
- );
- });
- }
-
- function renderSearchFilter(formikProps) {
- const currentValue = formikProps.values.email || '';
- return (
- formikProps.setFieldValue('fields', value)}
- value={currentValue}
- style={{ width: '100%' }}
- mode="multiple"
- placeholder={'Select fields'}
- >
-
- {userDetailFields.map(field => (
- {field.label}
- ))}
-
-
- {registrationFields.map(field => (
- {field.label}
- ))}
-
-
- );
- }
-
- return (
-
-
- {formikProps => {
- return (
-
-
-
- Filter participants by application status
- {renderStatusSelect(formikProps)}
-
-
- Search by email address
- {renderSearchFilter(formikProps)}
-
-
- Select all fields that must exist on the application
- {renderFieldExists(formikProps)}
-
-
-
-
- Clear filters
-
-
-
- Save filters
-
-
-
-
- );
- }}
-
-
- );
-};
-
-const mapStateToProps = state => ({
- getFilters: OrganiserSelectors.getAttendeesFiltersForEvent(state)
-});
-
-const mapDispatchToProps = dispatch => ({
- setFilters: (slug, filters) => dispatch(OrganiserActions.setAttendeesFiltersForEvent(slug, filters))
-});
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(FiltersDrawer);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/index.js
deleted file mode 100644
index 9e134acac..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/index.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react';
-
-import { PageHeader, Table, Dropdown, Menu, Icon, Tag, Button, Menu } from 'antd';
-import { connect } from 'react-redux';
-import { isEmpty } from 'lodash-es';
-import { RegistrationStatuses } from '@hackjunction/shared';
-
-import MiscUtils from 'utils/misc';
-import * as AuthSelectors from 'redux/auth/selectors';
-import * as OrganiserSelectors from 'redux/organiser/selectors';
-import * as OrganiserActions from 'redux/organiser/actions';
-import Divider from 'components/generic/Divider';
-import AttendeeDrawer from './AttendeeDrawer';
-import FiltersDrawer from 'pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventAttendees/FiltersDrawer';
-
-const OrganiserEditEventAttendees = ({
- slug,
- idToken,
- getEventBySlug,
- updateAttendees,
- getAttendeeByEvent,
- getAttendeeIds,
- getAttendeeFilters
-}) => {
- const [activeItem, setActiveItem] = useState();
- const [filtersOpen, setFiltersOpen] = useState(false);
- const [selectedRowKeys, setSelectedRowKeys] = useState([]);
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState(false);
- const event = getEventBySlug(slug);
- const attendeeIds = getAttendeeIds(slug);
- const filters = getAttendeeFilters(slug);
- const hasFilters = !isEmpty(filters);
-
- const updateAttendeesCallback = useCallback(() => {
- updateAttendees(slug)
- .catch(() => {
- setError(true);
- })
- .finally(() => {
- setLoading(false);
- });
- }, [slug, updateAttendees]);
-
- useEffect(() => {
- setLoading(true);
- updateAttendeesCallback();
- }, [updateAttendeesCallback]);
-
- async function handleFiltersClosed() {
- setFiltersOpen(false);
- setLoading(true);
- await MiscUtils.sleep(1000);
- updateAttendees(slug)
- .catch(() => {
- setError(true);
- })
- .finally(() => {
- setLoading(false);
- });
- }
-
- function renderTop() {
- return View who has registered to your event
;
- }
-
- function renderContent() {
- return (
-
-
{
- const { color, label } = RegistrationStatuses.asObject[status];
- return {label} ;
- }
- },
- {
- title: 'Actions',
- dataIndex: 'email',
- render: (email, record) => {
- return (
- (
-
- setActiveItem(record._id)}>Show
- Full Details
- Show Profile
- Delete
-
- )}
- >
-
- Actions
-
- );
- }
- }
- ]}
- dataSource={attendeeIds.map(id => getAttendeeByEvent(slug, id))}
- pagination={false}
- footer={() => {selectedRowKeys.length} selected }
- />
-
- );
- }
-
- return (
-
-
- Search
- Assigned to me
- 3rd section
-
-
- Filters active
-
- ),
- setFiltersOpen(true)}>
- Filters
- ]}
- footer={
-
- setActiveItem(undefined)}
- />
-
- }
- />
-
- );
-};
-
-const mapStateToProps = state => ({
- idToken: AuthSelectors.getIdToken(state),
- getEventBySlug: OrganiserSelectors.getEventBySlug(state),
- getAttendeeByEvent: OrganiserSelectors.getAttendeeByEvent(state),
- getAttendeeIds: OrganiserSelectors.getAttendeeIdsForEvent(state),
- getAttendeeFilters: OrganiserSelectors.getAttendeesFiltersForEvent(state)
-});
-
-const mapDispatchToProps = dispatch => ({
- updateAttendees: slug => dispatch(OrganiserActions.updateAttendeesForEvent(slug))
-});
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(OrganiserEditEventAttendees);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventDebug/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventDebug/index.js
deleted file mode 100644
index 6e1926bb6..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventDebug/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactJson from 'react-json-view';
-
-import { connect } from 'react-redux';
-import * as OrganiserSelectors from 'redux/organiser/selectors';
-
-const OrganiserEditEventDebug = ({ slug, getEventBySlug }) => {
- const event = getEventBySlug(slug);
-
- return
- {errorKeys.map(key => (
-
- {key} {errors[key].message}
-
- ))}
-
- )
- });
- } else {
- notification.error({
- message: 'Unable to save changes',
- description: message
- });
- }
- })
- .finally(() => {
- actions.setSubmitting(false);
- });
- }
-
- return (
-
- {formikProps => {
- const errorCount = Object.keys(formikProps.errors).length;
- const hasErrors = errorCount !== 0;
- const canSave = formikProps.dirty && !hasErrors;
- const isPublic = formikProps.values.published;
-
- return (
-
- Configure your event information, registration settings and schedule}
- extra={[
- {
- formikProps.setFieldValue('published', !isPublic);
- }}
- >
- {isPublic ? 'Un-publish' : 'Publish'}
- ,
- formikProps.submitForm()}
- key="1"
- >
- Save
-
- ]}
- />
-
-
-
-
-
-
-
-
-
-
-
- );
- }}
-
- );
-};
-
-const mapStateToProps = state => ({
- event: OrganiserSelectors.event(state)
-});
-
-const mapDispatchToProps = dispatch => ({
- editEvent: (slug, data) => dispatch(OrganiserActions.editEvent(slug, data))
-});
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(OrganiserEditEventDetails);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AttendeeFilters.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AttendeeFilters.js
deleted file mode 100644
index 12c3aee23..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AttendeeFilters.js
+++ /dev/null
@@ -1,343 +0,0 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import './AttendeeFilters.scss';
-
-import { connect } from 'react-redux';
-import { Button as AntButton, Select, Row, Col, Rate, Tag, Collapse, Input, Steps } from 'antd';
-import { RegistrationStatuses, RegistrationFields } from '@hackjunction/shared';
-import { find } from 'lodash-es';
-
-import Divider from 'components/generic/Divider';
-import * as OrganiserSelectors from 'redux/organiser/selectors';
-import * as OrganiserActions from 'redux/organiser/actions';
-import FilterOptions from 'constants/filters';
-
-const AttendeeFilters = ({ event, registrations, filters = [], setFilters }) => {
- const [filterType, setFilterType] = useState();
- const [filterValue, setFilterValue] = useState();
- const [filterField, setFilterField] = useState();
- const disabled = !filterType;
-
- useEffect(() => {
- setFilterType(undefined);
- setFilterValue(undefined);
- setFilterField(undefined);
- }, [filters]);
-
- const handleAdd = useCallback(() => {
- const filter = {
- type: filterType,
- value: filterValue,
- field: filterField
- };
- setFilters(filters.concat(filter));
- }, [filterType, filterValue, filterField, filters, setFilters]);
-
- const handleRemove = useCallback(
- index => {
- const newFilters = filters.filter((f, idx) => {
- return idx !== index;
- });
- setFilters(newFilters);
- },
- [filters, setFilters]
- );
-
- const handleReset = useCallback(() => {
- setFilters([]);
- }, [setFilters]);
-
- const handleTypeChange = useCallback(type => {
- setFilterType(type);
- setFilterValue(undefined);
- }, []);
-
- const handleFieldChange = useCallback(field => {
- setFilterField(field);
- }, []);
-
- const questionSelect = useMemo(() => {
- return (
-
-
- {event.userDetailsConfig &&
- Object.keys(event.userDetailsConfig).map(fieldName => {
- return (
-
- {RegistrationFields.getLabel(fieldName)}
-
- );
- })}
-
- {event.customQuestions &&
- event.customQuestions.map(section => {
- return (
-
-
- {section.label} (any)
-
- {section.questions.map(question => (
-
- {section.label}: {question.label}
-
- ))}
-
- );
- })}
-
- );
- }, [event, handleFieldChange, filterField]);
-
- const renderOptions = () => {
- switch (filterType) {
- case 'status-equals':
- case 'status-nequals': {
- return (
-
- {RegistrationStatuses.asArray.map(status => (
-
- {status.label}
-
- ))}
-
- );
- }
- case 'rating-lte':
- case 'rating-gte':
- return
- {event.tags &&
- event.tags.map(tag => (
-
- {tag.label}
-
- ))}
-
- );
- case 'field-equals':
- case 'field-nequals':
- case 'field-contains':
- case 'field-not-contains':
- return (
-
- {questionSelect}
-
- );
- case 'field-not-empty':
- case 'field-empty':
- return questionSelect;
- default:
- return null;
- }
- };
-
- const renderForm = () => {
- return (
-
-
- {FilterOptions.map(({ id, label }) => (
-
- {label}
-
- ))}
-
-
-
- Add filter
-
-
-
- );
- };
-
- const renderItemValue = (filter, label) => {
- switch (filter.type) {
- case 'status-equals':
- case 'status-nequals': {
- const statuses = RegistrationStatuses.asArray
- .filter(status => {
- return filter.value && filter.value.indexOf(status.id) !== -1;
- })
- .map(status => {
- return {status.label} ;
- });
- return (
-
- {label} {statuses}
-
- );
- }
- case 'rating-lte':
- case 'rating-gte': {
- return (
-
- {label}
- );
- }
- case 'tags-contain':
- case 'tags-not-contain':
- const tags = event.tags
- .filter(tag => {
- return filter.value && filter.value.indexOf(tag.label) !== -1;
- })
- .map(tag => {
- return {tag.label} ;
- });
- return (
-
- {label} {tags}
-
- );
- case 'field-equals':
- return (
-
- {filter.field} EQUALS {filter.value}
-
- );
- case 'field-nequals':
- return (
-
- {filter.field} DOES NOT EQUAL {filter.value}
-
- );
- case 'field-empty':
- return (
-
- {filter.field} IS EMPTY
-
- );
- case 'field-not-empty':
- return (
-
- {filter.field} IS NOT EMPTY
-
- );
- case 'field-contains': {
- return (
-
- {filter.field} CONTAINS {filter.value}
-
- );
- }
- case 'field-not-contains': {
- return (
-
- {filter.field} DOES NOT CONTAIN {filter.value}
-
- );
- }
- default:
- return {label} ;
- }
- };
-
- const renderFilterSteps = () => {
- return filters.map((filter, idx) => {
- const label = find(FilterOptions, option => option.id === filter.type).label;
-
- return (
- {renderItemValue(filter, label)}}
- description={
- handleRemove(idx)}>
- Remove filter
-
- }
- />
- );
- });
- };
-
- return (
-
-
- Clear filters
-
- }
- >
- {renderForm()}
-
- index !== 0 && AND
- }
- direction="vertical"
- className="AttendeeFilters--steps"
- >
- {renderFilterSteps()}
-
-
-
- );
-};
-
-const mapState = state => ({
- event: OrganiserSelectors.event(state),
- registrations: OrganiserSelectors.registrations(state),
- filters: OrganiserSelectors.registrationsFilters(state)
-});
-
-const mapDispatch = dispatch => ({
- setFilters: filters => dispatch(OrganiserActions.setRegistrationsFilters(filters))
-});
-
-export default connect(
- mapState,
- mapDispatch
-)(AttendeeFilters);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AttendeeFilters.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AttendeeFilters.scss
deleted file mode 100644
index 5cbe8ad3d..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AttendeeFilters.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.AttendeeFilters--steps {
- &-top {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
-
- .ant-steps-item {
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- margin-bottom: 1rem;
- }
-
- .ant-steps-item .ant-steps-item-title {
- width: 100%;
- }
-
- .ant-steps-item .ant-steps-item-content {
- width: auto;
- padding-top: 4px;
- margin-left: 50px;
- }
-
- .ant-steps-item .ant-steps-item-tail {
- display: none !important;
- }
-
- &-icon {
- display: block;
- }
-}
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/SearchAttendeesPage.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/SearchAttendeesPage.js
deleted file mode 100644
index dfce04240..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/SearchAttendeesPage.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import styles from './SearchAttendeesPage.module.scss';
-import { connect } from 'react-redux';
-import { Button as AntButton } from 'antd';
-
-import * as OrganiserSelectors from 'redux/organiser/selectors';
-import * as FilterUtils from 'utils/filters';
-
-import Divider from 'components/generic/Divider';
-import AttendeeTable from 'components/tables/AttendeeTable';
-import BulkEditRegistrationDrawer from 'components/modals/BulkEditRegistrationDrawer';
-import BulkEmailDrawer from 'components/modals/BulkEmailDrawer';
-import AttendeeFilters from './AttendeeFilters';
-
-const SearchAttendeesPage = ({ registrations, registrationsLoading, filters }) => {
- const filtered = FilterUtils.applyFilters(registrations, filters);
-
- const renderBulkActions = () => {
- if (!registrations.length) return null;
- const ids = registrations.map(r => r._id);
- const userIds = registrations.map(r => r.user);
- return (
-
-
- {registrations.length} registrations
-
-
-
-
-
- );
-};
-
-const mapState = state => ({
- registrations: OrganiserSelectors.registrationsFiltered(state),
- registrationsLoading: OrganiserSelectors.registrationsLoading(state),
- filters: OrganiserSelectors.registrationsFilters(state)
-});
-
-export default connect(mapState)(SearchAttendeesPage);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/index.js
deleted file mode 100644
index af122db33..000000000
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-
-import { PageHeader, Menu, Button as AntButton } from 'antd';
-import { connect } from 'react-redux';
-
-import PageWrapper from 'components/PageWrapper';
-import Divider from 'components/generic/Divider';
-
-import * as OrganiserSelectors from 'redux/organiser/selectors';
-import * as OrganiserActions from 'redux/organiser/actions';
-
-import SearchAttendeesPage from './SearchAttendeesPage';
-import AssignAttendeesPage from './AssignAttendeesPage';
-import TeamsPage from './TeamsPage';
-import AdminPage from './AdminPage';
-
-const OrganiserEditEventReview = ({ event, organisers, updateRegistrations, updateTeams, registrationsLoading }) => {
- const [selectedKey, setSelectedKey] = useState('search');
-
- const updateData = useCallback(() => {
- updateRegistrations(event.slug);
- updateTeams(event.slug);
- }, [event.slug, updateTeams, updateRegistrations]);
-
- useEffect(() => {
- updateData();
- }, [event.slug, updateData]);
-
- const renderSelectedKey = () => {
- switch (selectedKey) {
- case 'search':
- return
- Applications to your event}
- extra={
-
- Refresh data
-
- }
- footer={
-
- setSelectedKey(key)}
- >
- Participants
- Teams
- Assigned to you
- Admin & Tools
-
-
- }
- />
-
- );
-};
-
-const mapState = state => ({
- organisers: OrganiserSelectors.organisers(state),
- event: OrganiserSelectors.event(state),
- registrationsLoading: OrganiserSelectors.registrationsLoading(state)
-});
-
-const mapDispatch = dispatch => ({
- updateRegistrations: slug => dispatch(OrganiserActions.updateRegistrationsForEvent(slug)),
- updateTeams: slug => dispatch(OrganiserActions.updateTeamsForEvent(slug))
-});
-
-export default connect(
- mapState,
- mapDispatch
-)(OrganiserEditEventReview);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AdminPage.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Admin/AdminPage.scss
similarity index 100%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AdminPage.scss
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Admin/AdminPage.scss
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AdminPage.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Admin/index.js
similarity index 100%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AdminPage.js
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Admin/index.js
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AssignAttendeesPage.module.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Assigned/AssignAttendeesPage.module.scss
similarity index 100%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AssignAttendeesPage.module.scss
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Assigned/AssignAttendeesPage.module.scss
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AssignAttendeesPage.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Assigned/index.js
similarity index 97%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AssignAttendeesPage.js
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Assigned/index.js
index a4b30e9b7..2e010f8f6 100644
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/AssignAttendeesPage.js
+++ b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Assigned/index.js
@@ -65,7 +65,7 @@ const SearchAttendeesPage = ({ idToken, event, registrations = [], registrations
Assign random registrations
r._id)} />
+ {/* r._id)} /> */}
+
+ );
+};
+
+const mapState = state => ({
+ registrations: OrganiserSelectors.registrations(state),
+ registrationsLoading: OrganiserSelectors.registrationsLoading(state),
+ filters: []
+});
+
+export default connect(mapState)(SearchAttendeesPage);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/TeamsPage.module.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Teams/TeamsPage.module.scss
similarity index 100%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/TeamsPage.module.scss
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Teams/TeamsPage.module.scss
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/TeamsPage.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Teams/index.js
similarity index 97%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/TeamsPage.js
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Teams/index.js
index e5e9e8e62..2ad347a3c 100644
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventReview/TeamsPage.js
+++ b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Teams/index.js
@@ -26,10 +26,10 @@ const TeamsPage = ({ event, teams, registrationsLoading, teamsLoading, registrat
if (!team.members || !team.members.length) return null;
return (
- r._id)}
buttonProps={{ text: 'Edit all team members' }}
- />
+ /> */}
);
}}
@@ -106,10 +106,10 @@ const TeamsPage = ({ event, teams, registrationsLoading, teamsLoading, registrat
{teamsFiltered.length} teams
-
{
+ const [calculations, setCalculations] = useState();
+ const [maxSpend, setMaxSpend] = useState(0);
+ const { slug } = event;
+
+ const makeCalculations = useCallback(() => {
+ const groupsSorted = sortBy(filterGroups, group => amountsByGroup[group.label] * -1);
+ const registrationsMapped = groupsSorted.reduce(
+ ({ registrations, res }, group) => {
+ const filtered = FilterHelpers.applyFilters(registrations, group.filters);
+ const amount = parseInt(amountsByGroup[group.label]);
+
+ if (amount === 0) {
+ return { registrations, res };
+ }
+
+ return {
+ res: res.concat(
+ filtered.map(reg => ({
+ id: reg._id,
+ group: group.label,
+ amount,
+ createdAt: reg.createdAt
+ }))
+ ),
+ registrations: difference(registrations, filtered)
+ };
+ },
+ {
+ registrations: eligibleRegistrations,
+ res: []
+ }
+ ).res;
+ const registrationsSorted = sortBy(registrationsMapped, 'createdAt');
+
+ const registrationsGranted = [];
+ let currentSpend = 0;
+ for (let item of registrationsSorted) {
+ if (currentSpend + item.amount <= maxSpend) {
+ currentSpend += item.amount;
+ registrationsGranted.push(item);
+ }
+ }
+
+ const byGroup = filterGroups.map(group => {
+ const amount = amountsByGroup[group.label];
+ const granted = registrationsGranted.filter(r => r.group === group.label);
+ const total = registrationsSorted.filter(r => r.group === group.label);
+
+ return {
+ group: group.label,
+ amount,
+ registrationsGranted: granted,
+ registrationsTotal: total,
+ totalSpend: sumBy(granted, 'amount')
+ };
+ });
+
+ const byGroupSorted = sortBy(byGroup, 'totalSpend');
+
+ setCalculations({
+ granted: registrationsGranted,
+ total: registrationsSorted,
+ spend: currentSpend,
+ byGroup: byGroupSorted
+ });
+ }, [filterGroups, eligibleRegistrations, maxSpend, amountsByGroup]);
+
+ const handleSubmit = useCallback(() => {
+ const data = calculations.granted.map(item => ({
+ _id: item.id,
+ amount: item.amount
+ }));
+
+ RegistrationsService.bulkAssignTravelGrantsForEvent(idToken, slug, data)
+ .then(() => {
+ enqueueSnackbar('Success!', { variant: 'success' });
+ })
+ .catch(err => {
+ enqueueSnackbar('Something went wrong...', { variant: 'error' });
+ console.log(err);
+ });
+ }, [idToken, slug, calculations, enqueueSnackbar]);
+
+ const canSubmit = calculations && calculations.granted.length > 0;
+
+ return (
+
+
+
+
+
+
+ Calculate
+
+
+
+
+ {calculations && (
+
+
+
+ This would result in a total spend of {calculations.spend} and give travel grants to{' '}
+ {calculations.granted.length} participants
+
+
+
+ `${granted.length}/${registrationsTotal.length}`
+ },
+ {
+ key: 'spend',
+ label: 'Spend (EUR)',
+ path: 'totalSpend'
+ }
+ ]}
+ />
+
+ )}
+
+
+
+
+ Assign travel grants
+
+
+
+
+ );
+};
+
+const mapState = state => ({
+ idToken: AuthSelectors.getIdToken(state),
+ event: OrganiserSelectors.event(state),
+ filterGroups: OrganiserSelectors.filterGroups(state),
+ eligibleRegistrations: OrganiserSelectors.registrationsEligibleForTravelGrant(state)
+});
+
+export default withSnackbar(connect(mapState)(CalculateSpend));
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Travel/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Travel/index.js
new file mode 100644
index 000000000..e78dbc207
--- /dev/null
+++ b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/Travel/index.js
@@ -0,0 +1,171 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+import { sumBy } from 'lodash-es';
+import { connect } from 'react-redux';
+import { Typography, Grid } from '@material-ui/core';
+import { FilterHelpers } from '@hackjunction/shared';
+import { withSnackbar } from 'notistack';
+
+import Table from 'components/generic/Table';
+import TextInput from 'components/inputs/TextInput';
+import Statistic from 'components/generic/Statistic';
+
+import RegistrationsService from 'services/registrations';
+
+import * as AuthSelectors from 'redux/auth/selectors';
+import * as OrganiserSelectors from 'redux/organiser/selectors';
+
+import CalculateSpend from './CalculateSpend';
+
+const TravelGrantPage = ({
+ enqueueSnackbar,
+ event,
+ idToken,
+ registrations,
+ registrationsWithTravelGrant,
+ filterGroups,
+ filterGroupsLoading,
+ travelGrantSpend,
+ travelGrantCount,
+ travelGrantRejectedCount
+}) => {
+ const [groups, setGroups] = useState({});
+
+ useEffect(() => {
+ if (filterGroups) {
+ setGroups(
+ filterGroups.reduce((res, group) => {
+ res[group.label] = 0;
+ return res;
+ }, {})
+ );
+ }
+ }, [filterGroups]);
+
+ const handleAmountChange = useCallback(
+ (group, amount) => {
+ setGroups({
+ ...groups,
+ [group]: amount
+ });
+ },
+ [groups]
+ );
+
+ const filterGroupsMapped = filterGroups.map(group => {
+ const items = FilterHelpers.applyFilters(registrationsWithTravelGrant, group.filters);
+ return {
+ ...group,
+ spend: sumBy(items, r => r.travelGrant || 0)
+ };
+ });
+
+ const handleBulkReject = useCallback(() => {
+ return RegistrationsService.bulkRejectTravelGrantsForEvent(idToken, event.slug)
+ .then(() => {
+ enqueueSnackbar('Success!', { variant: 'success' });
+ return;
+ })
+ .catch(err => {
+ enqueueSnackbar('Something went wrong', { variant: 'error' });
+ return;
+ });
+ }, [idToken, event.slug, enqueueSnackbar]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Here you can automatically grant travel grants based on your filter groups. Set the amount you want
+ to grant for each group (or 0 to skip that group), and the tool will go through confirmed
+ participants in order of registration time, and assign them their respective travel grant amounts as
+ long as the budget is not exceeded.
+
+
+
+ (
+ handleAmountChange(label, value)}
+ />
+ )
+ }
+ ]}
+ />
+
+
+
+ Set budget and preview
+
+
+
+
+
+ );
+};
+
+const mapState = state => ({
+ idToken: AuthSelectors.getIdToken(state),
+ event: OrganiserSelectors.event(state),
+ registrations: OrganiserSelectors.registrationsEligibleForTravelGrant(state),
+ registrationsWithTravelGrant: OrganiserSelectors.registrationsWithTravelGrant(state),
+ filterGroups: OrganiserSelectors.filterGroups(state),
+ filterGroupsLoading: OrganiserSelectors.filterGroupsLoading(state),
+ travelGrantSpend: OrganiserSelectors.travelGrantSpend(state),
+ travelGrantCount: OrganiserSelectors.travelGrantCount(state),
+ travelGrantRejectedCount: OrganiserSelectors.travelGrantRejectedCount(state)
+});
+
+export default withSnackbar(connect(mapState)(TravelGrantPage));
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/index.js
new file mode 100644
index 000000000..d5c200659
--- /dev/null
+++ b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Participants/index.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+
+import { connect } from 'react-redux';
+import { Typography } from '@material-ui/core';
+
+import PageWrapper from 'components/PageWrapper';
+import Divider from 'components/generic/Divider';
+import MaterialTabsLayout from 'components/layouts/MaterialTabsLayout';
+import PageHeader from 'components/generic/PageHeader';
+
+import * as OrganiserSelectors from 'redux/organiser/selectors';
+
+import SearchAttendeesPage from './Search';
+import AssignAttendeesPage from './Assigned';
+import TeamsPage from './Teams';
+import AdminPage from './Admin';
+import TravelGrantsPage from './Travel';
+
+const OrganiserEditEventReview = ({ event, organisers, registrationsLoading, updateData }) => {
+ return (
+
+
+ );
+};
+
+const mapState = state => ({
+ organisers: OrganiserSelectors.organisers(state),
+ event: OrganiserSelectors.event(state),
+ registrationsLoading: OrganiserSelectors.registrationsLoading(state)
+});
+
+export default connect(mapState)(OrganiserEditEventReview);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventStats/OrganiserEditEventStats.module.scss b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Stats/Stats.module.scss
similarity index 100%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventStats/OrganiserEditEventStats.module.scss
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Stats/Stats.module.scss
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventStats/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Stats/index.js
similarity index 77%
rename from frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventStats/index.js
rename to frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Stats/index.js
index 750dd16d6..904243b0b 100644
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/OrganiserEditEventStats/index.js
+++ b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/Stats/index.js
@@ -1,32 +1,29 @@
import React, { useEffect } from 'react';
-import styles from './OrganiserEditEventStats.module.scss';
+import styles from './Stats.module.scss';
import { connect } from 'react-redux';
-import { PageHeader, Row, Col, Card } from 'antd';
+import { Row, Col, Card } from 'antd';
import * as OrganiserSelectors from 'redux/organiser/selectors';
import * as OrganiserActions from 'redux/organiser/actions';
import Divider from 'components/generic/Divider';
+import PageHeader from 'components/generic/PageHeader';
import PageWrapper from 'components/PageWrapper';
+
import ApplicationsOverTime from 'components/plots/ApplicationsOverTime';
import RatingsSplit from 'components/plots/RatingsSplit';
import ReviewersList from 'components/plots/ReviewersList';
-
import ApplicationsCount from 'components/plots/ApplicationsCount';
import TeamsCount from 'components/plots/TeamsCount';
import ReviewedPercent from 'components/plots/ReviewedPercent';
import ReviewedAverage from 'components/plots/ReviewedAverage';
import ApplicationsLast24h from 'components/plots/ApplicationsLast24h';
-const OrganiserEditEventStats = ({ slug, loading, updateRegistrations, updateTeams }) => {
- useEffect(() => {
- updateRegistrations(slug);
- updateTeams(slug);
- }, [slug, updateRegistrations, updateTeams]);
-
- const renderContent = () => {
- return (
+const OrganiserEditEventStats = ({ slug, loading }) => {
+ return (
+
+
- );
- };
-
- return (
-
- Key stats for the event} footer={renderContent()} />
);
};
@@ -94,12 +85,4 @@ const mapState = state => ({
OrganiserSelectors.organisersLoading(state)
});
-const mapDispatch = dispatch => ({
- updateRegistrations: slug => dispatch(OrganiserActions.updateRegistrationsForEvent(slug)),
- updateTeams: slug => dispatch(OrganiserActions.updateTeamsForEvent(slug))
-});
-
-export default connect(
- mapState,
- mapDispatch
-)(OrganiserEditEventStats);
+export default connect(mapState)(OrganiserEditEventStats);
diff --git a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/index.js b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/index.js
index 9fcf64bd3..6cc93f811 100644
--- a/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/index.js
+++ b/frontend/src/pages/OrganiserDashboard/OrganiserEditEvent/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
import styles from './OrganiserEditEvent.module.scss';
import { connect } from 'react-redux';
@@ -9,31 +9,52 @@ import * as OrganiserActions from 'redux/organiser/actions';
import PageWrapper from 'components/PageWrapper';
import Image from 'components/generic/Image';
import EventNavBar from 'components/navbars/EventNavBar';
-import OrganiserEditEventDetails from './OrganiserEditEventDetails';
-import OrganiserEditEventStats from './OrganiserEditEventStats';
-import OrganiserEditEventReview from './OrganiserEditEventReview';
-import OrganiserEditEventManage from './OrganiserEditEventManage';
+
+import DetailsPage from './Details';
+import StatsPage from './Stats';
+import ParticipantsPage from './Participants';
+import ManagePage from './Manage';
import SidebarLayout from 'components/layouts/SidebarLayout';
-const OrganiserEditEvent = ({ updateEvent, updateOrganiserProfiles, event, user, match, location }) => {
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState(false);
+const OrganiserEditEvent = ({
+ updateEvent,
+ updateOrganiserProfiles,
+ updateRegistrations,
+ updateTeams,
+ updateFilterGroups,
+ loading,
+ error,
+ event,
+ user,
+ match,
+ location
+}) => {
const { slug } = match.params;
useEffect(() => {
- setLoading(true);
- updateEvent(slug)
- .catch(err => {
- setError(true);
- })
- .finally(() => {
- setLoading(false);
- });
- }, [updateEvent, slug]);
+ updateEvent(slug);
+ }, [slug, updateEvent]);
+
+ const updateData = useCallback(() => {
+ if (event.owner) {
+ updateOrganiserProfiles(event.owner, event.organisers);
+ updateRegistrations(slug);
+ updateTeams(slug);
+ updateFilterGroups(slug);
+ }
+ }, [
+ slug,
+ event.owner,
+ event.organisers,
+ updateTeams,
+ updateRegistrations,
+ updateOrganiserProfiles,
+ updateFilterGroups
+ ]);
useEffect(() => {
- updateOrganiserProfiles(event.owner, event.organisers);
- }, [event.owner, event.organisers, updateOrganiserProfiles]);
+ updateData();
+ }, [updateData]);
return (
@@ -62,25 +83,25 @@ const OrganiserEditEvent = ({ updateEvent, updateOrganiserProfiles, event, user,
path: '',
icon: 'home',
label: 'Edit',
- render: routeProps =>