Release - School Registration

components/headerNav/index.tsx

@@ -1,8 +1,10 @@
+import React, { useState } from "react";
 import { ComponentWrapper } from "../../styles/containers";
 import { colors } from "../../styles/colors";
 import { breakpoints } from "../../styles/breakpoints";
 import Link from "next/link";
 import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const HeaderWrapper = styled(ComponentWrapper)`
   height: 3.9375vw;
@@ -21,19 +23,61 @@ const ListContainer = styled.ul`
   list-style-type: none;
   margin: 0;
   padding: 0;
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+const BurgerListContainer = styled.ul`
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: ${colors.primaryBlue};
+  height: 32vh;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 `;
 const ListItem = styled.li`
   display: flex;
   height: 100%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: ${colors.fadedPrimaryBlue};
+    cursor: pointer;
+  }
+`;
+const BurgerListItem = styled.li`
+  display: flex;
+  height: 7vh;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
 
   &:hover {
     background-color: ${colors.fadedPrimaryBlue};
     cursor: pointer;
   }
 `;
+const BurgerSeparator = styled.hr`
+  display: flex;
+  size: 1px;
+  width: 70%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+`;
 const Anchor = styled.a`
   display: flex;
   color: ${colors.primaryBlue};
@@ -47,20 +91,60 @@ const Anchor = styled.a`
   ])};
   font-size: 1rem;
   text-decoration: none;
+  @media screen and (max-width: 768px) {
+    color: white;
+  }
 `;
 const Logo = styled.img`
   height: 2.8125vw;
   margin-top: 0.46875vw;
   ${breakpoints("height", "px", [{ 1200: 35 }, { 800: 30 }])};
   ${breakpoints("margin-top", "px", [{ 1200: 5 }, { 800: 7.5 }])};
   object-fit: contain;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 3vw;
