Media Queries added

Models/CandidateTestModel.ts

@@ -11,4 +11,3 @@ export interface CandidateTestModel {
     outputDescription: string;
     expectedOutput: string | number;
 }
-

api/candidateApiClientModule.ts

@@ -0,0 +1,31 @@
+import getConfig from "next/config";
+import fetch from "node-fetch";
+
+export interface SessionCandidate {
+    firstName: string;
+    lastName: string;
+    testStatuses: CandidateTestStatus[];
+}
+
+export interface CandidateTestStatus {
+    testName: string;
+    testStatus: string;
+}
+export interface NewTestSubmission{
+    testId: number;
+    testAnswer: string;
+}
+
+export async function addTestSubmission( tokenId: string, newTestSubmission: NewTestSubmission) {
+    const { publicRuntimeConfig } = getConfig();
+    const apiURL = publicRuntimeConfig.API_URL;
+
+    return await fetch(`${apiURL}/sessions/${tokenId}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(newTestSubmission),
+    });
+}
+

api/sessionClient.ts

@@ -1,10 +1,40 @@
-import getConfig from 'next/config';
-import fetch from "node-fetch";
+import {assertTokenIsValid} from "../helpers/tokenHelpers";
 
+import getConfig from 'next/config';
+import fetch from "node-fetch";
+import {GetServerSideProps} from "next";
+import {CandidateTestStatus} from "./candidateApiClientModule";
+const {publicRuntimeConfig} = getConfig();
+const baseUrl = publicRuntimeConfig.API_URL;
 export async function checkToken(token: string): Promise<boolean> {
+    const response = await fetch(`${baseUrl}/sessions/${token}`);
+    return response.ok;}
+
+export const getServerSideProps: GetServerSideProps = async ({res, query}) => {
+    await assertTokenIsValid(query, res);
+    return { props: {}};
+};
+export interface SessionCandidate {
+    firstName: string;
+    lastName: string;
+    testStatuses: CandidateTestStatus[];
+}
+export interface NewTestSubmission{
+    testId: number;
+    testAnswer: string;
+}
+
+export async function getSessionCandidate(token: string | string[] | undefined): Promise<SessionCandidate> {
     const {publicRuntimeConfig} = getConfig();
     const baseUrl = publicRuntimeConfig.API_URL;
-
-    const response = await fetch(`${baseUrl}/sessions/${token}`);
-    return response.ok;
-}
+    try {
+        const result = await fetch(
+            `${baseUrl}/sessions/${token}`
+        );
+        const data = await result.json();
+        return data;
+    } catch (error) {
+        console.error(error);
+        return error.message;
+    }
+}

components/CandidateTestView/CandidateTestView.tsx

@@ -9,18 +9,16 @@ interface CandidateTestViewProps {
     token: string;
 }
 const CandidateTestView = (candidateTestViewProps: CandidateTestViewProps): JSX.Element => (
-
         <div className={scss.testPage}>
             <h1 className={scss.testTitle}>Test {candidateTestViewProps.test.number}: {candidateTestViewProps.test.title}</h1>
             <section className={scss.testInstructions}>
-                <h2 className={scss.instructionsHeader}>{candidateTestViewProps.test.title}</h2>
                 <div id={"testInstructions"} className={scss.instructions}>
                     {InstructionsBlock(candidateTestViewProps.test)}
                 </div>
             </section>
             <section className={scss.textEditor}>
-                <TextEditorContainer 
-                     height="50vh" 
+                <TextEditorContainer
+                     height="50vh"
                      width="100%"
                      defaultText={candidateTestViewProps.test.testStarterCode}
                      token={candidateTestViewProps.token}
@@ -30,4 +28,4 @@ const CandidateTestView = (candidateTestViewProps: CandidateTestViewProps): JSX.
         </div>
 
 );
-export default CandidateTestView;
+export default CandidateTestView;

components/CandidateTestView/Instructions/Instructions.module.scss

@@ -1,14 +1,36 @@
-.sampleInputOutput {
-  margin: 5px;
-  padding: 5px;
-  top: 78vh;
-  left: 46vw;
-  display: inline-block;
-  position: absolute;
-  overflow: hidden;
-}
+@import "pageStyles/constants";
+
 .testInstructions {
-  height: 500px;
-  max-width: 50vw;
+  box-sizing: border-box;
+  color: $techSwitchWhite;
+  white-space: pre-wrap;
+  font-size: $desktopBodyFontSize;
+  text-align: left;
+  padding-right: 1rem;
+  padding-left: 5rem;
+  line-height: 130%;
+  width: 700px;
+}
+.instructionsSubheader {
+  font-size: $desktopSubHeaderFontSize;
+  line-height: 1rem;
+}
+
+@media (max-width: $mediaLowResMaxWidth) {
+  //Low Resolution 900px and below
+  .instructionsHeader {
+    font-size: $lowResSubHeaderFontSize;
+  }
+  .instructionsSubheader {
+    box-sizing: border-box;
+    font-size: $lowResSubHeaderFontSize;
+  }
+  .testInstructions {
+    font-size: $lowResBodyFontSize;
+    box-sizing: border-box;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    width: 300px;
+    }
+}
 
-}

components/CandidateTestView/Instructions/Instructions.tsx

@@ -3,16 +3,17 @@ import scss from "../Instructions/Instructions.module.scss";
 import {CandidateTestModel} from "../../../Models/CandidateTestModel";
 
 const InstructionsBlock = (testModel: CandidateTestModel): JSX.Element => (
-    <div>
-        <p className={scss.instructionList}>{testModel.brief}</p>
-        <h2>Example</h2>
-        <p className={scss.instructionList}>{testModel.example}</p>
-        <h2>Input/Output</h2>
-        <ul className={scss.instructionList}>
+    <div className={scss.testInstructions}>
+        <h2 className={scss.instructionsSubheader}><strong>{testModel.title}</strong></h2>
+        <p className={scss.instructionsBody}>{testModel.brief}</p>
+        <h2 className={scss.instructionsSubheader}><strong>Example</strong></h2>
+        <p className={scss.instructionsBody}>{testModel.example}</p>
+        <h2 className={scss.instructionsSubheader}><strong>Input/Output</strong></h2>
+        <ul className={scss.instructionsBody}>
             <li className={scss.instructionList}><strong>[input] {testModel.inputType}</strong><br/>{testModel.inputDescription}</li>
             <li className={scss.instructionList}><strong>[output] {testModel.outputType}</strong><br/>{testModel.outputDescription}</li>
         </ul>
     </div>
 );
 
-export default InstructionsBlock;
+export default InstructionsBlock;

components/CandidateTestView/candidateTestView.module.scss

@@ -1,82 +1,54 @@
 @import "../../pageStyles/constants";
 .testPage {
-  max-height: 800px;
+  box-sizing: border-box;
+  max-height: 100vh;
   max-width: 100vw;
   display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  margin-top: 2vh;
-}
-
-.testInstructions {
-  height: 500px;
-  max-width: 50vw;
-
-}
-.instructionList {
-  margin-bottom: 1em;
-}
-
-.testInstructionsHeader {
-  color: $techSwitchWhite;
-  font-size: $desktopSubHeaderFontSize;
-  margin-bottom: 12px;
-  padding: 5px;
-}
-
-.testInstructions {
-  color: $techSwitchWhite;
-  white-space: pre-wrap;
-  font-size: $bodyFontSize;
-  justify-content: left;
-  text-align: left;
-  width: 40vw;
-  line-height: 1.5;
-  padding-left: 3vw;
-  margin-top: 12px;
-  margin-bottom: 24px;
-  margin-right: 5px;
-  margin-left: 5px;
-}
-
-.textEditor {
-  color: $techSwitchWhite;
-  font-size: $buttonFontSize;
-  justify-content: right;
-  margin-top: 5vh;
-  margin-right: 1vw;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  margin-top: 100px;
 }
 
 .testTitle {
+  box-sizing: border-box;
   color: $techSwitchYellow;
-  font-size: 30pt;
-  max-width: 40vw;
+  font-size: $desktopHeaderFontSize;
   white-space: nowrap;
-  margin: 5px;
-  padding: 5px;
-  top: 1vh;
-  right: 2vw;
-  overflow: hidden;
   position: absolute;
+  top: 1px;
+  right: 2px;
   text-align: right;
 }
 
-.editorBox {
-  border-style: solid;
-  border-width: 5px;
-  border-color: $techSwitchYellow;
-}
 
-.sampleInputOutput {
-  margin: 5px;
-  padding: 5px;
-  top: 85vh;
-  left: 46vw;
-  display: flex;
-  flex-direction: column;
-  line-height: 0;
-  position: absolute;
-  overflow: hidden;
-}
+        @media (max-width: $mediaLowResMaxWidth){
+          //Low Resolution 900px and below
+          .testPage {
+            box-sizing: border-box;
+            max-height: 100vh;
+            max-width: 100vw;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 50px;
+          }
+
+          .testTitle {
+            font-size: $lowResHeaderFontSize;
+            white-space: normal;
+            overflow-wrap: break-spaces;
+            position: absolute;
+            top: 1px;
+            right: 1px;
+            padding: 0;
+            margin: 0;
+            text-align: right;
+          }
+          .buttonYellow{
+            @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResBodyFontSize);
+            width: 120px;
+          }
+        }
 
 

components/Layout/layout.module.scss

@@ -3,30 +3,18 @@
 .layout {
   background-color: $techSwitchBlack;
   box-sizing: border-box;
-  padding: 0;
-  margin: 0;
   border-style: none;
   font-family: $techSwitchFont;
-}
-
-body {
+  max-height: 100vh;
+  max-width: 100vw;
   margin: 0;
+  padding: 0;
 }
 
 .logoHeader {
-  width: 100px;
-  padding: 15px;
-  margin: 6px;
+  box-sizing: border-box;
+  width: 180px;
+  padding: 0.2rem;
+  margin: 0.2rem;
   align-self: flex-start;
 }
-
-@media (min-width: 768px){
-  .logoHeader{
-    width: 200px;
-  }
-}
-
-.layoutHeader {
-  width: 100vw;
-  text-align: left;
-}