From c0df01700bc8c931e90ae9b2e8d19358e0e57c39 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 28 Apr 2020 18:26:10 +0100 Subject: [PATCH 01/61] step 1 --- .../TestLibraryStepper/TestLibraryStepper.tsx | 13 +++++++------ pages/index.tsx | 4 ++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 130da34..250d4b0 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -6,6 +6,8 @@ import TestSwitchStepIcon from "../TestLibraryStepperIcons/TestLibraryStepperIco import {h1Style, TestSwitchConnector, TestSwitchTheme} from "../TestLibraryOverrides/TestLibraryOverrides" import Link from "next/link"; import scss from '../../pageStyles/index.module.scss'; +import {TestList} from "../CandidateTestView/Tests/TestList"; +import {testToRender} from "../../pages"; interface TestLibraryStepperProps { @@ -14,7 +16,8 @@ interface TestLibraryStepperProps { function getSteps() { //TODO: mock data, set number of steps based on test range, maybe props.candidateTestStatus.tests.length? - const testNumber = 3; + //Temporarily counts tests in list + const testNumber = TestList.length; //set labels for steps const testLabelArray = []; @@ -27,7 +30,7 @@ function getSteps() { 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 = 0; return (
@@ -50,10 +53,8 @@ export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX. ) : ( - - - {activeStep === steps.length - 1 ? 'Start Final Test' : `Start Test ${activeStep + 1}`} - + + {activeStep === steps.length - 1 ? 'Start Final Test' : `Start Test ${activeStep + 1}`} )} diff --git a/pages/index.tsx b/pages/index.tsx index d7ee82d..6ff3eb8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -18,8 +18,8 @@ const Home: NextPage = () =>
  • You must complete the test in one sitting
  • When you are ready and sure you won’t be disturbed, please click “Start”
    • - - Start + + Start Tests ; From dfd672b8d9a55a86cbaa371b049766bfe652fafc Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 29 Apr 2020 18:04:19 +0100 Subject: [PATCH 02/61] Integrate stepper --- components/TestLibraryStepper/TestLibraryStepper.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 05c4786..5508814 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -6,6 +6,8 @@ import TestSwitchStepIcon from "../TestLibraryStepperIcons/TestLibraryStepperIco import {h1Style, TestSwitchConnector, TestSwitchTheme} from "../TestLibraryOverrides/TestLibraryOverrides" import Link from "next/link"; import scss from '../TestLibraryStepper/TestLibraryStepper.module.scss'; +import {TestList} from "../CandidateTestView/Tests/TestList"; +import {testToRender} from "../../pages"; interface TestLibraryStepperProps { From 8758f629b8152a53a3384b16f4606dd730ae9d16 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 30 Apr 2020 14:05:28 +0100 Subject: [PATCH 03/61] Working on media queries --- .../candidateTestView.module.scss | 4 +- components/Layout/layout.module.scss | 31 ++++--- components/Layout/layout.tsx | 3 +- pageStyles/constants.scss | 32 +++++--- pageStyles/index.module.scss | 80 +++++++++++++++---- 5 files changed, 109 insertions(+), 41 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 26e9b5b..f08535a 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -41,7 +41,7 @@ .textEditor { color: $techSwitchWhite; - font-size: $buttonFontSize; + font-size: $desktopButtonFontSize; justify-content: right; margin-top: 5vh; margin-right: 1vw; @@ -49,7 +49,7 @@ .testTitle { color: $techSwitchYellow; - font-size: 30pt; + font-size: $desktopHeaderFontSize; max-width: 40vw; white-space: nowrap; margin: 5px; diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index f3bda09..c50e095 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -12,21 +12,30 @@ body { margin: 0; } - + .logoHeader { - width: 100px; - padding: 15px; - margin: 6px; + width: 20rem; + padding: 1rem; + margin: 1rem; align-self: flex-start; } -@media (min-width: 768px){ - .logoHeader{ - width: 200px; - } -} - .layoutHeader { width: 100vw; text-align: left; -} \ No newline at end of file +} + +@media (min-width: $mediaHighResMinWidth){ + .logoHeader { + //High Resolution 2000px and above + width: 25rem; + } +} +@media (max-width: $mediaLowResMaxWidth){ + .logoHeader { + //Low Resolution 800px and below + width: 12rem; + } +} + + diff --git a/components/Layout/layout.tsx b/components/Layout/layout.tsx index cf580dd..f9e0853 100644 --- a/components/Layout/layout.tsx +++ b/components/Layout/layout.tsx @@ -5,8 +5,7 @@ type LayoutProps = {children: React.ReactNode }; const Layout = ({children}: LayoutProps): JSX.Element => (
    - TechSwitch - + TechSwitch
    {children} diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index ce71694..076fea0 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -1,19 +1,31 @@ -//Default Header Width -$welcomeHeaderWidth: 760px; -//Site Colours +//Site Colours $techSwitchBlack: rgb(24, 24, 24); $techSwitchYellow: rgb(255, 193, 0); $techSwitchWhite: rgb(255, 255, 255); //Fonts $techSwitchFont: Open Sans, sans-serif; -$desktopHeaderFontSize: 60px; -$desktopSubHeaderFontSize: 36px; -$buttonFontSize: 27px; -$bodyFontSize: 20px; + //Desktop + $desktopHeaderFontSize: 2.5rem; + $desktopSubHeaderFontSize: 2rem; + $desktopButtonFontSize: 1.5rem; + $bodyFontSize: 1rem; + + //Low Resolution 800px and below + $mediaLowResMaxWidth: 800px; + $lowResHeaderFontSize: 2rem; + $lowResSubHeaderFontSize: 1.5rem; + $lowResButtonFontSize: 1.25rem; + + //High Resolution 2000px and above + $mediaHighResMinWidth: 2000px; + $highResHeaderFontSize: 5rem; + $highResSubHeaderFontSize: 4.6rem; + $highResButtonFontSize: 4rem; + $highResBodyFontSize: 3.6rem; //Buttons -@mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow) { +@mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow, $fontSize: $desktopButtonFontSize) { width: 180px; height: 60px; margin-top: 20px; @@ -23,9 +35,9 @@ $bodyFontSize: 20px; border: 5px solid $techSwitchYellow; color: $inverseColour; font-family: $techSwitchFont; - font-size: $buttonFontSize; + font-size: $fontSize; text-align: center; - text-decoration: none; + text-decoration: none; transition: all 250ms ease; background: $backgroundColour; diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index 9eb25d8..0f05b03 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -3,9 +3,9 @@ .welcome { color: $techSwitchYellow; font-size: $desktopHeaderFontSize; - max-width: $welcomeHeaderWidth; - margin: 5px; - padding: 5px; + max-width: 40vw; + margin: 1rem; + padding: 1rem; } .content { @@ -15,8 +15,8 @@ flex-direction: column; flex-wrap: wrap; justify-content: center; - padding: 3px; - font-family: Open Sans, sans-serif; + padding: 0.5rem; + font-family: $techSwitchFont; text-decoration: none; text-align: center; } @@ -24,25 +24,73 @@ .instructionsHeader { color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; - margin-top: 24px; - margin-bottom: 12px; - padding: 5px; + margin-top: 1.5vh; + margin-bottom: 0.8vh; + padding: 1rem; } .instructions { color: $techSwitchWhite; - font-size: $buttonFontSize; + font-size: $bodyFontSize; justify-content: left; text-align: left; - padding: 5px; - margin-top: 12px; - margin-bottom: 24px; - margin-right: 5px; - margin-left: 5px; - max-width: $welcomeHeaderWidth; + padding: 1rem; + margin-top: 1vh; + margin-bottom: 2vh; + margin-right: 1vw; + margin-left: 1vw; + max-width: 40vw; } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack) + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $desktopButtonFontSize) +} + + + +@media (min-width: $mediaHighResMinWidth){ + //High Resolution 2000px and above + .welcome { + font-size: $highResHeaderFontSize; + } + .instructionsHeader { + font-size: $highResSubHeaderFontSize; + margin-top: 2vh; + margin-bottom: 0.8vh; + padding: 2.5rem; + } + .instructions { + font-size: $highResBodyFontSize; + padding: 2rem; + margin-top: 1vh; + margin-bottom: 0.8vh; + } + .buttonYellow{ + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize) + } +} +@media (max-width: $mediaLowResMaxWidth){ + //Low Resolution 800px and below + .welcome { + font-size: $lowResHeaderFontSize; + max-width: 80vw; + margin: 0.5rem; + padding: 0.5rem; + } + .instructionsHeader { + font-size: $lowResSubHeaderFontSize; + margin-top: 0.75vh; + margin-bottom: 0.4vh; + padding: 0.5rem; + } + .instructions { + padding: 0.8rem; + margin: 0.8vh 0.2vw; + max-width: 80vw; + } + .buttonYellow{ + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize) + max-width: 40vw; + } } From 28006b75d01ea4bf281dac6bd6c57b806d519cee Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 30 Apr 2020 14:09:57 +0100 Subject: [PATCH 04/61] Working on media queries --- components/Layout/layout.module.scss | 8 +++++--- pageStyles/index.module.scss | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index c50e095..c54fb25 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -14,7 +14,7 @@ body { } .logoHeader { - width: 20rem; + width: 15vw; padding: 1rem; margin: 1rem; align-self: flex-start; @@ -28,13 +28,15 @@ body { @media (min-width: $mediaHighResMinWidth){ .logoHeader { //High Resolution 2000px and above - width: 25rem; + width: 10vw; } } @media (max-width: $mediaLowResMaxWidth){ .logoHeader { //Low Resolution 800px and below - width: 12rem; + width: 50vw; + padding: 0.2rem; + margin: 0.2rem; } } diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index 0f05b03..cd8deda 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -73,7 +73,7 @@ .welcome { font-size: $lowResHeaderFontSize; max-width: 80vw; - margin: 0.5rem; + margin: 0.2em; padding: 0.5rem; } .instructionsHeader { From 0b5f788b68e80c9db14c80b5f5ac857ed73eb51d Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 30 Apr 2020 14:14:25 +0100 Subject: [PATCH 05/61] Working on media queries --- pageStyles/index.module.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index cd8deda..ba1dc65 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -24,9 +24,9 @@ .instructionsHeader { color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; - margin-top: 1.5vh; - margin-bottom: 0.8vh; - padding: 1rem; + margin-top: 1vh; + margin-bottom: 0.2vh; + padding: 0.5rem; } .instructions { @@ -66,6 +66,8 @@ } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize) + min-width: 10vw; + margin: 3rem; } } @media (max-width: $mediaLowResMaxWidth){ @@ -80,7 +82,7 @@ font-size: $lowResSubHeaderFontSize; margin-top: 0.75vh; margin-bottom: 0.4vh; - padding: 0.5rem; + padding: 0.25rem; } .instructions { padding: 0.8rem; @@ -88,7 +90,7 @@ max-width: 80vw; } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize) + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); max-width: 40vw; } } From f53152bcaa1f859d194573914a06b58d41512224 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 30 Apr 2020 14:14:38 +0100 Subject: [PATCH 06/61] Working on media queries --- pageStyles/index.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index ba1dc65..c294ed3 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -65,7 +65,7 @@ margin-bottom: 0.8vh; } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize) + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); min-width: 10vw; margin: 3rem; } From 80bb986cfbfbd5614e7c23992f074e3f7b739f8e Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 30 Apr 2020 14:24:04 +0100 Subject: [PATCH 07/61] Working on media queries --- .../candidateTestView.module.scss | 69 ++++++++++--- pageStyles/index.module.scss | 96 +++++++++---------- 2 files changed, 105 insertions(+), 60 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index f08535a..998f7d0 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -1,6 +1,7 @@ @import "../../pageStyles/constants"; .testPage { - max-height: 800px; + box-sizing: border-box; + max-height: 100vh; max-width: 100vw; display: flex; flex-direction: column; @@ -9,15 +10,18 @@ } .testInstructions { + box-sizing: border-box; height: 500px; max-width: 50vw; } .instructionList { + box-sizing: border-box; margin-bottom: 1em; } .testInstructionsHeader { + box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; margin-bottom: 12px; @@ -25,6 +29,7 @@ } .testInstructions { + box-sizing: border-box; color: $techSwitchWhite; white-space: pre-wrap; font-size: $bodyFontSize; @@ -40,6 +45,7 @@ } .textEditor { + box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopButtonFontSize; justify-content: right; @@ -48,6 +54,7 @@ } .testTitle { + box-sizing: border-box; color: $techSwitchYellow; font-size: $desktopHeaderFontSize; max-width: 40vw; @@ -67,16 +74,54 @@ 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 Queries + + @media (min-width: $mediaHighResMinWidth){ + //High Resolution 2000px and above + .welcome { + font-size: $highResHeaderFontSize; + } + .instructionsHeader { + font-size: $highResSubHeaderFontSize; + margin-top: 2vh; + margin-bottom: 0.8vh; + padding: 2.5rem; + } + .instructions { + font-size: $highResBodyFontSize; + padding: 2rem; + margin-top: 1vh; + margin-bottom: 0.8vh; + } + .buttonYellow{ + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); + min-width: 10vw; + margin: 3rem; + } + } + @media (max-width: $mediaLowResMaxWidth){ + //Low Resolution 800px and below + .welcome { + font-size: $lowResHeaderFontSize; + max-width: 80vw; + margin: 0.2em; + padding: 0.5rem; + } + .instructionsHeader { + font-size: $lowResSubHeaderFontSize; + margin-top: 0.75vh; + margin-bottom: 0.4vh; + padding: 0.25rem; + } + .instructions { + padding: 0.8rem; + margin: 0.8vh 0.2vw; + max-width: 80vw; + } + .buttonYellow{ + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); + max-width: 40vw; + } + } diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index c294ed3..34907f2 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -45,55 +45,55 @@ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $desktopButtonFontSize) } + //Media Queries - -@media (min-width: $mediaHighResMinWidth){ - //High Resolution 2000px and above - .welcome { - font-size: $highResHeaderFontSize; - } - .instructionsHeader { - font-size: $highResSubHeaderFontSize; - margin-top: 2vh; - margin-bottom: 0.8vh; - padding: 2.5rem; - } - .instructions { - font-size: $highResBodyFontSize; - padding: 2rem; - margin-top: 1vh; - margin-bottom: 0.8vh; - } - .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); - min-width: 10vw; - margin: 3rem; - } -} -@media (max-width: $mediaLowResMaxWidth){ - //Low Resolution 800px and below - .welcome { - font-size: $lowResHeaderFontSize; - max-width: 80vw; - margin: 0.2em; - padding: 0.5rem; - } - .instructionsHeader { - font-size: $lowResSubHeaderFontSize; - margin-top: 0.75vh; - margin-bottom: 0.4vh; - padding: 0.25rem; - } - .instructions { - padding: 0.8rem; - margin: 0.8vh 0.2vw; - max-width: 80vw; - } - .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); - max-width: 40vw; - } -} + @media (min-width: $mediaHighResMinWidth){ + //High Resolution 2000px and above + .welcome { + font-size: $highResHeaderFontSize; + } + .instructionsHeader { + font-size: $highResSubHeaderFontSize; + margin-top: 2vh; + margin-bottom: 0.8vh; + padding: 2.5rem; + } + .instructions { + font-size: $highResBodyFontSize; + padding: 2rem; + margin-top: 1vh; + margin-bottom: 0.8vh; + } + .buttonYellow{ + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); + min-width: 10vw; + margin: 3rem; + } + } + @media (max-width: $mediaLowResMaxWidth){ + //Low Resolution 800px and below + .welcome { + font-size: $lowResHeaderFontSize; + max-width: 80vw; + margin: 0.2em; + padding: 0.5rem; + } + .instructionsHeader { + font-size: $lowResSubHeaderFontSize; + margin-top: 0.75vh; + margin-bottom: 0.4vh; + padding: 0.25rem; + } + .instructions { + padding: 0.8rem; + margin: 0.8vh 0.2vw; + max-width: 80vw; + } + .buttonYellow{ + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); + max-width: 40vw; + } + } From f964170c4c79ec1d0707068e1f173b09617ba9ff Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 30 Apr 2020 14:28:43 +0100 Subject: [PATCH 08/61] Working on media queries --- components/Layout/layout.module.scss | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index c54fb25..7477b74 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -3,28 +3,20 @@ .layout { background-color: $techSwitchBlack; box-sizing: border-box; - padding: 0; - margin: 0; border-style: none; font-family: $techSwitchFont; + max-height: 100vh; + max-width: 100vw; } -body { - margin: 0; -} - .logoHeader { + box-sizing: border-box; width: 15vw; - padding: 1rem; - margin: 1rem; + padding: 0.6rem; + margin: 0.6rem; align-self: flex-start; } -.layoutHeader { - width: 100vw; - text-align: left; -} - @media (min-width: $mediaHighResMinWidth){ .logoHeader { //High Resolution 2000px and above From 81d930444f1b8dc4a2ece7e4916a1e62ee9d8e2d Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 11:38:36 +0100 Subject: [PATCH 09/61] Media Qs --- components/TextEditor/TextEditorContainer.tsx | 3 +++ ...EditorSettings.ts => TextEditorSettings.tsx} | 17 ++++++++++++++++- pageStyles/index.module.scss | 4 ++-- pages/_document.tsx | 7 +++++-- pages/index.tsx | 9 ++++++++- tsconfig.json | 2 +- 6 files changed, 35 insertions(+), 7 deletions(-) rename components/TextEditor/{TextEditorSettings.ts => TextEditorSettings.tsx} (76%) diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index f6bfdc2..7ab3cb6 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -3,6 +3,7 @@ import Editor from "@monaco-editor/react"; import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; import Link from "next/link"; + type EditorContentGetter = () => string; interface TextEditorContainerProps { @@ -10,6 +11,8 @@ interface TextEditorContainerProps { width: string; defaultText: string; } + + const TextEditorContainer: FunctionComponent = ({height, width, defaultText}) => { const [isEditorReady, setIsEditorReady] = useState(false); const getEditorContentIfMountedRef: MutableRefObject = useRef(() => ""); diff --git a/components/TextEditor/TextEditorSettings.ts b/components/TextEditor/TextEditorSettings.tsx similarity index 76% rename from components/TextEditor/TextEditorSettings.ts rename to components/TextEditor/TextEditorSettings.tsx index f0352ce..a2eb5f0 100644 --- a/components/TextEditor/TextEditorSettings.ts +++ b/components/TextEditor/TextEditorSettings.tsx @@ -1,6 +1,21 @@ import {editor} from "monaco-editor"; +import {screenWidth} from "../../pages"; + type TextEditorOptions = editor.IEditorOptions; +function getFontSize(): number { + let fontSize = 15; + if(!screenWidth) { + return fontSize} + else if(screenWidth < 2000) { + fontSize = 15; + } else if (screenWidth>3000) { + fontSize = 30 + } else { + fontSize = 25; + } + return fontSize; +} const TextEditorSettings: TextEditorOptions = { autoClosingBrackets: "languageDefined", autoClosingQuotes: "languageDefined", @@ -9,11 +24,11 @@ const TextEditorSettings: TextEditorOptions = { enabled: false }, folding: false, - fontSize: 26, minimap: { enabled: true, scale: 100 }, + fontSize: getFontSize(), suggest: { showMethods: false, showFunctions: false, diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index 34907f2..8224a1e 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -3,7 +3,7 @@ .welcome { color: $techSwitchYellow; font-size: $desktopHeaderFontSize; - max-width: 40vw; + max-width: 60vw; margin: 1rem; padding: 1rem; } @@ -39,7 +39,7 @@ margin-bottom: 2vh; margin-right: 1vw; margin-left: 1vw; - max-width: 40vw; + max-width: 60vw; } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $desktopButtonFontSize) diff --git a/pages/_document.tsx b/pages/_document.tsx index ee8b517..758aa14 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,15 +1,18 @@ import Document, {DocumentInitialProps, Head, Html, Main, NextScript} from 'next/document' -import React from "react"; +import React, {useState} from "react"; import {NextPageContext} from "next"; import {RenderPage} from "next/dist/next-server/lib/utils"; import scss from "../components/Layout/layout.module.scss"; + class MyDocument extends Document { static async getInitialProps(ctx: NextPageContext & { renderPage: RenderPage }): Promise { const initialProps = await Document.getInitialProps(ctx); + return {...initialProps} } - + + render(): JSX.Element { return ( diff --git a/pages/index.tsx b/pages/index.tsx index d7ee82d..2f4405b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,7 +6,14 @@ import Link from "next/link"; import {CandidateTestModel} from "../Models/CandidateTestModel"; import {TestList} from "../components/CandidateTestView/Tests/TestList"; +export let screenWidth = 1080; export const testToRender: CandidateTestModel = TestList[1]; +function reportScreenWidth(): number { + screenWidth = screen.width; + window.addEventListener('resize', reportScreenWidth); + return screenWidth; +} + const Home: NextPage = () =>
    @@ -19,7 +26,7 @@ const Home: NextPage = () =>
  • When you are ready and sure you won’t be disturbed, please click “Start”
    • - Start + reportScreenWidth()} className={scss.buttonYellow}>Start
    ; diff --git a/tsconfig.json b/tsconfig.json index f8fc34e..e7e0f29 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "es2017", "lib": [ "dom", "dom.iterable", From 2c07993a9594790313e7b6692d5eca17d31769d1 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 13:32:33 +0100 Subject: [PATCH 10/61] Media Qs --- .../candidateTestView.module.scss | 29 ++++++++++++------- components/Layout/layout.module.scss | 14 ++++----- .../TextEditorContainer.module.scss | 3 +- components/TextEditor/TextEditorContainer.tsx | 2 ++ components/TextEditor/TextEditorSettings.tsx | 2 +- pageStyles/constants.scss | 9 +++--- pages/index.tsx | 2 +- 7 files changed, 36 insertions(+), 25 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 998f7d0..ade05fa 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -3,10 +3,10 @@ box-sizing: border-box; max-height: 100vh; max-width: 100vw; - display: flex; - flex-direction: column; - flex-wrap: wrap; margin-top: 2vh; + display: flex; + flex-direction: row; + justify-content: space-between; } .testInstructions { @@ -48,9 +48,9 @@ box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopButtonFontSize; - justify-content: right; margin-top: 5vh; margin-right: 1vw; + width: 50vw; } .testTitle { @@ -68,12 +68,6 @@ text-align: right; } -.editorBox { - border-style: solid; - border-width: 5px; - border-color: $techSwitchYellow; -} - //Media Queries @media (min-width: $mediaHighResMinWidth){ @@ -93,9 +87,15 @@ margin-top: 1vh; margin-bottom: 0.8vh; } + .testTitle { + font-size: $highResSubHeaderFontSize; + margin-top: 0.5vh; + margin-bottom: 0.8vh; + padding: 2.5rem; + } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); - min-width: 10vw; + min-width: 15vw; margin: 3rem; } } @@ -114,10 +114,17 @@ padding: 0.25rem; } .instructions { + font-size: $lowResBodyFontSize; padding: 0.8rem; margin: 0.8vh 0.2vw; max-width: 80vw; } + .testTitle { + font-size: $lowResSubHeaderFontSize; + margin-top: 0.5vh; + margin-bottom: 0.8vh; + padding: 2.5rem; + } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); max-width: 40vw; diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index 7477b74..c6d14be 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -12,23 +12,23 @@ .logoHeader { box-sizing: border-box; width: 15vw; - padding: 0.6rem; - margin: 0.6rem; + padding: 0.2rem; + margin: 0.2rem; align-self: flex-start; } @media (min-width: $mediaHighResMinWidth){ .logoHeader { //High Resolution 2000px and above - width: 10vw; + width: 450px; } } @media (max-width: $mediaLowResMaxWidth){ .logoHeader { - //Low Resolution 800px and below - width: 50vw; - padding: 0.2rem; - margin: 0.2rem; + //Low Resolution 900px and below + max-width: 70vw; + min-width: 120px; + } } diff --git a/components/TextEditor/TextEditorContainer.module.scss b/components/TextEditor/TextEditorContainer.module.scss index 39db66d..97a8987 100644 --- a/components/TextEditor/TextEditorContainer.module.scss +++ b/components/TextEditor/TextEditorContainer.module.scss @@ -1,8 +1,9 @@ @import "../../pageStyles/constants"; .editorBox { + box-sizing: border-box; border-style: solid; border-width: 5px; - width: 50vw; + max-width: 50vw; border-color: $techSwitchYellow; } diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index 7ab3cb6..0f49569 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -3,6 +3,7 @@ import Editor from "@monaco-editor/react"; import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; import Link from "next/link"; +import {reportScreenWidth} from "../../pages"; type EditorContentGetter = () => string; @@ -19,6 +20,7 @@ const TextEditorContainer: FunctionComponent = ({heigh function handleIsEditorMounted(_getEditorContents: EditorContentGetter): void { setIsEditorReady(true); + window.addEventListener('resize', reportScreenWidth); getEditorContentIfMountedRef.current = _getEditorContents; } diff --git a/components/TextEditor/TextEditorSettings.tsx b/components/TextEditor/TextEditorSettings.tsx index a2eb5f0..9365a09 100644 --- a/components/TextEditor/TextEditorSettings.tsx +++ b/components/TextEditor/TextEditorSettings.tsx @@ -12,7 +12,7 @@ function getFontSize(): number { } else if (screenWidth>3000) { fontSize = 30 } else { - fontSize = 25; + fontSize = 20; } return fontSize; } diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 076fea0..092b1c9 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -12,13 +12,14 @@ $techSwitchFont: Open Sans, sans-serif; $bodyFontSize: 1rem; //Low Resolution 800px and below - $mediaLowResMaxWidth: 800px; - $lowResHeaderFontSize: 2rem; - $lowResSubHeaderFontSize: 1.5rem; + $mediaLowResMaxWidth: 900px; + $lowResHeaderFontSize: 1.5rem; + $lowResSubHeaderFontSize: 1.3rem; $lowResButtonFontSize: 1.25rem; + $lowResBodyFontSize: 0.8rem; //High Resolution 2000px and above - $mediaHighResMinWidth: 2000px; + $mediaHighResMinWidth: 2500px; $highResHeaderFontSize: 5rem; $highResSubHeaderFontSize: 4.6rem; $highResButtonFontSize: 4rem; diff --git a/pages/index.tsx b/pages/index.tsx index 2f4405b..da1a9af 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -8,7 +8,7 @@ import {TestList} from "../components/CandidateTestView/Tests/TestList"; export let screenWidth = 1080; export const testToRender: CandidateTestModel = TestList[1]; -function reportScreenWidth(): number { +export function reportScreenWidth(): number { screenWidth = screen.width; window.addEventListener('resize', reportScreenWidth); return screenWidth; From 0dfd2ee4537dc6dfae7ee8a802cd7985c6365cbc Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 14:06:43 +0100 Subject: [PATCH 11/61] Media Qs --- .../candidateTestView.module.scss | 28 +++++++------------ .../TextEditorContainer.module.scss | 25 +++++++++++++++++ pageStyles/constants.scss | 6 ++-- 3 files changed, 38 insertions(+), 21 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index ade05fa..16c735a 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -3,10 +3,10 @@ box-sizing: border-box; max-height: 100vh; max-width: 100vw; - margin-top: 2vh; display: flex; flex-direction: row; justify-content: space-between; + align-items: flex-start; } .testInstructions { @@ -17,15 +17,12 @@ } .instructionList { box-sizing: border-box; - margin-bottom: 1em; } .testInstructionsHeader { box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; - margin-bottom: 12px; - padding: 5px; } .testInstructions { @@ -37,11 +34,7 @@ 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 { @@ -59,13 +52,12 @@ font-size: $desktopHeaderFontSize; max-width: 40vw; white-space: nowrap; - margin: 5px; - padding: 5px; - top: 1vh; - right: 2vw; - overflow: hidden; + overflow-wrap: break-spaces; position: absolute; + top: 0; + right: 0; text-align: right; + margin: 0.5rem; } //Media Queries @@ -100,7 +92,7 @@ } } @media (max-width: $mediaLowResMaxWidth){ - //Low Resolution 800px and below + //Low Resolution 900px and below .welcome { font-size: $lowResHeaderFontSize; max-width: 80vw; @@ -121,9 +113,9 @@ } .testTitle { font-size: $lowResSubHeaderFontSize; - margin-top: 0.5vh; - margin-bottom: 0.8vh; - padding: 2.5rem; + margin-right: 3.8rem; + margin-top: 1.5rem; + } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); diff --git a/components/TextEditor/TextEditorContainer.module.scss b/components/TextEditor/TextEditorContainer.module.scss index 97a8987..1c2f90b 100644 --- a/components/TextEditor/TextEditorContainer.module.scss +++ b/components/TextEditor/TextEditorContainer.module.scss @@ -10,4 +10,29 @@ .buttonBlack{ @include techSwitchButton(); display: block; +} + +@media (min-width: $mediaHighResMinWidth) { + //High Resolution 2000px and above + .editorBox { + border-width: 0.8rem; + } + + .buttonBlack{ + font-size: $highResButtonFontSize; + border-width: 0.8rem; + min-width: 400px; + } +} +@media (max-width: $mediaLowResMaxWidth) { + //Low Resolution 900px and below + .editorBox { + border-width: 0.2rem; + } + + .buttonBlack{ + font-size: $lowResButtonFontSize; + border-width: 0.2rem; + max-width: 40vw; + } } \ No newline at end of file diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 092b1c9..7758e23 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -14,9 +14,9 @@ $techSwitchFont: Open Sans, sans-serif; //Low Resolution 800px and below $mediaLowResMaxWidth: 900px; $lowResHeaderFontSize: 1.5rem; - $lowResSubHeaderFontSize: 1.3rem; - $lowResButtonFontSize: 1.25rem; - $lowResBodyFontSize: 0.8rem; + $lowResSubHeaderFontSize: 1rem; + $lowResButtonFontSize: 0.8rem; + $lowResBodyFontSize: 0.6rem; //High Resolution 2000px and above $mediaHighResMinWidth: 2500px; From 4ce649187ccdfe41faf001ef9ccce0e1473c65ea Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 14:10:35 +0100 Subject: [PATCH 12/61] Media Qs --- pageStyles/constants.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 7758e23..138d5bb 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -21,9 +21,9 @@ $techSwitchFont: Open Sans, sans-serif; //High Resolution 2000px and above $mediaHighResMinWidth: 2500px; $highResHeaderFontSize: 5rem; - $highResSubHeaderFontSize: 4.6rem; - $highResButtonFontSize: 4rem; - $highResBodyFontSize: 3.6rem; + $highResSubHeaderFontSize: 4rem; + $highResButtonFontSize: 3.5rem; + $highResBodyFontSize: 3rem; //Buttons @mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow, $fontSize: $desktopButtonFontSize) { From 591f404c87deabfd74c1e0b548339a7d798fdb1c Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 14:14:42 +0100 Subject: [PATCH 13/61] Media Qs --- .../CandidateTestView/candidateTestView.module.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 16c735a..5142fe6 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -23,6 +23,8 @@ box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; + margin: 0; + padding: 0; } .testInstructions { @@ -41,8 +43,6 @@ box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopButtonFontSize; - margin-top: 5vh; - margin-right: 1vw; width: 50vw; } @@ -57,7 +57,7 @@ top: 0; right: 0; text-align: right; - margin: 0.5rem; + margin-left: 0.5rem; } //Media Queries @@ -69,8 +69,7 @@ } .instructionsHeader { font-size: $highResSubHeaderFontSize; - margin-top: 2vh; - margin-bottom: 0.8vh; + margin-top: 2.5vh; padding: 2.5rem; } .instructions { From 585d04b8a91c2d131ad6de594dcb3e28a81b987c Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 14:45:55 +0100 Subject: [PATCH 14/61] Media Qs --- .../Instructions/Instructions.module.scss | 14 ------- .../Instructions/Instructions.tsx | 2 +- .../candidateTestView.module.scss | 37 ++++++++----------- 3 files changed, 16 insertions(+), 37 deletions(-) delete mode 100644 components/CandidateTestView/Instructions/Instructions.module.scss diff --git a/components/CandidateTestView/Instructions/Instructions.module.scss b/components/CandidateTestView/Instructions/Instructions.module.scss deleted file mode 100644 index fe00c8f..0000000 --- a/components/CandidateTestView/Instructions/Instructions.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -.sampleInputOutput { - margin: 5px; - padding: 5px; - top: 78vh; - left: 46vw; - display: inline-block; - position: absolute; - overflow: hidden; -} -.testInstructions { - height: 500px; - max-width: 50vw; - -} \ No newline at end of file diff --git a/components/CandidateTestView/Instructions/Instructions.tsx b/components/CandidateTestView/Instructions/Instructions.tsx index 5795745..5e8b921 100644 --- a/components/CandidateTestView/Instructions/Instructions.tsx +++ b/components/CandidateTestView/Instructions/Instructions.tsx @@ -1,5 +1,5 @@ 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 => ( diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 5142fe6..51775d8 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -8,23 +8,23 @@ justify-content: space-between; align-items: flex-start; } - .testInstructions { - box-sizing: border-box; - height: 500px; + min-height: 60vh; + max-height: 90vh; + min-width: 40vw; max-width: 50vw; - } + .instructionList { box-sizing: border-box; } - +.instructionsHeader { + font-size: $desktopSubHeaderFontSize; +} .testInstructionsHeader { box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; - margin: 0; - padding: 0; } .testInstructions { @@ -35,7 +35,8 @@ justify-content: left; text-align: left; width: 40vw; - line-height: 1.5; + margin-left: 1rem; + line-height: 200%; } @@ -43,6 +44,8 @@ box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopButtonFontSize; + margin-top: 5vh; + margin-right: 1vw; width: 50vw; } @@ -57,7 +60,7 @@ top: 0; right: 0; text-align: right; - margin-left: 0.5rem; + margin: 0.5rem; } //Media Queries @@ -69,14 +72,9 @@ } .instructionsHeader { font-size: $highResSubHeaderFontSize; - margin-top: 2.5vh; - padding: 2.5rem; } - .instructions { + .testInstructions { font-size: $highResBodyFontSize; - padding: 2rem; - margin-top: 1vh; - margin-bottom: 0.8vh; } .testTitle { font-size: $highResSubHeaderFontSize; @@ -100,15 +98,10 @@ } .instructionsHeader { font-size: $lowResSubHeaderFontSize; - margin-top: 0.75vh; - margin-bottom: 0.4vh; - padding: 0.25rem; } - .instructions { + .testInstructions { font-size: $lowResBodyFontSize; - padding: 0.8rem; - margin: 0.8vh 0.2vw; - max-width: 80vw; + line-height: 150%; } .testTitle { font-size: $lowResSubHeaderFontSize; From 43f71e22eefd383f0d45f8c6b36a7d32af0cc230 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 15:11:21 +0100 Subject: [PATCH 15/61] Media Qs --- pageStyles/index.module.scss | 47 +++++++++++++++--------------------- 1 file changed, 19 insertions(+), 28 deletions(-) diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index 8224a1e..7abd2ce 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -3,9 +3,9 @@ .welcome { color: $techSwitchYellow; font-size: $desktopHeaderFontSize; - max-width: 60vw; margin: 1rem; padding: 1rem; + width: 500px; } .content { @@ -13,20 +13,17 @@ align-items: center; display: flex; flex-direction: column; - flex-wrap: wrap; - justify-content: center; - padding: 0.5rem; + flex-wrap: nowrap; + justify-content: space-between; font-family: $techSwitchFont; text-decoration: none; text-align: center; + height: 40vh; } .instructionsHeader { color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; - margin-top: 1vh; - margin-bottom: 0.2vh; - padding: 0.5rem; } .instructions { @@ -34,12 +31,7 @@ font-size: $bodyFontSize; justify-content: left; text-align: left; - padding: 1rem; - margin-top: 1vh; - margin-bottom: 2vh; - margin-right: 1vw; - margin-left: 1vw; - max-width: 60vw; + width: 500px; } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $desktopButtonFontSize) @@ -48,22 +40,19 @@ //Media Queries @media (min-width: $mediaHighResMinWidth){ - //High Resolution 2000px and above + //High Resolution 2500px and above .welcome { font-size: $highResHeaderFontSize; + width: 1200px; } .instructionsHeader { font-size: $highResSubHeaderFontSize; - margin-top: 2vh; - margin-bottom: 0.8vh; - padding: 2.5rem; } .instructions { font-size: $highResBodyFontSize; - padding: 2rem; - margin-top: 1vh; - margin-bottom: 0.8vh; + width: 1200px; } + .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); min-width: 10vw; @@ -71,23 +60,25 @@ } } @media (max-width: $mediaLowResMaxWidth){ - //Low Resolution 800px and below + //Low Resolution 900px and below .welcome { font-size: $lowResHeaderFontSize; - max-width: 80vw; margin: 0.2em; padding: 0.5rem; + max-width: 500px; + min-width: 250px; } .instructionsHeader { font-size: $lowResSubHeaderFontSize; - margin-top: 0.75vh; - margin-bottom: 0.4vh; - padding: 0.25rem; + max-width: 500px; + min-width: 250px; } + .instructions { - padding: 0.8rem; - margin: 0.8vh 0.2vw; - max-width: 80vw; + width: 50vw; + font-size: $lowResBodyFontSize; + max-width: 500px; + min-width: 250px; } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); From d645c296c744d693725f436f40f5ac61264d87ac Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 15:15:08 +0100 Subject: [PATCH 16/61] Media Qs --- components/CandidateTestView/candidateTestView.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 51775d8..3eedd31 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -7,6 +7,7 @@ flex-direction: row; justify-content: space-between; align-items: flex-start; + padding: 0.8rem; } .testInstructions { min-height: 60vh; From 1bf4e1b3e526604b7e89e4190b8c253f724581bd Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 15:24:12 +0100 Subject: [PATCH 17/61] Media Qs --- pageStyles/submitted.module.scss | 46 +++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/pageStyles/submitted.module.scss b/pageStyles/submitted.module.scss index c00e385..b831c33 100644 --- a/pageStyles/submitted.module.scss +++ b/pageStyles/submitted.module.scss @@ -17,12 +17,56 @@ .content { width: 100%; + height: 50vh; + text-align: center; align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; - justify-content: center; + justify-content: space-between; padding: 3px; font-family: Open Sans, sans-serif; text-decoration: none; } + + +//Media Queries + +@media (min-width: $mediaHighResMinWidth){ + //High Resolution 2000px and above + .submitHeader { + font-size: $highResHeaderFontSize; + max-width: 1200px; + } + .thankyou { + font-size: $highResSubHeaderFontSize; + } + .submitMessage { + font-size: $highResButtonFontSize; + max-width: 1200px; + } + +} +@media (max-width: $mediaLowResMaxWidth){ + //Low Resolution 900px and below + .submitHeader { + font-size: $lowResHeaderFontSize; + max-width: 80vw; + margin: 0.2em; + padding: 0.5rem; + } + .thankyou { + font-size: $lowResSubHeaderFontSize; + max-width: 80vw; + margin: 0.2em; + padding: 0.5rem; + } + .submitMessage { + font-size: $lowResButtonFontSize; + line-height: 150%; + max-width: 80vw; + margin: 0.2em; + padding: 0.5rem; + } + +} \ No newline at end of file From b7a308f378b6a4c13ba8688c939f2eddff6817d0 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 16:07:00 +0100 Subject: [PATCH 18/61] Media Qs --- .../candidateTestView.module.scss | 28 +++++++------------ .../TextEditorContainer.module.scss | 4 +-- components/TextEditor/TextEditorSettings.tsx | 4 +-- pageStyles/constants.scss | 12 ++++---- pageStyles/index.module.scss | 8 +++--- pageStyles/submitted.module.scss | 4 +-- 6 files changed, 25 insertions(+), 35 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 3eedd31..239f6d4 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -32,19 +32,19 @@ box-sizing: border-box; color: $techSwitchWhite; white-space: pre-wrap; - font-size: $bodyFontSize; + font-size: $desktopBodyFontSize; justify-content: left; text-align: left; width: 40vw; margin-left: 1rem; - line-height: 200%; + line-height: 130%; } .textEditor { box-sizing: border-box; color: $techSwitchWhite; - font-size: $desktopButtonFontSize; + font-size: $desktopBodyFontSize; margin-top: 5vh; margin-right: 1vw; width: 50vw; @@ -68,50 +68,42 @@ @media (min-width: $mediaHighResMinWidth){ //High Resolution 2000px and above - .welcome { - font-size: $highResHeaderFontSize; - } + .instructionsHeader { font-size: $highResSubHeaderFontSize; } .testInstructions { font-size: $highResBodyFontSize; + line-height: 200%; } .testTitle { - font-size: $highResSubHeaderFontSize; + font-size: $highResHeaderFontSize; margin-top: 0.5vh; margin-bottom: 0.8vh; padding: 2.5rem; } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResBodyFontSize); min-width: 15vw; margin: 3rem; } } @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below - .welcome { - font-size: $lowResHeaderFontSize; - max-width: 80vw; - margin: 0.2em; - padding: 0.5rem; - } + .instructionsHeader { font-size: $lowResSubHeaderFontSize; } .testInstructions { font-size: $lowResBodyFontSize; - line-height: 150%; } .testTitle { - font-size: $lowResSubHeaderFontSize; + font-size: $lowResHeaderFontSize; margin-right: 3.8rem; margin-top: 1.5rem; - } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResBodyFontSize); max-width: 40vw; } } diff --git a/components/TextEditor/TextEditorContainer.module.scss b/components/TextEditor/TextEditorContainer.module.scss index 1c2f90b..effe04f 100644 --- a/components/TextEditor/TextEditorContainer.module.scss +++ b/components/TextEditor/TextEditorContainer.module.scss @@ -19,7 +19,7 @@ } .buttonBlack{ - font-size: $highResButtonFontSize; + font-size: $highResBodyFontSize; border-width: 0.8rem; min-width: 400px; } @@ -31,7 +31,7 @@ } .buttonBlack{ - font-size: $lowResButtonFontSize; + font-size: $lowResBodyFontSize; border-width: 0.2rem; max-width: 40vw; } diff --git a/components/TextEditor/TextEditorSettings.tsx b/components/TextEditor/TextEditorSettings.tsx index 9365a09..ad32391 100644 --- a/components/TextEditor/TextEditorSettings.tsx +++ b/components/TextEditor/TextEditorSettings.tsx @@ -4,7 +4,7 @@ import {screenWidth} from "../../pages"; type TextEditorOptions = editor.IEditorOptions; function getFontSize(): number { - let fontSize = 15; + let fontSize = 18; if(!screenWidth) { return fontSize} else if(screenWidth < 2000) { @@ -12,7 +12,7 @@ function getFontSize(): number { } else if (screenWidth>3000) { fontSize = 30 } else { - fontSize = 20; + fontSize = 25; } return fontSize; } diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 138d5bb..8de61b6 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -8,25 +8,23 @@ $techSwitchFont: Open Sans, sans-serif; //Desktop $desktopHeaderFontSize: 2.5rem; $desktopSubHeaderFontSize: 2rem; - $desktopButtonFontSize: 1.5rem; - $bodyFontSize: 1rem; + $desktopBodyFontSize: 1.5rem; //Low Resolution 800px and below $mediaLowResMaxWidth: 900px; $lowResHeaderFontSize: 1.5rem; $lowResSubHeaderFontSize: 1rem; - $lowResButtonFontSize: 0.8rem; - $lowResBodyFontSize: 0.6rem; + $lowResBodyFontSize: 1rem; + //High Resolution 2000px and above $mediaHighResMinWidth: 2500px; $highResHeaderFontSize: 5rem; $highResSubHeaderFontSize: 4rem; - $highResButtonFontSize: 3.5rem; - $highResBodyFontSize: 3rem; + $highResBodyFontSize: 3.5rem; //Buttons -@mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow, $fontSize: $desktopButtonFontSize) { +@mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow, $fontSize: $desktopBodyFontSize) { width: 180px; height: 60px; margin-top: 20px; diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index 7abd2ce..19dd4ef 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -28,13 +28,13 @@ .instructions { color: $techSwitchWhite; - font-size: $bodyFontSize; + font-size: $desktopBodyFontSize; justify-content: left; text-align: left; width: 500px; } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $desktopButtonFontSize) + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $desktopBodyFontSize) } //Media Queries @@ -54,7 +54,7 @@ } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResButtonFontSize); + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResBodyFontSize); min-width: 10vw; margin: 3rem; } @@ -81,7 +81,7 @@ min-width: 250px; } .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResButtonFontSize); + @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResBodyFontSize); max-width: 40vw; } } diff --git a/pageStyles/submitted.module.scss b/pageStyles/submitted.module.scss index b831c33..8c95290 100644 --- a/pageStyles/submitted.module.scss +++ b/pageStyles/submitted.module.scss @@ -42,7 +42,7 @@ font-size: $highResSubHeaderFontSize; } .submitMessage { - font-size: $highResButtonFontSize; + font-size: $highResBodyFontSize; max-width: 1200px; } @@ -62,7 +62,7 @@ padding: 0.5rem; } .submitMessage { - font-size: $lowResButtonFontSize; + font-size: $lowResBodyFontSize; line-height: 150%; max-width: 80vw; margin: 0.2em; From 7a58f1b2227551cc2c985f5292dc5e622ab2e08f Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 16:16:37 +0100 Subject: [PATCH 19/61] Media Qs --- components/TextEditor/TextEditorSettings.tsx | 8 +++----- pages/index.tsx | 3 +-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/components/TextEditor/TextEditorSettings.tsx b/components/TextEditor/TextEditorSettings.tsx index ad32391..42e919d 100644 --- a/components/TextEditor/TextEditorSettings.tsx +++ b/components/TextEditor/TextEditorSettings.tsx @@ -4,15 +4,13 @@ import {screenWidth} from "../../pages"; type TextEditorOptions = editor.IEditorOptions; function getFontSize(): number { - let fontSize = 18; - if(!screenWidth) { - return fontSize} - else if(screenWidth < 2000) { + let fontSize: number; + if(screenWidth < 1000) { fontSize = 15; } else if (screenWidth>3000) { fontSize = 30 } else { - fontSize = 25; + fontSize = 20; } return fontSize; } diff --git a/pages/index.tsx b/pages/index.tsx index da1a9af..fedbd3b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -20,8 +20,7 @@ const Home: NextPage = () =>

    Welcome to the Test Zone

    Test Instructions

      -
    • There is no time limit for this test, but time taken will be reviewed as part of our assessment. -
      • +
    • There is no time limit for this test, but time taken will be reviewed as part of our assessment.
    • You must complete the test in one sitting
    • When you are ready and sure you won’t be disturbed, please click “Start”
    From 3c522950c3c734062a97d23a532cb1d666ea0984 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 16:34:19 +0100 Subject: [PATCH 20/61] Media Qs --- pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index fedbd3b..a84b356 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -24,7 +24,7 @@ const Home: NextPage = () =>
  • You must complete the test in one sitting
  • When you are ready and sure you won’t be disturbed, please click “Start”
    • - + reportScreenWidth()} className={scss.buttonYellow}>Start
    From 41919753e67bca9b1a19e489c393fb952a7b3d1e Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Fri, 1 May 2020 16:41:28 +0100 Subject: [PATCH 21/61] Media Qs --- components/TestLibraryStepper/TestLibraryStepper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 5508814..99d11fe 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -14,7 +14,7 @@ interface TestLibraryStepperProps { candidateTestStatus: CandidateTestStatus[]; } -function getSteps() { +function getSteps(): string[] { //TODO: mock data, set number of steps based on test range, maybe props.candidateTestStatus.tests.length? //Temporarily counts tests in list const testNumber = TestList.length; From 0f90eaf05c14957040c00fe160536714fbb16636 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Sun, 3 May 2020 15:00:07 +0100 Subject: [PATCH 22/61] improved media queries --- .../CandidateTestView/CandidateTestView.tsx | 14 ++++----- .../Instructions/Instructions.tsx | 4 +-- .../candidateTestView.module.scss | 31 +++++++++---------- components/Layout/layout.module.scss | 9 +++--- pages/api/candidateApiClient.module.ts | 18 +++++++++++ 5 files changed, 46 insertions(+), 30 deletions(-) diff --git a/components/CandidateTestView/CandidateTestView.tsx b/components/CandidateTestView/CandidateTestView.tsx index e52fde7..6f9bc98 100644 --- a/components/CandidateTestView/CandidateTestView.tsx +++ b/components/CandidateTestView/CandidateTestView.tsx @@ -11,19 +11,19 @@ const CandidateTestView = (candidateTestViewProps: CandidateTestViewProps): JSX.

    Test {candidateTestViewProps.test.number}: {candidateTestViewProps.test.title}

    -
    -

    {candidateTestViewProps.test.title}

    -
    +
    +

    {candidateTestViewProps.test.title}

    +
    {InstructionsBlock(candidateTestViewProps.test)} -
    -
    -
    +
    +
    +
    - +
    ); diff --git a/components/CandidateTestView/Instructions/Instructions.tsx b/components/CandidateTestView/Instructions/Instructions.tsx index 5e8b921..656d085 100644 --- a/components/CandidateTestView/Instructions/Instructions.tsx +++ b/components/CandidateTestView/Instructions/Instructions.tsx @@ -5,9 +5,9 @@ import {CandidateTestModel} from "../../../Models/CandidateTestModel"; const InstructionsBlock = (testModel: CandidateTestModel): JSX.Element => (

    {testModel.brief}

    -

    Example

    +

    Example

    {testModel.example}

    -

    Input/Output

    +

    Input/Output

    • [input] {testModel.inputType}
      {testModel.inputDescription}
    • [output] {testModel.outputType}
      {testModel.outputDescription}
      • diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 239f6d4..9996f4b 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -7,25 +7,15 @@ flex-direction: row; justify-content: space-between; align-items: flex-start; - padding: 0.8rem; + } .testInstructions { - min-height: 60vh; - max-height: 90vh; - min-width: 40vw; - max-width: 50vw; + padding: 1vw; } -.instructionList { - box-sizing: border-box; -} -.instructionsHeader { - font-size: $desktopSubHeaderFontSize; -} -.testInstructionsHeader { - box-sizing: border-box; - color: $techSwitchWhite; +.instructionsSubheader { font-size: $desktopSubHeaderFontSize; + line-height: 1rem; } .testInstructions { @@ -56,7 +46,6 @@ font-size: $desktopHeaderFontSize; max-width: 40vw; white-space: nowrap; - overflow-wrap: break-spaces; position: absolute; top: 0; right: 0; @@ -68,7 +57,10 @@ @media (min-width: $mediaHighResMinWidth){ //High Resolution 2000px and above - + .instructionsSubheader { + box-sizing: border-box; + font-size: $highResSubHeaderFontSize; + } .instructionsHeader { font-size: $highResSubHeaderFontSize; } @@ -90,7 +82,10 @@ } @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below - + .instructionsSubheader { + box-sizing: border-box; + font-size: $lowResSubHeaderFontSize; + } .instructionsHeader { font-size: $lowResSubHeaderFontSize; } @@ -99,6 +94,8 @@ } .testTitle { font-size: $lowResHeaderFontSize; + white-space: normal; + overflow-wrap: break-spaces; margin-right: 3.8rem; margin-top: 1.5rem; } diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index c6d14be..9f59d6c 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -7,11 +7,13 @@ font-family: $techSwitchFont; max-height: 100vh; max-width: 100vw; + margin: 0; + padding: 0; } .logoHeader { box-sizing: border-box; - width: 15vw; + width: 20vw; padding: 0.2rem; margin: 0.2rem; align-self: flex-start; @@ -20,14 +22,13 @@ @media (min-width: $mediaHighResMinWidth){ .logoHeader { //High Resolution 2000px and above - width: 450px; + width: 12vw; } } @media (max-width: $mediaLowResMaxWidth){ .logoHeader { //Low Resolution 900px and below - max-width: 70vw; - min-width: 120px; + width: 40vw; } } diff --git a/pages/api/candidateApiClient.module.ts b/pages/api/candidateApiClient.module.ts index a4660d1..4445332 100644 --- a/pages/api/candidateApiClient.module.ts +++ b/pages/api/candidateApiClient.module.ts @@ -1,9 +1,14 @@ import fetch from "node-fetch"; +import getConfig from 'next/config'; export interface CandidateTestStatus { testId: string; testResult: string; } +export interface NewTestSubmission{ + testId: number; + testAnswer: string; +} const baseUrl = `https://localhost:5001`; @@ -36,3 +41,16 @@ export async function getCandidateTests() { return error.message; } } + +export async function addTestSubmisson( 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), + }); +} From 35e1a74d7b3f5eb47e3f085aa0949bd464de9d25 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Sun, 3 May 2020 15:01:36 +0100 Subject: [PATCH 23/61] improved media queries --- components/CandidateTestView/candidateTestView.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 9996f4b..75fe009 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -96,7 +96,7 @@ font-size: $lowResHeaderFontSize; white-space: normal; overflow-wrap: break-spaces; - margin-right: 3.8rem; + margin-right: 1rem; margin-top: 1.5rem; } .buttonYellow{ From 8f3abcdc42e803a64d11cb4c21b57cf4a7d8a0b6 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Mon, 4 May 2020 13:19:51 +0100 Subject: [PATCH 24/61] reverted to section structure --- components/CandidateTestView/CandidateTestView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/CandidateTestView/CandidateTestView.tsx b/components/CandidateTestView/CandidateTestView.tsx index 6f9bc98..0c12e95 100644 --- a/components/CandidateTestView/CandidateTestView.tsx +++ b/components/CandidateTestView/CandidateTestView.tsx @@ -11,12 +11,12 @@ const CandidateTestView = (candidateTestViewProps: CandidateTestViewProps): JSX.

      Test {candidateTestViewProps.test.number}: {candidateTestViewProps.test.title}

      -
      +

      {candidateTestViewProps.test.title}

      -
      +
      {InstructionsBlock(candidateTestViewProps.test)} -
      -
      +
      +
      Date: Mon, 4 May 2020 13:33:59 +0100 Subject: [PATCH 25/61] changes requested --- components/TextEditor/TextEditorSettings.tsx | 14 +---- pages/api/candidateApiClient.module.ts | 56 -------------------- pages/index.tsx | 8 +-- 3 files changed, 2 insertions(+), 76 deletions(-) delete mode 100644 pages/api/candidateApiClient.module.ts diff --git a/components/TextEditor/TextEditorSettings.tsx b/components/TextEditor/TextEditorSettings.tsx index 42e919d..f13ff8e 100644 --- a/components/TextEditor/TextEditorSettings.tsx +++ b/components/TextEditor/TextEditorSettings.tsx @@ -1,19 +1,7 @@ import {editor} from "monaco-editor"; -import {screenWidth} from "../../pages"; type TextEditorOptions = editor.IEditorOptions; -function getFontSize(): number { - let fontSize: number; - if(screenWidth < 1000) { - fontSize = 15; - } else if (screenWidth>3000) { - fontSize = 30 - } else { - fontSize = 20; - } - return fontSize; -} const TextEditorSettings: TextEditorOptions = { autoClosingBrackets: "languageDefined", autoClosingQuotes: "languageDefined", @@ -26,7 +14,7 @@ const TextEditorSettings: TextEditorOptions = { enabled: true, scale: 100 }, - fontSize: getFontSize(), + fontSize: 18, suggest: { showMethods: false, showFunctions: false, diff --git a/pages/api/candidateApiClient.module.ts b/pages/api/candidateApiClient.module.ts deleted file mode 100644 index 4445332..0000000 --- a/pages/api/candidateApiClient.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -import fetch from "node-fetch"; -import getConfig from 'next/config'; - -export interface CandidateTestStatus { - testId: string; - testResult: string; -} -export interface NewTestSubmission{ - testId: number; - testAnswer: string; -} - -const baseUrl = `https://localhost:5001`; - -export async function getCandidateTestResults() { - try { - const result = await fetch( - //TODO: placeholder endpoint - `https://testswitch-api-staging.herokuapp.com/candidates` - ); - const data = await result.json(); - //TODO: configure for future api call to candidate results, this is currently set to the candidates endpoint - return data.items; - } catch (error) { - console.error(error); - return error.message; - } -} - -export async function getCandidateTests() { - try { - const result = await fetch( - //TODO: placeholder endpoint - `https://testswitch-api-staging.herokuapp.com/candidates` - ); - const data = await result.json(); - //TODO: configure for future api call to candidate results, this is currently set to the candidates endpoint - return data.items[0].id; - } catch (error) { - console.error(error); - return error.message; - } -} - -export async function addTestSubmisson( 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), - }); -} diff --git a/pages/index.tsx b/pages/index.tsx index a84b356..6fc39f2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -6,13 +6,7 @@ import Link from "next/link"; import {CandidateTestModel} from "../Models/CandidateTestModel"; import {TestList} from "../components/CandidateTestView/Tests/TestList"; -export let screenWidth = 1080; export const testToRender: CandidateTestModel = TestList[1]; -export function reportScreenWidth(): number { - screenWidth = screen.width; - window.addEventListener('resize', reportScreenWidth); - return screenWidth; -} const Home: NextPage = () => @@ -25,7 +19,7 @@ const Home: NextPage = () =>
    • When you are ready and sure you won’t be disturbed, please click “Start”
    - reportScreenWidth()} className={scss.buttonYellow}>Start + Start ; From 0755992b02da5be41f563d184b5fef3dd83def56 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Mon, 4 May 2020 13:56:14 +0100 Subject: [PATCH 26/61] changes requested --- Models/CandidateTestModel.ts | 10 ++++ .../CandidateTestStatus.tsx | 3 ++ .../candidateTestView.module.scss | 50 +++++++++---------- components/Layout/layout.module.scss | 12 ++--- .../TestLibraryStepper/TestLibraryStepper.tsx | 7 +-- .../TextEditorContainer.module.scss | 24 ++++----- pageStyles/constants.scss | 13 ++--- pageStyles/index.module.scss | 39 +++++++-------- pageStyles/submitted.module.scss | 28 +++++------ 9 files changed, 95 insertions(+), 91 deletions(-) create mode 100644 components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx diff --git a/Models/CandidateTestModel.ts b/Models/CandidateTestModel.ts index 18157f9..28f101c 100644 --- a/Models/CandidateTestModel.ts +++ b/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; +} \ No newline at end of file diff --git a/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx b/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx new file mode 100644 index 0000000..1338621 --- /dev/null +++ b/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx @@ -0,0 +1,3 @@ +export function createCandidateTestStatus() { + +} \ No newline at end of file diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 75fe009..7162358 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -55,31 +55,31 @@ //Media Queries - @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 (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 { diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index 9f59d6c..5aa19e6 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -19,12 +19,12 @@ align-self: flex-start; } -@media (min-width: $mediaHighResMinWidth){ - .logoHeader { - //High Resolution 2000px and above - width: 12vw; - } -} +//@media (min-width: $mediaHighResMinWidth){ +// .logoHeader { +// //High Resolution 2000px and above +// width: 12vw; +// } +//} @media (max-width: $mediaLowResMaxWidth){ .logoHeader { //Low Resolution 900px and below diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 99d11fe..d202974 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -1,18 +1,13 @@ 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 Link from "next/link"; import scss from '../TestLibraryStepper/TestLibraryStepper.module.scss'; import {TestList} from "../CandidateTestView/Tests/TestList"; import {testToRender} from "../../pages"; - - -interface TestLibraryStepperProps { - candidateTestStatus: CandidateTestStatus[]; -} +import {TestLibraryStepperProps} from "../../Models/CandidateTestModel"; function getSteps(): string[] { //TODO: mock data, set number of steps based on test range, maybe props.candidateTestStatus.tests.length? diff --git a/components/TextEditor/TextEditorContainer.module.scss b/components/TextEditor/TextEditorContainer.module.scss index effe04f..454c1f7 100644 --- a/components/TextEditor/TextEditorContainer.module.scss +++ b/components/TextEditor/TextEditorContainer.module.scss @@ -12,18 +12,18 @@ display: block; } -@media (min-width: $mediaHighResMinWidth) { - //High Resolution 2000px and above - .editorBox { - border-width: 0.8rem; - } - - .buttonBlack{ - font-size: $highResBodyFontSize; - border-width: 0.8rem; - min-width: 400px; - } -} +//@media (min-width: $mediaHighResMinWidth) { +// //High Resolution 2000px and above +// .editorBox { +// border-width: 0.8rem; +// } +// +// .buttonBlack{ +// font-size: $highResBodyFontSize; +// border-width: 0.8rem; +// min-width: 400px; +// } +//} @media (max-width: $mediaLowResMaxWidth) { //Low Resolution 900px and below .editorBox { diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 8de61b6..dc89cab 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -9,19 +9,16 @@ $techSwitchFont: Open Sans, sans-serif; $desktopHeaderFontSize: 2.5rem; $desktopSubHeaderFontSize: 2rem; $desktopBodyFontSize: 1.5rem; - - //Low Resolution 800px and below + $mediaLowResMaxWidth: 900px; $lowResHeaderFontSize: 1.5rem; $lowResSubHeaderFontSize: 1rem; $lowResBodyFontSize: 1rem; - - //High Resolution 2000px and above - $mediaHighResMinWidth: 2500px; - $highResHeaderFontSize: 5rem; - $highResSubHeaderFontSize: 4rem; - $highResBodyFontSize: 3.5rem; + //$mediaHighResMinWidth: 2500px; + //$highResHeaderFontSize: 5rem; + //$highResSubHeaderFontSize: 4rem; + //$highResBodyFontSize: 3.5rem; //Buttons @mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow, $fontSize: $desktopBodyFontSize) { diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index 19dd4ef..f395f60 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -39,26 +39,25 @@ //Media Queries - @media (min-width: $mediaHighResMinWidth){ - //High Resolution 2500px and above - .welcome { - font-size: $highResHeaderFontSize; - width: 1200px; - } - .instructionsHeader { - font-size: $highResSubHeaderFontSize; - } - .instructions { - font-size: $highResBodyFontSize; - width: 1200px; - } - - .buttonYellow{ - @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResBodyFontSize); - min-width: 10vw; - margin: 3rem; - } - } + //@media (min-width: $mediaHighResMinWidth){ + // //High Resolution 2500px and above + // .welcome { + // font-size: $highResHeaderFontSize; + // width: 1200px; + // } + // .instructionsHeader { + // font-size: $highResSubHeaderFontSize; + // } + // .instructions { + // font-size: $highResBodyFontSize; + // width: 1200px; + // } + // .buttonYellow{ + // @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResBodyFontSize); + // min-width: 10vw; + // margin: 3rem; + // } + //} @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below .welcome { diff --git a/pageStyles/submitted.module.scss b/pageStyles/submitted.module.scss index 8c95290..8582291 100644 --- a/pageStyles/submitted.module.scss +++ b/pageStyles/submitted.module.scss @@ -32,21 +32,21 @@ //Media Queries -@media (min-width: $mediaHighResMinWidth){ - //High Resolution 2000px and above - .submitHeader { - font-size: $highResHeaderFontSize; - max-width: 1200px; - } - .thankyou { - font-size: $highResSubHeaderFontSize; - } - .submitMessage { - font-size: $highResBodyFontSize; - max-width: 1200px; - } +//@media (min-width: $mediaHighResMinWidth){ +// //High Resolution 2000px and above +// .submitHeader { +// font-size: $highResHeaderFontSize; +// max-width: 1200px; +// } +// .thankyou { +// font-size: $highResSubHeaderFontSize; +// } +// .submitMessage { +// font-size: $highResBodyFontSize; +// max-width: 1200px; +// } +//} -} @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below .submitHeader { From 07ef78b53236a1cc353fb636ab7785daa41567d1 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 5 May 2020 12:22:39 +0100 Subject: [PATCH 27/61] . --- components/TextEditor/TextEditorContainer.tsx | 17 ++++++++--------- pages/index.tsx | 5 +++-- pages/testlibrary.tsx | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index a94ae85..9e02d79 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -24,31 +24,30 @@ const TextEditorContainer: FunctionComponent = ({heigh const [error, setError] = useState(""); const getEditorContentIfMountedRef: MutableRefObject = useRef(() => ""); const router=useRouter(); - + function handleIsEditorMounted(_getEditorContents: EditorContentGetter): void { setIsEditorReady(true); - window.addEventListener('resize', reportScreenWidth); getEditorContentIfMountedRef.current = _getEditorContents; } - + function submitForm() { const testAnswer=getEditorContentIfMountedRef.current(); addTestSubmisson(token,{testId,testAnswer}) - .then((response)=>{ + .then((response)=>{ if (response.ok) { router.push('/submitted'); } else { throw Error(response.statusText); } - }) + }) .catch(error=>{console.log(error); setError("There was an error submitting your test")}); - + } return ( - +

    {error}

    @@ -67,8 +66,8 @@ const TextEditorContainer: FunctionComponent = ({heigh Submit Code
    - + ); }; -export default TextEditorContainer; \ No newline at end of file +export default TextEditorContainer; diff --git a/pages/index.tsx b/pages/index.tsx index ccc2a7d..0e4f5a0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,6 +5,7 @@ import Layout from "../components/Layout/layout"; import {CandidateTestModel} from "../Models/CandidateTestModel"; import {TestList} from "../components/CandidateTestView/Tests/TestList"; import TokenLink from "../components/TokenLink/TokenLink"; +import Link from "next/link"; export const testToRender: CandidateTestModel = TestList[1]; @@ -18,9 +19,9 @@ const Home: NextPage = () =>
  • You must complete the test in one sitting
  • When you are ready and sure you won’t be disturbed, please click “Start”
    • - + Start - + ; export default Home; diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index b4beeef..ff1af00 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -20,7 +20,7 @@ const TestLibrary: NextPage = ({sessionCandidate}) => { TestSwitch Test Library - + ); }; @@ -40,4 +40,4 @@ export const getServerSideProps: GetServerSideProps = async context => { }; -export default TestLibrary; \ No newline at end of file +export default TestLibrary; From adb11d8987d85c8d5c65f14fb34fbea91ff70a36 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 5 May 2020 12:40:34 +0100 Subject: [PATCH 28/61] Incorporating tokens --- .../TestLibraryStepper/TestLibraryStepper.tsx | 9 +++---- components/TextEditor/TextEditorContainer.tsx | 6 ++--- components/TokenLink/TokenLink.tsx | 8 +++--- pages/api/candidateApiClient.module.ts | 26 +++++++++---------- pages/index.tsx | 5 ++-- 5 files changed, 25 insertions(+), 29 deletions(-) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 00dac59..ec9531d 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -6,7 +6,6 @@ import {h1Style, TestSwitchConnector, TestSwitchTheme} from "../TestLibraryOverr import scss from '../TestLibraryStepper/TestLibraryStepper.module.scss'; import {TestList} from "../CandidateTestView/Tests/TestList"; import {testToRender} from "../../pages"; -import {TestLibraryStepperProps} from "../../Models/CandidateTestModel"; import TokenLink from "../TokenLink/TokenLink"; interface CandidateTestStatus { @@ -18,14 +17,14 @@ interface TestLibraryStepperProps { candidateTestStatuses: CandidateTestStatus[]; } -function getSteps(testArr: CandidateTestStatus[]) { +function getSteps(testArr: CandidateTestStatus[]): string[][] { //set labels for steps const testLabelArray = []; testLabelArray.push(testArr.map(test => test.testName)); return testLabelArray; } -function getActiveStep(testArr: CandidateTestStatus[]) { +function getActiveStep(testArr: CandidateTestStatus[]): number { //check for number of completed tests const completedTests = (testArr.filter(({testStatus}) => testStatus === "Completed")); return completedTests.length; @@ -58,7 +57,7 @@ export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX. ) : ( - + {activeStep === steps.length - 1 ? 'Start Final Test' : `Start Test ${activeStep + 1}`} @@ -69,4 +68,4 @@ export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.
    ) } - + diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index 9e02d79..2afd499 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -4,7 +4,7 @@ import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; import Link from "next/link"; import TokenLink from "../TokenLink/TokenLink"; -import {addTestSubmisson} from "../../pages/api/candidateApiClient.module"; +import {addTestSubmission} from "../../pages/api/candidateApiClient.module"; import {useRouter} from "next/router"; import {Response} from "node-fetch"; @@ -33,7 +33,7 @@ const TextEditorContainer: FunctionComponent = ({heigh function submitForm() { const testAnswer=getEditorContentIfMountedRef.current(); - addTestSubmisson(token,{testId,testAnswer}) + addTestSubmission(token,{testId,testAnswer}) .then((response)=>{ if (response.ok) { router.push('/submitted'); @@ -59,7 +59,7 @@ const TextEditorContainer: FunctionComponent = ({heigh value={defaultText} editorDidMount={handleIsEditorMounted} options={TextEditorSettings} - + /> diff --git a/components/TokenLink/TokenLink.tsx b/components/TokenLink/TokenLink.tsx index 53bf2c7..28beb33 100644 --- a/components/TokenLink/TokenLink.tsx +++ b/components/TokenLink/TokenLink.tsx @@ -3,17 +3,17 @@ import {useRouter} from "next/router"; import Link from "next/link"; -type TokenLinkProps = {children: React.ReactNode; href: string} +type TokenLinkProps = {children: React.ReactNode; href: string; as: string} const TokenLink: React.FunctionComponent = ({children, href}: TokenLinkProps) => { const router = useRouter(); - + return ( {children} ) - + }; -export default TokenLink; \ No newline at end of file +export default TokenLink; diff --git a/pages/api/candidateApiClient.module.ts b/pages/api/candidateApiClient.module.ts index 9df4a96..851890d 100644 --- a/pages/api/candidateApiClient.module.ts +++ b/pages/api/candidateApiClient.module.ts @@ -22,25 +22,23 @@ export async function getSessionCandidate(token: string): Promise
  • You must complete the test in one sitting
  • When you are ready and sure you won’t be disturbed, please click “Start”
    • - + Start - + ; export default Home; From 5be20bd7dfc8ff3ba264ad453f40dd68d520ef7c Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 5 May 2020 13:23:00 +0100 Subject: [PATCH 29/61] Incorporating tokens --- components/TestLibraryStepper/TestLibraryStepper.tsx | 6 +++--- pages/testlibrary.tsx | 10 ++++------ 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index ec9531d..4d75d2d 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -17,10 +17,10 @@ interface TestLibraryStepperProps { candidateTestStatuses: CandidateTestStatus[]; } -function getSteps(testArr: CandidateTestStatus[]): string[][] { +function getSteps(): string[][] { //set labels for steps const testLabelArray = []; - testLabelArray.push(testArr.map(test => test.testName)); + testLabelArray.push(TestList.map(test => test.title)); return testLabelArray; } @@ -32,7 +32,7 @@ function getActiveStep(testArr: CandidateTestStatus[]): number { export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.Element { - const steps = getSteps(props.candidateTestStatuses); + const steps = getSteps(); const activeStep = getActiveStep(props.candidateTestStatuses); return ( diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index 7fafd7e..771c0b9 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -6,11 +6,11 @@ import {getSessionCandidate, SessionCandidate} from "./api/candidateApiClient.mo import Layout from "../components/Layout/layout"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; -interface TestlibraryProps { +interface TestLibraryProps { sessionCandidate: SessionCandidate; } -const TestLibrary: NextPage = ({sessionCandidate}) => { +const TestLibrary: NextPage = ({sessionCandidate}) => { const [key, setKey] = React.useState(0); React.useEffect(() => { @@ -27,16 +27,14 @@ const TestLibrary: NextPage = ({sessionCandidate}) => { }; //TODO placeholder id for candidateID,until url has token as query -const candidateToken = `815b47a8-0b7a-4d6a-99e9-2fe130c5b774`; +const candidateToken = `df1ccacc-8b94-4c5e-a190-caf3f5e860b6`; export const getServerSideProps: GetServerSideProps = async ({query, res}) => { await assertTokenIsValid(query, res); - const tests = getCandidateTests(); - const results = getCandidateTestResults(); return { props: { - sessionCandidate: await sessionData + sessionCandidate: await getSessionCandidate(candidateToken) } } }; From e2e8db07e2f88c6c0d438771875e4250c1f47f89 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 5 May 2020 13:28:59 +0100 Subject: [PATCH 30/61] Incorporating tokens --- api/sessionClient.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/api/sessionClient.ts b/api/sessionClient.ts index 295c822..3afc3f5 100644 --- a/api/sessionClient.ts +++ b/api/sessionClient.ts @@ -4,7 +4,7 @@ import fetch from "node-fetch"; export async function checkToken(token: string): Promise { 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; -} \ No newline at end of file +} From e348f84e374266d6f093616c5fabcd51470ed248 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 5 May 2020 13:40:16 +0100 Subject: [PATCH 31/61] Stepper checks tests remaining --- components/TestLibraryStepper/TestLibraryStepper.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 4d75d2d..fd85554 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -17,10 +17,10 @@ interface TestLibraryStepperProps { candidateTestStatuses: CandidateTestStatus[]; } -function getSteps(): string[][] { +function getSteps(): string[] { //set labels for steps - const testLabelArray = []; - testLabelArray.push(TestList.map(test => test.title)); + const testLabelArray = TestList.map(test => test.title) + const dummyTest = testLabelArray.shift(); return testLabelArray; } From 972f98805f2160b3779eb94a878da154c2fde062 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 5 May 2020 14:08:32 +0100 Subject: [PATCH 32/61] Stepper checks tests remaining --- components/Layout/layout.module.scss | 8 +------ .../TextEditorContainer.module.scss | 14 +---------- components/TextEditor/TextEditorContainer.tsx | 14 +++++------ pageStyles/constants.scss | 5 ---- pageStyles/index.module.scss | 23 ++----------------- pageStyles/submitted.module.scss | 19 ++------------- 6 files changed, 12 insertions(+), 71 deletions(-) diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index 5aa19e6..8544318 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -19,17 +19,11 @@ align-self: flex-start; } -//@media (min-width: $mediaHighResMinWidth){ -// .logoHeader { -// //High Resolution 2000px and above -// width: 12vw; -// } -//} @media (max-width: $mediaLowResMaxWidth){ .logoHeader { //Low Resolution 900px and below width: 40vw; - + } } diff --git a/components/TextEditor/TextEditorContainer.module.scss b/components/TextEditor/TextEditorContainer.module.scss index e49f6aa..aa90530 100644 --- a/components/TextEditor/TextEditorContainer.module.scss +++ b/components/TextEditor/TextEditorContainer.module.scss @@ -12,18 +12,6 @@ display: block; } -//@media (min-width: $mediaHighResMinWidth) { -// //High Resolution 2000px and above -// .editorBox { -// border-width: 0.8rem; -// } -// -// .buttonBlack{ -// font-size: $highResBodyFontSize; -// border-width: 0.8rem; -// min-width: 400px; -// } -//} @media (max-width: $mediaLowResMaxWidth) { //Low Resolution 900px and below .editorBox { @@ -39,4 +27,4 @@ .error{ color: $errorMessage; -} \ No newline at end of file +} diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index 2afd499..d8a8469 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -2,11 +2,10 @@ import React, {FormEvent, FunctionComponent, MutableRefObject, useRef, useState} import Editor from "@monaco-editor/react"; import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; -import Link from "next/link"; import TokenLink from "../TokenLink/TokenLink"; import {addTestSubmission} from "../../pages/api/candidateApiClient.module"; import {useRouter} from "next/router"; -import {Response} from "node-fetch"; +import {testToRender} from "../../pages"; type EditorContentGetter = () => string; @@ -31,19 +30,18 @@ const TextEditorContainer: FunctionComponent = ({heigh } - function submitForm() { - const testAnswer=getEditorContentIfMountedRef.current(); + function submitForm(): void { + const testAnswer = getEditorContentIfMountedRef.current(); addTestSubmission(token,{testId,testAnswer}) .then((response)=>{ if (response.ok) { - router.push('/submitted'); + router.push('/testlibrary'); } else { throw Error(response.statusText); } }) .catch(error=>{console.log(error); setError("There was an error submitting your test")}); - } return ( @@ -62,8 +60,8 @@ const TextEditorContainer: FunctionComponent = ({heigh /> - - Submit Code + + diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 8bae575..921401f 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -16,11 +16,6 @@ $techSwitchFont: Open Sans, sans-serif; $lowResSubHeaderFontSize: 1rem; $lowResBodyFontSize: 1rem; - //$mediaHighResMinWidth: 2500px; - //$highResHeaderFontSize: 5rem; - //$highResSubHeaderFontSize: 4rem; - //$highResBodyFontSize: 3.5rem; - //Buttons @mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow, $fontSize: $desktopBodyFontSize) { width: 180px; diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index f395f60..24bd1d8 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -39,25 +39,6 @@ //Media Queries - //@media (min-width: $mediaHighResMinWidth){ - // //High Resolution 2500px and above - // .welcome { - // font-size: $highResHeaderFontSize; - // width: 1200px; - // } - // .instructionsHeader { - // font-size: $highResSubHeaderFontSize; - // } - // .instructions { - // font-size: $highResBodyFontSize; - // width: 1200px; - // } - // .buttonYellow{ - // @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $highResBodyFontSize); - // min-width: 10vw; - // margin: 3rem; - // } - //} @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below .welcome { @@ -65,14 +46,14 @@ margin: 0.2em; padding: 0.5rem; max-width: 500px; - min-width: 250px; + min-width: 250px; } .instructionsHeader { font-size: $lowResSubHeaderFontSize; max-width: 500px; min-width: 250px; } - + .instructions { width: 50vw; font-size: $lowResBodyFontSize; diff --git a/pageStyles/submitted.module.scss b/pageStyles/submitted.module.scss index 8582291..81db4f8 100644 --- a/pageStyles/submitted.module.scss +++ b/pageStyles/submitted.module.scss @@ -32,21 +32,6 @@ //Media Queries -//@media (min-width: $mediaHighResMinWidth){ -// //High Resolution 2000px and above -// .submitHeader { -// font-size: $highResHeaderFontSize; -// max-width: 1200px; -// } -// .thankyou { -// font-size: $highResSubHeaderFontSize; -// } -// .submitMessage { -// font-size: $highResBodyFontSize; -// max-width: 1200px; -// } -//} - @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below .submitHeader { @@ -68,5 +53,5 @@ margin: 0.2em; padding: 0.5rem; } - -} \ No newline at end of file + +} From 452df1a43af6d3f9f1a8983253452c1fe9baad70 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Tue, 5 May 2020 14:56:51 +0100 Subject: [PATCH 33/61] Stepper checks tests remaining --- components/TestLibraryStepper/TestLibraryStepper.tsx | 2 +- components/TextEditor/TextEditorContainer.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index fd85554..1ed553c 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -57,7 +57,7 @@ export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX. ) : ( - + {activeStep === steps.length - 1 ? 'Start Final Test' : `Start Test ${activeStep + 1}`} diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index d8a8469..11fead0 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -9,8 +9,6 @@ import {testToRender} from "../../pages"; type EditorContentGetter = () => string; - - interface TextEditorContainerProps { height: string; width: string; @@ -44,6 +42,9 @@ const TextEditorContainer: FunctionComponent = ({heigh setError("There was an error submitting your test")}); } + const handleSubmit = () => { + submitForm(); + } return (
    From 6e7b3358af377a08cfdc38006fb15a8dfc5e9df6 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 11:26:02 +0100 Subject: [PATCH 34/61] Auto stash before merge of "TestPage-TestLibrary-Integration" and "origin/master" --- Models/CandidateTestModel.ts | 11 ----- api/sessionClient.ts | 43 +++++++++++++++++++ .../CandidateTestStatus.tsx | 38 ++++++++++++++-- components/TextEditor/TextEditorContainer.tsx | 2 +- helpers/tokenHelpers.ts | 5 ++- pages/_document.tsx | 7 ++- pages/index.tsx | 8 +--- pages/submitted.tsx | 10 +---- pages/testlibrary.tsx | 16 +++++-- pages/testpage.tsx | 15 +++---- 10 files changed, 107 insertions(+), 48 deletions(-) diff --git a/Models/CandidateTestModel.ts b/Models/CandidateTestModel.ts index 28f101c..c0b63f2 100644 --- a/Models/CandidateTestModel.ts +++ b/Models/CandidateTestModel.ts @@ -11,14 +11,3 @@ export interface CandidateTestModel { outputDescription: string; expectedOutput: string | number; } - -export interface CandidateTestStatusModel { - candidateTest: CandidateTestModel; - testStartedTimeStamp: number | undefined; - testSubmittedTimeStamp: number | undefined; -} - -export interface TestLibraryStepperProps { - candidateTestsStatus: CandidateTestStatusModel[]; - candidateUniqueUrl: string; -} \ No newline at end of file diff --git a/api/sessionClient.ts b/api/sessionClient.ts index 3afc3f5..337658f 100644 --- a/api/sessionClient.ts +++ b/api/sessionClient.ts @@ -1,5 +1,13 @@ import getConfig from 'next/config'; import fetch from "node-fetch"; +import {CandidateTestStatus} from "../components/CandidateTestView/CandidateTestStatus/CandidateTestStatus"; +import {GetServerSideProps} from "next"; +import {assertTokenIsValid} from "../helpers/tokenHelpers"; + +export const getServerSideProps: GetServerSideProps = async ({res, query}) => { + await assertTokenIsValid(query, res); + return { props: {}}; +}; export async function checkToken(token: string): Promise { const {publicRuntimeConfig} = getConfig(); @@ -8,3 +16,38 @@ export async function checkToken(token: string): Promise { const response = await fetch(`https://testswitch-api-staging.herokuapp.com/sessions/${token}`); return response.ok; } +export interface SessionCandidate { + firstName: string; + lastName: string; + testStatuses: CandidateTestStatus[]; +} +export interface NewTestSubmission{ + testId: number; + testAnswer: string; +} +export async function getSessionCandidate(token: string): Promise { + const baseUrl = `https://testswitch-api-staging.herokuapp.com/sessions/`; + try { + const result = await fetch( + `${baseUrl}${token}` + ); + return await result.json(); + } catch (error) { + console.error(error); + return error.message; + } +} + +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), + }); + +} diff --git a/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx b/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx index 1338621..2268972 100644 --- a/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx +++ b/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx @@ -1,3 +1,35 @@ -export function createCandidateTestStatus() { - -} \ No newline at end of file +import {CandidateTestModel} from "../../../Models/CandidateTestModel"; +import {getSessionCandidate} from "../../../api/sessionClient"; +import {TestList} from "../Tests/TestList"; + +export interface CandidateTestStatus { + testName: string; + testStatus: string; +} + +async function getCandidateTestStatus(test: string, candidateToken: string, testList: CandidateTestModel[]): Promise { + const sessionCandidate = await getSessionCandidate(candidateToken); + const testStatuses: CandidateTestStatus[] = sessionCandidate.testStatuses; + const completedTests = (testStatuses.filter(({testStatus}) => testStatus === "Completed")); + const thisTest = (completedTests.filter(({testName}) => testName === test)); + let status: string; + if(thisTest.length === 1){ + status = "complete" + } else if (thisTest.length === 0) { + status = "pending" + } else { status = "error - duplicate test title"} + return { + testName: test, + testStatus: status, + }; +} + +export async function getCandidateTestStatuses(candidateToken: string, testList: CandidateTestModel[]): Promise { + const allTests = TestList.map(test => test.title) + const dummyTest = allTests.shift(); + const candidateTestStatuses: CandidateTestStatus[] = []; + for(let i = 0; i < (allTests.length-1); i++) { + candidateTestStatuses.push(await getCandidateTestStatus(allTests[i], candidateToken, testList)); + } + return candidateTestStatuses; +} diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index c3f795a..fa910ae 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -3,9 +3,9 @@ import Editor from "@monaco-editor/react"; import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; import TokenLink from "../TokenLink/TokenLink"; -import {addTestSubmission} from "../../pages/api/candidateApiClient.module"; import {useRouter} from "next/router"; import {testToRender} from "../../pages"; +import {addTestSubmission} from "../../api/sessionClient"; type EditorContentGetter = () => string; diff --git a/helpers/tokenHelpers.ts b/helpers/tokenHelpers.ts index c1db993..1f21358 100644 --- a/helpers/tokenHelpers.ts +++ b/helpers/tokenHelpers.ts @@ -2,12 +2,13 @@ import {ParsedUrlQuery} from "querystring"; import {checkToken} from "../api/sessionClient"; -export async function assertTokenIsValid(query: ParsedUrlQuery, response: ServerResponse): Promise { +export async function assertTokenIsValid(query: ParsedUrlQuery, response: ServerResponse): Promise { const token = query.token as string; const tokenIsValid = await checkToken(token); - + if (!tokenIsValid) { response.statusCode = 404; response.end(); } + return token; } diff --git a/pages/_document.tsx b/pages/_document.tsx index 0a1c97c..b702439 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -8,11 +8,10 @@ import scss from "../components/Layout/layout.module.scss"; class MyDocument extends Document { static async getInitialProps(ctx: NextPageContext & { renderPage: RenderPage }): Promise { const initialProps = await Document.getInitialProps(ctx); - + return {...initialProps} } - - + render(): JSX.Element { return ( @@ -26,4 +25,4 @@ class MyDocument extends Document { } } -export default MyDocument \ No newline at end of file +export default MyDocument diff --git a/pages/index.tsx b/pages/index.tsx index 0fc86e7..cbc3795 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,11 +1,10 @@ import React from "react"; -import {GetServerSideProps, NextPage} from 'next'; import scss from '../pageStyles/index.module.scss'; import Layout from "../components/Layout/layout"; import {CandidateTestModel} from "../Models/CandidateTestModel"; import {TestList} from "../components/CandidateTestView/Tests/TestList"; -import {assertTokenIsValid} from "../helpers/tokenHelpers"; import TokenLink from "../components/TokenLink/TokenLink"; +import {NextPage} from "next"; export const testToRender: CandidateTestModel = TestList[1]; @@ -25,11 +24,6 @@ const Home: NextPage = () =>
    ; -export const getServerSideProps: GetServerSideProps = async ({res, query}) => { - await assertTokenIsValid(query, res); - return { props: {}}; -}; - export default Home; diff --git a/pages/submitted.tsx b/pages/submitted.tsx index bb0be82..74f1f7f 100644 --- a/pages/submitted.tsx +++ b/pages/submitted.tsx @@ -1,8 +1,7 @@ -import {GetServerSideProps, NextPage} from 'next'; +import {NextPage} from 'next'; import Layout from "../components/Layout/layout"; import scss from "../pageStyles/submitted.module.scss"; import React from "react"; -import {assertTokenIsValid} from "../helpers/tokenHelpers"; const Submitted: NextPage = () => ( @@ -14,9 +13,4 @@ const Submitted: NextPage = () => ( ); -export const getServerSideProps: GetServerSideProps = async ({res, query}) => { - await assertTokenIsValid(query, res); - return { props: {}}; -}; - -export default Submitted; \ No newline at end of file +export default Submitted; diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index 667fd2f..f7cc8ac 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -2,9 +2,10 @@ import {GetServerSideProps, NextPage} from "next"; import Head from "next/head"; import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStepper"; -import {getSessionCandidate, SessionCandidate} from "../api/candidateApiClient.module" import Layout from "../components/Layout/layout"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; +import {CandidateTestStatus} from "../components/CandidateTestView/CandidateTestStatus/CandidateTestStatus"; +import {getSessionCandidate} from "../api/sessionClient"; interface TestLibraryProps { sessionCandidate: SessionCandidate; @@ -29,13 +30,22 @@ const TestLibrary: NextPage = ({sessionCandidate}) => { export const getServerSideProps: GetServerSideProps = async ({query, res}) => { await assertTokenIsValid(query, res); const token = query.token as string; - const sessionData = getSessionCandidate(token); return { props: { - sessionCandidate: await getSessionCandidate(candidateToken) + sessionCandidate: await getSessionCandidate(token) } } }; +export interface SessionCandidate { + firstName: string; + lastName: string; + testStatuses: CandidateTestStatus[]; +} +export interface NewTestSubmission{ + testId: number; + testAnswer: string; +} + export default TestLibrary; diff --git a/pages/testpage.tsx b/pages/testpage.tsx index 41b8254..3cbe186 100644 --- a/pages/testpage.tsx +++ b/pages/testpage.tsx @@ -1,11 +1,12 @@ -import {GetServerSideProps, NextPage} from 'next'; -import React from "react"; +import React from "react"; import Layout from "../components/Layout/layout"; import CandidateTestView from "../components/CandidateTestView/CandidateTestView"; import {CandidateTestModel} from "../Models/CandidateTestModel"; import {testToRender} from "./index"; -import {assertTokenIsValid} from "../helpers/tokenHelpers"; -import {useRouter} from "next/router"; +import {ParsedUrlQuery} from "querystring"; +import withRouter from "next/dist/client/with-router"; +import {getServerSideProps} from "../api/sessionClient"; +import {NextPage} from "next"; const TestPage: NextPage = () => { const router = useRouter(); @@ -17,9 +18,5 @@ const TestPage: NextPage = () => { ) }; -export const getServerSideProps: GetServerSideProps = async ({res, query}) => { - await assertTokenIsValid(query, res); - return { props: {}}; -}; -export default TestPage; \ No newline at end of file +export default TestPage; From c77227d5d6c5d979a6d279bacf6e6b43f281007c Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 13:08:52 +0100 Subject: [PATCH 35/61] working --- api/sessionClient.ts | 8 ++++---- pages/testlibrary.tsx | 19 +++++++++++++++---- pages/testpage.tsx | 5 +---- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/api/sessionClient.ts b/api/sessionClient.ts index 337658f..536e169 100644 --- a/api/sessionClient.ts +++ b/api/sessionClient.ts @@ -10,9 +10,9 @@ export const getServerSideProps: GetServerSideProps = async ({res, query}) => { }; export async function checkToken(token: string): Promise { - const {publicRuntimeConfig} = getConfig(); - const baseUrl = publicRuntimeConfig.API_URL; - + // Not working for me: + // const {publicRuntimeConfig} = getConfig(); + // const baseUrl = publicRuntimeConfig.API_URL; const response = await fetch(`https://testswitch-api-staging.herokuapp.com/sessions/${token}`); return response.ok; } @@ -25,7 +25,7 @@ export interface NewTestSubmission{ testId: number; testAnswer: string; } -export async function getSessionCandidate(token: string): Promise { +export async function getSessionCandidate(token: string | string[] | undefined): Promise { const baseUrl = `https://testswitch-api-staging.herokuapp.com/sessions/`; try { const result = await fetch( diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index f7cc8ac..7c7dd88 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; import {GetServerSideProps, NextPage} from "next"; import Head from "next/head"; import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStepper"; @@ -6,14 +6,25 @@ import Layout from "../components/Layout/layout"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; import {CandidateTestStatus} from "../components/CandidateTestView/CandidateTestStatus/CandidateTestStatus"; import {getSessionCandidate} from "../api/sessionClient"; +import {useRouter} from "next/router"; + interface TestLibraryProps { sessionCandidate: SessionCandidate; } +const defaultTestStatus: CandidateTestStatus = {testName: "dummy test", testStatus: "pending"}; -const TestLibrary: NextPage = ({sessionCandidate}) => { - const [key, setKey] = React.useState(0); +function useStatus(): CandidateTestStatus[] { + const router = useRouter(); + const [candidateTestStatus, setCandidateTestStatus] = useState([defaultTestStatus]); + useEffect(() => { + getSessionCandidate(router.query.token).then(status => status.testStatuses).then(result => setCandidateTestStatus(result)); + }); + return candidateTestStatus; +} +const TestLibrary: NextPage = () => { + const [key, setKey] = React.useState(0); React.useEffect(() => { setKey(1); }, []); @@ -22,7 +33,7 @@ const TestLibrary: NextPage = ({sessionCandidate}) => { TestSwitch Test Library - + ); }; diff --git a/pages/testpage.tsx b/pages/testpage.tsx index 3cbe186..853ecab 100644 --- a/pages/testpage.tsx +++ b/pages/testpage.tsx @@ -3,10 +3,8 @@ import Layout from "../components/Layout/layout"; import CandidateTestView from "../components/CandidateTestView/CandidateTestView"; import {CandidateTestModel} from "../Models/CandidateTestModel"; import {testToRender} from "./index"; -import {ParsedUrlQuery} from "querystring"; -import withRouter from "next/dist/client/with-router"; -import {getServerSideProps} from "../api/sessionClient"; import {NextPage} from "next"; +import {useRouter} from "next/router"; const TestPage: NextPage = () => { const router = useRouter(); @@ -18,5 +16,4 @@ const TestPage: NextPage = () => { ) }; - export default TestPage; From a39b2490aea4605cc8e1dedbc70d971a19f6f943 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 14:22:57 +0100 Subject: [PATCH 36/61] changes --- .../Instructions/Instructions.module.scss | 30 ++++++++++ .../Instructions/Instructions.tsx | 6 +- .../candidateTestView.module.scss | 55 ------------------- 3 files changed, 33 insertions(+), 58 deletions(-) create mode 100644 components/CandidateTestView/Instructions/Instructions.module.scss diff --git a/components/CandidateTestView/Instructions/Instructions.module.scss b/components/CandidateTestView/Instructions/Instructions.module.scss new file mode 100644 index 0000000..1c59e2b --- /dev/null +++ b/components/CandidateTestView/Instructions/Instructions.module.scss @@ -0,0 +1,30 @@ +@import "pageStyles/constants"; + +.testInstructions { + box-sizing: border-box; + color: $techSwitchWhite; + white-space: pre-wrap; + font-size: $desktopBodyFontSize; + justify-content: left; + text-align: left; + width: 40vw; + margin-left: 1rem; + line-height: 130%; + +} +.instructionsSubheader { + font-size: $desktopSubHeaderFontSize; + line-height: 1rem; +} + +@media (max-width: $mediaLowResMaxWidth) { + //Low Resolution 900px and below + .instructionsSubheader { + box-sizing: border-box; + font-size: $lowResSubHeaderFontSize; + } + .testInstructions { + font-size: $lowResBodyFontSize; + } +} + diff --git a/components/CandidateTestView/Instructions/Instructions.tsx b/components/CandidateTestView/Instructions/Instructions.tsx index 656d085..fa7790c 100644 --- a/components/CandidateTestView/Instructions/Instructions.tsx +++ b/components/CandidateTestView/Instructions/Instructions.tsx @@ -1,9 +1,9 @@ import React from "react"; -import scss from "../CandidateTestView.module.scss"; +import scss from "../Instructions.module.scss"; import {CandidateTestModel} from "../../../Models/CandidateTestModel"; const InstructionsBlock = (testModel: CandidateTestModel): JSX.Element => ( -
    +

    {testModel.brief}

    Example

    {testModel.example}

    @@ -15,4 +15,4 @@ const InstructionsBlock = (testModel: CandidateTestModel): JSX.Element => (
    ); -export default InstructionsBlock; \ No newline at end of file +export default InstructionsBlock; diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 7162358..6c1652c 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -7,28 +7,7 @@ flex-direction: row; justify-content: space-between; align-items: flex-start; - -} -.testInstructions { - padding: 1vw; -} -.instructionsSubheader { - font-size: $desktopSubHeaderFontSize; - line-height: 1rem; -} - -.testInstructions { - box-sizing: border-box; - color: $techSwitchWhite; - white-space: pre-wrap; - font-size: $desktopBodyFontSize; - justify-content: left; - text-align: left; - width: 40vw; - margin-left: 1rem; - line-height: 130%; - } .textEditor { @@ -53,45 +32,11 @@ margin: 0.5rem; } -//Media Queries - - //@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; From 246ec9b645d8e7b383c6c340ae90553028470def Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 14:31:13 +0100 Subject: [PATCH 37/61] Instructions scss module returned --- components/CandidateTestView/CandidateTestView.tsx | 9 ++++----- .../Instructions/Instructions.module.scss | 3 +++ .../CandidateTestView/Instructions/Instructions.tsx | 13 +++++++------ .../CandidateTestView/candidateTestView.module.scss | 3 --- components/Layout/layout.module.scss | 3 +-- pageStyles/constants.scss | 2 +- 6 files changed, 16 insertions(+), 17 deletions(-) diff --git a/components/CandidateTestView/CandidateTestView.tsx b/components/CandidateTestView/CandidateTestView.tsx index 00fce8f..ac772db 100644 --- a/components/CandidateTestView/CandidateTestView.tsx +++ b/components/CandidateTestView/CandidateTestView.tsx @@ -9,18 +9,17 @@ interface CandidateTestViewProps { token: string; } const CandidateTestView = (candidateTestViewProps: CandidateTestViewProps): JSX.Element => ( - +

    Test {candidateTestViewProps.test.number}: {candidateTestViewProps.test.title}

    -

    {candidateTestViewProps.test.title}

    {InstructionsBlock(candidateTestViewProps.test)}
    - ); -export default CandidateTestView; \ No newline at end of file +export default CandidateTestView; diff --git a/components/CandidateTestView/Instructions/Instructions.module.scss b/components/CandidateTestView/Instructions/Instructions.module.scss index 1c59e2b..a8fccc0 100644 --- a/components/CandidateTestView/Instructions/Instructions.module.scss +++ b/components/CandidateTestView/Instructions/Instructions.module.scss @@ -19,6 +19,9 @@ @media (max-width: $mediaLowResMaxWidth) { //Low Resolution 900px and below + .instructionsHeader { + font-size: $lowResSubHeaderFontSize; + } .instructionsSubheader { box-sizing: border-box; font-size: $lowResSubHeaderFontSize; diff --git a/components/CandidateTestView/Instructions/Instructions.tsx b/components/CandidateTestView/Instructions/Instructions.tsx index fa7790c..5aa3a07 100644 --- a/components/CandidateTestView/Instructions/Instructions.tsx +++ b/components/CandidateTestView/Instructions/Instructions.tsx @@ -1,14 +1,15 @@ import React from "react"; -import scss from "../Instructions.module.scss"; +import scss from "../Instructions/Instructions.module.scss"; import {CandidateTestModel} from "../../../Models/CandidateTestModel"; const InstructionsBlock = (testModel: CandidateTestModel): JSX.Element => (
    -

    {testModel.brief}

    -

    Example

    -

    {testModel.example}

    -

    Input/Output

    -
      +

      {testModel.title}

      +

      {testModel.brief}

      +

      Example

      +

      {testModel.example}

      +

      Input/Output

      +
      • [input] {testModel.inputType}
        {testModel.inputDescription}
      • [output] {testModel.outputType}
        {testModel.outputDescription}
      diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 6c1652c..e072da9 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -34,9 +34,6 @@ @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below - .instructionsHeader { - font-size: $lowResSubHeaderFontSize; - } .testTitle { font-size: $lowResHeaderFontSize; white-space: normal; diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index 8544318..b839bba 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -13,7 +13,7 @@ .logoHeader { box-sizing: border-box; - width: 20vw; + width: 10vw; padding: 0.2rem; margin: 0.2rem; align-self: flex-start; @@ -23,7 +23,6 @@ .logoHeader { //Low Resolution 900px and below width: 40vw; - } } diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 1fb3aa7..970c44a 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -6,7 +6,7 @@ $techSwitchWhite: rgb(255, 255, 255); $errorMessage:rgb(226,25,100); //Fonts $techSwitchFont: Open Sans, sans-serif; - //Desktop + $desktopHeaderFontSize: 2.5rem; $desktopSubHeaderFontSize: 2rem; $desktopBodyFontSize: 1.5rem; From 77b1af5436f9eee3d363e07cc2be2e7353386461 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 15:09:22 +0100 Subject: [PATCH 38/61] Instructions scss module returned --- .../candidateTestView.module.scss | 20 ++++++++++++++++--- components/Layout/layout.module.scss | 11 +--------- pageStyles/constants.scss | 10 +++++----- pageStyles/index.module.scss | 5 ++--- pageStyles/submitted.module.scss | 13 ++++++------ 5 files changed, 31 insertions(+), 28 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index e072da9..33dc1d1 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -5,7 +5,7 @@ max-width: 100vw; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: center; align-items: flex-start; } @@ -14,7 +14,6 @@ box-sizing: border-box; color: $techSwitchWhite; font-size: $desktopBodyFontSize; - margin-top: 5vh; margin-right: 1vw; width: 50vw; } @@ -27,13 +26,28 @@ white-space: nowrap; position: absolute; top: 0; - right: 0; + right: 0.5rem; text-align: right; margin: 0.5rem; } +.testInstructions{ + max-width: 700px; +} @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below + .testPage { + box-sizing: border-box; + max-height: 100vh; + max-width: 100vw; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + } + .testInstructions{ + padding-left: 0; + } .testTitle { font-size: $lowResHeaderFontSize; white-space: normal; diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index b839bba..4fba8ae 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -13,17 +13,8 @@ .logoHeader { box-sizing: border-box; - width: 10vw; + width: 180px; padding: 0.2rem; margin: 0.2rem; align-self: flex-start; } - -@media (max-width: $mediaLowResMaxWidth){ - .logoHeader { - //Low Resolution 900px and below - width: 40vw; - } -} - - diff --git a/pageStyles/constants.scss b/pageStyles/constants.scss index 970c44a..1c1be79 100644 --- a/pageStyles/constants.scss +++ b/pageStyles/constants.scss @@ -7,14 +7,14 @@ $errorMessage:rgb(226,25,100); //Fonts $techSwitchFont: Open Sans, sans-serif; - $desktopHeaderFontSize: 2.5rem; - $desktopSubHeaderFontSize: 2rem; - $desktopBodyFontSize: 1.5rem; + $desktopHeaderFontSize: 2rem; + $desktopSubHeaderFontSize: 1.5rem; + $desktopBodyFontSize: 1.2rem; $mediaLowResMaxWidth: 900px; - $lowResHeaderFontSize: 1.5rem; + $lowResHeaderFontSize: 1.3rem; $lowResSubHeaderFontSize: 1rem; - $lowResBodyFontSize: 1rem; + $lowResBodyFontSize: 0.8rem; //Buttons @mixin techSwitchButton($backgroundColour: $techSwitchBlack, $inverseColour: $techSwitchYellow, $fontSize: $desktopBodyFontSize) { diff --git a/pageStyles/index.module.scss b/pageStyles/index.module.scss index 24bd1d8..18f76c1 100644 --- a/pageStyles/index.module.scss +++ b/pageStyles/index.module.scss @@ -9,7 +9,7 @@ } .content { - width: 100%; + width: 100vw; align-items: center; display: flex; flex-direction: column; @@ -18,7 +18,6 @@ font-family: $techSwitchFont; text-decoration: none; text-align: center; - height: 40vh; } .instructionsHeader { @@ -62,7 +61,7 @@ } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResBodyFontSize); - max-width: 40vw; + max-width: 80px; } } diff --git a/pageStyles/submitted.module.scss b/pageStyles/submitted.module.scss index 81db4f8..9f61d66 100644 --- a/pageStyles/submitted.module.scss +++ b/pageStyles/submitted.module.scss @@ -13,17 +13,19 @@ .submitMessage { color: $techSwitchWhite; font-size: $desktopSubHeaderFontSize; + max-width: 600px; } .content { - width: 100%; - height: 50vh; + width: 100vw; + max-height: 700px; + min-height: 400px; text-align: center; align-items: center; display: flex; flex-direction: column; - flex-wrap: wrap; - justify-content: space-between; + flex-wrap: nowrap; + justify-content: stretch; padding: 3px; font-family: Open Sans, sans-serif; text-decoration: none; @@ -36,20 +38,17 @@ //Low Resolution 900px and below .submitHeader { font-size: $lowResHeaderFontSize; - max-width: 80vw; margin: 0.2em; padding: 0.5rem; } .thankyou { font-size: $lowResSubHeaderFontSize; - max-width: 80vw; margin: 0.2em; padding: 0.5rem; } .submitMessage { font-size: $lowResBodyFontSize; line-height: 150%; - max-width: 80vw; margin: 0.2em; padding: 0.5rem; } From 224f110427252fc627eaf8943cc850cd514b9986 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 16:02:26 +0100 Subject: [PATCH 39/61] Replacing vw/vh with px where possible --- .../Instructions/Instructions.module.scss | 13 +++--- .../candidateTestView.module.scss | 40 +++++++------------ .../TextEditorContainer.module.scss | 14 ++++++- 3 files changed, 35 insertions(+), 32 deletions(-) diff --git a/components/CandidateTestView/Instructions/Instructions.module.scss b/components/CandidateTestView/Instructions/Instructions.module.scss index a8fccc0..20ca5d6 100644 --- a/components/CandidateTestView/Instructions/Instructions.module.scss +++ b/components/CandidateTestView/Instructions/Instructions.module.scss @@ -5,12 +5,11 @@ color: $techSwitchWhite; white-space: pre-wrap; font-size: $desktopBodyFontSize; - justify-content: left; text-align: left; - width: 40vw; - margin-left: 1rem; + padding-right: 1rem; + padding-left: 5rem; line-height: 130%; - + width: 700px; } .instructionsSubheader { font-size: $desktopSubHeaderFontSize; @@ -28,6 +27,10 @@ } .testInstructions { font-size: $lowResBodyFontSize; - } + box-sizing: border-box; + padding-left: 0.5rem; + padding-right: 0.5rem; + width: 300px; + } } diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 33dc1d1..011de10 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -7,33 +7,21 @@ flex-direction: row; justify-content: center; align-items: flex-start; - -} - -.textEditor { - box-sizing: border-box; - color: $techSwitchWhite; - font-size: $desktopBodyFontSize; - margin-right: 1vw; - width: 50vw; + margin-top: 100px; } .testTitle { box-sizing: border-box; color: $techSwitchYellow; font-size: $desktopHeaderFontSize; - max-width: 40vw; white-space: nowrap; position: absolute; - top: 0; - right: 0.5rem; + top: 1px; + right: 2px; text-align: right; - margin: 0.5rem; -} -.testInstructions{ - max-width: 700px; } + @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below .testPage { @@ -41,23 +29,25 @@ max-height: 100vh; max-width: 100vw; display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-start; - } - .testInstructions{ - padding-left: 0; + flex-direction: column; + align-items: center; + margin-top: 50px; } + .testTitle { font-size: $lowResHeaderFontSize; white-space: normal; overflow-wrap: break-spaces; - margin-right: 1rem; - margin-top: 1.5rem; + position: absolute; + top: 1px; + right: 1px; + padding: 0; + margin: 0; + text-align: right; } .buttonYellow{ @include techSwitchButton($techSwitchYellow, $techSwitchBlack, $lowResBodyFontSize); - max-width: 40vw; + width: 120px; } } diff --git a/components/TextEditor/TextEditorContainer.module.scss b/components/TextEditor/TextEditorContainer.module.scss index aa90530..7e4079b 100644 --- a/components/TextEditor/TextEditorContainer.module.scss +++ b/components/TextEditor/TextEditorContainer.module.scss @@ -3,8 +3,14 @@ box-sizing: border-box; border-style: solid; border-width: 5px; - max-width: 50vw; + min-width: 700px; + max-width: 2200px; + width: 50vw; border-color: $techSwitchYellow; + color: $techSwitchWhite; + font-size: $desktopBodyFontSize; + margin-right: 5rem; + padding: 0; } .buttonBlack{ @@ -15,13 +21,17 @@ @media (max-width: $mediaLowResMaxWidth) { //Low Resolution 900px and below .editorBox { + box-sizing: border-box; border-width: 0.2rem; + width: 300px; + margin: 0; + padding: 0; } .buttonBlack{ font-size: $lowResBodyFontSize; border-width: 0.2rem; - max-width: 40vw; + max-width: 150px; } } From 98d943486a0c4054cfca58435e7cd1cb9cdb3dc6 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 16:05:09 +0100 Subject: [PATCH 40/61] Replacing vw/vh with px where possible --- components/CandidateTestView/Instructions/Instructions.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/CandidateTestView/Instructions/Instructions.tsx b/components/CandidateTestView/Instructions/Instructions.tsx index 5aa3a07..a45ea80 100644 --- a/components/CandidateTestView/Instructions/Instructions.tsx +++ b/components/CandidateTestView/Instructions/Instructions.tsx @@ -4,11 +4,11 @@ import {CandidateTestModel} from "../../../Models/CandidateTestModel"; const InstructionsBlock = (testModel: CandidateTestModel): JSX.Element => (
      -

      {testModel.title}

      +

      {testModel.title}

      {testModel.brief}

      -

      Example

      +

      Example

      {testModel.example}

      -

      Input/Output

      +

      Input/Output

      • [input] {testModel.inputType}
        {testModel.inputDescription}
      • [output] {testModel.outputType}
        {testModel.outputDescription}
        • From 1a020b55863916b27f2370ff8542c3b838a6d2e0 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 16:06:45 +0100 Subject: [PATCH 41/61] Replacing vw/vh with px where possible --- api/sessionClient.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/api/sessionClient.ts b/api/sessionClient.ts index 536e169..e9e81c8 100644 --- a/api/sessionClient.ts +++ b/api/sessionClient.ts @@ -10,10 +10,9 @@ export const getServerSideProps: GetServerSideProps = async ({res, query}) => { }; export async function checkToken(token: string): Promise { - // Not working for me: - // const {publicRuntimeConfig} = getConfig(); - // const baseUrl = publicRuntimeConfig.API_URL; - const response = await fetch(`https://testswitch-api-staging.herokuapp.com/sessions/${token}`); + const {publicRuntimeConfig} = getConfig(); + const baseUrl = publicRuntimeConfig.API_URL; + const response = await fetch(`${baseUrl}/sessions/${token}`); return response.ok; } export interface SessionCandidate { From 71fe5b94e32f18be71f33d8154c82ff1aa529d5c Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 16:42:19 +0100 Subject: [PATCH 42/61] Replacing vw/vh with px where possible --- api/candidateApiClientModule.ts | 44 +++++++++++++++++++++++++++++++++ api/sessionClient.ts | 25 +++++++------------ env-var.env | 1 + next.config.js | 8 +++--- pages/404Error.tsx | 16 ++++++++++++ 5 files changed, 75 insertions(+), 19 deletions(-) create mode 100644 api/candidateApiClientModule.ts create mode 100644 env-var.env create mode 100644 pages/404Error.tsx diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts new file mode 100644 index 0000000..45dc051 --- /dev/null +++ b/api/candidateApiClientModule.ts @@ -0,0 +1,44 @@ +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 getSessionCandidate(token: string): Promise { + const {publicRuntimeConfig} = getConfig(); + const baseUrl = publicRuntimeConfig.API_URL; + try { + const result = await fetch( + `${baseUrl}/sessions/${token}` + ); + const data = await result.json(); + return data; + } catch (error) { + console.error(error); + return error.message; + } +} +export async function addTestSubmisson( 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), + }); + +} diff --git a/api/sessionClient.ts b/api/sessionClient.ts index e9e81c8..2c955a8 100644 --- a/api/sessionClient.ts +++ b/api/sessionClient.ts @@ -3,18 +3,16 @@ import fetch from "node-fetch"; import {CandidateTestStatus} from "../components/CandidateTestView/CandidateTestStatus/CandidateTestStatus"; import {GetServerSideProps} from "next"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; +const {publicRuntimeConfig} = getConfig(); +const baseUrl = publicRuntimeConfig.API_URL; +export async function checkToken(token: string): Promise { + const response = await fetch(`${baseUrl}/sessions/${token}`); + return response.ok;} export const getServerSideProps: GetServerSideProps = async ({res, query}) => { await assertTokenIsValid(query, res); return { props: {}}; }; - -export async function checkToken(token: string): Promise { - const {publicRuntimeConfig} = getConfig(); - const baseUrl = publicRuntimeConfig.API_URL; - const response = await fetch(`${baseUrl}/sessions/${token}`); - return response.ok; -} export interface SessionCandidate { firstName: string; lastName: string; @@ -25,10 +23,9 @@ export interface NewTestSubmission{ testAnswer: string; } export async function getSessionCandidate(token: string | string[] | undefined): Promise { - const baseUrl = `https://testswitch-api-staging.herokuapp.com/sessions/`; - try { + try { const result = await fetch( - `${baseUrl}${token}` + `${baseUrl}/sessions/${token}` ); return await result.json(); } catch (error) { @@ -38,15 +35,11 @@ export async function getSessionCandidate(token: string | string[] | undefined): } export async function addTestSubmission(tokenId: string, newTestSubmission: NewTestSubmission) { - const { publicRuntimeConfig } = getConfig(); - const apiURL=publicRuntimeConfig.API_URL; - - return await fetch(`${apiURL}/sessions/${tokenId}`, { + return await fetch(`${baseUrl}/sessions/${tokenId}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newTestSubmission), - }); - + }) } diff --git a/env-var.env b/env-var.env new file mode 100644 index 0000000..001a7b0 --- /dev/null +++ b/env-var.env @@ -0,0 +1 @@ +API_URL=`https://testswitch-api-staging.herokuapp.com` diff --git a/next.config.js b/next.config.js index d17fb67..1c42ef4 100644 --- a/next.config.js +++ b/next.config.js @@ -5,10 +5,12 @@ module.exports = withSass({ API_URL: process.env.API_URL } }); - -WebFontConfig = { +const env = require("/env-var.env"); +module.exports = env(); +const WebFontConfig = require('webfont-loader'); +module.exports = WebFontConfig({ google: { families: ['Open Sans'] }, timeout: 2000 -}; +}); diff --git a/pages/404Error.tsx b/pages/404Error.tsx new file mode 100644 index 0000000..2aae5cb --- /dev/null +++ b/pages/404Error.tsx @@ -0,0 +1,16 @@ +import {NextPage} from 'next'; +import Layout from "../components/Layout/layout"; +import scss from "../pageStyles/submitted.module.scss"; +import React from "react"; + +const AccessDenied: NextPage = () => ( + +
        +

        Your Test Has Been Submitted

        +

        We will review your results and get back to you by email shortly

        +

        Thank You!

        +
        +         +); + +export default AccessDenied; From bf0bc9fb06dd400f4ea00aaf56b5d61240044892 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 17:08:04 +0100 Subject: [PATCH 43/61] Env --- api/candidateApiClientModule.ts | 2 +- env-var.env | 1 - next-env.d.ts | 1 + next.config.js | 10 +--------- pages/_document.tsx | 5 +++-- 5 files changed, 6 insertions(+), 13 deletions(-) delete mode 100644 env-var.env diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index 45dc051..0b4ed83 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -31,7 +31,7 @@ export async function getSessionCandidate(token: string): Promise /// + diff --git a/next.config.js b/next.config.js index 1c42ef4..784a869 100644 --- a/next.config.js +++ b/next.config.js @@ -5,12 +5,4 @@ module.exports = withSass({ API_URL: process.env.API_URL } }); -const env = require("/env-var.env"); -module.exports = env(); -const WebFontConfig = require('webfont-loader'); -module.exports = WebFontConfig({ - google: { - families: ['Open Sans'] - }, - timeout: 2000 -}); + diff --git a/pages/_document.tsx b/pages/_document.tsx index b702439..11448a9 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,9 +1,10 @@ import Document, {DocumentInitialProps, Head, Html, Main, NextScript} from 'next/document' -import React, {useState} from "react"; +import React from "react"; import {NextPageContext} from "next"; import {RenderPage} from "next/dist/next-server/lib/utils"; import scss from "../components/Layout/layout.module.scss"; - +import {loadEnvConfig} from "next/dist/lib/load-env-config"; +export const API_URL = loadEnvConfig("/env-var.env"); class MyDocument extends Document { static async getInitialProps(ctx: NextPageContext & { renderPage: RenderPage }): Promise { From 83e9d9257fd2de73e9b6275c50c659513487af0f Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 17:10:53 +0100 Subject: [PATCH 44/61] error page --- pages/404Error.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/404Error.tsx b/pages/404Error.tsx index 2aae5cb..c10f13a 100644 --- a/pages/404Error.tsx +++ b/pages/404Error.tsx @@ -6,8 +6,8 @@ import React from "react"; const AccessDenied: NextPage = () => (
        -

        Your Test Has Been Submitted

        -

        We will review your results and get back to you by email shortly

        +

        404 Error: Page Cannot be Found

        +

        Please use the unique link sent to you by email to access your tests

        Thank You!

         From 56f511ac71dd390ad7f44d6590a50464fd6463cf Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 17:50:35 +0100 Subject: [PATCH 45/61] error page --- api/candidateApiClientModule.ts | 2 +- components/TokenLink/TokenLink.tsx | 9 +++++++-- pages/_document.tsx | 2 -- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index 0b4ed83..c439e5b 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -29,7 +29,7 @@ export async function getSessionCandidate(token: string): Promise = ({children, href}: TokenLinkProps) => { const router = useRouter(); + const token = router.query.token; + let link = ""; + if(token === undefined) { + link = '/404Error'; + } else { link = `${href}?token=${token}`} return ( - + {children} ) diff --git a/pages/_document.tsx b/pages/_document.tsx index 11448a9..8617748 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -9,10 +9,8 @@ export const API_URL = loadEnvConfig("/env-var.env"); class MyDocument extends Document { static async getInitialProps(ctx: NextPageContext & { renderPage: RenderPage }): Promise { const initialProps = await Document.getInitialProps(ctx); - return {...initialProps} } - render(): JSX.Element { return ( From ab7421b31d804febf0e4a83cae70fb200b6889a9 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 19:04:08 +0100 Subject: [PATCH 46/61] Loading appropriate tests from stepper --- api/sessionClient.ts | 2 +- .../CandidateTestStatus.tsx | 35 ------------------- .../TestLibraryStepper/TestLibraryStepper.tsx | 7 ++-- components/TextEditor/TextEditorContainer.tsx | 15 ++++++-- pages/index.tsx | 6 +--- pages/testlibrary.tsx | 10 +++--- pages/testpage.tsx | 10 +++++- 7 files changed, 31 insertions(+), 54 deletions(-) delete mode 100644 components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx diff --git a/api/sessionClient.ts b/api/sessionClient.ts index 2c955a8..33217b9 100644 --- a/api/sessionClient.ts +++ b/api/sessionClient.ts @@ -1,8 +1,8 @@ import getConfig from 'next/config'; import fetch from "node-fetch"; -import {CandidateTestStatus} from "../components/CandidateTestView/CandidateTestStatus/CandidateTestStatus"; import {GetServerSideProps} from "next"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; +import {CandidateTestStatus} from "./candidateApiClientModule"; const {publicRuntimeConfig} = getConfig(); const baseUrl = publicRuntimeConfig.API_URL; export async function checkToken(token: string): Promise { diff --git a/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx b/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx deleted file mode 100644 index 2268972..0000000 --- a/components/CandidateTestView/CandidateTestStatus/CandidateTestStatus.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import {CandidateTestModel} from "../../../Models/CandidateTestModel"; -import {getSessionCandidate} from "../../../api/sessionClient"; -import {TestList} from "../Tests/TestList"; - -export interface CandidateTestStatus { - testName: string; - testStatus: string; -} - -async function getCandidateTestStatus(test: string, candidateToken: string, testList: CandidateTestModel[]): Promise { - const sessionCandidate = await getSessionCandidate(candidateToken); - const testStatuses: CandidateTestStatus[] = sessionCandidate.testStatuses; - const completedTests = (testStatuses.filter(({testStatus}) => testStatus === "Completed")); - const thisTest = (completedTests.filter(({testName}) => testName === test)); - let status: string; - if(thisTest.length === 1){ - status = "complete" - } else if (thisTest.length === 0) { - status = "pending" - } else { status = "error - duplicate test title"} - return { - testName: test, - testStatus: status, - }; -} - -export async function getCandidateTestStatuses(candidateToken: string, testList: CandidateTestModel[]): Promise { - const allTests = TestList.map(test => test.title) - const dummyTest = allTests.shift(); - const candidateTestStatuses: CandidateTestStatus[] = []; - for(let i = 0; i < (allTests.length-1); i++) { - candidateTestStatuses.push(await getCandidateTestStatus(allTests[i], candidateToken, testList)); - } - return candidateTestStatuses; -} diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 93d82c2..933ba41 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -5,8 +5,8 @@ import TestSwitchStepIcon from "../TestLibraryStepperIcons/TestLibraryStepperIco 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"; +import {CandidateTestModel} from "../../Models/CandidateTestModel"; interface CandidateTestStatus { testName: string; @@ -24,17 +24,18 @@ function getSteps(): string[] { return testLabelArray; } -function getActiveStep(testArr: CandidateTestStatus[]): number { +export function getActiveStep(testArr: CandidateTestStatus[]): number { //check for number of completed tests const completedTests = (testArr.filter(({testStatus}) => testStatus === "Completed")); return completedTests.length; } +export let testToRender: CandidateTestModel; export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.Element { const steps = getSteps(); const activeStep = getActiveStep(props.candidateTestStatuses); - + testToRender = TestList[activeStep+1]; return (
        diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index fa910ae..cf2a0ed 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -4,8 +4,9 @@ import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; import TokenLink from "../TokenLink/TokenLink"; import {useRouter} from "next/router"; -import {testToRender} from "../../pages"; import {addTestSubmission} from "../../api/sessionClient"; +import {TestList} from "../CandidateTestView/Tests/TestList"; +import {useStatus} from "../../pages/testlibrary"; type EditorContentGetter = () => string; @@ -41,9 +42,17 @@ const TextEditorContainer: FunctionComponent = ({heigh .catch(error=>{console.log(error); setError("There was an error submitting your test")}); } - + let link = ""; + let as = ""; const handleSubmit = () => { submitForm(); + if(TestList.length-1 > useStatus().length) { + link = "/testlibrary"; + as = "testlibrary" + } else { + link = "/submitted"; + as = "thankyou" + } } return ( @@ -61,7 +70,7 @@ const TextEditorContainer: FunctionComponent = ({heigh />
      - + diff --git a/pages/index.tsx b/pages/index.tsx index cbc3795..ad8d668 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,13 +1,9 @@ import React from "react"; import scss from '../pageStyles/index.module.scss'; import Layout from "../components/Layout/layout"; -import {CandidateTestModel} from "../Models/CandidateTestModel"; -import {TestList} from "../components/CandidateTestView/Tests/TestList"; import TokenLink from "../components/TokenLink/TokenLink"; import {NextPage} from "next"; -export const testToRender: CandidateTestModel = TestList[1]; - const Home: NextPage = () =>
      @@ -18,7 +14,7 @@ const Home: NextPage = () =>
    • You must complete the test in one sitting
    • When you are ready and sure you won’t be disturbed, please click “Start”
    - + Start diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index 7c7dd88..886a962 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -4,19 +4,18 @@ import Head from "next/head"; import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStepper"; import Layout from "../components/Layout/layout"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; -import {CandidateTestStatus} from "../components/CandidateTestView/CandidateTestStatus/CandidateTestStatus"; import {getSessionCandidate} from "../api/sessionClient"; import {useRouter} from "next/router"; - +import {CandidateTestStatus} from "../api/candidateApiClientModule"; interface TestLibraryProps { sessionCandidate: SessionCandidate; } -const defaultTestStatus: CandidateTestStatus = {testName: "dummy test", testStatus: "pending"}; -function useStatus(): CandidateTestStatus[] { +export function useStatus(): CandidateTestStatus[] { const router = useRouter(); - const [candidateTestStatus, setCandidateTestStatus] = useState([defaultTestStatus]); + const emptyStatusArray: CandidateTestStatus[] = []; + const [candidateTestStatus, setCandidateTestStatus] = useState(emptyStatusArray); useEffect(() => { getSessionCandidate(router.query.token).then(status => status.testStatuses).then(result => setCandidateTestStatus(result)); }); @@ -41,7 +40,6 @@ const TestLibrary: NextPage = () => { export const getServerSideProps: GetServerSideProps = async ({query, res}) => { await assertTokenIsValid(query, res); const token = query.token as string; - return { props: { sessionCandidate: await getSessionCandidate(token) diff --git a/pages/testpage.tsx b/pages/testpage.tsx index 853ecab..7f5782a 100644 --- a/pages/testpage.tsx +++ b/pages/testpage.tsx @@ -2,13 +2,21 @@ import Layout from "../components/Layout/layout"; import CandidateTestView from "../components/CandidateTestView/CandidateTestView"; import {CandidateTestModel} from "../Models/CandidateTestModel"; -import {testToRender} from "./index"; import {NextPage} from "next"; import {useRouter} from "next/router"; +import {getActiveStep} from "../components/TestLibraryStepper/TestLibraryStepper"; +import {TestList} from "../components/CandidateTestView/Tests/TestList"; +import {useStatus} from "./testlibrary"; + +export function getTestToRender(): CandidateTestModel { + const activeStep = getActiveStep(useStatus()); + return (TestList[activeStep + 1]); +} const TestPage: NextPage = () => { const router = useRouter(); const token = router.query.token as string; + const testToRender = getTestToRender(); return ( From 9f6596df220107b10fb426d1d874d098268e2522 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 19:18:14 +0100 Subject: [PATCH 47/61] reorganising --- components/TextEditor/TextEditorContainer.tsx | 7 ++++--- components/TokenLink/TokenLink.tsx | 2 -- helpers/tokenHelpers.ts | 2 +- pages/404Error.tsx | 2 +- .../api}/candidateApiClientModule.ts | 16 +-------------- {api => pages/api}/sessionClient.ts | 20 +++++++------------ pages/testlibrary.tsx | 4 ++-- 7 files changed, 16 insertions(+), 37 deletions(-) rename {api => pages/api}/candidateApiClientModule.ts (64%) rename {api => pages/api}/sessionClient.ts (71%) diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index cf2a0ed..bbb684c 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -4,9 +4,9 @@ import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; import TokenLink from "../TokenLink/TokenLink"; import {useRouter} from "next/router"; -import {addTestSubmission} from "../../api/sessionClient"; import {TestList} from "../CandidateTestView/Tests/TestList"; import {useStatus} from "../../pages/testlibrary"; +import {addTestSubmission} from "../../pages/api/candidateApiClientModule"; type EditorContentGetter = () => string; @@ -25,8 +25,9 @@ const TextEditorContainer: FunctionComponent = ({heigh function handleIsEditorMounted(_getEditorContents: EditorContentGetter): void { setIsEditorReady(true); + if(isEditorReady) { getEditorContentIfMountedRef.current = _getEditorContents; - } + }} function submitForm(): void { @@ -34,7 +35,7 @@ const TextEditorContainer: FunctionComponent = ({heigh addTestSubmission(token,{testId,testAnswer}) .then((response)=>{ if (response.ok) { - router.push('/testlibrary'); + router.push('/testlibrary').then(r => r.valueOf()); } else { throw Error(response.statusText); } diff --git a/components/TokenLink/TokenLink.tsx b/components/TokenLink/TokenLink.tsx index 1f4ab95..556484a 100644 --- a/components/TokenLink/TokenLink.tsx +++ b/components/TokenLink/TokenLink.tsx @@ -2,7 +2,6 @@ import {useRouter} from "next/router"; import Link from "next/link"; - type TokenLinkProps = {children: React.ReactNode; href: string; as: string} const TokenLink: React.FunctionComponent = ({children, href}: TokenLinkProps) => { @@ -18,7 +17,6 @@ const TokenLink: React.FunctionComponent = ({children, href}: To {children} ) - }; export default TokenLink; diff --git a/helpers/tokenHelpers.ts b/helpers/tokenHelpers.ts index 1f21358..58f8046 100644 --- a/helpers/tokenHelpers.ts +++ b/helpers/tokenHelpers.ts @@ -1,6 +1,6 @@ import {ServerResponse} from "http"; import {ParsedUrlQuery} from "querystring"; -import {checkToken} from "../api/sessionClient"; +import {checkToken} from "../pages/api/sessionClient"; export async function assertTokenIsValid(query: ParsedUrlQuery, response: ServerResponse): Promise { const token = query.token as string; diff --git a/pages/404Error.tsx b/pages/404Error.tsx index c10f13a..a2d59e5 100644 --- a/pages/404Error.tsx +++ b/pages/404Error.tsx @@ -1,4 +1,4 @@ -import {NextPage} from 'next'; +import {NextPage} from 'next'; import Layout from "../components/Layout/layout"; import scss from "../pageStyles/submitted.module.scss"; import React from "react"; diff --git a/api/candidateApiClientModule.ts b/pages/api/candidateApiClientModule.ts similarity index 64% rename from api/candidateApiClientModule.ts rename to pages/api/candidateApiClientModule.ts index c439e5b..7e7c40b 100644 --- a/api/candidateApiClientModule.ts +++ b/pages/api/candidateApiClientModule.ts @@ -15,20 +15,7 @@ export interface NewTestSubmission{ testId: number; testAnswer: string; } -export async function getSessionCandidate(token: string): Promise { - const {publicRuntimeConfig} = getConfig(); - const baseUrl = publicRuntimeConfig.API_URL; - try { - const result = await fetch( - `${baseUrl}/sessions/${token}` - ); - const data = await result.json(); - return data; - } catch (error) { - console.error(error); - return error.message; - } -} + export async function addTestSubmission( tokenId: string,newTestSubmission: NewTestSubmission) { const { publicRuntimeConfig } = getConfig(); const apiURL = publicRuntimeConfig.API_URL; @@ -40,5 +27,4 @@ export async function addTestSubmission( tokenId: string,newTestSubmission: NewT }, body: JSON.stringify(newTestSubmission), }); - } diff --git a/api/sessionClient.ts b/pages/api/sessionClient.ts similarity index 71% rename from api/sessionClient.ts rename to pages/api/sessionClient.ts index 33217b9..72ea280 100644 --- a/api/sessionClient.ts +++ b/pages/api/sessionClient.ts @@ -1,7 +1,7 @@ +import {assertTokenIsValid} from "../../helpers/tokenHelpers"; import getConfig from 'next/config'; import fetch from "node-fetch"; import {GetServerSideProps} from "next"; -import {assertTokenIsValid} from "../helpers/tokenHelpers"; import {CandidateTestStatus} from "./candidateApiClientModule"; const {publicRuntimeConfig} = getConfig(); const baseUrl = publicRuntimeConfig.API_URL; @@ -22,24 +22,18 @@ export interface NewTestSubmission{ testId: number; testAnswer: string; } + export async function getSessionCandidate(token: string | string[] | undefined): Promise { - try { + const {publicRuntimeConfig} = getConfig(); + const baseUrl = publicRuntimeConfig.API_URL; + try { const result = await fetch( `${baseUrl}/sessions/${token}` ); - return await result.json(); + const data = await result.json(); + return data; } catch (error) { console.error(error); return error.message; } } - -export async function addTestSubmission(tokenId: string, newTestSubmission: NewTestSubmission) { - return await fetch(`${baseUrl}/sessions/${tokenId}`, { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify(newTestSubmission), - }) -} diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index 886a962..c9eeaad 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -4,9 +4,9 @@ import Head from "next/head"; import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStepper"; import Layout from "../components/Layout/layout"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; -import {getSessionCandidate} from "../api/sessionClient"; import {useRouter} from "next/router"; -import {CandidateTestStatus} from "../api/candidateApiClientModule"; +import {CandidateTestStatus} from "./api/candidateApiClientModule"; +import {getSessionCandidate} from "./api/sessionClient"; interface TestLibraryProps { sessionCandidate: SessionCandidate; From 292b98cd6e77a82e0e19cedb61521ca384183636 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Wed, 6 May 2020 20:49:02 +0100 Subject: [PATCH 48/61] restructuring --- {pages/api => api}/candidateApiClientModule.ts | 3 ++- {pages/api => api}/sessionClient.ts | 5 +++-- components/TextEditor/TextEditorContainer.tsx | 2 +- components/TokenLink/TokenLink.tsx | 2 +- helpers/tokenHelpers.ts | 2 +- pages/api/sessions.tsx | 0 pages/testlibrary.tsx | 4 ++-- 7 files changed, 10 insertions(+), 8 deletions(-) rename {pages/api => api}/candidateApiClientModule.ts (87%) rename {pages/api => api}/sessionClient.ts (91%) create mode 100644 pages/api/sessions.tsx diff --git a/pages/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts similarity index 87% rename from pages/api/candidateApiClientModule.ts rename to api/candidateApiClientModule.ts index 7e7c40b..50e8222 100644 --- a/pages/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -16,7 +16,7 @@ export interface NewTestSubmission{ testAnswer: string; } -export async function addTestSubmission( tokenId: string,newTestSubmission: NewTestSubmission) { +export async function addTestSubmission( tokenId: string, newTestSubmission: NewTestSubmission) { const { publicRuntimeConfig } = getConfig(); const apiURL = publicRuntimeConfig.API_URL; @@ -28,3 +28,4 @@ export async function addTestSubmission( tokenId: string,newTestSubmission: NewT body: JSON.stringify(newTestSubmission), }); } + diff --git a/pages/api/sessionClient.ts b/api/sessionClient.ts similarity index 91% rename from pages/api/sessionClient.ts rename to api/sessionClient.ts index 72ea280..3d8decc 100644 --- a/pages/api/sessionClient.ts +++ b/api/sessionClient.ts @@ -1,5 +1,6 @@ -import {assertTokenIsValid} from "../../helpers/tokenHelpers"; -import getConfig from 'next/config'; +import {assertTokenIsValid} from "../helpers/tokenHelpers"; + +import getConfig from 'next/config'; import fetch from "node-fetch"; import {GetServerSideProps} from "next"; import {CandidateTestStatus} from "./candidateApiClientModule"; diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index bbb684c..68164aa 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -6,7 +6,7 @@ import TokenLink from "../TokenLink/TokenLink"; import {useRouter} from "next/router"; import {TestList} from "../CandidateTestView/Tests/TestList"; import {useStatus} from "../../pages/testlibrary"; -import {addTestSubmission} from "../../pages/api/candidateApiClientModule"; +import {addTestSubmission} from "../../api/candidateApiClientModule"; type EditorContentGetter = () => string; diff --git a/components/TokenLink/TokenLink.tsx b/components/TokenLink/TokenLink.tsx index 556484a..fc75d2a 100644 --- a/components/TokenLink/TokenLink.tsx +++ b/components/TokenLink/TokenLink.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from "react"; import {useRouter} from "next/router"; import Link from "next/link"; diff --git a/helpers/tokenHelpers.ts b/helpers/tokenHelpers.ts index 58f8046..1f21358 100644 --- a/helpers/tokenHelpers.ts +++ b/helpers/tokenHelpers.ts @@ -1,6 +1,6 @@ import {ServerResponse} from "http"; import {ParsedUrlQuery} from "querystring"; -import {checkToken} from "../pages/api/sessionClient"; +import {checkToken} from "../api/sessionClient"; export async function assertTokenIsValid(query: ParsedUrlQuery, response: ServerResponse): Promise { const token = query.token as string; diff --git a/pages/api/sessions.tsx b/pages/api/sessions.tsx new file mode 100644 index 0000000..e69de29 diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index c9eeaad..3e98764 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -5,8 +5,8 @@ import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStep import Layout from "../components/Layout/layout"; import {assertTokenIsValid} from "../helpers/tokenHelpers"; import {useRouter} from "next/router"; -import {CandidateTestStatus} from "./api/candidateApiClientModule"; -import {getSessionCandidate} from "./api/sessionClient"; +import {CandidateTestStatus} from "../api/candidateApiClientModule"; +import {getSessionCandidate} from "../api/sessionClient"; interface TestLibraryProps { sessionCandidate: SessionCandidate; From a6863b3abf3cd70e61e1c195c4e50a60845fc048 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 10:35:25 +0100 Subject: [PATCH 49/61] restructuring --- .../CandidateTestView/CandidateTestView.tsx | 4 ++-- components/TextEditor/TextEditorContainer.tsx | 18 ++---------------- pages/api/sessions.tsx | 0 3 files changed, 4 insertions(+), 18 deletions(-) delete mode 100644 pages/api/sessions.tsx diff --git a/components/CandidateTestView/CandidateTestView.tsx b/components/CandidateTestView/CandidateTestView.tsx index ac772db..c6c6838 100644 --- a/components/CandidateTestView/CandidateTestView.tsx +++ b/components/CandidateTestView/CandidateTestView.tsx @@ -17,7 +17,7 @@ const CandidateTestView = (candidateTestViewProps: CandidateTestViewProps): JSX. {InstructionsBlock(candidateTestViewProps.test)}
    -
    +
    -
    +
    ); diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index 68164aa..0b9a76c 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -2,10 +2,7 @@ import React, {FunctionComponent, MutableRefObject, useRef, useState} from "reac import Editor from "@monaco-editor/react"; import {TextEditorSettings} from "./TextEditorSettings"; import scss from "../TextEditor/TextEditorContainer.module.scss"; -import TokenLink from "../TokenLink/TokenLink"; import {useRouter} from "next/router"; -import {TestList} from "../CandidateTestView/Tests/TestList"; -import {useStatus} from "../../pages/testlibrary"; import {addTestSubmission} from "../../api/candidateApiClientModule"; type EditorContentGetter = () => string; @@ -35,7 +32,7 @@ const TextEditorContainer: FunctionComponent = ({heigh addTestSubmission(token,{testId,testAnswer}) .then((response)=>{ if (response.ok) { - router.push('/testlibrary').then(r => r.valueOf()); + router.push('/testlibrary?token='+{token}); } else { throw Error(response.statusText); } @@ -43,17 +40,8 @@ const TextEditorContainer: FunctionComponent = ({heigh .catch(error=>{console.log(error); setError("There was an error submitting your test")}); } - let link = ""; - let as = ""; const handleSubmit = () => { submitForm(); - if(TestList.length-1 > useStatus().length) { - link = "/testlibrary"; - as = "testlibrary" - } else { - link = "/submitted"; - as = "thankyou" - } } return ( @@ -71,9 +59,7 @@ const TextEditorContainer: FunctionComponent = ({heigh />
    - - - + ); diff --git a/pages/api/sessions.tsx b/pages/api/sessions.tsx deleted file mode 100644 index e69de29..0000000 From 0b3db5bca6a73b932d1bd14f4b99debd62c39fd3 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 10:40:12 +0100 Subject: [PATCH 50/61] latest --- components/CandidateTestView/CandidateTestView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/CandidateTestView/CandidateTestView.tsx b/components/CandidateTestView/CandidateTestView.tsx index c6c6838..abed2d1 100644 --- a/components/CandidateTestView/CandidateTestView.tsx +++ b/components/CandidateTestView/CandidateTestView.tsx @@ -9,7 +9,6 @@ interface CandidateTestViewProps { token: string; } const CandidateTestView = (candidateTestViewProps: CandidateTestViewProps): JSX.Element => ( -

    Test {candidateTestViewProps.test.number}: {candidateTestViewProps.test.title}

    From 4189aecd6c75a71c32667ad61dc1a32730b6c36d Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 11:16:19 +0100 Subject: [PATCH 51/61] Consolidated api files --- api/candidateApiClientModule.ts | 54 ++++++++++++++++++++++++++++++++- api/sessionClient.ts | 40 ------------------------ helpers/tokenHelpers.ts | 14 --------- pages/testlibrary.tsx | 4 +-- 4 files changed, 54 insertions(+), 58 deletions(-) delete mode 100644 api/sessionClient.ts delete mode 100644 helpers/tokenHelpers.ts diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index 50e8222..786917b 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -1,5 +1,57 @@ -import getConfig from "next/config"; +import getConfig from 'next/config'; import fetch from "node-fetch"; +import {GetServerSideProps} from "next"; +import {ServerResponse} from "http"; +import {ParsedUrlQuery} from "querystring"; + +const {publicRuntimeConfig} = getConfig(); +const baseUrl = publicRuntimeConfig.API_URL; + +export async function checkToken(token: string): Promise { + const response = await fetch(`${baseUrl}/sessions/${token}`); + return response.ok;} + +export async function assertTokenIsValid(query: ParsedUrlQuery, response: ServerResponse): Promise { + const token = query.token as string; + const tokenIsValid = await checkToken(token); + + if (!tokenIsValid) { + response.statusCode = 404; + response.end(); + } + return token; +} + +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 { + const {publicRuntimeConfig} = getConfig(); + const baseUrl = publicRuntimeConfig.API_URL; + try { + const result = await fetch( + `${baseUrl}/sessions/${token}` + ); + const data = await result.json(); + return data; + } catch (error) { + console.error(error); + return error.message; + } +} export interface SessionCandidate { firstName: string; diff --git a/api/sessionClient.ts b/api/sessionClient.ts deleted file mode 100644 index 3d8decc..0000000 --- a/api/sessionClient.ts +++ /dev/null @@ -1,40 +0,0 @@ -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 { - 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 { - const {publicRuntimeConfig} = getConfig(); - const baseUrl = publicRuntimeConfig.API_URL; - try { - const result = await fetch( - `${baseUrl}/sessions/${token}` - ); - const data = await result.json(); - return data; - } catch (error) { - console.error(error); - return error.message; - } -} diff --git a/helpers/tokenHelpers.ts b/helpers/tokenHelpers.ts deleted file mode 100644 index 1f21358..0000000 --- a/helpers/tokenHelpers.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {ServerResponse} from "http"; -import {ParsedUrlQuery} from "querystring"; -import {checkToken} from "../api/sessionClient"; - -export async function assertTokenIsValid(query: ParsedUrlQuery, response: ServerResponse): Promise { - const token = query.token as string; - const tokenIsValid = await checkToken(token); - - if (!tokenIsValid) { - response.statusCode = 404; - response.end(); - } - return token; -} diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index 3e98764..d2792ad 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -3,10 +3,8 @@ import {GetServerSideProps, NextPage} from "next"; import Head from "next/head"; import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStepper"; import Layout from "../components/Layout/layout"; -import {assertTokenIsValid} from "../helpers/tokenHelpers"; import {useRouter} from "next/router"; -import {CandidateTestStatus} from "../api/candidateApiClientModule"; -import {getSessionCandidate} from "../api/sessionClient"; +import {assertTokenIsValid, CandidateTestStatus, getSessionCandidate} from "../api/candidateApiClientModule"; interface TestLibraryProps { sessionCandidate: SessionCandidate; From 24d8990ae8acbaeaf5698a863ccc340b30cf4f51 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 11:41:11 +0100 Subject: [PATCH 52/61] Consolidated interfaces into models --- Models/CandidateTestModel.ts | 1 + Models/SessionCandidateModels.ts | 16 +++++++++++ api/candidateApiClientModule.ts | 27 +------------------ .../TestLibraryStepper/TestLibraryStepper.tsx | 13 ++------- components/TokenLink/TokenLink.tsx | 4 +-- pages/index.tsx | 2 +- pages/testlibrary.tsx | 13 ++------- 7 files changed, 25 insertions(+), 51 deletions(-) create mode 100644 Models/SessionCandidateModels.ts diff --git a/Models/CandidateTestModel.ts b/Models/CandidateTestModel.ts index c0b63f2..18157f9 100644 --- a/Models/CandidateTestModel.ts +++ b/Models/CandidateTestModel.ts @@ -11,3 +11,4 @@ export interface CandidateTestModel { outputDescription: string; expectedOutput: string | number; } + diff --git a/Models/SessionCandidateModels.ts b/Models/SessionCandidateModels.ts new file mode 100644 index 0000000..45f5076 --- /dev/null +++ b/Models/SessionCandidateModels.ts @@ -0,0 +1,16 @@ +export interface CandidateTestStatus { + testName: string; + testStatus: string; +} +export interface SessionCandidate { + firstName: string; + lastName: string; + testStatuses: CandidateTestStatus[]; +} +export interface NewTestSubmission{ + testId: number; + testAnswer: string; +} +export interface TestLibraryStepperProps { + candidateTestStatuses: CandidateTestStatus[]; +} diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index 786917b..4d5ce8c 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -3,6 +3,7 @@ import fetch from "node-fetch"; import {GetServerSideProps} from "next"; import {ServerResponse} from "http"; import {ParsedUrlQuery} from "querystring"; +import {NewTestSubmission, SessionCandidate} from "../Models/SessionCandidateModels"; const {publicRuntimeConfig} = getConfig(); const baseUrl = publicRuntimeConfig.API_URL; @@ -27,17 +28,6 @@ export const getServerSideProps: GetServerSideProps = async ({res, query}) => { 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 { const {publicRuntimeConfig} = getConfig(); const baseUrl = publicRuntimeConfig.API_URL; @@ -53,21 +43,6 @@ export async function getSessionCandidate(token: string | string[] | undefined): } } -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; diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 933ba41..08c5229 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -7,15 +7,7 @@ import scss from '../TestLibraryStepper/TestLibraryStepper.module.scss'; import {TestList} from "../CandidateTestView/Tests/TestList"; import TokenLink from "../TokenLink/TokenLink"; import {CandidateTestModel} from "../../Models/CandidateTestModel"; - -interface CandidateTestStatus { - testName: string; - testStatus: string; -} - -interface TestLibraryStepperProps { - candidateTestStatuses: CandidateTestStatus[]; -} +import {CandidateTestStatus, TestLibraryStepperProps} from "../../Models/SessionCandidateModels"; function getSteps(): string[] { //set labels for steps @@ -31,7 +23,6 @@ export function getActiveStep(testArr: CandidateTestStatus[]): number { } export let testToRender: CandidateTestModel; - export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.Element { const steps = getSteps(); const activeStep = getActiveStep(props.candidateTestStatuses); @@ -58,7 +49,7 @@ export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX. ) : ( - + {activeStep === steps.length - 1 ? 'Start Final Test' : `Start Test ${activeStep + 1}`} diff --git a/components/TokenLink/TokenLink.tsx b/components/TokenLink/TokenLink.tsx index fc75d2a..f30f6ca 100644 --- a/components/TokenLink/TokenLink.tsx +++ b/components/TokenLink/TokenLink.tsx @@ -2,9 +2,9 @@ import {useRouter} from "next/router"; import Link from "next/link"; -type TokenLinkProps = {children: React.ReactNode; href: string; as: string} +type TokenLinkProps = {href: string}; -const TokenLink: React.FunctionComponent = ({children, href}: TokenLinkProps) => { +const TokenLink: React.FunctionComponent = ({children, href}) => { const router = useRouter(); const token = router.query.token; let link = ""; diff --git a/pages/index.tsx b/pages/index.tsx index ad8d668..3318484 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,7 +14,7 @@ const Home: NextPage = () =>
  • You must complete the test in one sitting
  • When you are ready and sure you won’t be disturbed, please click “Start”
    • - + Start
    diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index d2792ad..a02d8c4 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -4,7 +4,8 @@ import Head from "next/head"; import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStepper"; import Layout from "../components/Layout/layout"; import {useRouter} from "next/router"; -import {assertTokenIsValid, CandidateTestStatus, getSessionCandidate} from "../api/candidateApiClientModule"; +import {CandidateTestStatus, SessionCandidate} from "../Models/SessionCandidateModels"; +import {assertTokenIsValid, getSessionCandidate} from "../api/candidateApiClientModule"; interface TestLibraryProps { sessionCandidate: SessionCandidate; @@ -45,14 +46,4 @@ export const getServerSideProps: GetServerSideProps = async ({query, res}) => { } }; -export interface SessionCandidate { - firstName: string; - lastName: string; - testStatuses: CandidateTestStatus[]; -} -export interface NewTestSubmission{ - testId: number; - testAnswer: string; -} - export default TestLibrary; From 387b6297b4452f12d628466618d366e15ad40c99 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 12:51:17 +0100 Subject: [PATCH 53/61] Consolidated interfaces into models --- api/candidateApiClientModule.ts | 8 -------- .../candidateTestView.module.scss | 3 ++- components/TokenLink/TokenLink.tsx | 20 ++++++++----------- now.json | 15 ++++++++++++++ package-lock.json | 5 +++++ package.json | 3 ++- pages/index.tsx | 13 ++++++------ pages/submitted.tsx | 8 +++++++- pages/testlibrary.tsx | 1 + pages/testpage.tsx | 8 ++++++-- 10 files changed, 52 insertions(+), 32 deletions(-) create mode 100644 now.json diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index 4d5ce8c..534faff 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -1,6 +1,5 @@ import getConfig from 'next/config'; import fetch from "node-fetch"; -import {GetServerSideProps} from "next"; import {ServerResponse} from "http"; import {ParsedUrlQuery} from "querystring"; import {NewTestSubmission, SessionCandidate} from "../Models/SessionCandidateModels"; @@ -15,7 +14,6 @@ export async function checkToken(token: string): Promise { export async function assertTokenIsValid(query: ParsedUrlQuery, response: ServerResponse): Promise { const token = query.token as string; const tokenIsValid = await checkToken(token); - if (!tokenIsValid) { response.statusCode = 404; response.end(); @@ -23,11 +21,6 @@ export async function assertTokenIsValid(query: ParsedUrlQuery, response: Server return token; } -export const getServerSideProps: GetServerSideProps = async ({res, query}) => { - await assertTokenIsValid(query, res); - return { props: {}}; -}; - export async function getSessionCandidate(token: string | string[] | undefined): Promise { const {publicRuntimeConfig} = getConfig(); const baseUrl = publicRuntimeConfig.API_URL; @@ -46,7 +39,6 @@ export async function getSessionCandidate(token: string | string[] | undefined): 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: { diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 011de10..5b14162 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -17,7 +17,8 @@ white-space: nowrap; position: absolute; top: 1px; - right: 2px; + right: 100px; + margin-right: 1px; text-align: right; } diff --git a/components/TokenLink/TokenLink.tsx b/components/TokenLink/TokenLink.tsx index f30f6ca..96c4512 100644 --- a/components/TokenLink/TokenLink.tsx +++ b/components/TokenLink/TokenLink.tsx @@ -5,18 +5,14 @@ import Link from "next/link"; type TokenLinkProps = {href: string}; const TokenLink: React.FunctionComponent = ({children, href}) => { - const router = useRouter(); + const router = useRouter(); const token = router.query.token; - let link = ""; - if(token === undefined) { - link = '/404Error'; - } else { link = `${href}?token=${token}`} - - return ( - - {children} - - ) -}; + const hrefLink = `${href}?token=${token}`; + return ( + + {children} + + ) +} export default TokenLink; diff --git a/now.json b/now.json new file mode 100644 index 0000000..37681a4 --- /dev/null +++ b/now.json @@ -0,0 +1,15 @@ +{"version": 2, + "builds": [ + { + "src": "package.json", + "use": "@now/static-build", + "config": { + "distDir": "out" + } + } + ], + "routes": [ + { "handle": "filesystem" }, + { "src": "/.*", "status": 404, "dest": "/404Error" } + ] +} diff --git a/package-lock.json b/package-lock.json index 6d610f1..79936cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2045,6 +2045,11 @@ "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-9.3.6.tgz", "integrity": "sha512-XgxPc3WAkNpzD9xYtN4bd3wpV39WhnHYSwXGovVVcImXY6yn1as6hDgwkbuLADY/SHLIu2AI6CTVq0JDoTC/+g==" }, + "@now/static-build": { + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/@now/static-build/-/static-build-0.16.0.tgz", + "integrity": "sha512-2xcKUXjx3kLU6je/I6M050n3JS6XGvc+ItRDwiVdZ0gEbwiTJi9f3jZgyOVKtXWnacOSievqwnrHj64ULeju0w==" + }, "@sinonjs/commons": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.7.2.tgz", diff --git a/package.json b/package.json index b50af2d..8f0ebaf 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,8 @@ "next": "^9.3.6", "react": "^16.13.1", "react-dom": "^16.13.1", - "webfont-loader": "^1.1.0" + "webfont-loader": "^1.1.0", + "@now/static-build": "^0.16.0" }, "devDependencies": { "@testing-library/jest-dom": "^5.5.0", diff --git a/pages/index.tsx b/pages/index.tsx index 3318484..3e04bd3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,7 +2,8 @@ import React from "react"; import scss from '../pageStyles/index.module.scss'; import Layout from "../components/Layout/layout"; import TokenLink from "../components/TokenLink/TokenLink"; -import {NextPage} from "next"; +import {GetServerSideProps, NextPage} from "next"; +import {assertTokenIsValid} from "../api/candidateApiClientModule"; const Home: NextPage = () => @@ -19,10 +20,8 @@ const Home: NextPage = () => ; - +export const getServerSideProps: GetServerSideProps = async ({res, query}) => { + await assertTokenIsValid(query, res); + return { props: {}}; +}; export default Home; - - - - - diff --git a/pages/submitted.tsx b/pages/submitted.tsx index 74f1f7f..1af0ead 100644 --- a/pages/submitted.tsx +++ b/pages/submitted.tsx @@ -1,7 +1,8 @@ -import {NextPage} from 'next'; +import {GetServerSideProps, NextPage} from 'next'; import Layout from "../components/Layout/layout"; import scss from "../pageStyles/submitted.module.scss"; import React from "react"; +import {assertTokenIsValid} from "../api/candidateApiClientModule"; const Submitted: NextPage = () => ( @@ -12,5 +13,10 @@ const Submitted: NextPage = () => ( ); +export const getServerSideProps: GetServerSideProps = async ({res, query}) => { + await assertTokenIsValid(query, res); + return { props: {}}; +}; export default Submitted; + diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index a02d8c4..f980fd9 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -47,3 +47,4 @@ export const getServerSideProps: GetServerSideProps = async ({query, res}) => { }; export default TestLibrary; + diff --git a/pages/testpage.tsx b/pages/testpage.tsx index 7f5782a..a2b93cf 100644 --- a/pages/testpage.tsx +++ b/pages/testpage.tsx @@ -2,11 +2,12 @@ import Layout from "../components/Layout/layout"; import CandidateTestView from "../components/CandidateTestView/CandidateTestView"; import {CandidateTestModel} from "../Models/CandidateTestModel"; -import {NextPage} from "next"; +import {GetServerSideProps, NextPage} from "next"; import {useRouter} from "next/router"; import {getActiveStep} from "../components/TestLibraryStepper/TestLibraryStepper"; import {TestList} from "../components/CandidateTestView/Tests/TestList"; import {useStatus} from "./testlibrary"; +import {assertTokenIsValid} from "../api/candidateApiClientModule"; export function getTestToRender(): CandidateTestModel { const activeStep = getActiveStep(useStatus()); @@ -23,5 +24,8 @@ const TestPage: NextPage = () => { ) }; - +export const getServerSideProps: GetServerSideProps = async ({res, query}) => { + await assertTokenIsValid(query, res); + return { props: {}}; +}; export default TestPage; From c90aa4de2730577f819564084bcf121e9d3686c0 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 12:53:15 +0100 Subject: [PATCH 54/61] Consolidated interfaces into models --- Models/SessionCandidateModels.ts | 3 --- api/candidateApiClientModule.ts | 3 +-- components/TestLibraryStepper/TestLibraryStepper.tsx | 6 ++++-- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/Models/SessionCandidateModels.ts b/Models/SessionCandidateModels.ts index 45f5076..78368a1 100644 --- a/Models/SessionCandidateModels.ts +++ b/Models/SessionCandidateModels.ts @@ -11,6 +11,3 @@ export interface NewTestSubmission{ testId: number; testAnswer: string; } -export interface TestLibraryStepperProps { - candidateTestStatuses: CandidateTestStatus[]; -} diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index 534faff..3a634c2 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -28,8 +28,7 @@ export async function getSessionCandidate(token: string | string[] | undefined): const result = await fetch( `${baseUrl}/sessions/${token}` ); - const data = await result.json(); - return data; + return await result.json(); } catch (error) { console.error(error); return error.message; diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 08c5229..f5fdae7 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -7,8 +7,10 @@ import scss from '../TestLibraryStepper/TestLibraryStepper.module.scss'; import {TestList} from "../CandidateTestView/Tests/TestList"; import TokenLink from "../TokenLink/TokenLink"; import {CandidateTestModel} from "../../Models/CandidateTestModel"; -import {CandidateTestStatus, TestLibraryStepperProps} from "../../Models/SessionCandidateModels"; - +import {CandidateTestStatus} from "../../Models/SessionCandidateModels"; +export interface TestLibraryStepperProps { + candidateTestStatuses: CandidateTestStatus[]; +} function getSteps(): string[] { //set labels for steps const testLabelArray = TestList.map(test => test.title) From b19e296aca53ca9423ce19990e84887fd165dcbc Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 12:57:25 +0100 Subject: [PATCH 55/61] Consolidated interfaces into models --- pages/_document.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/pages/_document.tsx b/pages/_document.tsx index 8617748..72892af 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -3,8 +3,6 @@ import React from "react"; import {NextPageContext} from "next"; import {RenderPage} from "next/dist/next-server/lib/utils"; import scss from "../components/Layout/layout.module.scss"; -import {loadEnvConfig} from "next/dist/lib/load-env-config"; -export const API_URL = loadEnvConfig("/env-var.env"); class MyDocument extends Document { static async getInitialProps(ctx: NextPageContext & { renderPage: RenderPage }): Promise { From 734fb0d784f21dd9d6c2d1acecdbab4701ccac7a Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 13:32:23 +0100 Subject: [PATCH 56/61] Consolidated interfaces into models --- .../TestLibraryStepper/TestLibraryStepper.tsx | 4 ++-- pages/testlibrary.tsx | 23 ++++-------------- pages/testpage.tsx | 24 ++++++++++++------- 3 files changed, 22 insertions(+), 29 deletions(-) diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index f5fdae7..20fe95d 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -18,9 +18,9 @@ function getSteps(): string[] { return testLabelArray; } -export function getActiveStep(testArr: CandidateTestStatus[]): number { +export function getActiveStep(sessionCandidate: CandidateTestStatus[]): number { //check for number of completed tests - const completedTests = (testArr.filter(({testStatus}) => testStatus === "Completed")); + const completedTests = (sessionCandidate.filter(({testStatus}) => testStatus === "Completed")); return completedTests.length; } export let testToRender: CandidateTestModel; diff --git a/pages/testlibrary.tsx b/pages/testlibrary.tsx index f980fd9..5524f44 100644 --- a/pages/testlibrary.tsx +++ b/pages/testlibrary.tsx @@ -1,37 +1,22 @@ -import React, {useEffect, useState} from "react"; +import React from "react"; import {GetServerSideProps, NextPage} from "next"; import Head from "next/head"; import TestLibraryStepper from "../components/TestLibraryStepper/TestLibraryStepper"; import Layout from "../components/Layout/layout"; -import {useRouter} from "next/router"; -import {CandidateTestStatus, SessionCandidate} from "../Models/SessionCandidateModels"; import {assertTokenIsValid, getSessionCandidate} from "../api/candidateApiClientModule"; +import {SessionCandidate} from "../Models/SessionCandidateModels"; interface TestLibraryProps { sessionCandidate: SessionCandidate; } -export function useStatus(): CandidateTestStatus[] { - const router = useRouter(); - const emptyStatusArray: CandidateTestStatus[] = []; - const [candidateTestStatus, setCandidateTestStatus] = useState(emptyStatusArray); - useEffect(() => { - getSessionCandidate(router.query.token).then(status => status.testStatuses).then(result => setCandidateTestStatus(result)); - }); - return candidateTestStatus; -} - -const TestLibrary: NextPage = () => { - const [key, setKey] = React.useState(0); - React.useEffect(() => { - setKey(1); - }, []); +const TestLibrary: NextPage = ({sessionCandidate}) => { return ( TestSwitch Test Library - + ); }; diff --git a/pages/testpage.tsx b/pages/testpage.tsx index a2b93cf..547b40c 100644 --- a/pages/testpage.tsx +++ b/pages/testpage.tsx @@ -6,26 +6,34 @@ import {GetServerSideProps, NextPage} from "next"; import {useRouter} from "next/router"; import {getActiveStep} from "../components/TestLibraryStepper/TestLibraryStepper"; import {TestList} from "../components/CandidateTestView/Tests/TestList"; -import {useStatus} from "./testlibrary"; -import {assertTokenIsValid} from "../api/candidateApiClientModule"; +import {assertTokenIsValid, getSessionCandidate} from "../api/candidateApiClientModule"; +import {CandidateTestStatus, SessionCandidate} from "../Models/SessionCandidateModels"; -export function getTestToRender(): CandidateTestModel { - const activeStep = getActiveStep(useStatus()); +interface TestPageProps { + sessionCandidate: SessionCandidate; +} +export function getTestToRender(candidateTestStatuses: CandidateTestStatus[]): CandidateTestModel { + const activeStep = getActiveStep(candidateTestStatuses); return (TestList[activeStep + 1]); } -const TestPage: NextPage = () => { +const TestPage: NextPage = ({sessionCandidate}) => { const router = useRouter(); const token = router.query.token as string; - const testToRender = getTestToRender(); + const testToRender = getTestToRender(sessionCandidate.testStatuses); return ( ) }; -export const getServerSideProps: GetServerSideProps = async ({res, query}) => { +export const getServerSideProps: GetServerSideProps = async ({query, res}) => { await assertTokenIsValid(query, res); - return { props: {}}; + const token = query.token as string; + return { + props: { + sessionCandidate: await getSessionCandidate(token) + } + } }; export default TestPage; From 8a8731e70c5f69b1a181a82a846419e895a976bf Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 13:45:02 +0100 Subject: [PATCH 57/61] Consolidated interfaces into models --- pages/testpage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/pages/testpage.tsx b/pages/testpage.tsx index 547b40c..5b920ed 100644 --- a/pages/testpage.tsx +++ b/pages/testpage.tsx @@ -7,20 +7,20 @@ import {useRouter} from "next/router"; import {getActiveStep} from "../components/TestLibraryStepper/TestLibraryStepper"; import {TestList} from "../components/CandidateTestView/Tests/TestList"; import {assertTokenIsValid, getSessionCandidate} from "../api/candidateApiClientModule"; -import {CandidateTestStatus, SessionCandidate} from "../Models/SessionCandidateModels"; +import {SessionCandidate} from "../Models/SessionCandidateModels"; interface TestPageProps { sessionCandidate: SessionCandidate; } -export function getTestToRender(candidateTestStatuses: CandidateTestStatus[]): CandidateTestModel { - const activeStep = getActiveStep(candidateTestStatuses); +export function getTestToRender(sessionCandidate: SessionCandidate): CandidateTestModel { + const activeStep = getActiveStep(sessionCandidate.testStatuses); return (TestList[activeStep + 1]); } const TestPage: NextPage = ({sessionCandidate}) => { const router = useRouter(); const token = router.query.token as string; - const testToRender = getTestToRender(sessionCandidate.testStatuses); + const testToRender = getTestToRender(sessionCandidate); return ( From f9438f9a3bcc381e5b45aa97d18caf29bebbf4c8 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 13:49:13 +0100 Subject: [PATCH 58/61] Consolidated interfaces into models --- .../CandidateTestView/Instructions/Instructions.module.scss | 1 + components/CandidateTestView/candidateTestView.module.scss | 4 ++-- components/TextEditor/TextEditorContainer.module.scss | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/CandidateTestView/Instructions/Instructions.module.scss b/components/CandidateTestView/Instructions/Instructions.module.scss index 20ca5d6..2c732eb 100644 --- a/components/CandidateTestView/Instructions/Instructions.module.scss +++ b/components/CandidateTestView/Instructions/Instructions.module.scss @@ -8,6 +8,7 @@ text-align: left; padding-right: 1rem; padding-left: 5rem; + margin-right: 2rem; line-height: 130%; width: 700px; } diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 5b14162..75744ba 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -7,7 +7,7 @@ flex-direction: row; justify-content: center; align-items: flex-start; - margin-top: 100px; + margin-top: 70px; } .testTitle { @@ -32,7 +32,7 @@ display: flex; flex-direction: column; align-items: center; - margin-top: 50px; + margin-top: 70px; } .testTitle { diff --git a/components/TextEditor/TextEditorContainer.module.scss b/components/TextEditor/TextEditorContainer.module.scss index 7e4079b..a7d3f7a 100644 --- a/components/TextEditor/TextEditorContainer.module.scss +++ b/components/TextEditor/TextEditorContainer.module.scss @@ -10,6 +10,7 @@ color: $techSwitchWhite; font-size: $desktopBodyFontSize; margin-right: 5rem; + margin-left: 2rem; padding: 0; } From 19ce29fc807102100de852561dc45f237452a3d1 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 14:49:39 +0100 Subject: [PATCH 59/61] Consolidated interfaces into models --- components/CandidateTestView/candidateTestView.module.scss | 6 ++---- components/Layout/layout.module.scss | 4 ++-- components/TestLibraryStepper/TestLibraryStepper.tsx | 3 --- components/TextEditor/TextEditorContainer.tsx | 3 ++- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/components/CandidateTestView/candidateTestView.module.scss b/components/CandidateTestView/candidateTestView.module.scss index 75744ba..4ae38d2 100644 --- a/components/CandidateTestView/candidateTestView.module.scss +++ b/components/CandidateTestView/candidateTestView.module.scss @@ -22,17 +22,15 @@ text-align: right; } - @media (max-width: $mediaLowResMaxWidth){ //Low Resolution 900px and below .testPage { box-sizing: border-box; - max-height: 100vh; - max-width: 100vw; + width: 100vw; display: flex; flex-direction: column; align-items: center; - margin-top: 70px; + margin-top: 50px; } .testTitle { diff --git a/components/Layout/layout.module.scss b/components/Layout/layout.module.scss index 4fba8ae..d361e73 100644 --- a/components/Layout/layout.module.scss +++ b/components/Layout/layout.module.scss @@ -5,8 +5,8 @@ box-sizing: border-box; border-style: none; font-family: $techSwitchFont; - max-height: 100vh; - max-width: 100vw; + min-height: 100vh; + width: 100vw; margin: 0; padding: 0; } diff --git a/components/TestLibraryStepper/TestLibraryStepper.tsx b/components/TestLibraryStepper/TestLibraryStepper.tsx index 20fe95d..b20c1fb 100644 --- a/components/TestLibraryStepper/TestLibraryStepper.tsx +++ b/components/TestLibraryStepper/TestLibraryStepper.tsx @@ -6,7 +6,6 @@ import {h1Style, TestSwitchConnector, TestSwitchTheme} from "../TestLibraryOverr import scss from '../TestLibraryStepper/TestLibraryStepper.module.scss'; import {TestList} from "../CandidateTestView/Tests/TestList"; import TokenLink from "../TokenLink/TokenLink"; -import {CandidateTestModel} from "../../Models/CandidateTestModel"; import {CandidateTestStatus} from "../../Models/SessionCandidateModels"; export interface TestLibraryStepperProps { candidateTestStatuses: CandidateTestStatus[]; @@ -23,12 +22,10 @@ export function getActiveStep(sessionCandidate: CandidateTestStatus[]): number { const completedTests = (sessionCandidate.filter(({testStatus}) => testStatus === "Completed")); return completedTests.length; } -export let testToRender: CandidateTestModel; export default function TestLibraryStepper(props: TestLibraryStepperProps): JSX.Element { const steps = getSteps(); const activeStep = getActiveStep(props.candidateTestStatuses); - testToRender = TestList[activeStep+1]; return (
    diff --git a/components/TextEditor/TextEditorContainer.tsx b/components/TextEditor/TextEditorContainer.tsx index 0b9a76c..4a60735 100644 --- a/components/TextEditor/TextEditorContainer.tsx +++ b/components/TextEditor/TextEditorContainer.tsx @@ -29,10 +29,11 @@ const TextEditorContainer: FunctionComponent = ({heigh function submitForm(): void { const testAnswer = getEditorContentIfMountedRef.current(); + const url = "/testlibrary"; addTestSubmission(token,{testId,testAnswer}) .then((response)=>{ if (response.ok) { - router.push('/testlibrary?token='+{token}); + router.push(`${url}?token=${token}`); } else { throw Error(response.statusText); } From bba4f21422d8774d59456a0d8a341f5d322fd988 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 14:53:04 +0100 Subject: [PATCH 60/61] Consolidated interfaces into models --- api/candidateApiClientModule.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index 3a634c2..c50937f 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -24,15 +24,10 @@ export async function assertTokenIsValid(query: ParsedUrlQuery, response: Server export async function getSessionCandidate(token: string | string[] | undefined): Promise { const {publicRuntimeConfig} = getConfig(); const baseUrl = publicRuntimeConfig.API_URL; - try { - const result = await fetch( - `${baseUrl}/sessions/${token}` - ); - return await result.json(); - } catch (error) { - console.error(error); - return error.message; - } + const result = await fetch( + `${baseUrl}/sessions/${token}` + ); + return await result.json(); } export async function addTestSubmission( tokenId: string, newTestSubmission: NewTestSubmission) { From c62f44a22b3af0c710a5d1f0b277d63f4e626d24 Mon Sep 17 00:00:00 2001 From: Emmalu Fox Date: Thu, 7 May 2020 14:58:49 +0100 Subject: [PATCH 61/61] changes --- api/candidateApiClientModule.ts | 4 +-- now.json | 15 --------- package-lock.json | 5 --- package.json | 3 +- pageStyles/404Error.module.scss | 56 +++++++++++++++++++++++++++++++++ pages/404Error.tsx | 8 ++--- 6 files changed, 63 insertions(+), 28 deletions(-) delete mode 100644 now.json create mode 100644 pageStyles/404Error.module.scss diff --git a/api/candidateApiClientModule.ts b/api/candidateApiClientModule.ts index c50937f..db731d2 100644 --- a/api/candidateApiClientModule.ts +++ b/api/candidateApiClientModule.ts @@ -1,5 +1,5 @@ import getConfig from 'next/config'; -import fetch from "node-fetch"; +import fetch, {Response} from "node-fetch"; import {ServerResponse} from "http"; import {ParsedUrlQuery} from "querystring"; import {NewTestSubmission, SessionCandidate} from "../Models/SessionCandidateModels"; @@ -30,7 +30,7 @@ export async function getSessionCandidate(token: string | string[] | undefined): return await result.json(); } -export async function addTestSubmission( tokenId: string, newTestSubmission: NewTestSubmission) { +export async function addTestSubmission( tokenId: string, newTestSubmission: NewTestSubmission): Promise { const { publicRuntimeConfig } = getConfig(); const apiURL = publicRuntimeConfig.API_URL; return await fetch(`${apiURL}/sessions/${tokenId}`, { diff --git a/now.json b/now.json deleted file mode 100644 index 37681a4..0000000 --- a/now.json +++ /dev/null @@ -1,15 +0,0 @@ -{"version": 2, - "builds": [ - { - "src": "package.json", - "use": "@now/static-build", - "config": { - "distDir": "out" - } - } - ], - "routes": [ - { "handle": "filesystem" }, - { "src": "/.*", "status": 404, "dest": "/404Error" } - ] -} diff --git a/package-lock.json b/package-lock.json index 79936cf..6d610f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2045,11 +2045,6 @@ "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-9.3.6.tgz", "integrity": "sha512-XgxPc3WAkNpzD9xYtN4bd3wpV39WhnHYSwXGovVVcImXY6yn1as6hDgwkbuLADY/SHLIu2AI6CTVq0JDoTC/+g==" }, - "@now/static-build": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/@now/static-build/-/static-build-0.16.0.tgz", - "integrity": "sha512-2xcKUXjx3kLU6je/I6M050n3JS6XGvc+ItRDwiVdZ0gEbwiTJi9f3jZgyOVKtXWnacOSievqwnrHj64ULeju0w==" - }, "@sinonjs/commons": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.7.2.tgz", diff --git a/package.json b/package.json index 8f0ebaf..b50af2d 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,7 @@ "next": "^9.3.6", "react": "^16.13.1", "react-dom": "^16.13.1", - "webfont-loader": "^1.1.0", - "@now/static-build": "^0.16.0" + "webfont-loader": "^1.1.0" }, "devDependencies": { "@testing-library/jest-dom": "^5.5.0", diff --git a/pageStyles/404Error.module.scss b/pageStyles/404Error.module.scss new file mode 100644 index 0000000..f2fb70a --- /dev/null +++ b/pageStyles/404Error.module.scss @@ -0,0 +1,56 @@ +@import "constants"; + +.errorHeader { + color: $techSwitchYellow; + font-size: $desktopHeaderFontSize; +} + +.thankyou { + color: $techSwitchYellow; + font-size: $desktopHeaderFontSize; +} + +.errorMessage { + color: $techSwitchWhite; + font-size: $desktopSubHeaderFontSize; + max-width: 600px; +} + +.content { + width: 100vw; + max-height: 700px; + min-height: 400px; + text-align: center; + align-items: center; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: stretch; + padding: 3px; + font-family: Open Sans, sans-serif; + text-decoration: none; +} + + +//Media Queries + +@media (max-width: $mediaLowResMaxWidth){ + //Low Resolution 900px and below + .errorHeader { + font-size: $lowResHeaderFontSize; + margin: 0.2em; + padding: 0.5rem; + } + .thankyou { + font-size: $lowResSubHeaderFontSize; + margin: 0.2em; + padding: 0.5rem; + } + .errorMessage { + font-size: $lowResBodyFontSize; + line-height: 150%; + margin: 0.2em; + padding: 0.5rem; + } + +} diff --git a/pages/404Error.tsx b/pages/404Error.tsx index a2d59e5..6b6461e 100644 --- a/pages/404Error.tsx +++ b/pages/404Error.tsx @@ -1,14 +1,14 @@ import {NextPage} from 'next'; import Layout from "../components/Layout/layout"; -import scss from "../pageStyles/submitted.module.scss"; +import scss from "../pageStyles/404Error.module.scss"; import React from "react"; const AccessDenied: NextPage = () => (
    -

    404 Error: Page Cannot be Found

    -

    Please use the unique link sent to you by email to access your tests

    -

    Thank You!

    +

    404 Error: Page Cannot be Found

    +

    Please use the unique link sent to you by email to access your tests

    +

    Thank You!

     );