new assessment test

app/javascript/components/Navegator/Navegator.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useState } from "react";
+import { FaHome, FaPlus } from "react-icons/fa";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useHistory } from "react-router-dom";
-import { FaHome, FaPlus } from "react-icons/fa";
 import styled from "styled-components";
 
-import { turnOff } from "../../services/store/unsavedChanges";
+import { QuestionRoutePaths } from "../../routes";
 import { RootState } from "../../services/store";
+import { turnOff } from "../../services/store/unsavedChanges";
 import { Dialog } from "../Dialog";
-import {QuestionRoutePaths} from "../../routes";
 
 const HorizontalMenu = styled.ul`
   margin: 0;
@@ -44,11 +44,12 @@ const Item: FC<ItemProps> = ({ children, className }) => (
 type Props = {
   home?: boolean
   newQuestion?: boolean
+  newAssessment?: boolean
   children?: any
 }
 
 export const Navigator: FC<Props> = ({
-  home = false, newQuestion = false, children,
+  home = false, newQuestion = false, newAssessment = false, children,
 }) => {
   const [confirmLeaveDialog, setConfirmLeaveDialog] = useState(false);
   const unsavedChanges = useSelector((state: RootState) => state.unsavedChanges)
@@ -98,6 +99,16 @@ export const Navigator: FC<Props> = ({
               </Item>
             ) : null
           }
+          {
+            (newAssessment) ? (
+              <Item>
+                <Link to="/assessments/new" className="flex">
+                  <FaPlus className="my-auto" />
+                  <span className="pl-3">Nova Avaliação</span>
+                </Link>
+              </Item>
+            ) : null
+          }
           {children}
         </HorizontalMenu>
       </div>

app/javascript/pages/assessment/AssessmentList.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
+import { Navigator } from '../../components'
 import { AssessmentListItem } from './components/AssessmentListItem'
 import { assessmentMocks } from './mock'
 
 export const AssessmentList = () => {
   return (
+    <>
+      <Navigator newAssessment />
       <div className="m-auto w-full grid gap-4 mt-4" style={{
         width: '400px',
       }}>
@@ -11,5 +14,6 @@ export const AssessmentList = () => {
           <AssessmentListItem key={assessment.id} assessment={assessment} />
         ))}
       </div>
+    </>
   )
 }

app/javascript/pages/assessment/NewAssessement.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Button, Navigator } from '../../components'
+
+export const NewAssessement = () => {
+  return (
+    <>
+      <Navigator home />
+      <div className="m-auto grid gap-4 mt-4 mx-6">
+        <div
+          className="mx-1 sm:mx-0 mb-4 sm:mb-0 border-l-8 border-primary-light flex bg-white rounded shadow group transition-all duration-500"
+        >
+          <div className="flex flex-row w-full px-3 py-2 justify-between">
+            <h2>
+              Ano de Criação
+            </h2>
+
+            <div className="flex">
+              <h3>Apenas inéditas?</h3>
+              <input className="ml-3" type="radio" id="huey" name="drone" value="huey"
+                checked />
+              <label className="ml-1" htmlFor="huey">Sim</label>
+              <input className="ml-3" type="radio" id="dewey" name="drone" value="dewey" />
+              <label className="ml-1" htmlFor="dewey">Não</label>
+            </div>
+          </div>
+
+        </div>
+        <div
+          className="mx-1 sm:mx-0 mb-4 sm:mb-0 border-l-8 border-primary-light flex bg-white rounded shadow group transition-all duration-500"
+        >
+          <div className="flex flex-row w-full px-3 py-2 justify-between">
+            <h2>
+              Habilidade Cognitiva
+            </h2>
+
+            <div className="flex">
+              <select>
+                <option>Cálculo</option>
+                <option>Geometria Analítica</option>
+                <option>Álgebra Linear</option>
+                <option>Probabilidade e Estatística</option>
+                <option>Matemática Discreta</option>
+                <option>Lógica Matemática</option>
+                <option>Pesquisa Operacional</option>
+                <option>Cálculo Numérico</option>
+                <option>Física</option>
+                <option>Algoritmos e Estruturas de Dados</option>
+                <option>Projeto e Análise de Algoritmos</option>
+                <option>Programação Estruturada</option>
+                <option>Programação Orientada a Objetos</option>
+                <option>Programação Funcional</option>
+                <option>Programação Web</option>
+                <option>Programação para Dispositivos</option>
+                <option>Engenharia de Software</option>
+                <option>Banco de Dados</option>
+                <option>Gerência de Projetos</option>
+                <option>Arquitetura de Computadores</option>
+                <option>Sistemas Digitais</option>
+                <option>Sistemas Operacionais</option>
+                <option>Redes de Computadores</option>
+                <option>Compiladores</option>
+                <option>Teoria da Computação</option>
+                <option>Sistemas Inteligentes</option>
+                <option>Robótica</option>
+                <option>Computação Gráfica</option>
+                <option>Processamento de Sinais</option>
+              </select>
+            </div>
+          </div>
+
+        </div>
+        <div
+          className="mx-1 sm:mx-0 mb-4 sm:mb-0 border-l-8 border-primary-light flex bg-white rounded shadow group transition-all duration-500"
+        >
+          <div className="flex flex-row w-full px-3 py-2 justify-between">
+            <h2>
+              Habilidade Cognitiva
+            </h2>
+
+            <div className="flex">
+              <select>
+                <option>Algoritmos de Alto Desempenho</option>
+                <option>Ciência, Tecnologia e Sociedade</option>
+                <option>Sistemas de Software</option>
+                <option>Infraestrutura de Sistemas Computacionais</option>
+              </select>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <Button type="primary" className="ml-auto mr-6 mt-6">
+        Gerar
+      </Button>
+    </>
+  )
+}

app/javascript/routes/paths.ts

@@ -20,4 +20,5 @@ export const DashboardRoutePaths = {
 
 export const AssessmentRoutePaths = {
   index: "/assessments",
+  new: "/assessments/new",
 }

app/javascript/routes/routes.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { Switch, Route, Redirect } from "react-router-dom";
+import { Redirect, Route, Switch } from "react-router-dom";
 
-import { Profile } from "../pages/session";
-import { Dashboard } from '../pages/dashboard'
-import { List, New, Show, Review, Edit } from "../pages/question";
 import { AssessmentList } from "../pages/assessment";
-
+import { NewAssessement } from "../pages/assessment/NewAssessement";
-import { QuestionRoutePaths, SessionRoutePaths, DashboardRoutePaths, AssessmentRoutePaths } from './paths'
+import { Dashboard } from '../pages/dashboard';
+import { Edit, List, New, Review, Show } from "../pages/question";
+import { Profile } from "../pages/session";
+import { AssessmentRoutePaths, DashboardRoutePaths, QuestionRoutePaths, SessionRoutePaths } from './paths';
 
 export const PrivateRoutes = () => (
   <Switch>
@@ -21,5 +21,6 @@ export const PrivateRoutes = () => (
     <Route exact path={QuestionRoutePaths.edit} component={Edit} />
     <Route exact path={QuestionRoutePaths.review} component={Review} />
     <Route exact path={AssessmentRoutePaths.index} component={AssessmentList} />
+    <Route exact path={AssessmentRoutePaths.new} component={NewAssessement} />
   </Switch>
 );