Prod Merge : 11-28-23 (#233)

* Upgrade node versions in github workflows to match project node version (#213) * Upgrade node versions in github workflows to match project node version * Restrict node version in package.json * Tweak node engine version to debug vercel deployment * Maybe matching with CCA node engine version will work? * Limiting versions to only 14? * Upgrade Node to Version 18 + Next to Version 12, React to Version 17.0.2 (#215) * Upgrade node versions in github workflows to match project node version * Restrict node version in package.json * Tweak node engine version to debug vercel deployment * Maybe matching with CCA node engine version will work? * Limiting versions to only 14? * Messed around with installations and upgrades until it works) * UPdate GitHub workflows to match version * Upgrade Node version to 18.17.1 * Remove minor + patch version from deployment * Remove minot + patch version from package.json * Update tests * Update Description for Fall 2023 Team (#214) * Add linting rules to error on non-variable color codes (#212) * Add linting rule to error on raw hex codes * Add linting exceptions for .tsx files with SVG's * Add and configure style-lint for erroring on non-variable hex codes * Refactor forgotten hex codes into color variables * Add new linting to github workflow * Remove unused stylelint package, upgrade node version for workflows to work with stylelint * Better specify github workflow node versions * Fix node version typo lol * Update postcss version in package.json Co-authored-by: Zachar Hankewycz <[email protected]> * Update lock file to match package.json * Edit lint error message to be more detailed * Update lockfile * Type fix (caught because of linter, now erorrs) * Update snapshot --------- Co-authored-by: Zachar Hankewycz <[email protected]> * Filtered out NULL class results. (#216) * Fix Roberts Name (#219) * TSX Linting Fix - Remove tsconfig linting file from eslint config (#218) * Add linting rule to error on raw hex codes * Add linting exceptions for .tsx files with SVG's * Add and configure style-lint for erroring on non-variable hex codes * Refactor forgotten hex codes into color variables * Add new linting to github workflow * Remove unused stylelint package, upgrade node version for workflows to work with stylelint * Better specify github workflow node versions * Fix node version typo lol * Update postcss version in package.json Co-authored-by: Zachar Hankewycz <[email protected]> * Update lock file to match package.json * Edit lint error message to be more detailed * Update lockfile * Type fix (caught because of linter, now erorrs) * Update snapshot * Fix linting for nested tsx files --------- Co-authored-by: Zachar Hankewycz <[email protected]> * Set default dev environment variable (#217) * Add dev variable in .env.development --------- Co-authored-by: Zachar Hankewycz <[email protected]> * Add null and undefined checking to result in filter (#222) * Merge to prod 10/24/23 (#223) (#224) * Null Filter Hotfix * Update .gitignore (#220) * Fix Missing Prereqs For (#230) * Disallow Empty Feedback (#227) * change feedback component * add error banner * update snapshots * hide error when modal toggled * add check for only whitespace * Ap/refactor zindexes (#228) * Revert "Update .gitignore (#220)" This reverts commit f935a37. * refactored zindexes on all frontend style files * removed reverting of .gitignore * Update styling docs to talk about Z-indexes (#231) * Update styling docs to talk about Z-indexes * Heading typo * Pp/robert findings visual 10/4/23 bugs (#232) * Side edge of section table doesn’t touch edge of parent (when logged in with #) * fix: Frame isn’t centered on larger screen sizes (large right margin) * fix: Navbar has different padding R to L * fix: Corner radii is different between elements * fix: Chevrons are uncentered with uncollapsed Still need to discuss updating the chevron flow but this works for now * searchbar button overlay the container's border * standardized toggle styling - still want to address the _NotifCheckBox styling sheet as it seems like we are moving away from it. * Bug: Align filter bar with class cards fix * bug: notifications sign up modal has no background transparency * updated snapshot test * fix linting issue * update test --------- Co-authored-by: Zachar Hankewycz <[email protected]> Co-authored-by: ananyaspatil <[email protected]> Co-authored-by: Jason Cheung <[email protected]> Co-authored-by: Luke Taylor <[email protected]> Co-authored-by: Sebastian Wittrock <[email protected]> Co-authored-by: Pranav Phadke <[email protected]>
sandboxnu · Nov 28, 2023 · 5459c2b · 5459c2b · vercel · Nov 28, 2023
1 parent b8987f4
commit 5459c2b
Show file tree

Hide file tree

Showing 25 changed files with 350 additions and 300 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,6 +30,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 # vercel
 .vercel

diff --git a/components/ClassPage/ClassPageReqsBody.tsx b/components/ClassPage/ClassPageReqsBody.tsx
@@ -99,18 +99,16 @@ export default function ClassPageReqsBody({
           }
           className="prereqsFor"
           body={
-            latestOccurrence.prereqsFor.values.length === 0 ? (
+            latestOccurrence.prereqsFor.length === 0 ? (
               <span className="noReqs">None</span>
             ) : (
               <div
                 className={`reqItemsContainer ${
-                  latestOccurrence.prereqsFor.values.length > 3
-                    ? 'showScroll'
-                    : ''
+                  latestOccurrence.prereqsFor.length > 3 ? 'showScroll' : ''
                 }`}
               >
                 <div className="reqItemsScroll">
-                  {latestOccurrence.prereqsFor.values.map((value) => {
+                  {latestOccurrence.prereqsFor.map((value) => {
                     return (
                       <div
                         className="reqItem"

diff --git a/components/FeedbackModal.tsx b/components/FeedbackModal.tsx
@@ -3,7 +3,7 @@
  * See the license file in the root folder for details.
  */
 
-import React from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
 
 import {
@@ -36,37 +36,38 @@ type Props = {
   feedbackModalOpen: boolean;
 };
 
-class FeedbackModal extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      messageValue: '',
-      contactValue: '',
-      sending: false,
-      messageVisible: false,
-    };
-
-    this.onTextAreaChange = this.onTextAreaChange.bind(this);
-    this.onContactChange = this.onContactChange.bind(this);
-    this.hideMessage = this.hideMessage.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-  }
-
-  async onSubmit() {
-    this.setState({
-      sending: true,
-    });
+export function FeedbackModal(props: Props): ReactElement {
+  const [messageValue, setMessageValue] = useState('');
+  const [contactValue, setContactValue] = useState('');
+  const [sending, setSending] = useState(false);
+  const [messageVisible, setMessageVisible] = useState(false);
+  const [showError, setShowError] = useState(false);
+
+  // when form is toggled, error message should not be shown.
+  useEffect(() => {
+    setShowError(false);
+  }, [props.feedbackModalOpen]);
+
+  const onSubmit = async () => {
+    setSending(true);
+
+    // does the message not contain any alphanumeric characters (A-Z,0-9,_)
+    if (!/\w/.test(messageValue)) {
+      setSending(false);
+      setShowError(true);
+      return;
+    }
+
     // Send an event to amplitude too, just for redundancy.
     macros.logAmplitudeEvent('Feedback', {
-      text: this.state.messageValue,
-      contact: this.state.contactValue,
+      text: messageValue,
+      contact: contactValue,
     });
 
     await axios
       .post(`${process.env.NEXT_PUBLIC_NOTIFS_ENDPOINT}/feedback`, {
-        contact: this.state.contactValue,
-        message: this.state.messageValue,
+        contact: contactValue,
+        message: messageValue,
       })
       .catch((error) => {
         macros.error('Unable to submit feedback', error);
@@ -75,120 +76,115 @@ class FeedbackModal extends React.Component<Props, State> {
         );
       });
 
-    this.setState({
-      sending: false,
-      messageVisible: true,
-      messageValue: '',
-      contactValue: '',
-    });
+    setSending(false);
+    setMessageVisible(true);
+    setMessageValue('');
+    setContactValue('');
+    setShowError(false);
 
     // Hide the message after 2 seconds
     setTimeout(() => {
-      this.setState({
-        messageVisible: false,
-      });
+      setMessageVisible(false);
     }, 2000);
 
-    this.props.toggleForm();
-  }
-
-  onTextAreaChange(event) {
-    this.setState({
-      messageValue: event.target.value,
-    });
-  }
-
-  onContactChange(event) {
-    this.setState({
-      contactValue: event.target.value,
-    });
-  }
-
-  hideMessage() {
-    this.setState({
-      messageVisible: false,
-    });
-  }
-
-  render() {
-    const transitionStyles = {
-      entering: { opacity: 1 },
-      entered: { opacity: 1 },
-      exited: { display: 'none', opacity: 0 },
-    };
-
-    const firstText =
-      "Find a bug in Search NEU? Find a query that doesn't come up with the results you were looking for? Have an idea for an improvement or just want to say hi? Drop a line below! Feel free to write whatever you want to and someone on the team will read it.";
-    const secondBody = [
-      <p key="0">
-        By default this form is anonymous. Leave your name and/or email if you
-        want us to be able to contact you.
-      </p>,
-      <Input
-        name="contact"
-        form="feedbackForm"
-        className="formModalInput"
-        onChange={this.onContactChange}
-        key="1"
-      />,
-    ];
-
-    const header = 'Search NEU Contact Form';
-
-    return (
-      <div className="feedback-container">
-        <Transition in={this.state.messageVisible} timeout={500}>
-          {(state) => {
-            return (
-              <Message
-                success
-                className="alertMessage"
-                header="Your submission was successful."
-                style={{ ...transitionStyles[state] }}
-                onDismiss={this.hideMessage}
-              />
-            );
-          }}
-        </Transition>
-        <Modal
-          open={this.props.feedbackModalOpen}
-          onClose={this.props.toggleForm}
-          size="small"
-          className="feedback-modal-container"
-        >
-          <Header icon="mail" content={header} />
-          <Modal.Content className="formModalContent">
-            <Form>
-              <div className="feedbackParagraph">{firstText}</div>
-              <TextArea
-                name="response"
-                form="feedbackForm"
-                className="feedbackTextbox"
-                onChange={this.onTextAreaChange}
-              />
-              {secondBody}
-            </Form>
-          </Modal.Content>
-          <Modal.Actions>
-            <Button basic color="red" onClick={this.props.toggleForm}>
-              <Icon name="remove" />
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              color="green"
+    props.toggleForm();
+  };
+
+  const onTextAreaChange = (event) => {
+    setMessageValue(event.target.value);
+  };
+
+  const onContactChange = (event) => {
+    setContactValue(event.target.value);
+  };
+
+  const hideMessage = () => {
+    setMessageVisible(false);
+  };
+
+  const transitionStyles = {
+    entering: { opacity: 1 },
+    entered: { opacity: 1 },
+    exited: { display: 'none', opacity: 0 },
+  };
+
+  const firstText =
+    "Find a bug in Search NEU? Find a query that doesn't come up with the results you were looking for? Have an idea for an improvement or just want to say hi? Drop a line below! Feel free to write whatever you want to and someone on the team will read it.";
+
+  const secondBody = [
+    <p key="0">
+      By default this form is anonymous. Leave your name and/or email if you
+      want us to be able to contact you.
+    </p>,
+    <Input
+      name="contact"
+      form="feedbackForm"
+      className="formModalInput"
+      onChange={onContactChange}
+      key="1"
+    />,
+  ];
+
+  const header = 'Search NEU Contact Form';
+
+  return (
+    <div className="feedback-container">
+      <Transition in={messageVisible} timeout={500}>
+        {(state) => {
+          return (
+            <Message
+              success
+              className="alertMessage"
+              header="Your submission was successful."
+              style={{ ...transitionStyles[state] }}
+              onDismiss={hideMessage}
+            />
+          );
+        }}
+      </Transition>
+      <Modal
+        open={props.feedbackModalOpen}
+        onClose={props.toggleForm}
+        size="small"
+        className="feedback-modal-container"
+      >
+        <Header icon="mail" content={header} />
+        {showError ? (
+          <Message color="red" content="Can't submit an empty message!" />
+        ) : (
+          <></>
+        )}
+        <Modal.Content className="formModalContent">
+          <Form>
+            <div className="feedbackParagraph">{firstText}</div>
+            <TextArea
+              name="response"
               form="feedbackForm"
-              onClick={this.onSubmit}
-              disabled={this.state.sending}
-            >
-              <Icon name="checkmark" />
-              {this.state.sending ? 'Sending...' : 'Submit'}
-            </Button>
-          </Modal.Actions>
-        </Modal>
-      </div>
-    );
-  }
+              className="feedbackTextbox"
+              onChange={onTextAreaChange}
+            />
+            {secondBody}
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button basic color="red" onClick={props.toggleForm}>
+            <Icon name="remove" />
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            color="green"
+            form="feedbackForm"
+            onClick={onSubmit}
+            disabled={sending}
+          >
+            <Icon name="checkmark" />
+            {sending ? 'Sending...' : 'Submit'}
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    </div>
+  );
 }
 
 export default FeedbackModal;
diff --git a/components/panels/CourseCheckBox.tsx b/components/panels/CourseCheckBox.tsx
@@ -5,10 +5,8 @@
 
 import { uniqueId } from 'lodash';
 import React, { ReactElement, useState } from 'react';
-import IconCheckMark from '../icons/IconCheckmark';
 import Tooltip, { TooltipDirection } from '../Tooltip';
 import Keys from '../Keys';
-import macros from '../macros';
 import { Course } from '../types';
 import axios from 'axios';
 import { UserInfo } from '../../components/types';
@@ -59,12 +57,16 @@ export default function CourseCheckBox({
         <input
           checked={checked}
           onChange={onCheckboxClick}
-          className="notif-switch-checkbox"
+          className="react-switch-checkbox"
           id={notifSwitchId}
           type="checkbox"
         />
-        <label className="notif-switch-label" htmlFor={notifSwitchId}>
-          <span className="notif-switch-button" />
+        <label
+          className="react-switch-label"
+          style={{ marginTop: '0px' }}
+          htmlFor={notifSwitchId}
+        >
+          <span className="react-switch-button" />
         </label>
       </div>
       <Tooltip

diff --git a/components/panels/SectionCheckBox.tsx b/components/panels/SectionCheckBox.tsx
@@ -75,12 +75,16 @@ export default function SectionCheckBox({
         <input
           checked={checked}
           onChange={onCheckboxClick}
-          className="notif-switch-checkbox"
+          className="react-switch-checkbox"
           id={notifSwitchId}
           type="checkbox"
         />
-        <label className="notif-switch-label" htmlFor={notifSwitchId}>
-          <span className="notif-switch-button" />
+        <label
+          className="react-switch-label"
+          style={{ marginTop: '0px' }}
+          htmlFor={notifSwitchId}
+        >
+          <span className="react-switch-button" />
         </label>
       </div>
       <Tooltip