14 |
30 | );
31 | };
32 |
33 | export default TabsContainer;
34 |
--------------------------------------------------------------------------------
/client/src/common/tabs/index.scss:
--------------------------------------------------------------------------------
1 | .tab-header{
2 | display: flex;
3 | justify-content: center;
4 | list-style: none;
5 | padding: 0;
6 | margin-bottom: 0;
7 | li{
8 | width: 50%;
9 | text-align: center;
10 | font-size: 15px;
11 | line-height: 1;
12 | margin-left: 0;
13 | padding: 10px;
14 | border-bottom: 2px solid #3D5A6C;
15 | transition: all .3s;
16 | font-weight: 300;
17 | cursor: pointer;
18 | &.selected{
19 | border-bottom: 2px solid #3D5A6C;
20 | color: #FFFFFF;
21 | font-weight: bold;
22 | background: #3D5A6C;
23 | border-radius: 10px 10px 0 0;
24 | }
25 | }
26 | }
27 |
28 | .tab{
29 | width: 100%;
30 | padding: 10px 0;
31 | font-family: 'Open Sans', sans-serif;
32 | color: #444;
33 | }
34 |
--------------------------------------------------------------------------------
/client/src/common/tabs/tab.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import "./index.scss";
3 |
4 | const Tab = (props) => {
5 | return(
6 | -
15 | {props.children.map((elem, index) => {
16 | let style = index === activeTab ? "selected" : "";
17 | return (
18 |
- 23 | {elem.props.title} 24 | 25 | ); 26 | })} 27 |
{props.children[activeTab]}
29 | {props.children}
7 | )
8 | };
9 |
10 | export default Tab;
11 |
--------------------------------------------------------------------------------
/client/src/components/ChangesModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | Modal,
4 | Box,
5 | Typography,
6 | Grid
7 | } from '@mui/material'
8 | import { StyledButton } from './ProjectForm';
9 | import { Link } from 'react-router-dom';
10 | import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
11 |
12 |
13 | const style = {
14 | position: 'absolute',
15 | top: '50%',
16 | left: '50%',
17 | transform: 'translate(-50%, -50%)',
18 | width: 400,
19 | bgcolor: 'background.paper',
20 | border: '2px solid #000',
21 | boxShadow: 24,
22 | p: 4,
23 | };
24 |
25 |
26 | export default function ChangesModal({open, onClose, handleClose, destination }) {
27 | return (
28 |
29 |
25 |
43 | )
44 | };
45 |
46 | export default DashboardUsers;
47 |
--------------------------------------------------------------------------------
/client/src/components/ErrorContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import "../sass/ErrorContainer.scss";
4 |
5 | export function ErrorContainer({ className, ...props }) {
6 | return
26 |
42 | -
27 | {users !== null && users.map((user, index) => (
28 |
-
29 | 30 |38 |31 |33 |
{user.name.firstName} {user.name.lastName}
32 |34 |37 |Current Role: {user.currentRole}
35 |Desired Role: {user.desiredRole}
36 |
39 | ))}
40 |
{props.children}
;
7 | }
8 |
--------------------------------------------------------------------------------
/client/src/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Redirect } from 'react-router-dom';
3 |
4 | import pkg from '../../package.json';
5 | import useAuth from '../hooks/useAuth';
6 | import { Button, Box, Typography } from '@mui/material';
7 |
8 | import '../sass/Footer.scss';
9 |
10 | const Footer = () => {
11 | const { auth, logout } = useAuth();
12 |
13 | const handleLogout = async (e) => {
14 | e.preventDefault();
15 | await logout();
16 | return
7 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/client/src/components/Leaderboard.test.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import LeaderBoard from "./Leaderboard";
3 | import { render } from "@testing-library/react";
4 | import { test, expect } from 'vitest';
5 |
6 | test("renders without crashing", () => {
7 | const { container } = render({children}
8 |
35 |
61 | )
62 | };
63 |
64 | export default ReadyEvents;
65 |
--------------------------------------------------------------------------------
/client/src/components/__snapshots__/Leaderboard.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders without crashing 1`] = `
4 | Events to check-in for below:
36 | {isLoading ?Loading...
: (
37 |
38 | {events.length > 0 ? (events.map((event, index) => (
39 |
59 | )}
60 |
40 |
55 | ))) : (
56 |
41 |
46 |
47 | {props.newUser &&
48 | New User Check-In
49 | }
50 |
51 | {props.returningUser &&
52 | Returning User Check-In
53 | }
54 | {event.name}
42 |{event.date}
43 |{event.location.city}
44 |{event.location.state}
45 |Check back later...
57 | )}
58 |
7 |
22 | `;
23 |
--------------------------------------------------------------------------------
/client/src/components/__snapshots__/Leaderboard.test.jsx.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`renders without crashing 1`] = `
4 |
10 |
16 | 13 | Volunteer Leaderboard 14 |
15 |
19 |
21 |
5 |
24 | `;
25 |
--------------------------------------------------------------------------------
/client/src/components/admin/dashboard/index.scss:
--------------------------------------------------------------------------------
1 | .admin-dashboard-wrap {
2 | padding: 10px;
3 | font-family: 'Open Sans', sans-serif;
4 | }
5 |
6 | .admin-header {
7 | color: #000000;
8 | margin: 20px auto;
9 | h1{
10 | font-size: 24px;
11 | line-height: 1;
12 | text-align: center;
13 | font-weight: 600;
14 | letter-spacing: normal;
15 | }
16 | }
17 |
18 | .event-header {
19 | font-size: 17px;
20 | font-weight: bold;
21 | margin: 15px 0 5px;
22 | }
23 |
24 | .admin-upcoming-event{
25 | margin: 0 0 35px;
26 |
27 | .dashboard-chart-container img{
28 | max-width: 90px;
29 | }
30 |
31 | .warning-event {
32 | padding: 0;
33 | margin: 0;
34 | font-size: 14px;
35 | .event-name {
36 | font-size: 15px;
37 | font-weight: bold;
38 | }
39 | .event-info{
40 | font-size: 14px;
41 | }
42 | }
43 |
44 | .checkin-toggle {
45 | color: #3D5A6C;
46 | background-color: #FFFFFF;
47 | border: 1px solid #3D5A6C;
48 | border-radius: 20px;
49 | line-height: 1;
50 | padding: 10px 20px;
51 | margin: 0 auto;
52 | transition: .3s ease;
53 | max-width: 170px;
54 | min-width: 170px;
55 | height: auto;
56 | &:hover{
57 | background-color: #3D5A6C;
58 | color: #FFFFFF;
59 | }
60 | }
61 | }
62 |
63 | .stat-select {
64 | select {
65 | max-width: 160px;
66 | min-width: 160px;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/client/src/components/admin/donutChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from "react";
2 | import * as d3 from "d3";
3 |
4 | const DonutChart = props => {
5 | const ref = useRef(null);
6 |
7 | const createPie = d3
8 | .pie()
9 | .value(d => d.value)
10 | .sort(null);
11 |
12 | const createArc = d3
13 | .arc()
14 | .innerRadius(props.innerRadius)
15 | .outerRadius(props.outerRadius);
16 |
17 | const format = d3.format(".2f");
18 |
19 | useEffect(() => {
20 | const data = createPie(props.data);
21 | const group = d3.select(ref.current);
22 | const groupWithData = group.selectAll("g.arc").data(data);
23 |
24 | groupWithData.exit().remove();
25 |
26 | const groupWithUpdate = groupWithData
27 | .enter()
28 | .append("g")
29 | .attr("class", "arc");
30 |
31 | const path = groupWithUpdate
32 | .append("path")
33 | .merge(groupWithData.select("path.arc"));
34 |
35 | path
36 | .attr("class", "arc")
37 | .attr("d", createArc)
38 | .attr("fill", (d, i) => {
39 | const { data } = d;
40 | return data.color;
41 | });
42 | }, [props.data]);
43 |
44 | return (
45 |
8 |
23 |
11 |
17 | 14 | Volunteer Leaderboard 15 |
16 |
20 |
22 |
46 |
52 |
53 | );
54 | };
55 |
56 | export default DonutChart;
57 |
--------------------------------------------------------------------------------
/client/src/components/admin/donutChartLoading.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box, Container, CircularProgress, Typography } from '@mui/material';
3 | import '../../sass/Dashboard.scss';
4 |
5 | const DonutChartLoading = (props) => (
6 |
11 |
12 |
40 |
41 | );
42 | };
43 | export default eventOverview;
44 |
--------------------------------------------------------------------------------
/client/src/components/admin/reports/index.scss:
--------------------------------------------------------------------------------
1 | .admin-table-report{
2 | margin: 10px 0;
3 | font-size: 15px;
4 | text-align: center;
5 | }
6 |
7 | .stats-section{
8 | margin-top: 10px;
9 | }
10 |
11 | .table-header{
12 | font-size: 15px;
13 | font-weight: bold;
14 | background-color: #3d5a6c47;
15 | margin: 20px 0 5px;
16 | padding: 5px;
17 | border-radius: 7px 7px 0 0;
18 | &.m-t-small{
19 | margin-top: 10px;
20 | }
21 | }
22 |
23 | .admin-table{
24 | width: 100%;
25 | margin-top: 10px;
26 | border-collapse: collapse;
27 | th, td{
28 | text-align: center;
29 | height: 30px;
30 | }
31 | tr:last-child{
32 | td{
33 | color: #3D5A6C;
34 | font-weight: bold;
35 | border-top: 1px solid lightgray;
36 | }
37 | }
38 | }
39 |
40 | .filter-button{
41 | color: #3D5A6C;
42 | border: 1px solid lightgray;
43 | border-radius: 20px;
44 | line-height: 1;
45 | padding: 10px 20px;
46 | margin: 0 auto;
47 | transition: .3s ease;
48 | max-width: 120px;
49 | min-width: 120px;
50 | height: auto;
51 | font-family: 'Open Sans', sans-serif;
52 | font-size: 15px;
53 | &.calc-button{
54 | max-width: 150px;
55 | min-width: 150px;
56 | }
57 | &:hover{
58 | background-color: #3d5a6c47;
59 | }
60 | }
61 |
62 | .dashboard-chart-container img{
63 | max-width: 90px;
64 | }
65 |
66 | .time-description{
67 | font-size: 13px;
68 | text-align: right;
69 | margin-top: 10px;
70 | }
71 |
--------------------------------------------------------------------------------
/client/src/components/auth/HandleAuth.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Redirect } from 'react-router-dom';
3 | import { isValidToken } from '../../services/user.service';
4 | import { authLevelRedirect } from '../../utils/authUtils';
5 |
6 | import '../../sass/MagicLink.scss';
7 | import useAuth from '../../hooks/useAuth';
8 |
9 | const HandleAuth = (props) => {
10 | const { auth, refreshAuth } = useAuth();
11 | const [isMagicLinkValid, setMagicLink] = useState(null);
12 | const [isLoaded, setIsLoaded] = useState(false);
13 |
14 | // Step 1: Validate token from query string
15 | useEffect(() => {
16 | const search = props.location.search;
17 | const params = new URLSearchParams(search);
18 | const api_token = params.get('token');
19 |
20 | if (!api_token) return;
21 | isValidToken(api_token).then((isValid) => {
22 | setMagicLink(isValid);
23 | });
24 | }, [props.location.search]);
25 |
26 | // Step 2: Refresh user auth (requires valid Magic Link)
27 | useEffect(() => {
28 | if (!isMagicLinkValid) return;
29 | if (!auth?.isError) return;
30 |
31 | refreshAuth();
32 | }, [isMagicLinkValid, refreshAuth, auth]);
33 |
34 | // Step 3: Set IsLoaded value to render Component
35 | useEffect(() => {
36 | if (!isMagicLinkValid) {
37 | setIsLoaded(true);
38 | return;
39 | }
40 |
41 | if (!auth || auth.isError) return;
42 |
43 | setIsLoaded(true);
44 | }, [isMagicLinkValid, setIsLoaded, auth]);
45 |
46 | if (!isLoaded) return Loading...
;
47 |
48 | const Delayed = ({ children, waitBeforeShow = 500 }) => {
49 | const [isShown, setIsShown] = useState(false);
50 | useEffect(() => {
51 | const timer = setTimeout(() => {
52 | setIsShown(true);
53 | }, waitBeforeShow);
54 |
55 | return () => clearTimeout(timer);
56 | }, [waitBeforeShow]);
57 |
58 | return isShown ? children : null;
59 | };
60 |
61 | let loginRedirect = '';
62 |
63 | if (auth?.user) {
64 | loginRedirect = authLevelRedirect(auth.user);
65 | }
66 |
67 | return (
68 |
69 |
70 |
72 | {auth?.user &&
74 | );
75 | };
76 |
77 | export default HandleAuth;
78 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/AddTeamMember.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import "../../sass/AddTeamMember.scss";
3 |
4 | const AddTeamMember = (props) => {
5 | const [email, setEmail] = useState("");
6 |
7 | const handleInputChange = (e) => setEmail(e.currentTarget.value);
8 |
9 | return (
10 | Sorry, the link is not valid anymore.
71 |
11 |
46 | );
47 | };
48 |
49 | export default AddTeamMember;
50 |
--------------------------------------------------------------------------------
/client/src/components/dashboard/AttendeeTableRow.jsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from "react";
2 | import styles from "../../sass/ProjectLeaderDashboard.module.scss";
3 | import DashboardButton from "./DashboardButton";
4 |
5 | const AttendeeTableRow = ({ name, role, isProjectTeamMember, postUser }) => {
6 | let here = null;
7 |
8 | if (isProjectTeamMember) {
9 | here = Yes
10 | } else {
11 | here =
12 |
42 | {props.isSuccess ?
45 | User Added
: null} 43 |{props.isError ? props.errorMessage : null}
44 |
17 |
19 | {name}
18 |
20 | {role}
21 |
22 | {here}
23 |
6 |
13 | );
14 | };
15 |
16 | export default ProjectInfo;
--------------------------------------------------------------------------------
/client/src/components/dashboard/RosterTableRow.jsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import styles from '../../sass/ProjectLeaderDashboard.module.scss';
3 |
4 | const RosterTableRow = ({
5 | name,
6 | role,
7 | isNewMember,
8 | gDriveClicked,
9 | gitHubClicked,
10 | services,
11 | }) => {
12 | // see icons attr. note @ bottom
13 | const checkmark = (
14 | 7 | {project.projectId.name} 8 |
9 |10 | Project Leader Dashboard 11 |
12 |
19 | );
20 | const gitHubIcon = (
21 | 
26 | );
27 | const googleDriveIcon = (
28 | 
{
33 | gDriveClicked();
34 | }}
35 | />
36 | );
37 |
38 | const slackIcon = (
39 | 
44 | );
45 |
46 | let here = (
47 |
48 |
60 | );
61 |
62 | return (
63 | {slackIcon}
49 | {services.googleDrive ? (
50 | {checkmark}
51 | ) : (
52 | {googleDriveIcon}
53 | )}
54 | {services.gitHub ? (
55 | {checkmark}
56 | ) : (
57 | {gitHubIcon}
58 | )}
59 |
65 |
67 | {name}
66 |
68 | {role}
69 |
70 | {here}
71 |
8 |
16 | );
17 | }
18 |
19 | export default addProject;
20 |
--------------------------------------------------------------------------------
/client/src/components/manageProjects/editableField.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react';
2 | import { Box, Button, TextareaAutosize, TextField, Typography } from '@mui/material';
3 | import '../../sass/ManageProjects.scss';
4 |
5 | const EditableField = ({
6 | fieldData,
7 | fieldName,
8 | updateProject,
9 | fieldType = 'text',
10 | fieldTitle,
11 | accessLevel,
12 | canEdit = ['admin', 'superadmin'],
13 | }) => {
14 | const [fieldValue, setFieldValue] = useState(fieldData);
15 | const [editable, setEditable] = useState(false);
16 | const [notRestricted] = useState(canEdit.includes(accessLevel));
17 | const ref = useRef();
18 |
19 | // Update the displayed results to match the change just made to the db
20 | useEffect(() => {
21 | if (editable) {
22 | ref.current.focus();
23 | }
24 | }, [editable]);
25 |
26 | const inputProps = {
27 | ref,
28 | className: 'editable-field',
29 | onBlur: () => {
30 | setEditable(false);
31 | updateProject(fieldName, fieldValue);
32 | },
33 | onChange: ({ target }) => {
34 | setFieldValue(target.value);
35 | const onEnterKey = ({ keyCode }) => {
36 | if (keyCode === 13) {
37 | target.removeEventListener('keydown', onEnterKey);
38 | target.blur();
39 | }
40 | };
41 | target.addEventListener('keydown', onEnterKey);
42 | },
43 | value: fieldValue,
44 | };
45 |
46 | return (
47 | // this button will be disabled if user !admin
48 |
32 | Project Management
33 |
45 | );
46 | };
47 |
48 | export default SelectProject;
49 |
--------------------------------------------------------------------------------
/client/src/components/manageProjects/utilities/addDurationToTime.js:
--------------------------------------------------------------------------------
1 | export const addDurationToTime = (startTimeDate, duration) => {
2 | // Create the endTime by adding seconds based on the selected duration to the timestamp and converting it back to date
3 | if(startTimeDate && duration){
4 | return new Date(startTimeDate.getTime() + (Number(duration)*3600000))
5 | } else {
6 | throw new Error('Error: Cannot calculate endTime.')
7 | }
8 | };
--------------------------------------------------------------------------------
/client/src/components/manageProjects/utilities/findNextDayOccuranceOfDay.js:
--------------------------------------------------------------------------------
1 | export const findNextOccuranceOfDay = (dayOfTheWeek) => {
2 | /***
3 | This takes the number of the day of the week - with Sunday
4 | being day 0 - and returns a Data object with the next
5 | occurance of that day
6 | ***/
7 |
8 | let day = parseInt(dayOfTheWeek);
9 | const date = new Date();
10 | date.setDate(date.getDate() + ((7 - date.getDay()) % 7 + day) % 7);
11 |
12 | return date;
13 | }
14 |
--------------------------------------------------------------------------------
/client/src/components/manageProjects/utilities/readableEvent.js:
--------------------------------------------------------------------------------
1 | const readableEvent = (e) => {
2 | // This translates the data from the database into human
3 | // readable format that can be displayed
4 |
5 | // Get date for each of the parts of the event time/day
6 | const d = new Date(e.date);
7 | const start = new Date(e.startTime);
8 | const end = new Date(e.endTime);
9 |
10 | // Get day of the week. (Get the day number for sorting)
11 | const options = { weekday: 'long' };
12 | const dayOfTheWeek = Intl.DateTimeFormat('en-US', options).format(d);
13 | const dayOfTheWeekNumber = d.getDay();
14 |
15 | // Convert end time from 24 to 12 and make pretty
16 | const sHours = start.getHours();
17 | const startHours = sHours % 12 || 12;
18 | const startMinutes =
19 | (start.getMinutes() < 10 ? '0' : '') + start.getMinutes();
20 | const startAorP = sHours >= 12 ? 'pm' : 'am';
21 | const startTime = `${startHours}:${startMinutes}${startAorP}`;
22 |
23 | // Convert end time from 24 to 12 and make pretty
24 | const eHours = end.getHours();
25 | const endHours = eHours % 12 || 12;
26 | const endMinutes = (end.getMinutes() < 10 ? '0' : '') + end.getMinutes();
27 | const endAorP = eHours >= 12 ? 'pm' : 'am';
28 | const endTime = `${endHours}:${endMinutes}${endAorP}`;
29 |
30 | // Create readable object for this event
31 | const newEvent = {
32 | name: e.name,
33 | description: e.description,
34 | eventType: e.eventType,
35 | dayOfTheWeekNumber,
36 | dayOfTheWeek,
37 | startTime,
38 | endTime,
39 | duration: e.hours,
40 | // eslint-disable-next-line no-underscore-dangle
41 | event_id: e._id,
42 | videoConferenceLink: e.videoConferenceLink,
43 | };
44 | return newEvent;
45 | };
46 |
47 | export default readableEvent;
48 |
--------------------------------------------------------------------------------
/client/src/components/manageProjects/utilities/tests/addDurationToTime.test.js:
--------------------------------------------------------------------------------
1 | // const {addDurationToTime} = require('../addDurationToTime')
2 | import {addDurationToTime} from '../addDurationToTime'
3 | import {test, expect} from 'vitest'
4 |
5 | test('adds inputted "0.5" duration to inputted time', () => {
6 | const inputDuration = "0.5"
7 | const inputTime = new Date()
8 | const outputTime = new Date(inputTime.getTime() + (.5*3600000))
9 |
10 | expect(addDurationToTime(inputTime, inputDuration)).toEqual(outputTime)
11 | })
12 |
13 | test('adds inputted ".5" duration to inputted time', () => {
14 | const inputDuration = ".5"
15 | const inputTime = new Date()
16 | const outputTime = new Date(inputTime.getTime() + (.5*3600000))
17 |
18 | expect(addDurationToTime(inputTime, inputDuration)).toEqual(outputTime)
19 | })
20 |
21 | test('adds inputted "3" hour duration to inputted time', () => {
22 | const inputDuration = "3"
23 | const inputTime = new Date()
24 | const outputTime = new Date(inputTime.getTime() + (3*3600000))
25 |
26 | expect(addDurationToTime(inputTime, inputDuration)).toEqual(outputTime)
27 | })
28 |
29 | test('throws an error when there is no valid input', () => {
30 |
31 | expect(addDurationToTime).toThrow(new Error('Error: Cannot calculate endTime.'))
32 | })
--------------------------------------------------------------------------------
/client/src/components/manageProjects/utilities/timeConvertFromForm.js:
--------------------------------------------------------------------------------
1 | export const timeConvertFromForm = (dateObject, startTime) => {
2 | // This takes the time from the form and a
3 | // Data object and adds the time to the object
4 |
5 | // reconstitute time from form to timestamp
6 | const timeParts = startTime.split(':');
7 | const sap = timeParts[1].slice(-2);
8 | let startHour = parseInt(timeParts[0]);
9 | const startMinutes = parseInt(timeParts[1].slice(0,-2));
10 | const startSeconds = 0;
11 |
12 | // set 12am to 0 and make afternoon into military time
13 | if (sap === 'pm' && startHour !== 12) {
14 | startHour = startHour + 12;
15 | } else if (sap === 'am' && startHour === 12) {
16 | startHour = 0;
17 | }
18 |
19 | // Update the date string with the start hours of the meeting
20 | dateObject.setHours(startHour);
21 | dateObject.setMinutes(startMinutes);
22 | dateObject.setSeconds(startSeconds);
23 |
24 | const newDate = new Date(dateObject.getTime());
25 | return newDate;
26 | };
27 |
--------------------------------------------------------------------------------
/client/src/components/manageProjects/utilities/validateEditableField.js:
--------------------------------------------------------------------------------
1 | export const validateEditableField = (fieldName, fieldValue) => {
2 | switch (fieldName) {
3 | case 'hflaWebsiteUrl':
4 | return doesLinkContainFlex(fieldValue, 'hackforla.org');
5 | case 'slackUrl':
6 | return doesLinkContainFlex(fieldValue, 'slack.com');
7 | case 'googleDriveUrl':
8 | return doesLinkContainFlex(fieldValue, 'drive.google.com');
9 | case 'githubUrl':
10 | return doesLinkContainFlex(fieldValue, 'github.com');
11 | case 'description':
12 | return typeof fieldValue === 'string' && fieldValue.length <= 250;
13 | default:
14 | break;
15 | }
16 | return true;
17 | };
18 |
19 | export const generateErrorEditableField = (fieldName) => {
20 | switch (fieldName) {
21 | case 'hflaWebsiteUrl':
22 | case 'slackUrl':
23 | case 'googleDriveUrl':
24 | case 'githubUrl':
25 | return `Invalid field value for ${fieldName}`;
26 | case 'description':
27 | return 'Description is too long, max 250 characters allowed';
28 | default:
29 | break;
30 | }
31 | };
32 |
33 | const doesLinkContainFlex = (link, key) => {
34 | if (link.startsWith(`https://${key}`)) return true;
35 | if (link.startsWith(`https://www.${key}`)) return true;
36 | if (link.startsWith(key)) return true;
37 | return false;
38 | };
39 |
--------------------------------------------------------------------------------
/client/src/components/manageProjects/utilities/validateEventForm.js:
--------------------------------------------------------------------------------
1 | import { isWordInArrayInString } from './../../../utils/stringUtils.js';
2 | import { eventNameBlacklistArr } from '../../../utils/blacklist.js';
3 |
4 | const validateEventForm = (vals, projectToEdit) => {
5 | let newErrors = {};
6 | Object.keys(vals).forEach((key) => {
7 | let blacklistedStrings = isWordInArrayInString(
8 | eventNameBlacklistArr,
9 | vals[key].toLowerCase()
10 | );
11 | switch (key) {
12 | case 'name':
13 | // Required
14 | if (!vals[key]) {
15 | newErrors = { ...newErrors, name: 'Event name is required' };
16 | } else if (blacklistedStrings) {
17 | newErrors = {
18 | ...newErrors,
19 | name: `Event name cannot contain: ${blacklistedStrings.join(', ')}`,
20 | };
21 | } else if (
22 | isWordInArrayInString(
23 | [projectToEdit.name.toLowerCase()],
24 | vals[key].toLowerCase()
25 | )
26 | ) {
27 | if (projectToEdit.name.toLowerCase() === 'onboarding') {
28 | // Do nothing, word `onboarding` has been white-listed
29 | } else {
30 | newErrors = {
31 | ...newErrors,
32 | name: `Event name cannot contain the Project Name: '${projectToEdit.name}'`,
33 | };
34 | }
35 | }
36 | break;
37 |
38 | case 'videoConferenceLink':
39 | // Required
40 | if (!vals[key]) {
41 | newErrors = {
42 | ...newErrors,
43 | videoConferenceLink: 'Event link is required',
44 | };
45 | }
46 | if (!validateLink(vals[key])) {
47 | newErrors = {
48 | ...newErrors,
49 | videoConferenceLink: 'Invalid link',
50 | };
51 | }
52 | break;
53 |
54 | default:
55 | break;
56 | }
57 | });
58 | return Object.keys(newErrors).length ? newErrors : null;
59 | };
60 |
61 | export default validateEventForm;
62 |
63 | function validateLink(url) {
64 | const ZoomMeetRegex =
65 | /^(?:https:\/\/)?(?:www\.)?(?:[a-z0-9-]+\.)?zoom\.us\/j\/[0-9]+(\?pwd=[a-zA-Z0-9]+)?$/;
66 | const GoogleMeetRegex =
67 | /^(?:https:\/\/)?(?:[a-z0-9-]+\.)?meet\.google\.com\/[a-zA-Z0-9-]+$/;
68 | return ZoomMeetRegex.test(url) || GoogleMeetRegex.test(url);
69 | }
70 |
--------------------------------------------------------------------------------
/client/src/components/parts/boxes/TitledBox.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box, Typography, Divider } from '@mui/material';
3 |
4 | export default function TitledBox({ title, children, badge, childrenBoxSx }) {
5 | return (
6 |
34 | {accessLevel === 'admin' || accessLevel === 'superadmin' && (
35 |
36 | {' '}
37 |
40 |
41 | )}
42 |
43 | - {managedProjects}
8 |
13 | );
14 | };
15 |
16 | export default DashboardReport;
17 |
--------------------------------------------------------------------------------
/client/src/components/presentational/profile/ProfileOption.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const ProfileOption = ({ index, option, removeOption })=> {
4 | return (
5 |
9 |
11 |
12 | Total Signins:{props.total.All}
10 |6 | {option} 7 | 8 |
9 | ) 10 | }; 11 | 12 | export default ProfileOption; -------------------------------------------------------------------------------- /client/src/components/presentational/profile/UserEvents.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const UserEvents = ({ context }) => { 4 | const { events } = context; 5 | console.log(events); 6 | 7 | return ( 8 |
9 |
10 |
11 |
26 |
27 | );
28 | }
29 |
30 | export default UserEvents;
--------------------------------------------------------------------------------
/client/src/components/presentational/profile/UserTeams.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const UserTeams = ({ context }) => {
4 | const { teams } = context;
5 |
6 | return (
7 | | Event | 13 |Date/Time | 14 |Link | 15 |
|---|---|---|
| {event.name} | 20 |{event.time} | 21 |{event.url} | 22 |
8 |
9 |
10 |
22 |
23 | );
24 | }
25 |
26 | export default UserTeams;
--------------------------------------------------------------------------------
/client/src/components/presentational/projectDashboardContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import AttendeeTable from "../dashboard/AttendeeTable";
4 | import RosterTable from "../dashboard/RosterTable";
5 |
6 | const projectDashboardContainer = (props) => {
7 | return (
8 | | Team | 12 |Status | 13 |
|---|---|
| {team.name} | 17 |{team.status} | 18 |
9 | {props.attendeeOrRoster ? (
10 |
25 | );
26 | };
27 | export default projectDashboardContainer;
28 |
--------------------------------------------------------------------------------
/client/src/components/presentational/upcomingEvent.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { ReactComponent as ClockIcon } from "../../svg/Icon_Clock.svg";
3 | import { ReactComponent as LocationIcon } from "../../svg/Icon_Location.svg";
4 | import { Link } from "react-router-dom";
5 | import { Box, Typography } from "@mui/material";
6 |
7 | import moment from "moment";
8 |
9 | const upcomingEvent = (props) => {
10 | return props.nextEvent[0] ? (
11 |
17 |
24 | )
25 | };
26 |
27 | export default EmailSent;
--------------------------------------------------------------------------------
/client/src/pages/Events.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import moment from 'moment';
4 | import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
5 | import {
6 | Box,
7 | List,
8 | TextField,
9 | ListItem,
10 | ListItemText,
11 | Typography,
12 | } from '@mui/material';
13 |
14 | import '../sass/Events.scss';
15 |
16 | const Events = (props) => {
17 | const [events, setEvents] = useState(null);
18 | const [eventSearchParam, setEventSearchParam] = useState('');
19 |
20 | useEffect(() => {
21 | async function fetchData() {
22 | try {
23 | const res = await fetch('/api/events', {
24 | headers: {
25 | 'x-customrequired-header': headerToSend,
26 | },
27 | });
28 | const resJson = await res.json();
29 | setEvents(resJson);
30 | } catch (error) {
31 | alert(error);
32 | setEvents([]);
33 | }
34 | }
35 | fetchData();
36 | }, []);
37 |
38 | const filteredEvents = events?.filter(
39 | (event) =>
40 | typeof event.name === 'string' &&
41 | event.name.toLowerCase().match(eventSearchParam.toLowerCase())
42 | );
43 |
44 | return (
45 |
18 |
23 |
19 |
22 | Success!
20 |Please check your email for a link to login and see your dashboard.
21 |-
60 | {filteredEvents.map((event, index) => (
61 |
6 |
8 | );
9 | };
10 |
11 | export default HealthCheck;
12 |
--------------------------------------------------------------------------------
/client/src/pages/NewUser.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | import ReadyEvents from '../components/ReadyEvents';
4 |
5 | const NewUser = (props) => {
6 | const [newUser] = useState(true);
7 |
8 | useEffect(() => {
9 |
10 | }, []);
11 |
12 | return (
13 | "I'm Alive!"
7 |
14 |
22 | )
23 | };
24 |
25 | export default NewUser;
--------------------------------------------------------------------------------
/client/src/pages/ReturningUser.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import ReadyEvents from '../components/ReadyEvents';
3 | import { Box, Typography } from '@mui/material';
4 |
5 | const ReturningUser = (props) => {
6 | const [returningUser] = useState(true);
7 |
8 | return (
9 |
15 |
21 |
16 |
19 |
20 | Welcome!
17 |Thanks for coming.
18 |
9 |
29 | );
30 | };
31 |
32 | export default Success;
33 |
--------------------------------------------------------------------------------
/client/src/pages/UserAdmin.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 | import '../sass/UserAdmin.scss';
3 | import EditUsers from '../components/user-admin/EditUsers';
4 | import UserApiService from '../api/UserApiService';
5 | import ProjectApiService from '../api/ProjectApiService';
6 | import UserManagement from '../components/user-admin/UserManagement';
7 |
8 | const UserAdmin = () => {
9 | // Initialize state hooks
10 | const [users, setUsers] = useState([]); // All users pulled from database
11 | const [projects, setProjects] = useState([]); // All projects pulled from db
12 | const [userToEdit, setUserToEdit] = useState({}); // The selected user that is being edited
13 |
14 | const [userApiService] = useState(new UserApiService());
15 | const [projectApiService] = useState(new ProjectApiService());
16 |
17 | const fetchUsers = useCallback(async () => {
18 | const userRes = await userApiService.fetchUsers();
19 | setUsers(userRes);
20 | }, [userApiService]);
21 |
22 | const updateUserDb = useCallback(
23 | async (user, managedProjects) => {
24 | await userApiService.updateUserDbProjects(user, managedProjects);
25 | fetchUsers();
26 | },
27 | [userApiService, fetchUsers]
28 | );
29 |
30 | const updateUserActiveStatus = useCallback(
31 | async (user, isActive) => {
32 | await userApiService.updateUserDbIsActive(user, isActive);
33 | fetchUsers();
34 | },
35 | [userApiService, fetchUsers]
36 | );
37 |
38 | // Update user's access level (admin/user)
39 | const updateUserAccessLevel = useCallback(
40 | async (user, newAccessLevel) => {
41 | await userApiService.updateUserAccessLevel(user, newAccessLevel);
42 | fetchUsers();
43 | },
44 | [userApiService, fetchUsers]
45 | );
46 |
47 | const fetchProjects = useCallback(async () => {
48 | const projectRes = await projectApiService.fetchProjects();
49 | setProjects(projectRes);
50 | }, [projectApiService]);
51 |
52 | useEffect(() => {
53 | fetchUsers();
54 | fetchProjects();
55 | }, [fetchUsers, fetchProjects]);
56 |
57 | const backToSearch = () => {
58 | setUserToEdit({});
59 | };
60 |
61 | if (Object.keys(userToEdit).length === 0) {
62 | return
10 |
28 |
11 |
14 | Success!
12 |Soon, you'll be able to:
13 |
15 |
19 |
20 | 👉 View your detailed, personalized journey...
16 |👉 Get matched with projects that need you...
17 |👉 Manage your own project!
18 |
21 |
27 | 22 | Thanks for being a part of the alpha test! Your feedback is valued 23 | and appreciated. 24 |
25 |Have fun tonight!
26 |
5 |
11 | );
12 |
13 | export default UserDashboard;
14 |
--------------------------------------------------------------------------------
/client/src/pages/UserProfile.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import '../sass/UserProfile.scss';
3 | import UserTable from '../components/presentational/profile/UserTable';
4 | import UserEvents from '../components/presentational/profile/UserEvents';
5 | import UserTeams from '../components/presentational/profile/UserTeams';
6 | import { UserProvider, UserContext } from '../context/userContext';
7 | import { Box, Typography, Grid } from '@mui/material';
8 |
9 | const UserProfile = (props) => (
10 |
6 |
10 | Your Volunteer Journey
7 |Profile
8 | Events
9 |