Media Queries added

Models/CandidateTestModel.ts

@@ -12,3 +12,13 @@ export interface CandidateTestModel {
     expectedOutput: string | number;
 }
 
+export interface CandidateTestStatusModel {
+    candidateTest: CandidateTestModel;
+    testStartedTimeStamp: number | undefined;
+    testSubmittedTimeStamp: number | undefined;
+}
+
+export interface TestLibraryStepperProps {
+    candidateTestsStatus: CandidateTestStatusModel[];
+    candidateUniqueUrl: string;
+}

api/sessionClient.ts

@@ -4,7 +4,7 @@ import fetch from "node-fetch";
 export async function checkToken(token: string): Promise<boolean> {
     const {publicRuntimeConfig} = getConfig();
     const baseUrl = publicRuntimeConfig.API_URL;
-    
-    const response = await fetch(`${baseUrl}/sessions/${token}`);
+
+    const response = await fetch(`https://testswitch-api-staging.herokuapp.com/sessions/${token}`);
     return response.ok;
-}
+}

components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx

@@ -0,0 +1,3 @@
+export function createCandidateTestStatus() {
+
+}

components/CandidateTestView/CandidateTestView.tsx

@@ -6,24 +6,27 @@ import InstructionsBlock from "./Instructions/Instructions";
 
 interface CandidateTestViewProps {
     test: CandidateTestModel;
+    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>
+                <p className={scss.instructionsSubheader}><strong>{candidateTestViewProps.test.title}</strong></p>
                 <div id={"testInstructions"} className={scss.instructions}>
                     {InstructionsBlock(candidateTestViewProps.test)}
                 </div>
             </section>
-            <section className={scss.textEditor}>
+            <div className={scss.textEditor}>
                 <TextEditorContainer 
                      height="50vh" 
                      width="100%"
                      defaultText={candidateTestViewProps.test.testStarterCode}
+                     token={candidateTestViewProps.token}
+                     testId={candidateTestViewProps.test.number}
                 />
-            </section>
+            </div>
         </div>
 
 );

components/CandidateTestView/Instructions/Instructions.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import scss from "../Instructions/Instructions.module.scss";
+import scss from "../CandidateTestView.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.instructionsSubheader}><strong>Example</strong></p>
         <p className={scss.instructionList}>{testModel.example}</p>
-        <h2>Input/Output</h2>
+        <p className={scss.instructionsSubheader}><strong>Input/Output</strong></p>
         <ul className={scss.instructionList}>
             <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>

components/CandidateTestView/candidateTestView.module.scss

@@ -1,82 +1,108 @@
 @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;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+
 }
-
 .testInstructions {
-  height: 500px;
-  max-width: 50vw;
-
-}
-.instructionList {
-  margin-bottom: 1em;
+ padding: 1vw;
 }
 
-.testInstructionsHeader {
-  color: $techSwitchWhite;
+.instructionsSubheader {
   font-size: $desktopSubHeaderFontSize;
-  margin-bottom: 12px;
-  padding: 5px;
+  line-height: 1rem;
 }
 
 .testInstructions {
+  box-sizing: border-box;
   color: $techSwitchWhite;
   white-space: pre-wrap;
-  font-size: $bodyFontSize;
+  font-size: $desktopBodyFontSize;
   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;
+  margin-left: 1rem;
+  line-height: 130%;
+
 }
 
 .textEditor {
+  box-sizing: border-box;
   color: $techSwitchWhite;
-  font-size: $buttonFontSize;
-  justify-content: right;
+  font-size: $desktopBodyFontSize;
   margin-top: 5vh;
   margin-right: 1vw;
+  width: 50vw;
 }
 
 .testTitle {
+  box-sizing: border-box;
   color: $techSwitchYellow;
-  font-size: 30pt;
+  font-size: $desktopHeaderFontSize;
   max-width: 40vw;
   white-space: nowrap;
-  margin: 5px;
-  padding: 5px;
-  top: 1vh;
-  right: 2vw;
-  overflow: hidden;
   position: absolute;
+  top: 0;
+  right: 0;
   text-align: right;
+  margin: 0.5rem;
 }
 
-.editorBox {
-  border-style: solid;
-  border-width: 5px;
-  border-color: $techSwitchYellow;
-}
+//Media Queries
 
-.sampleInputOutput {
-  margin: 5px;
-  padding: 5px;
-  top: 85vh;
-  left: 46vw;
-  display: flex;
-  flex-direction: column;
-  line-height: 0;
-  position: absolute;
-  overflow: hidden;
-}
+        //@media (min-width: $mediaHighResMinWidth){
+        //  //High Resolution 2000px and above
+        //  .instructionsSubheader {
+        //    box-sizing: border-box;
+        //    font-size: $highResSubHeaderFontSize;
+        //  }
+        //  .instructionsHeader {
+        //    font-size: $highResSubHeaderFontSize;
+        //  }
+        //  .testInstructions {
+        //    font-size: $highResBodyFontSize;
+        //    line-height: 200%;
+        //  }
+        //  .testTitle {
+        //    font-size: $highResHeaderFontSize;
+        //    margin-top: 0.5vh;
+        //    margin-bottom: 0.8vh;
+        //    padding: 2.5rem;
+        //  }
+        //  .buttonYellow{
+        //    @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResBodyFontSize);
+        //    min-width: 15vw;
+        //    margin: 3rem;
+        //  }
+        //}
+        @media (max-width: $mediaLowResMaxWidth){
+          //Low Resolution 900px and below
+          .instructionsSubheader {
+            box-sizing: border-box;
+            font-size: $lowResSubHeaderFontSize;
+          }
+          .instructionsHeader {
+            font-size: $lowResSubHeaderFontSize;
+          }
+          .testInstructions {
+            font-size: $lowResBodyFontSize;
+          }
+          .testTitle {
+            font-size: $lowResHeaderFontSize;
+            white-space: normal;
+            overflow-wrap: break-spaces;
+            margin-right: 1rem;
+            margin-top: 1.5rem;
+          }
+          .buttonYellow{
+            @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResBodyFontSize);
+            max-width: 40vw;
+          }
+        }
 
 

