move move frontend to progress-test

2022-07-21 21:16:59 -03:00
parent f8d5d08447
commit 386050d4ad
129 changed files with 159374 additions and 39 deletions
--- a/app/javascript/pages/question/List/QuestionsList.tsx
+++ b/app/javascript/pages/question/List/QuestionsList.tsx
@@ -0,0 +1,131 @@
+import React, { FC, useState } from 'react'
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { MdModeEdit } from 'react-icons/md';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { Question, QuestionStatus } from '../../../__generated__/graphql-schema'
+import { useCurrentUser } from '../../../contexts';
+import { NodeId } from '../../../utils/graphql';
+import { gql } from '@apollo/client';
+
+const EditIcon = styled(MdModeEdit)`
+  margin: auto;
+  font-size: 1.5rem;
+`;
+
+type Props = {
+  questions: Question[]
+  title: string
+  pagination?: {
+    onNextPageClick: () => void
+    hasNextPage: boolean
+    hasPreviousPage: boolean
+    onPreviousPageClick: () => void
+  }
+}
+
+export const QuestionsListFragments = gql`
+  fragment QuestionFields on Question {
+    id
+    status
+    user {
+      id
+    }
+    updatedAt
+  }
+`
+
+export const QuestionsList: FC<Props> = ({ questions, title, pagination }) => {
+  const { user } = useCurrentUser()
+  const [pageCount, setPageCount] = useState(1)
+
+  const formatDate = (stringDate: string) => new Date(stringDate).toLocaleDateString()
+
+  const handleOnNextPageClick = () => {
+    if (pagination?.hasNextPage) {
+      pagination.onNextPageClick()
+      setPageCount(pageCount + 1)
+    }
+  }
+  const handleOnPreviousPageClick = () => {
+    if (pagination?.hasPreviousPage) {
+      pagination.onPreviousPageClick()
+      setPageCount(pageCount - 1)
+    }
+  }
+
+  return (
+    <div className="bg-gray-200 p-4 rounded my-2">
+      <div className="flex">
+        <h2 className="text-gray-500 font-medium text-xl">{title}</h2>
+        <div className="ml-auto text-sm sm:text-base text-gray-700">
+          <button
+            className="p-2"
+            onClick={handleOnPreviousPageClick}
+            style={{ visibility: (pagination?.hasPreviousPage ? 'visible' : 'hidden') }}
+          >
+            <FaArrowLeft />
+          </button>
+          Página: {pageCount}
+          <button
+            className="p-2"
+            onClick={handleOnNextPageClick}
+            style={{ visibility: (pagination?.hasNextPage ? 'visible' : 'hidden') }}
+          >
+            <FaArrowRight />
+          </button>
+        </div>
+      </div>
+      <hr className="border-t border-gray-400 m-px" />
+      <div className="p-2 text-sm">
+        {questions.length
+          ? <div className="flex-col w-full sm:grid gap-4 sm:col-gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {questions.map((question) => (
+              <div
+                key={`question-${question.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"
+              >
+                <Link
+                  className="flex flex-col w-full px-3 py-2"
+                  to={`/questions/${question.id}/${(question.user.id === user?.id ? '' : 'review')}`}
+                >
+                  <h2>
+                    {`# ${NodeId.decode(question.id).id}`}
+                  </h2>
+                  <div className="text-sm text-gray-700 flex flex-col flex-wrap justify-between">
+                    <span>
+                      Atualizada em:
+                    {" "}
+                      {formatDate(question.updatedAt)}
+                    </span>
+                  </div>
+                </Link>
+                {(question.user.id === user?.id && question.status !== QuestionStatus.Registered) &&
+                  <div
+                    className="flex flex-col relative flex-grow justify-center"
+                  >
+                    <Link
+                      className="group-hover:block absolute bg-gray-300 hover:bg-primary-normal text-gray-500 hover:text-gray-100 hover:shadow-lg rounded-full p-2 cursor-pointer shadow-inner transition-all duration-500"
+                      style={{ left: '-1.5rem' }}
+                      to={`/questions/${question.id}/edit`}
+                    >
+                      <EditIcon />
+                    </Link>
+                  </div>
+                }
+              </div>
+            ))}
+          </div>
+          : <div className="grid text-gray-800" style={{ placeItems: 'center' }}>
+            <div className="text-center">
+              <span className="text-sm sm:text-base">
+                Nenhuma questão.
+              </span>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  )
+}