add assessment list

app/javascript/pages/assessment/Assessment.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-export const Assessment = () => {
-    return (
-        <div>
-        <h1>Assessment</h1>
-        </div>
-    )
-}

app/javascript/pages/assessment/AssessmentList.tsx

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

app/javascript/pages/assessment/components/AssessmentListItem.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Assessment } from '../mock'
+
+type AssessmentListItemProps = {
+    assessment: Assessment;
+}
+
+export const AssessmentListItem = ({ assessment }: AssessmentListItemProps) => {
+    return (
+        <div
+            key={`question-${assessment.id}`}
+            className="mx-1 sm:mx-0 mb-4 sm:mb-0 border-l-8 border-primary-light flex bg-white hover:bg-unifeso-50 rounded shadow hover:shadow-md cursor-pointer group transition-all duration-500"
+        >
+            <div
+                className="flex flex-col w-full px-3 py-2"
+            >
+                <h2>
+                    {assessment.title}
+                </h2>
+                <div className="text-sm text-gray-700 flex flex-col flex-wrap justify-between">
+                    <span>
+                        Gerado em:
+                        {" "}
+                        {assessment.updatedAt}
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}

app/javascript/pages/assessment/index.ts

@@ -1 +1 @@
-export * from './Assessment'
+export * from './AssessmentList'

app/javascript/pages/assessment/mock.ts

@@ -0,0 +1,30 @@
+
+export type Assessment = {
+    id: string
+    title: string
+    createdAt: string
+    updatedAt: string
+}
+
+export const assessmentsMock1: Assessment = {
+    id: '1',
+    title: 'Assessment 1',
+    createdAt: '2020-01-01',
+    updatedAt: '2020-01-01',
+}
+
+export const assessmentsMock2: Assessment = {
+    id: '2',
+    title: 'Assessment 2',
+    createdAt: '2020-01-01',
+    updatedAt: '2020-01-01',
+}
+
+export const assessmentsMock3: Assessment = {
+    id: '3',
+    title: 'Assessment 3',
+    createdAt: '2020-01-01',
+    updatedAt: '2020-01-01',
+}
+
+export const assessmentMocks = [assessmentsMock1, assessmentsMock2, assessmentsMock3]

app/javascript/pages/question/List/QuestionsQuery.tsx

@@ -30,7 +30,6 @@ type Props = {
 
 export const QuestionsQuery: FC<Props> = ({ title, where, status }) => {
   const { user } = useCurrentUser()
-
   const [questions, setQuestions] = useState<Question[]>([])
   const [pageInfo, setPageInfo] = useState<PageInfo | undefined>()
 
@@ -80,8 +79,6 @@ export const QuestionsQuery: FC<Props> = ({ title, where, status }) => {
     })
   }
 
-  console.log(pageInfo)
-
   return (
     <QuestionsList
       title={title}

app/javascript/routes/routes.tsx

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