From b960468f7849238bf4a51ec36ac6293708a5612e Mon Sep 17 00:00:00 2001 From: ceddybi Date: Sat, 27 Jan 2024 15:45:57 -0500 Subject: [PATCH] questions --- src/app/dashboard/index.tsx | 7 + src/app/index.tsx | 1 - src/app/layout.tsx | 20 ++- src/app/navbar.tsx | 2 +- src/app/questions/index.tsx | 11 ++ src/app/questions/interfaces.ts | 28 +++ src/app/questions/list.sample.tsx | 88 ++++++++++ src/app/questions/list.tsx | 277 ++++++++++++++++++++++++++++++ yarn.lock | 20 --- 9 files changed, 423 insertions(+), 31 deletions(-) create mode 100644 src/app/questions/index.tsx create mode 100644 src/app/questions/interfaces.ts create mode 100644 src/app/questions/list.sample.tsx create mode 100644 src/app/questions/list.tsx diff --git a/src/app/dashboard/index.tsx b/src/app/dashboard/index.tsx index e69de29..3ea236d 100644 --- a/src/app/dashboard/index.tsx +++ b/src/app/dashboard/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +export const Dashboard = () => { + return
Dashboard
; +}; + +export default Dashboard; diff --git a/src/app/index.tsx b/src/app/index.tsx index 822140e..57ad571 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -6,7 +6,6 @@ import { createRoot } from "react-dom/client"; const root = createRoot(document.body); root.render(
-
); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d0d4aff..32da5b5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,14 +1,9 @@ +import Dashboard from "./dashboard"; +import Navbar from "./navbar"; +import Questions from "./questions"; import React from "react"; import Settings from "./settings"; -const Dashboard = () => { - return
Dashboard
; -}; - -const Questions = () => { - return
Questions
; -}; - const NotFound = () => { return
Not Found
; }; @@ -39,5 +34,12 @@ export const Layout = () => { const hash = useHashState(); const route = routes.find((r) => `#/${r.path}` === hash); const Component = route ? route.component : NotFound; - return
{}
; + return ( +
+ +
+ +
+
+ ); }; diff --git a/src/app/navbar.tsx b/src/app/navbar.tsx index 833f6d9..110d0d7 100644 --- a/src/app/navbar.tsx +++ b/src/app/navbar.tsx @@ -25,7 +25,7 @@ export default function Navbar({ user }: { user: any }) { }; return ( - + {({ open }) => ( <>
diff --git a/src/app/questions/index.tsx b/src/app/questions/index.tsx new file mode 100644 index 0000000..78087de --- /dev/null +++ b/src/app/questions/index.tsx @@ -0,0 +1,11 @@ +import List from "./list"; +import React from "react"; + +export const QuestionsPage = () => { + return ( +
+ +
+ ); +}; +export default QuestionsPage; diff --git a/src/app/questions/interfaces.ts b/src/app/questions/interfaces.ts new file mode 100644 index 0000000..38d166a --- /dev/null +++ b/src/app/questions/interfaces.ts @@ -0,0 +1,28 @@ +export interface InputOption { + value: string; + label: string; +} + +export interface Answer { + inputId: string; + inputType: string; + answerText: string; +} + +export interface Question { + question: string; + inputId: string; + inputType: "input" | "text" | "radio" | "checkbox" | "select" | "textarea" | "fieldset"; + inputOptions?: InputOption; + inputTypeValue?: string; + answers?: Answer[]; +} + + +export interface QuestionAnswer { + question: Question; + chainRes: { + text: string; + [key: string]: any; + } +} diff --git a/src/app/questions/list.sample.tsx b/src/app/questions/list.sample.tsx new file mode 100644 index 0000000..3899e86 --- /dev/null +++ b/src/app/questions/list.sample.tsx @@ -0,0 +1,88 @@ +export const questionSamples = [ + { + question: { + question: "Êtes-vous éligible pour travailler au Canada?", + inputId: "input-q_4e16b181f7f75a81edab7d4322707550", + inputType: "fieldset", + answers: [ + { + inputId: "input-q_4e16b181f7f75a81edab7d4322707550-0", + inputType: "radio", + answerText: "Yes", + }, + { + inputId: "input-q_4e16b181f7f75a81edab7d4322707550-1", + inputType: "radio", + answerText: "No", + }, + ], + }, + chainRes: { + text: 'input-q_4e16b181f7f75a81edab7d4322707550-0', + }, + }, + + { + question: { + question: + "Do you have technical expertise in any of the following areas?(optional)", + inputId: "input-q_74e6547a6894e8856547fb4b8eddce7d", + inputType: "fieldset", + answers: [ + { + inputId: + "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-0", + inputType: "checkbox", + answerText: "Video Streaming", + }, + { + inputId: + "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-1", + inputType: "checkbox", + answerText: "Security", + }, + { + inputId: + "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-2", + inputType: "checkbox", + answerText: "Machine Learning", + }, + { + inputId: + "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-3", + inputType: "checkbox", + answerText: "Front-end Development", + }, + { + inputId: + "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-4", + inputType: "checkbox", + answerText: "Event-Driven Design", + }, + { + inputId: + "ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-5", + inputType: "checkbox", + answerText: "Miscroservices", + }, + ], + }, + chainRes: { + text: '"ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-0,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-1,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-2,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-3,ifl-CheckboxFormField-ihl-useId-indeed-theme-provider-woxvrx-11-4"', + }, + }, + { + question: { + question: "City you reside in", + inputId: "input-q_7ae9d215d9398af70eba60d4030366bc", + inputType: "input", + inputTypeValue: "text", + }, + chainRes: { + text: "Toronto", + }, + }, +]; + + +export default questionSamples; \ No newline at end of file diff --git a/src/app/questions/list.tsx b/src/app/questions/list.tsx new file mode 100644 index 0000000..2c44c09 --- /dev/null +++ b/src/app/questions/list.tsx @@ -0,0 +1,277 @@ +import { Answer, QuestionAnswer } from "./interfaces"; +import { + Badge, + BadgeDelta, + Bold, + Card, + Col, + Flex, + Grid, + List, + ListItem, + Metric, + Text, + Textarea, + Title, +} from "@tremor/react"; +import { + ClockIcon, + CogIcon, + MinusCircleIcon, + ShoppingCartIcon, + StatusOnlineIcon, +} from "@heroicons/react/outline"; + +import React from "react"; +import _get from "lodash/get"; +import { questionSamples } from "./list.sample"; +import { uniq } from "lodash"; + +const cities = [ + { + city: "Athens", + rating: "2 open PR", + }, + { + city: "Luzern", + rating: "1 open PR", + }, + { + city: "Zürich", + rating: "0 open PR", + }, + { + city: "Vienna", + rating: "1 open PR", + }, + { + city: "Ermatingen", + rating: "0 open PR", + }, + { + city: "Lisbon", + rating: "0 open PR", + }, +]; + +interface ICheckbox { + title: string; + checked: boolean; + id: string; + handleClick: () => void; +} + +const RenderCheckbox = ({ + title, + checked = false, + id, + handleClick, +}: ICheckbox) => { + return ( +
+ + +
+ ); +}; + +const RenderQuestion = ({ + question, + handleChangeAnswer, +}: { + question: QuestionAnswer; + handleChangeAnswer: (answer: Answer) => void; +}) => { + const questionInputType = _get(question, "question.inputType", "text"); + const questionInputTypeValue = _get( + question, + "question.inputTypeValue", + "text" + ); + const questionAnswerText = _get(question, "chainRes.text", ""); + + switch (questionInputType) { + case "fieldset": + const questionAnswers = question.question.answers || []; + return ( +
+ + {questionAnswers.map((answer) => { + const isChecked = question.chainRes.text.includes(answer.inputId); + return ( + handleChangeAnswer(answer)} + id={answer.inputId} + key={answer.inputId} + title={answer.answerText} + /> + ); + })} + +
+ ); + default: + case "text": + return ( +