+  /* z-index: 10; */
 
   &:hover {
     cursor: pointer;
   }
 `;
+const Burger = styled.button`
+  display: none;
+  @media screen and (max-width: 768px) {
+    height: 2.8125vw;
+    margin-top: 0.46875vw;
+    ${breakpoints("height", "px", [{ 1200: 35 }, { 800: 30 }])};
+    ${breakpoints("margin-top", "px", [{ 1200: 5 }, { 800: 7.5 }])};
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 3vw;
+    z-index: 10;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const Icon = styled(FontAwesomeIcon)<{
+  color?: string;
+}>`
+  font-size: 24px;
+  height: 2vw;
+  ${breakpoints("height", "px", [{ 1200: 35 }, { 800: 30 }])};
+  color: ${(props) => (props.color ? props.color : colors.dkGray)};
+`;
 
 const HeaderNav = () => {
+  const [burgerOpen, setBurgerOpen] = useState(false);
+
   return (
     <HeaderWrapper>
       <div
@@ -85,10 +169,44 @@ const HeaderNav = () => {
             <Anchor>Staff Applications</Anchor>
           </ListItem>
         </Link>
+        <Link href="/school-registration">
+          <ListItem>
+            <Anchor>School Registration</Anchor>
+          </ListItem>
+        </Link>
       </ListContainer>
+      {burgerOpen && (
+        <BurgerListContainer>
+          <Link href="/">
+            <BurgerListItem>
+              <Anchor>Home</Anchor>
+            </BurgerListItem>
+          </Link>
+          <BurgerSeparator />
+          <Link href="/staff-apps">
+            <BurgerListItem>
+              <Anchor>Staff Applications</Anchor>
+            </BurgerListItem>
+          </Link>
+          <BurgerSeparator />
+          <Link href="/school-registration">
+            <BurgerListItem>
+              <Anchor>School Registration</Anchor>
+            </BurgerListItem>
+          </Link>
+        </BurgerListContainer>
+      )}
+      <Burger onClick={() => setBurgerOpen(!burgerOpen)}>
+        {!burgerOpen ? (
+          <Icon icon={"bars"} />
+        ) : (
+          <Icon icon={"times"} color="white" />
+        )}
+      </Burger>
     </HeaderWrapper>
   );
 };
 
+
 export default HeaderNav;
 

components/jumbotron/index.tsx

@@ -7,14 +7,14 @@ interface JumboTronProps {
   titleTwo: string;
   height: number;
   subTitle?: string;
-  image?: string;  // background image
+  image?: string; // background image
 }
 
 const Jumbotron = (props: JumboTronProps) => {
   const { titleOne, titleTwo, subTitle, height, image } = props;
 
   // handle set background image logic
-  let bgImage = image
+  let bgImage = image;
   if (!bgImage) {
     bgImage = "jumbotron-bg.png";
   }
@@ -23,8 +23,18 @@ const Jumbotron = (props: JumboTronProps) => {
   const minDiffCalc = (100 - height) * 0.5625;
   const minHeightCalc = heightCalc - minDiffCalc;
 
-  const sizeTitleOne = titleOne.length > 6 ? "13.5vw" : "18vw";
-  const sizeTitleTwo = titleTwo.length > 7 ? "13.5vw" : "18vw";
+  let sizeTitleOne = "18vw";
+  let sizeTitleTwo = "18vw";
+  if (titleOne.length >= 12) {
+    sizeTitleOne = "12vw";
+  } else if (titleOne.length >= 6) {
+    sizeTitleOne = "13.5vw";
+  }
+  if (titleTwo.length >= 12) {
+    sizeTitleTwo = "12vw";
+  } else if (titleTwo.length >= 6) {
+    sizeTitleTwo = "13.5vw";
+  }
 
   return (
     <ComponentWrapper
@@ -34,8 +44,7 @@ const Jumbotron = (props: JumboTronProps) => {
       justify="flex-end"
       margins="0"
       style={{
-        backgroundImage:
-          `linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),url(/${bgImage})`,
+        backgroundImage: `linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),url(/${bgImage})`,
         backgroundPosition: "bottom",
         backgroundSize: "cover",
         backgroundRepeat: "no-repeat",

components/stepped-form/form-interfaces.ts

@@ -7,6 +7,7 @@ export interface FormField {
     updatedOn: Date;
     fieldType: string;
     required: boolean;
+    index: number; // the index for the field in the form itself
     content: string; // the "question"
     description?: string; // optional description
     values?: any[]; // optional values to select

components/stepped-form/index.tsx

@@ -161,7 +161,13 @@ const Icon = styled(FontAwesomeIcon)`
   color: ${colors.dkGray};
 `;
 
-const SteppedForm = () => {
+interface OwnProps {
+  confId: string;
+  formId: string;
+}
+
+const SteppedForm = (props: OwnProps) => {
+  const { confId, formId } = props;
   const [formData, setFormData] = useState<ApiFormData>();
   const [loading, setLoading] = useState<boolean>(true);
   // #TODO - why doesn't this work correctly lol
@@ -170,7 +176,7 @@ const SteppedForm = () => {
 
   const initForm = async () => {
     setLoading(true);
-    const getFormData = await getFormTemplate("1", "1");
+    const getFormData = await getFormTemplate(confId, formId);
     setFormData(getFormData);
     setLoading(false);
   };
@@ -257,7 +263,7 @@ const SteppedForm = () => {
     request.responses = responses;
     // Submit!
     try {
-      await postFormSubmission("1", "1", { responses });
+      await postFormSubmission(confId, formId, { responses });
       await router.replace("/");
       alert(`Application submitted successfully!`);
     } catch (error) {
@@ -270,6 +276,7 @@ const SteppedForm = () => {
     { content, description, fieldType, id, required, values }: FormField,
     index: number
   ) => {
+    content = required ? `${content}*` : content
     const fieldInputTypeMap = {
       SHORT_ANSWER: "text",
       LONG_ANSWER: "textarea",
@@ -429,7 +436,9 @@ const SteppedForm = () => {
       )}
       {!loading && formData !== null && formData !== undefined && (
         <Form onSubmit={handleSubmit}>
-          {formData.sections[0].fields.map((field, index) => {
+          {formData.sections[0].fields.sort((a, b) => {
+            return a.index - b.index
+          }).map((field, index) => {
             return renderFormItem(field, index);
           })}
           {/* {errorMessage ? <p>{errorMessage}</p> : ""} */}

pages/school-registration/index.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Head from "next/head";
+import HeaderNav from "../../components/headerNav";
+import Jumbotron from "../../components/jumbotron";
+import Footer from "../../components/footer";
+import SteppedForm from "../../components/stepped-form";
+import { Wrapper } from "../../styles/containers";
+
+const SchoolRegistration = () => {
+  return (
+    <Wrapper>
+      <Head>
+        <title>Chicago International Model UN</title>
+        <meta
+          name="description"
+          content="Chicago International Model United Nations"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Mulish:wght@900&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Alegreya:wght@600&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500&family=Alegreya:wght@600&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500&family=Alegreya:wght@600&family=Source+Sans+Pro&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <HeaderNav />
+      <Jumbotron
+        titleOne="SCHOOL"
+        titleTwo="REGISTRATION"
+        height={65}
+        image="cimun-staff.png"
+      />
+      <SteppedForm confId="1" formId="2" />
+      <Footer />
+    </Wrapper>
+  );
+};
+
+export default SchoolRegistration;

pages/staff-apps/index.tsx

@@ -6,7 +6,7 @@ import Footer from "../../components/footer";
 import SteppedForm from "../../components/stepped-form";
 import { Wrapper } from "../../styles/containers";
 
-function StaffApps() {
+const StaffApps = () => {
   return (
     <Wrapper>
       <Head>
@@ -36,11 +36,16 @@ function StaffApps() {
         />
       </Head>
       <HeaderNav />
-      <Jumbotron titleOne="STAFF" titleTwo="APPLICATION" height={65} image="cimun-staff.png" />
-      <SteppedForm />
+      <Jumbotron
+        titleOne="STAFF"
+        titleTwo="APPLICATION"
+        height={65}
+        image="cimun-staff.png"
+      />
+      <SteppedForm formId="1" confId="1" />
       <Footer />
     </Wrapper>
   );
-}
+};
 
 export default StaffApps;