Merge branch 'staging' of github.com:HackSC/odyssey into staging

.circleci/config.yml

@@ -37,9 +37,9 @@ jobs:
           success_message: ":tada: A $CIRCLE_JOB job has succeeded for $CIRCLE_PROJECT_REPONAME on the $CIRCLE_BRANCH branch! Triggered by: $CIRCLE_USERNAME :rocket:"
 workflows:
   version: 2.1
-  e2e_tests:
-    jobs:
-      - E2ETest
+#   e2e_tests:
+#     jobs:
+#       - E2ETest
   build:
     jobs:
       - build

api/announcements.js

@@ -13,7 +13,7 @@ router.get("/:role", async (req, res) => {
     announcements = await models.Announcement.findAll({
       where: {
         target: role,
-      },
+      }
     });
   } else {
     announcements = await models.Announcement.findAll({});

api/slackAnnouncement.js

@@ -0,0 +1,83 @@
+const express = require("express");
+const router = express.Router();
+
+router.post("/", async (req, res) => {
+  const url_route = process.env.URL_BASE + "api/announcements";
+  const slackId = req.body.user_id.replace(" ", "");
+  const cmd = req.body.command;
+  let announcement = {};
+  let organizer_ids = [
+    "U01N1S6214J",
+    "U01NVG2GNJV",
+    "U01NDPEMFQD",
+    "U01NYKU45BN",
+    "U01MX41UM9Q",
+    "U01NPCJAF7X",
+    "U01NFSECVPV",
+    "U01P5G8GPC0",
+    "U01P6MBPRRN",
+    "U01N23B0DE3",
+    "U01NUA44R7T",
+    "U01NDP9TFFF",
+    "U01NLR1KNGY",
+    "U01LT1NJ3M2",
+    "U01NA34EVT8",
+    "U01NMRMB0Q4",
+    "U01P6N75QEL",
+    "U01NKTTC8J2",
+    "U01NRMFTESU",
+    "U01NH2NJ3BM",
+    "U01NH2MR3EF",
+    "U01NA368B8E",
+  ];
+  if (organizer_ids.indexOf(slackId) > -1) {
+    const target = cmd.replace("/", "").replace(" ", "");
+    let roles = [
+      "hacker",
+      "admin",
+      "sponsor",
+      "volunteer",
+      "superadmin",
+      "judge",
+    ];
+
+    let isValid = false;
+    for (let i = 0; i < roles.length; i++) {
+      if (roles[i] == target) {
+        isValid = true;
+        break;
+      }
+    }
+
+    if (!isValid) {
+      responseText =
+        "Your command was not valid. \
+            Please ensure you're using one of the following commands: \
+            /hacker, /admin, /sponsor, /volunteer, /superadmin, /judge";
+      return responseText;
+    } else {
+      announcement["target"] = target;
+      announcement["text"] = req.body.text;
+      announcement["from"] = req.body.user_name;
+      announcement["img"] = "";
+    }
+
+    try {
+      await fetch(url_route, {
+        method: "POST",
+        body: JSON.stringify(announcement),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    } catch (error) {
+      console.error(error);
+      return res.json({ text: "Failed to send Announcement." });
+    }
+    return res.json({ text: "Announcement sent successfully!" });
+  } else {
+    return res.json({ text: "Invalid Slack user." });
+  }
+});
+
+module.exports = router;

components/hackerDashboard/Dashboard.tsx

@@ -83,7 +83,7 @@ const Empty = styled.div`
 
 const Container = styled.div`
   width: 100vw;
-  height: 100vh;
+  height: auto;
   display: grid;
   grid-template-columns: 0.6fr 1.3fr 0.9fr 0.6fr;
   grid-template-rows: 0.4fr 1fr 1.4fr 0.6fr;

components/hackerDashboard/layout/Header.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import Image from "next/image";
 
 // import Logo from "@/assets/header_logo_21_transparent.png";
-import Logo from "@/assets/logo.png";
+import Logo from "@/assets/hacksc-white.png";
 
 type Props = {
   text?: string;
@@ -15,7 +15,7 @@ const DashHeader = ({ text }: Props) => {
         <Title>HackSC 2021</Title>
       ) : (
         <LogoWrapper>
-          <Image src={Logo} width="220%" height="100%" alt="" />
+          <Image src={Logo} width="240%" height="85%" alt="" />
         </LogoWrapper>
       )}
     </Header>

components/hackerDashboard/widgets/sidebar/events.tsx

@@ -3,26 +3,26 @@ import moment from "moment-timezone";
 import { useEffect } from "react";
 
 const HackathonEvents = ({ events }) => {
-  const currentDate = moment.tz(moment(), "UTC");
+  const currentDate = moment.utc().subtract(8, "hour");
 
   let nextEvent;
   for (let i = 0; i < events.length; i++) {
     nextEvent = events[i].id;
     if (
-      moment(events[i].endsAt) > currentDate ||
-      moment(events[i].startsAt) > currentDate
+      moment.utc(events[i].endsAt) > currentDate ||
+      moment.utc(events[i].startsAt) > currentDate
     ) {
       break;
     }
   }
 
-  // useEffect(() => {
-  //   if (nextEvent) {
-  //     document.getElementById("eventList").scrollTop = document.getElementById(
-  //       nextEvent
-  //     ).offsetTop;
-  //   }
-  // }, []);
+  useEffect(() => {
+    if (nextEvent) {
+      document.getElementById("eventList").scrollTop = document.getElementById(
+        nextEvent
+      ).offsetTop;
+    }
+  }, []);
 
   return (
     <div>
@@ -35,22 +35,42 @@ const HackathonEvents = ({ events }) => {
             style={
               moment(e.endsAt) > currentDate
                 ? { color: "#FFFFFF" }
-                : { color: "#FFFFFF" }
+                : { color: "#7E7E7E" }
             }
           >
             <h3
               style={
                 moment(e.endsAt) > currentDate
                   ? { color: "#FF8379" }
-                  : { color: "#FF8379" }
+                  : { color: "#7E7E7E" }
               }
             >
               {e.name}
             </h3>
             <p>{e.description}</p>
-            <p>{moment.utc(e.startsAt).format("MMM D, h:mm a")}</p>
-            <p>{moment.utc(e.endsAt).format("MMM D, h:mm a")}</p>
-            {e.zoomUrl ? <a href={e.zoomUrl}>Join Zoom Meeting</a> : null}
+            {moment(e.startsAt).isSame(e.endsAt, "day") ? (
+              <p>
+                {moment.utc(e.startsAt).format("MMM D, h:mm")} -{" "}
+                {moment.utc(e.endsAt).format("h:mm a")}
+              </p>
+            ) : (
+              <p>
+                {moment.utc(e.startsAt).format("MMM D, h:mm a")} -{" "}
+                {moment.utc(e.endsAt).format("MMM D, h:mm a")}
+              </p>
+            )}
+            {e.zoomUrl ? (
+              <a
+                href={e.zoomUrl}
+                style={
+                  moment(e.endsAt) > currentDate
+                    ? { color: "#FF8379" }
+                    : { color: "#7E7E7E" }
+                }
+              >
+                Join Zoom Meeting
+              </a>
+            ) : null}
           </Event>
         ))}
       </EventList>

components/hackerDashboard/widgets/updates.tsx

@@ -6,7 +6,7 @@ import Logo from "@/assets/hackscFox.png";
 const UpdatesWidget = ({ profile, announcements }) => {
   const items = [];
   if (announcements != null) {
-    for (let i = 0; i < announcements.length; i++) {
+    for (let i = announcements.length - 1; i >= 0; i--) {
       const target = announcements[i].target;
       if (target != profile.role) {
         continue;
@@ -19,11 +19,11 @@ const UpdatesWidget = ({ profile, announcements }) => {
     }
   }
   return (
-    <div>
+    <>
       <Header>Announcements</Header>
       <AfterHeader>from Slack</AfterHeader>
       <UpdateList>{items}</UpdateList>
-    </div>
+    </>
   );
 };
 
@@ -57,7 +57,6 @@ const AfterHeader = styled.h3`
 `;
 
 const UpdateList = styled.div`
-  width: 100%;
   max-height: 400px;
   overflow: hidden;
   overflow-y: scroll;
@@ -66,20 +65,23 @@ const UpdateList = styled.div`
 const UpdateItem = styled.div`
   border-bottom: 1px solid #4a96f0;
   margin: 16px 0;
-  height: 55px;
+  padding-bottom: 10px;
+  height: auto;
+  width: auto;
   display: flex;
   align-items: center;
 `;
 
 const UpdateImg = styled.div`
   display: inline-block;
-  width: 45px;
+  min-width: 45px;
   height: 45px;
   border-radius: 50%;
 `;
 
 const UpdateInfo = styled.div`
   margin-left: 20px;
+  width: 100%;
 `;
 
 const UpdateFrom = styled.div`
@@ -88,10 +90,12 @@ const UpdateFrom = styled.div`
   line-height: 23px;
 `;
 
-const UpdateText = styled.div`
+const UpdateText = styled.p`
+  width: auto;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 1px;
+  word-wrap: break-word;
 `;
 
 export default UpdatesWidget;

express.js

@@ -27,6 +27,7 @@ const publicRouter = require("./api/public");
 const matchingRouter = require("./api/teamMatching");
 const announcementsRouter = require("./api/announcements");
 const linkSlackRouter = require("./api/linkSlack");
+const slackAnnouncementRouter = require("./api/slackAnnouncement");
 const submitProjectRouter = require("./api/submitProject");
 const fileUpload = require("express-fileupload");
 const dotenv = require("dotenv");
@@ -99,6 +100,7 @@ server.use("/api/teamMatching", matchingRouter);
 server.use("/api/announcements", announcementsRouter);
 server.use("/api/linkSlack", linkSlackRouter);
 server.use("/api/submitProject", submitProjectRouter);
+server.use("/api/slackAnnouncement", slackAnnouncementRouter);
 
 server.post("/api/scan", (req, res) => {
   console.info("Scanned: ", req.body.code);
@@ -124,6 +126,7 @@ server.use("/admin/api/unlockable", battlepassRouter);
 server.use("/admin/api/hacker/live", hackerLiveRouter);
 server.use("/admin/api/prize", prizeRouter);
 server.use("/admin/api/public", publicRouter);
+server.use("/admin/api/slackAnnouncement", slackAnnouncementRouter);
 
 server.post("/admin/api/scan", (req, res) => {
   console.info("Scanned: ", req.body.code);

pages/admin/tickets.tsx

@@ -21,6 +21,7 @@ const Tickets = ({ profile }) => {
   const [tickets, setTickets] = useState("0");
   const [error, setError] = useState("");
   const [success, setSuccess] = useState(false);
+  const [message, setMessage] = useState("");
 
   const giveTickets = async (e) => {
     e.preventDefault();
@@ -50,6 +51,16 @@ const Tickets = ({ profile }) => {
       } else {
         setError("");
         setSuccess(true);
+        setMessage(
+          (email ? email : firstName + lastName) +
+            " successfully given " +
+            tickets +
+            " tickets! :)"
+        );
+        setFirstName("");
+        setLastName("");
+        setTickets("");
+        setEmail("");
       }
       return data;
     } catch (e) {
@@ -101,8 +112,12 @@ const Tickets = ({ profile }) => {
               />
               <Button type="submit">Give tickets</Button>
             </form>
-            {error && error}
-            {success && <h3>Success!</h3>}
+            <StatusMessage
+              style={error ? { color: "#ff0000" } : { color: "#00cc00" }}
+            >
+              {error && <h3>{error}</h3>}
+              {success && <h3>{message}</h3>}
+            </StatusMessage>
           </Flex>
         </Container>
       </Background>
@@ -229,4 +244,9 @@ const Input = styled.input`
   margin-bottom: 10px;
 `;
 
+const StatusMessage = styled.div`
+  padding-top: 20px;
+  font-weight: 300;
+  font-size: 16px;
+`;
 export default Tickets;

pages/api/slack/displayAnnouncement.ts

@@ -77,7 +77,8 @@ async function sendAnnouncement(req) {
 }
 
 export default async (req, res) => {
-  await app.start(3032);
+  let port = process.env.PORT || 8080;
+  await app.start(port);
   const responseText = await parseAnnouncement(req);
   await sendAnnouncement(req);
   await app.stop();