add hackathon constants filtering, logo fix, schedule scroll (#574)

* add hackathon constants filtering, logo fix, schedule scroll

* add typings

components/hackerDashboard/AdminDashboard.tsx

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

components/hackerDashboard/Application.tsx

@@ -1 +1,5 @@
-export {};
+const Application = () => {
+  return <div></div>;
+};
+
+export default Application;

components/hackerDashboard/Dashboard.tsx

@@ -4,32 +4,35 @@ import Image from "next/image";
 import Logo from "@/assets/hackscFox.png";
 
 // Layout
-import Navbar from "./layout/Navbar";
-import Sidebar from "./layout/Sidebar";
-import Footer from "./layout/Footer";
-import Header from "./layout/Header";
+import { Navbar, Sidebar, Footer, Header } from "./layout";
 import WidgetFrame from "./HackerWidgetFrame";
 
 // Widgets
-import Battlepass from "./widgets/battlepass";
-import Updates from "./widgets/updates";
-import { getHackathonConstants, getProfile, getPublicEvents } from "@/lib";
+import { BattlepassWidget, UpdatesWidget } from "./widgets";
+
+type HackathonConstant = {
+  id: number;
+  name: string;
+  boolean: boolean;
+  date: string;
+  type: any;
+};
 
 type Props = {
   profile: Profile;
   events: Array<any>;
+  hackathonConstants: Array<HackathonConstant>;
 };
 
-const Dashboard = ({ profile, events }: Props) => {
-  console.log(events);
+const Dashboard = ({ profile, events, hackathonConstants }: Props) => {
   return (
     <Container>
       <FoxLogo />
-      <Navbar activePage="dashboard" />
+      <Navbar hackathonConstants={hackathonConstants} activePage="dashboard" />
       <Header />
       <WidgetFrame widget="one" component={<h2>Your team</h2>} />
-      <WidgetFrame widget="two" component={<Battlepass />} />
-      <WidgetFrame widget="three" component={<Updates />} />
+      <WidgetFrame widget="two" component={<BattlepassWidget />} />
+      <WidgetFrame widget="three" component={<UpdatesWidget />} />
       <Empty />
       <Sidebar view="hacker" events={events} />
       <Footer />

components/hackerDashboard/index.ts

@@ -0,0 +1,9 @@
+// * Subdirs
+export * from "./layout";
+export * from "./widgets";
+
+// * Files
+export { default as AdminDashboard } from "./AdminDashboard";
+export { default as Application } from "./Application";
+export { default as Dash } from "./Dashboard";
+export { default as HackerWidgetFrame } from "./HackerWidgetFrame";

components/hackerDashboard/layout/Header.tsx

@@ -15,7 +15,7 @@ const DashHeader = ({ text }: Props) => {
         <Title>HackSC 2021</Title>
       ) : (
         <LogoWrapper>
-          <Image src={Logo} width="100%" height="100%" alt="" />
+          <Image src={Logo} width="220%" height="100%" alt="" />
         </LogoWrapper>
       )}
     </Header>

components/hackerDashboard/layout/Navbar.tsx

@@ -1,38 +1,72 @@
 import styled from "styled-components";
 
 const MenuItems = [
-  { title: "Dashboard", route: "dashboard" },
-  { title: "Application", route: "application" },
-  { title: "Results", route: "results" },
-  { title: "Team", route: "team" },
-  { title: "Maps", route: "maps" },
-  { title: "Resources", route: "resources" },
+  { title: "Dashboard", route: "dashboard", constant: "showDash" },
+  { title: "Application", route: "application", constant: "showApp" },
+  { title: "Results", route: "results", constant: "showResults" },
+  { title: "Team", route: "team", constant: "showTeam" },
+  { title: "Maps", route: "maps", constant: "showMaps" },
+  { title: "Resources", route: "resources", constant: "showAPI" },
 ];
 
-const MenuItem = ({ activePage, title, route }) => (
-  <BoxShadowWrapper>
-    <SidebarMenuItem
-      href={"/" + route}
-      active={activePage === route || activePage === title}
-    >
-      <SidebarMenuItemLabel>{title}</SidebarMenuItemLabel>
-    </SidebarMenuItem>
-  </BoxShadowWrapper>
-);
+type Item = {
+  title: string;
+  route: string;
+  constant: string;
+};
+
+type HackathonConstant = {
+  id: number;
+  name: string;
+  boolean: boolean;
+  date: string;
+  type: any;
+};
+
+type NavbarProps = {
+  activePage: string;
+  hackathonConstants: Array<HackathonConstant>;
+};
+
+type MenuItemProps = {
+  activePage: string;
+  item: Item;
+  hackathonConstants: Array<HackathonConstant>;
+};
+
+const MenuItem = ({ activePage, item, hackathonConstants }: MenuItemProps) => {
+  let show = true;
+  hackathonConstants.forEach((c) => {
+    if (item.constant == c.name) show = c.boolean;
+  });
+
+  return show ? (
+    <BoxShadowWrapper>
+      <NavbarMenuItem
+        href={"/" + item.route}
+        active={activePage === item.route || activePage === item.title}
+      >
+        <NavbarMenuItemLabel>{item.title}</NavbarMenuItemLabel>
+      </NavbarMenuItem>
+    </BoxShadowWrapper>
+  ) : (
+    ""
+  );
+};
 
-const Sidebar = ({ activePage }) => {
+const Navbar = ({ activePage, hackathonConstants }: NavbarProps) => {
   return (
-    <SidebarContainer>
-      <SidebarMenu>
+    <NavbarContainer>
+      <NavbarMenu>
         {MenuItems.map((item) =>
-          MenuItem({ activePage, title: item.title, route: item.route })
+          MenuItem({ activePage, item: item, hackathonConstants })
         )}
-      </SidebarMenu>
-    </SidebarContainer>
+      </NavbarMenu>
+    </NavbarContainer>
   );
 };
 
-const SidebarContainer = styled.div`
+const NavbarContainer = styled.div`
   grid-area: Navbar;
   background-color: #1d2c3f;
   color: #fff;
@@ -41,7 +75,7 @@ const SidebarContainer = styled.div`
   font-family: "Work Sans", sans-serif;
 `;
 
-const SidebarMenu = styled.ul`
+const NavbarMenu = styled.ul`
   display: flex;
   align-items: left;
   flex-direction: column;
@@ -61,7 +95,7 @@ type AProps = {
   active: boolean;
 };
 
-const SidebarMenuItem = styled.a<AProps>`
+const NavbarMenuItem = styled.a<AProps>`
   display: flex;
   height: 60px;
   width: auto;
@@ -78,7 +112,7 @@ const SidebarMenuItem = styled.a<AProps>`
     active ? "rgba(255, 255, 255, 0.03)" : "#2d4158"};
 `;
 
-const SidebarMenuItemLabel = styled.p`
+const NavbarMenuItemLabel = styled.p`
   font-family: "Work Sans", sans-serif;
   font-size: 24px;
   font-weight: 600;
@@ -88,4 +122,4 @@ const SidebarMenuItemLabel = styled.p`
   margin-left: 8px;
 `;
 
-export default Sidebar;
+export default Navbar;

components/hackerDashboard/layout/index.ts

@@ -0,0 +1,4 @@
+export { default as Footer } from "./Footer";
+export { default as Header } from "./Header";
+export { default as Navbar } from "./Navbar";
+export { default as Sidebar } from "./Sidebar";

components/hackerDashboard/widgets/admin/index.ts

@@ -0,0 +1 @@
+export { default as ActionsWidget } from "./actions";

components/hackerDashboard/widgets/index.ts

@@ -1,7 +1,8 @@
-export {
-  HackathonCountdown,
-  HackathonDates,
-  HackathonEvents,
-  Stats,
-  Uptime,
-} from "./sidebar";
+// * Subdirs
+export * from "./admin";
+export * from "./sidebar";
+
+// * Files
+export { default as BattlepassWidget } from "./battlepass";
+export { default as TeamWidget } from "./team";
+export { default as UpdatesWidget } from "./updates";

components/hackerDashboard/widgets/sidebar/events.tsx

@@ -26,6 +26,8 @@ const HackathonEvents = ({ events }) => {
 
 const EventList = styled.div`
   border-radius: 4px;
+  max-height: 400px;
+  overflow: scroll;
 `;
 
 const Event = styled.div`

components/hackerDashboard/widgets/updates.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import Logo from "@/assets/hackscFox.png";
 
-const Updates = () => {
+const UpdatesWidget = () => {
   return (
     <div>
       <Header>Announcements</Header>
@@ -86,4 +86,4 @@ const UpdateText = styled.div`
   letter-spacing: 1px;
 `;
 
-export default Updates;
+export default UpdatesWidget;

pages/dashboard.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
-import Dash from "../components/hackerDashboard/Dashboard";
-import AdminDashboard from "../components/hackerDashboard/AdminDashboard";
+import { Dash, AdminDashboard } from "@/components/hackerDashboard";
 
 import {
   handleLoginRedirect,
@@ -13,7 +12,7 @@ import {
   getPublicEvents,
 } from "@/lib";
 
-const Dashboard = ({ profile, events }) => {
+const Dashboard = ({ profile, events, hackathonConstants }) => {
   const [view, setView] = useState("hacker");
 
   const switchRole = () => {
@@ -25,11 +24,22 @@ const Dashboard = ({ profile, events }) => {
   };
 
   const getDashToRender = () => {
-    //@ts-ignore  - the NODE_ENV var doesnt support dev
     if (view === "admin") {
-      return <AdminDashboard profile={profile} events={events} />;
+      return (
+        <AdminDashboard
+          profile={profile}
+          events={events}
+          hackathonConstants={hackathonConstants}
+        />
+      );
     } else {
-      return <Dash profile={profile} events={events} />;
+      return (
+        <Dash
+          profile={profile}
+          events={events}
+          hackathonConstants={hackathonConstants}
+        />
+      );
     }
   };
 
@@ -86,6 +96,7 @@ export async function getServerSideProps({ req }) {
       profile,
       socialPosts,
       events,
+      hackathonConstants,
     },
   };
 }