resources page (#588)

* resources page

* removed extra css

* backend call to api api

* consistent with production db

api/database/migrations/20210212031418-add-api-properties.js

@@ -0,0 +1,21 @@
+"use strict";
+
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    return Promise.all([
+      queryInterface.addColumn("Apis", "image_url", {
+        type: Sequelize.STRING
+      }),
+      queryInterface.addColumn("Apis", "slack_channel", {
+        type: Sequelize.STRING
+      }),
+    ]);
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return Promise.all([
+      queryInterface.removeColumn("Apis", "image_url"),
+      queryInterface.removeColumn("Apis", "slack_channel"),
+    ]);
+  }
+};

api/models/apis.js

@@ -14,7 +14,9 @@ module.exports = (sequelize, DataTypes) => {
       },
       name: DataTypes.STRING,
       description: DataTypes.STRING,
-      major_event: DataTypes.INTEGER
+      major_event: DataTypes.INTEGER, 
+      image_url: DataTypes.STRING,
+      slack_channel: DataTypes.STRING,
     },
     {
       timestamps: false

components/hackerDashboard/Resources.tsx

@@ -0,0 +1,86 @@
+import styled from "styled-components";
+import Image from "next/image";
+
+import Logo from "@/assets/hackscFox.png";
+
+// Layout
+import { Navbar, Sidebar, Footer, Header } from "./layout";
+import WidgetFrame from "./HackerWidgetFrame";
+
+// Widgets
+import { ResourcesWidget } from "./widgets";
+
+type HackathonConstant = {
+  id: number;
+  name: string;
+  boolean: boolean;
+  date: string;
+  type: any;
+};
+
+type Props = {
+  profile: Profile;
+  events: Array<any>;
+  hackathonConstants: Array<HackathonConstant>;
+  resources: Array<API>;
+};
+
+const Resources = ({ profile, events, hackathonConstants, resources }: Props) => {
+  return (
+    <Container>
+      <FoxLogo />
+      <Navbar hackathonConstants={hackathonConstants} activePage="resources" profile={profile} />
+      <Header />
+      <WidgetFrame
+        widget="one"
+        component={
+          <>
+            <h3>HackSC Resources + APIs</h3>
+            <p>
+              This is a collection of resources you can use for your project provided by our sponsors!
+            </p>
+          </>
+        }
+      />
+      <WidgetFrame widget="two" component={<ResourcesWidget resources={resources} />} />
+      <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.6fr 1.3fr 0.9fr 0.6fr;
+  grid-template-rows: 0.4fr 0.4fr 4fr 0.6fr;
+  gap: 0px;
+  grid-template-areas:
+    "FoxLogo Header Header Empty"
+    "Navbar WidgetArea1 WidgetArea1 Sidebar"
+    "Navbar WidgetArea2 WidgetArea2 Sidebar"
+    "Navbar BigWidget BigWidget Sidebar"
+    "Footer Footer Footer Footer";
+  background-color: #1d2c3f;
+  color: #fff;
+`;
+
+export default Resources;

components/hackerDashboard/index.ts

@@ -7,4 +7,5 @@ export { default as AdminDashboard } from "./AdminDashboard";
 export { default as SponsorDashboard } from "./SponsorDashboard";
 export { default as Application } from "./Application";
 export { default as Dash } from "./Dashboard";
+export { default as ResourcesDash } from "./Resources";
 export { default as HackerWidgetFrame } from "./HackerWidgetFrame";

components/hackerDashboard/widgets/index.ts

@@ -6,3 +6,4 @@ export * from "./sidebar";
 export { default as BattlepassWidget } from "./battlepass";
 export { default as TeamWidget } from "./team";
 export { default as UpdatesWidget } from "./updates";
+export { default as ResourcesWidget } from "./resources";

components/hackerDashboard/widgets/resources.tsx

@@ -0,0 +1,114 @@
+import styled from "styled-components";
+
+const ResourcesWidget = ({ resources }) => {
+  return (
+    <Wrapper>
+      {resources.map((resource) => 
+        <ResourceWrapper>
+            <ResourceImageWrapper>
+                <ResourceImage src={resource.image_url} />
+            </ResourceImageWrapper>
+            <ResourceBlurb>
+                <ResourceTitle>{resource.name}</ResourceTitle>
+                <ResourceDescription>{resource.description}</ResourceDescription>
+                {resource.links.map((link) => 
+                    <Button href={link.linke}>{link.name}</Button>
+                )}
+                <Button href={resource.slack_channel}>Join Slack Channel</Button>
+            </ResourceBlurb>
+        </ResourceWrapper>
+    )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    max-height: 600px;
+    overflow: scroll;
+`;
+
+const ResourceWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding-right: 10px;
+    padding-left: 10px;
+    padding-bottom: 20px;
+`;
+
+const ResourceImageWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    width: 20vw;
+    min-width: 300px;
+    max-width: 350px;
+    height: 10vh;
+    max-height: 144px;
+    min-height: 120px;
+    border-radius: 15px 15px 0px 0px;
+`;
+
+const ResourceImage = styled.img`
+    max-height: 120px;
+    max-width: 250px;
+`;
+
+const ResourceBlurb = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: #28303A;
+    border-radius: 15px;
+    height: 225px;
+    width: calc(20vw - 30px);
+    min-width: 270px;
+    max-width: 320px;
+    border-radius: 0px 0px 15px 15px;
+    padding: 15px;
+    overflow: scroll;
+`;
+
+const ResourceTitle = styled.p`
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 28px;
+    text-align: center;
+    letter-spacing: 1px;
+
+    color: #FFFFFF;
+`;
+
+const ResourceDescription = styled.p`
+    padding-top: 10px;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+`;
+
+const Button = styled.a`
+    background: #4A96F0;
+    border-radius: 10px;
+    width: 7vw;
+    max-width: 300px;
+    min-width: 200px;;
+    margin-top: 10px;
+    margin-bottom: 0px;
+    align-self: center;
+    padding-top: 8px;
+    padding-bottom: 5px;
+
+    color: white;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 13px;
+    text-align: center;
+    letter-spacing: 1px;
+`;
+
+export default ResourcesWidget;

odyssey.d.ts

@@ -29,6 +29,9 @@ declare type API = {
   name: string;
   description: string;
   major_event: boolean;
+  image_url: string;
+  slack_channel: string;
+  links: Array<ApiLink>;
 };
 
 declare type ApiLink = {

pages/resources.tsx

@@ -0,0 +1,56 @@
+import { ResourcesDash } from "@/components/hackerDashboard";
+
+import {
+  handleLoginRedirect,
+  getProfile,
+  handleDashboardRedirect,
+  getHackathonConstants,
+  getPublicEvents,
+  getAPIS,
+} from "@/lib";
+
+const Resources = ({ profile, events, hackathonConstants, resources }) => {
+  return (
+    <>
+      <ResourcesDash
+          profile={profile}
+          events={events}
+          hackathonConstants={hackathonConstants}
+          resources={resources}
+      />
+    </>
+  );
+};
+
+export async function getServerSideProps({ req }) {
+  const profile = await getProfile(req);
+  const hackathonConstants = await getHackathonConstants();
+  const currentEvents = await getPublicEvents(req);
+  const events = currentEvents ? currentEvents["events"] : [];
+
+  // Null profile means user is not logged in
+  if (!profile) {
+    handleLoginRedirect(req);
+  }
+
+  if (
+    !hackathonConstants.find((constant) => constant.name === "showDash")
+      ?.boolean
+  ) {
+    await handleDashboardRedirect(req);
+  }
+
+  const apis = await getAPIS(req);
+  const resources = apis.success;
+
+  return {
+    props: {
+      profile,
+      events,
+      hackathonConstants,
+      resources,
+    },
+  };
+}
+
+export default Resources;