From 9d2cce1a4ab77bb0be4cb10fb93cfd8227001a3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <geonizeli@hey.com>
Date: Mon, 17 Oct 2022 21:49:25 -0300
Subject: [PATCH] add assessment list

---
 .../pages/assessment/Assessment.tsx           |  9 ------
 .../pages/assessment/AssessmentList.tsx       | 15 ++++++++++
 .../components/AssessmentListItem.tsx         | 30 +++++++++++++++++++
 app/javascript/pages/assessment/index.ts      |  2 +-
 app/javascript/pages/assessment/mock.ts       | 30 +++++++++++++++++++
 .../pages/question/List/QuestionsQuery.tsx    |  3 --
 app/javascript/routes/routes.tsx              |  4 +--
 7 files changed, 78 insertions(+), 15 deletions(-)
 delete mode 100644 app/javascript/pages/assessment/Assessment.tsx
 create mode 100644 app/javascript/pages/assessment/AssessmentList.tsx
 create mode 100644 app/javascript/pages/assessment/components/AssessmentListItem.tsx
 create mode 100644 app/javascript/pages/assessment/mock.ts

diff --git a/app/javascript/pages/assessment/Assessment.tsx b/app/javascript/pages/assessment/Assessment.tsx
deleted file mode 100644
index 56900b1..0000000
--- a/app/javascript/pages/assessment/Assessment.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-export const Assessment = () => {
-    return (
-        <div>
-        <h1>Assessment</h1>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/app/javascript/pages/assessment/AssessmentList.tsx b/app/javascript/pages/assessment/AssessmentList.tsx
new file mode 100644
index 0000000..a899fe9
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/app/javascript/pages/assessment/components/AssessmentListItem.tsx b/app/javascript/pages/assessment/components/AssessmentListItem.tsx
new file mode 100644
index 0000000..a816b31
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/app/javascript/pages/assessment/index.ts b/app/javascript/pages/assessment/index.ts
index 3da8848..fa5329e 100644
--- a/app/javascript/pages/assessment/index.ts
+++ b/app/javascript/pages/assessment/index.ts
@@ -1 +1 @@
-export * from './Assessment'
\ No newline at end of file
+export * from './AssessmentList'
\ No newline at end of file
diff --git a/app/javascript/pages/assessment/mock.ts b/app/javascript/pages/assessment/mock.ts
new file mode 100644
index 0000000..3c0b90f
--- /dev/null
+++ b/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]
\ No newline at end of file
diff --git a/app/javascript/pages/question/List/QuestionsQuery.tsx b/app/javascript/pages/question/List/QuestionsQuery.tsx
index ec6558b..2930f0f 100644
--- a/app/javascript/pages/question/List/QuestionsQuery.tsx
+++ b/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}
diff --git a/app/javascript/routes/routes.tsx b/app/javascript/routes/routes.tsx
index b0d8a58..7bfc939 100644
--- a/app/javascript/routes/routes.tsx
+++ b/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>
 );