uclaacm · caz07 · Jan 23, 2024 · Feb 14, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/BannerMessage/index.js b/src/components/BannerMessage/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export default class BannerMessage extends React.Component {
   constructor(props) {
@@ -19,12 +19,12 @@ export default class BannerMessage extends React.Component {
   }
 
   showBanner(message, success, duration = 3000) {
-    this.setState(prev => {
+    this.setState((prev) => {
       if (prev.timeout) clearTimeout(prev.timeout);
       return {
         showing: true,
         success,
-        message: message ? message.toString() : success ? "Success" : "Error",
+        message: message ? message.toString() : success ? 'Success' : 'Error',
         timeout: setTimeout(this.hideBanner, duration),
       };
     });
@@ -43,8 +43,8 @@ export default class BannerMessage extends React.Component {
   render() {
     return (
       <div
-        className={`banner-message ${this.state.success ? " success" : " error"}${
-          this.state.showing ? " showing" : ""
+        className={`banner-message ${this.state.success ? ' success' : ' error'}${
+          this.state.showing ? ' showing' : ''
         }`}
       >
         <p>{this.state.message}</p>

diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx
@@ -1,6 +1,6 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Loader from "components/Loader";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Loader from 'components/Loader';
 
 class Button extends React.Component {
   constructor(props) {
@@ -16,7 +16,9 @@ class Button extends React.Component {
   }
 
   render() {
-    const { className, color, icon, customIcon, loading, style, text, type } = this.props;
+    const {
+      className, color, icon, customIcon, loading, style, text, type,
+    } = this.props;
     const buttonClass = `button-component ${className}`;
     const buttonIcon = icon ? <i className={`fa ${icon} button-icon`} aria-hidden="true" /> : null;
     const buttonCustomIcon = customIcon ? <img src={customIcon} className="button-icon button-custom-icon" /> : null;
@@ -41,7 +43,7 @@ Button.propTypes = {
   onClick: PropTypes.func,
   style: PropTypes.string,
   text: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(["button", "submit"]),
+  type: PropTypes.oneOf(['button', 'submit']),
 };
 
 Button.defaultProps = {
@@ -51,7 +53,7 @@ Button.defaultProps = {
   loading: false,
   onClick: () => {},
   style: null,
-  type: "button",
+  type: 'button',
 };
 
 export default Button;
diff --git a/src/components/ControlPanel/index.jsx b/src/components/ControlPanel/index.jsx
@@ -1,9 +1,9 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import Topbar from "containers/topbar";
-import Sidebar from "containers/sidebar";
-import ControlPanel from "./controlPanel";
+import Topbar from 'containers/topbar';
+import Sidebar from 'containers/sidebar';
+import ControlPanel from './controlPanel';
 
 export default class ControlPanelComponent extends React.Component {
   render() {

diff --git a/src/components/Events/AdminEvents/adminAddEvent.js b/src/components/Events/AdminEvents/adminAddEvent.js
@@ -1,11 +1,11 @@
-import React from "react";
-import moment from "moment";
+import React from 'react';
+import moment from 'moment';
 
-import InputElement from "react-input-mask";
-import DatePicker from "react-datepicker";
-import Button from "components/Button/index";
+import InputElement from 'react-input-mask';
+import DatePicker from 'react-datepicker';
+import Button from 'components/Button/index';
 
-import "react-datepicker/dist/react-datepicker.css";
+import 'react-datepicker/dist/react-datepicker.css';
 
 export default class AdminAddEvent extends React.Component {
   constructor(props) {
@@ -20,20 +20,20 @@ export default class AdminAddEvent extends React.Component {
   }
 
   resizeTextArea(e) {
-    e.target.style.height = "5px";
+    e.target.style.height = '5px';
     e.target.style.height = `${e.target.scrollHeight}px`;
   }
 
   handleChangeStartDate(date) {
-    this.setState(prev => {
+    this.setState((prev) => {
       const newState = Object.assign({}, prev);
       newState.event.startDate = date;
       return newState;
     });
   }
 
   handleChangeEndDate(date) {
-    this.setState(prev => {
+    this.setState((prev) => {
       const newState = Object.assign({}, prev);
       newState.event.endDate = date;
       return newState;
@@ -43,7 +43,7 @@ export default class AdminAddEvent extends React.Component {
   handleChange(e) {
     const name = e.target.name;
     const value = e.target.value;
-    this.setState(prev => {
+    this.setState((prev) => {
       const newState = Object.assign({}, prev);
       newState.event[name] = value;
       return newState;
@@ -56,10 +56,10 @@ export default class AdminAddEvent extends React.Component {
   }
 
   handleChangeTime(e) {
-    const name = e.target.name.split("Time")[0];
+    const name = e.target.name.split('Time')[0];
     const hh = (parseInt(e.target.value[0]) || 0) * 10 + (parseInt(e.target.value[1]) || 0);
     const mm = (parseInt(e.target.value[3]) || 0) * 10 + (parseInt(e.target.value[4]) || 0);
-    this.setState(prev => {
+    this.setState((prev) => {
       const newState = Object.assign({}, prev);
       newState[`${name}TimeError`] = isNaN(hh) || hh > 23 || isNaN(mm) || mm > 60;
       if (!newState[`${name}TimeError`]) {
@@ -73,21 +73,22 @@ export default class AdminAddEvent extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState(prev => {
+    this.setState((prev) => {
       const newState = Object.assign({}, prev);
       newState.event = nextProps.event;
-      if (newState.event) newState.event.attendanceCode = nextProps.event.attendanceCode || "";
+      if (newState.event) newState.event.attendanceCode = nextProps.event.attendanceCode || '';
       return newState;
     });
   }
 
   render() {
+    const defaultEventImg = 'https://www.uclaacm.com/images/events/default-event.png';
     return (
-      <div className={`add-event-overlay${this.props.showing ? " showing" : ""}`} onClick={this.props.onClickCancel}>
+      <div className={`add-event-overlay${this.props.showing ? ' showing' : ''}`} onClick={this.props.onClickCancel}>
         <div className="event-sidebar" onClick={e => e.stopPropagation()}>
           <div className="cover-img">
             <img
-              src={this.state.event.cover}
+              src={this.state.event.cover || defaultEventImg}
               id="event-cover-img"
             />
           </div>
@@ -147,11 +148,11 @@ export default class AdminAddEvent extends React.Component {
               <div className="input-field three-fourth-width">
                 <p>Start Time</p>
                 <InputElement
-                  className={this.state.startTimeError ? "error" : ""}
+                  className={this.state.startTimeError ? 'error' : ''}
                   onChange={this.handleChangeTime}
                   mask="99:99"
                   name="startTime"
-                  value={this.state.event.startDate ? this.state.event.startDate.format("HH:mm") : ""}
+                  value={this.state.event.startDate ? this.state.event.startDate.format('HH:mm') : ''}
                 />
               </div>
             </div>
@@ -167,11 +168,11 @@ export default class AdminAddEvent extends React.Component {
               <div className="input-field three-fourth-width">
                 <p>End Time</p>
                 <InputElement
-                  className={this.state.endTimeError ? "error" : ""}
+                  className={this.state.endTimeError ? 'error' : ''}
                   onChange={this.handleChangeTime}
                   mask="99:99"
                   name="endTime"
-                  value={this.state.event.endDate ? this.state.event.endDate.format("HH:mm") : ""}
+                  value={this.state.event.endDate ? this.state.event.endDate.format('HH:mm') : ''}
                 />
               </div>
             </div>
@@ -193,7 +194,7 @@ export default class AdminAddEvent extends React.Component {
               </div>
             </div>
             <div className="button-area">
-              <Button onClick={this.handleSubmit} style="green" text={this.props.isEdit ? "Update" : "Add"} icon="" />
+              <Button onClick={this.handleSubmit} style="green" text={this.props.isEdit ? 'Update' : 'Add'} icon="" />
               <Button onClick={this.props.onClickCancel} style="red" text="Cancel" icon="" />
             </div>
           </div>

diff --git a/src/components/Events/AdminEvents/event.js b/src/components/Events/AdminEvents/event.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export default class AdminEventCard extends React.Component {
   constructor(props) {

diff --git a/src/components/Events/AdminEvents/eventDay.js b/src/components/Events/AdminEvents/eventDay.js
@@ -1,11 +1,11 @@
-import React from "react";
-import Event from "./event";
+import React from 'react';
+import Event from './event';
 
 export default class EventDay extends React.Component {
   render() {
     return (
-      <div className={`event-day${this.props.admin ? " admin-dashboard" : ""}`}>
-        <h2 className="date-day">{this.props.day.date.format("dddd, Do")}</h2>
+      <div className={`event-day${this.props.admin ? ' admin-dashboard' : ''}`}>
+        <h2 className="date-day">{this.props.day.date.format('dddd, Do')}</h2>
         {this.props.day.events.map((event, i) => (
           <Event event={event} key={event.uuid} handleEditClick={this.props.handleEditClick} />
         ))}

diff --git a/src/components/Events/AdminEvents/eventMonth.jsx b/src/components/Events/AdminEvents/eventMonth.jsx
@@ -1,14 +1,17 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import EventDay from "./eventDay";
+import EventDay from './eventDay';
 
 export default class EventMonth extends React.Component {
   render() {
     const { month, handleEditClick } = this.props;
     return (
       <div className="event-month">
-        <h1 className="Display-2Primary date-month">Events in {month.date.format("MMMM")}</h1>
+        <h1 className="Display-2Primary date-month">
+Events in
+          {month.date.format('MMMM')}
+        </h1>
         {month.days.map((day, i) => (
           <EventDay key={day.date.toString()} day={day} handleEditClick={handleEditClick} />
         ))}

diff --git a/src/components/Events/AdminEvents/index.js b/src/components/Events/AdminEvents/index.js
@@ -1,26 +1,26 @@
-import React from "react";
+import React from 'react';
 
-import Button from "components/Button";
-import BannerMessage from "components/BannerMessage";
-import EarlierEventsIcon from "components/Events/earlierEventsIcon";
-import EventMonth from "./eventMonth";
-import AdminAddEvent from "./adminAddEvent";
+import Button from 'components/Button';
+import BannerMessage from 'components/BannerMessage';
+import EarlierEventsIcon from 'components/Events/earlierEventsIcon';
+import EventMonth from './eventMonth';
+import AdminAddEvent from './adminAddEvent';
 
 export default class AdminEvents extends React.Component {
   constructor(props) {
     super(props);
     this.emptyEvent = {
-      attendancePoints: "",
-      attendanceCode: "",
-      committee: "",
-      cover: "",
-      description: "",
-      endDate: "",
-      eventLink: "",
-      location: "",
-      startDate: "",
-      title: "",
-      startTime: "",
+      attendancePoints: '',
+      attendanceCode: '',
+      committee: '',
+      cover: '',
+      description: '',
+      endDate: '',
+      eventLink: '',
+      location: '',
+      startDate: '',
+      title: '',
+      startTime: '',
     };
 
     this.state = {
@@ -47,7 +47,7 @@ export default class AdminEvents extends React.Component {
   }
 
   hideAddEvent(e) {
-    this.setState(prev => {
+    this.setState((prev) => {
       const newState = Object.assign({}, prev);
       newState.showAddEvent = false;
       return newState;
@@ -106,8 +106,7 @@ export default class AdminEvents extends React.Component {
     while (i < events.length) {
       const month = { date: events[i].startDate, days: [] };
       while (i < events.length && events[i].startDate.month() === month.date.month()) {
-        if (month.days.length === 0 || events[i].startDate.date() !== month.days[month.days.length - 1].date.date())
-          month.days.push({ date: events[i].startDate, events: [events[i]] });
+        if (month.days.length === 0 || events[i].startDate.date() !== month.days[month.days.length - 1].date.date()) month.days.push({ date: events[i].startDate, events: [events[i]] });
         else month.days[month.days.length - 1].events.push(events[i]);
         i++;
       }
@@ -121,10 +120,10 @@ export default class AdminEvents extends React.Component {
     const futureMonths = months.filter(month => month.date >= thisMonth);
 
     const bannerMessage = this.props.updateSuccess
-      ? "Event updated successfully"
+      ? 'Event updated successfully'
       : this.props.createSuccess
-      ? "Event created successfully"
-      : this.props.error;
+        ? 'Event created successfully'
+        : this.props.error;
 
     return (
       <div className="events-dashboard admin-dashboard">
@@ -158,8 +157,8 @@ export default class AdminEvents extends React.Component {
             }}
           />
         )}
-        {this.state.showEarlierEvents &&
-          pastMonths.map((month, i) => (
+        {this.state.showEarlierEvents
+          && pastMonths.map((month, i) => (
             <EventMonth month={month} key={month.date.toString()} handleEditClick={this.handleEditClick} />
           ))}
 

diff --git a/src/components/Events/UserEvents/event.js b/src/components/Events/UserEvents/event.js
@@ -1,6 +1,6 @@
-import React from "react";
-import { sanitize } from "dompurify";
-import Button from "components/Button/index";
+import React from 'react';
+import { sanitize } from 'dompurify';
+import Button from 'components/Button/index';
 
 export default class EventCard extends React.Component {
   constructor(props) {
@@ -18,7 +18,7 @@ export default class EventCard extends React.Component {
 
   render() {
     const event = this.props.event;
-    const className = `event-card user-card${this.state.selected ? " selected" : ""}`;
+    const className = `event-card user-card${this.state.selected ? ' selected' : ''}`;
     return (
       <div className={className} onClick={this.handleClick}>
         <div className="cover" style={{ backgroundImage: `url(${event.cover})` }}>
@@ -46,7 +46,10 @@ export default class EventCard extends React.Component {
           </div>
           <div className="subcontent">
             <span className="time">
-              {event.startDate.format("h:mm a")} &mdash; {event.endDate.format("h:mm a")}
+              {event.startDate.format('h:mm a')}
+              {' '}
+&mdash;
+              {event.endDate.format('h:mm a')}
             </span>
             <p className="location">{event.location}</p>
           </div>

diff --git a/src/components/Events/UserEvents/eventDay.js b/src/components/Events/UserEvents/eventDay.js
@@ -1,11 +1,11 @@
-import React from "react";
-import Event from "./event";
+import React from 'react';
+import Event from './event';
 
 export default class EventDay extends React.Component {
   render() {
     return (
       <div className="event-day">
-        <h1 className="Display-2Primary date-day">{this.props.day.date.format("dddd, MMMM Do")}</h1>
+        <h1 className="Display-2Primary date-day">{this.props.day.date.format('dddd, MMMM Do')}</h1>
         {this.props.day.events.map((event, i) => (
           <Event event={event} key={event.uuid} />
         ))}