components/Layout/layout.module.scss

@@ -3,30 +3,34 @@
 .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: 20vw;
+  padding: 0.2rem;
+  margin: 0.2rem;
   align-self: flex-start;
 }
 
-@media (min-width: 768px){
-  .logoHeader{
-    width: 200px;
+//@media (min-width: $mediaHighResMinWidth){
+//  .logoHeader {
+//    //High Resolution 2000px and above
+//   width: 12vw;
+//  }
+//}
+@media (max-width: $mediaLowResMaxWidth){
+  .logoHeader {
+    //Low Resolution 900px and below
+    width: 40vw;
+
   }
 }
 
-.layoutHeader {
-  width: 100vw;
-  text-align: left;
-}
+

components/Layout/layout.tsx

@@ -5,8 +5,7 @@ type LayoutProps = {children: React.ReactNode };
 const Layout = ({children}: LayoutProps): JSX.Element => (
     <section>
     <header title={"layoutHeader"} className={scss.layoutHeader}>
-        <img className={scss.logoHeader} alt="TechSwitch" src={'/logo.png'}>
-        </img>
+        <img className={scss.logoHeader} alt="TechSwitch" src={'/logo.png'}/>
         </header>
         <main className={scss.layout}>
         {children}

components/TestLibraryStepper/TestLibraryStepper.tsx

@@ -1,41 +1,48 @@
 import React from "react";
 import {Step, StepLabel, Stepper, Typography} from '@material-ui/core';
 import {MuiThemeProvider} from '@material-ui/core/styles';
-import {CandidateTestStatus} from "../../pages/api/candidateApiClient.module";
 import TestSwitchStepIcon from "../TestLibraryStepperIcons/TestLibraryStepperIcons";
 import {h1Style, TestSwitchConnector, TestSwitchTheme} from "../TestLibraryOverrides/TestLibraryOverrides"
 import scss from '../TestLibraryStepper/TestLibraryStepper.module.scss';
+import {TestList} from "../CandidateTestView/Tests/TestList";
+import {testToRender} from "../../pages";
 import TokenLink from "../TokenLink/TokenLink";
 
+interface CandidateTestStatus {
+    testName: string;
+    testStatus: string;
+}
 
 interface TestLibraryStepperProps {
-    candidateTestStatus: CandidateTestStatus[];
+    candidateTestStatuses: CandidateTestStatus[];
 }
 
-function getSteps() {
-    //TODO: mock data, set number of steps based on test range, maybe props.candidateTestStatus.tests.length?
-    const testNumber = 3;
-
+function getSteps(): string[] {
     //set labels for steps
-    const testLabelArray = [];
-    while (testLabelArray.length + 1 <= testNumber) {
-        testLabelArray.push(`Test ${testLabelArray.length + 1}`);
-    }
+    const testLabelArray = TestList.map(test => test.title)
+    const dummyTest = testLabelArray.shift();
     return testLabelArray;
 }
 
+function getActiveStep(testArr: CandidateTestStatus[]): number {
+    //check for number of completed tests
+    const completedTests = (testArr.filter(({testStatus}) => testStatus === "Completed"));
+    return completedTests.length;
+}
+
+
 export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.Element {
     const steps = getSteps();
-    //TODO this is example data, set active step with candidate number of results, maybe props.candidateTestStatus.results.length?
-    const activeStep = 1;
+    const activeStep = getActiveStep(props.candidateTestStatuses);
 
     return (
         <article className="stepperContainer">
             <MuiThemeProvider theme={TestSwitchTheme}>
                 <Stepper style={{backgroundColor: "transparent"}} alternativeLabel activeStep={activeStep}
-                         connector={<TestSwitchConnector/>}>
+                         connector
+                             ={<TestSwitchConnector/>}>
                     {steps.map((label, status) => (
-                        <Step key={label}>
+                        <Step key={label.length}>
                             <StepLabel StepIconComponent={TestSwitchStepIcon} className="stepLabel"><h1
                                 style={h1Style}>{label}</h1>
                             </StepLabel>
@@ -45,12 +52,12 @@ export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.
             </MuiThemeProvider>
             <section className="stepperBtnContainer">
                 {activeStep === steps.length ? (
-                    <Typography align={"center"} className="finished">
+                    <Typography style={h1Style} align={"center"} className="finished">
                         All tests completed.
                     </Typography>
                 ) : (
                     <Typography align={"center"}>
-                        <TokenLink href={`/test${activeStep + 1}`}>
+                        <TokenLink href={`/test${activeStep + 1}`} as={testToRender.title}>
                             <a className={scss.buttonYellow}>
                                 {activeStep === steps.length - 1 ? 'Start Final Test' : `Start Test ${activeStep + 1}`}
                             </a>
@@ -61,4 +68,4 @@ export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.
         </article>
     )
 }
-    
+