Made Navbar Links on redesigned Dashboard (#571)

* fix build

* remove console logs

* events widget

* fix build

.gitignore

@@ -60,6 +60,8 @@ typings/
 prod.env
 aws.env
 aws_secrets.env
+andreas.env
+andreas.*
 
 # * Ignore package lock in favor of yarn lock
 package-lock.json

api/hackerProfile.js

@@ -507,7 +507,6 @@ router.put("/portfolio", async (req, res) => {
 });
 
 router.put("/updateProfile", async (req, res) => {
-
   const formInput = req.body;
 
   const updatedProfileFields = {

api/models/linkedSlack.js

@@ -0,0 +1,27 @@
+module.exports = (sequelize, DataTypes) => {
+  const LinkedSlack = sequelize.define(
+    "LinkedSlack",
+    {
+      id: {
+        type: DataTypes.INTEGER,
+        primaryKey: true,
+        allowNull: false,
+      },
+      slackId: {
+        type: DataTypes.STRING,
+      },
+      userId: {
+        type: DataTypes.STRING,
+        references: {
+          model: "HackerProfiles",
+          key: "userId",
+        },
+      },
+    },
+    {
+      timestamps: false,
+    }
+  );
+
+  return LinkedSlack;
+};

api/public.js

@@ -12,13 +12,14 @@ router.get("/events/list", cors(), async (req, res) => {
   }
 });
 
-router.get("/tasks/list", cors(), async (req, res) => {
-  try {
-    const events = await models.Task.findAll();
-    return res.json({ events });
-  } catch (e) {
-    return res.json({ err: e });
-  }
-});
+// TODO: Is this needed?
+// router.get("/tasks/list", cors(), async (req, res) => {
+//   try {
+//     const events = await models.Task.findAll();
+//     return res.json({ events });
+//   } catch (e) {
+//     return res.json({ err: e });
+//   }
+// });
 
 module.exports = router;

api/teamMatching.js

@@ -414,12 +414,10 @@ router.post("/inviteToTeam/", async (req, res) => {
   });
 });
 
-
 // GET /api/matching/profile
 // - Get suggestions
 // - Route for the hacker
 router.get("/profile/:type", async (req, res) => {
-
   const curruser = await models.HackerProfile.findOne({
     where: {
       userId: req.user.id,
@@ -432,11 +430,7 @@ router.get("/profile/:type", async (req, res) => {
         year: curruser.year,
         over18: true,
         status: {
-          [sequelize.Op.in]: [
-            "accepted",
-            "confirmed",
-            "checkedIn",
-          ],
+          [sequelize.Op.in]: ["accepted", "confirmed", "checkedIn"],
         },
         role: "hacker",
       },
@@ -457,11 +451,7 @@ router.get("/profile/:type", async (req, res) => {
       where: {
         major: curruser.major,
         status: {
-          [sequelize.Op.in]: [
-            "accepted",
-            "confirmed",
-            "checkedIn",
-          ],
+          [sequelize.Op.in]: ["accepted", "confirmed", "checkedIn"],
         },
       },
       required: true,
@@ -482,11 +472,7 @@ router.get("/profile/:type", async (req, res) => {
         year: curruser.year,
         major: curruser.major,
         status: {
-          [sequelize.Op.in]: [
-            "accepted",
-            "confirmed",
-            "checkedIn",
-          ],
+          [sequelize.Op.in]: ["accepted", "confirmed", "checkedIn"],
         },
       },
       required: true,

components/SuggestedHackers.tsx

@@ -73,7 +73,12 @@ const Suggestion = ({ suggestion, id, type }) => {
           {suggestion.school ? suggestion.school : "school unavailable"}
         </School>
         <Menu>
-          <Message style={{backgroundColor: type}} href={"mailto:" + suggestion.email}>Message</Message>
+          <Message
+            style={{ backgroundColor: type }}
+            href={"mailto:" + suggestion.email}
+          >
+            Message
+          </Message>
         </Menu>
       </Square>
     </div>

components/hackerDashboard/AdminDashboard.tsx

@@ -12,14 +12,15 @@ import ActionsWidget from "./widgets/admin/actions";
 
 type Props = {
   profile: Profile;
+  events: Array<any>;
 };
 
 const AdminDashboard = (props: Props) => {
-  const { profile } = props;
+  const { profile, events } = props;
 
   return (
     <Container>
-      <Navbar />
+      <Navbar activePage="dashboard" />
       <Header text={"Admin Dashboard"} />
       <WidgetFrame
         widget="one"
@@ -35,7 +36,7 @@ const AdminDashboard = (props: Props) => {
         }
       />
       <WidgetFrame widget="two" component={<ActionsWidget />} />
-      <Sidebar view={"admin"} />
+      <Sidebar view={"admin"} events={events} />
       <Footer />
     </Container>
   );

components/hackerDashboard/Dashboard.tsx

@@ -1,4 +1,7 @@
 import styled from "styled-components";
+import Image from "next/image";
+
+import Logo from "@/assets/hackscFox.png";
 
 // Layout
 import Navbar from "./layout/Navbar";
@@ -10,32 +13,55 @@ import WidgetFrame from "./HackerWidgetFrame";
 // Widgets
 import Battlepass from "./widgets/battlepass";
 import Updates from "./widgets/updates";
+import { getHackathonConstants, getProfile, getPublicEvents } from "@/lib";
 
 type Props = {
   profile: Profile;
+  events: Array<any>;
 };
 
-const Dashboard = ({ profile }: Props) => {
+const Dashboard = ({ profile, events }: Props) => {
+  console.log(events);
   return (
     <Container>
-      <Navbar />
+      <FoxLogo />
+      <Navbar activePage="dashboard" />
       <Header />
       <WidgetFrame widget="one" component={<h2>Your team</h2>} />
       <WidgetFrame widget="two" component={<Battlepass />} />
       <WidgetFrame widget="three" component={<Updates />} />
-      <Sidebar view="hacker" />
+      <Empty />
+      <Sidebar view="hacker" events={events} />
       <Footer />
     </Container>
   );
 };
 
+const FoxLogo = () => (
+  <MenuLogo>
+    <Image src={Logo} width="75%" height="75%" alt="" />
+  </MenuLogo>
+);
+
+const MenuLogo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  margin: 20px auto;
+`;
+
+const Empty = styled.div`
+  padding: 1rem;
+`;
+
 const Container = styled.div`
   display: grid;
-  grid-template-columns: 0.5fr 1.3fr 0.7fr 0.5fr;
+  grid-template-columns: 0.6fr 1.3fr 0.9fr 0.6fr;
   grid-template-rows: 0.4fr 1fr 1.4fr 0.6fr;
   gap: 0px;
   grid-template-areas:
-    "Navbar Header Header Sidebar"
+    "FoxLogo Header Header Empty"
     "Navbar WidgetArea1 WidgetArea2 Sidebar"
     "Navbar BigWidget BigWidget Sidebar"
     "Footer Footer Footer Footer";

components/hackerDashboard/HackerWidgetFrame.tsx

@@ -27,8 +27,8 @@ export default WidgetFrame;
 
 const Container = styled.div<{ widget?: boolean }>`
   background: #2d4158;
-  margin: 16px;
-  padding: 12px;
+  margin: 1rem;
+  padding: 1rem;
   border-radius: 15px;
   box-shadow: 8px 4px 4px rgba(0, 0, 0, 0.2);
 `;

components/hackerDashboard/layout/Header.tsx

@@ -1,4 +1,8 @@
 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";
 
 type Props = {
   text?: string;
@@ -7,11 +11,26 @@ type Props = {
 const DashHeader = ({ text }: Props) => {
   return (
     <Header>
-      <Title> {text || "HackSC 2021"} </Title>
+      {text ? (
+        <Title>HackSC 2021</Title>
+      ) : (
+        <LogoWrapper>
+          <Image src={Logo} width="100%" height="100%" alt="" />
+        </LogoWrapper>
+      )}
     </Header>
   );
 };
 
+const LogoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  margin: 20px auto;
+  width: 100%;
+`;
+
 const Header = styled.div`
   display: grid;
   grid-area: Header;