Skip to content

GitLab

Commit b851e88c authored by Felipe Freitas Silva's avatar Felipe Freitas Silva :nerd: Committed by Lucas Simon Susin
Browse files

NOUS-upload-home-button

parent 1670a454
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 117 additions and 88 deletions
+117 -88
src/assets/HomeIcon.tsx deleted 100644 → 0
View file @ 1670a454
const HomeIcon = () => (
<svg
width="41"
height="35"
viewBox="0 0 41 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.1501 25.1559H30.567C30.3293 25.1559 30.1365 24.9617 30.1365 24.7222C30.1365 24.4827 30.3293 24.2884 30.567 24.2884H33.1501C36.7108 24.2884 39.6079 21.3696 39.6079 17.7823C39.6079 14.195 36.7108 11.2762 33.1501 11.2762H33.088C32.9631 11.2762 32.8444 11.2216 32.7626 11.1265C32.6809 11.0314 32.6439 10.9053 32.6618 10.7808C32.7002 10.5106 32.7196 10.2392 32.7196 9.97493C32.7196 6.86594 30.2087 4.33624 27.1228 4.33624C25.9223 4.33624 24.7774 4.71422 23.8118 5.42958C23.5996 5.58666 23.2983 5.51695 23.1756 5.28179C20.4409 0.0353876 13.2982 -0.669152 9.59502 3.89476C8.03504 5.81747 7.4221 8.31861 7.91325 10.7563C7.96737 11.0255 7.76287 11.2765 7.49134 11.2765H7.31883C3.75817 11.2765 0.861076 14.1953 0.861076 17.7826C0.861076 21.37 3.75817 24.2888 7.31883 24.2888H9.29688C9.53458 24.2888 9.29688 24.3699 9.29688 24.6094C9.29688 24.8489 9.53459 25.1562 9.29688 25.1562H7.31883C3.28331 25.1562 0 21.8483 0 17.7826C0 13.8309 3.10154 10.5952 6.98087 10.4167C6.61647 7.88764 7.31329 5.33661 8.92833 3.34577C12.8931 -1.54095 20.4912 -0.993209 23.7031 4.45584C24.7278 3.80863 25.9003 3.46911 27.1227 3.46911C30.8614 3.46911 33.824 6.6751 33.5648 10.4207C37.4084 10.6379 40.4688 13.8566 40.4688 17.7823C40.4688 21.8483 37.1856 25.1559 33.1501 25.1559Z"
fill="black"
/>
<path
d="M19.6875 35C13.6566 35 8.75 30.0935 8.75 24.0625C8.75 18.0316 13.6565 13.125 19.6875 13.125C25.7185 13.125 30.625 18.0315 30.625 24.0625C30.625 30.0934 25.7185 35 19.6875 35V35ZM19.6875 14.0002C14.1392 14.0002 9.62519 18.5142 9.62519 24.0625C9.62519 29.6108 14.1392 34.1248 19.6875 34.1248C25.2358 34.1248 29.7498 29.6108 29.7498 24.0625C29.7498 18.5141 25.2358 14.0002 19.6875 14.0002V14.0002Z"
fill="black"
/>
<path
d="M20.128 28.7076C19.956 28.7076 19.8164 28.5674 19.8164 28.3946V20.2573C19.8164 20.0845 19.956 19.9443 20.128 19.9443C20.3001 19.9443 20.4397 20.0845 20.4397 20.2573V28.3946C20.4397 28.5677 20.3001 28.7076 20.128 28.7076Z"
fill="black"
/>
<path
d="M22.6219 23.0751C22.5422 23.0751 22.4623 23.0444 22.4015 22.9834L20.1289 20.701L17.8563 22.9834C17.7347 23.1057 17.5373 23.1057 17.4155 22.9834C17.2938 22.8611 17.2938 22.6631 17.4155 22.5408L19.9085 20.037C20.03 19.9147 20.2275 19.9147 20.3492 20.037L22.8422 22.5408C22.964 22.6631 22.964 22.8611 22.8422 22.9834C22.7815 23.0447 22.7015 23.0751 22.6219 23.0751H22.6219Z"
fill="black"
/>
</svg>
)
export default HomeIcon
src/assets/images/HomeIcon.svg 0 → 100644
View file @ b851e88c
This diff is collapsed.
src/assets/images/UploadIcon.svg 0 → 100644
View file @ b851e88c
<svg
width="41"
height="35"
viewBox="0 0 41 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.1501 25.1559H30.567C30.3293 25.1559 30.1365 24.9617 30.1365 24.7222C30.1365 24.4827 30.3293 24.2884 30.567 24.2884H33.1501C36.7108 24.2884 39.6079 21.3696 39.6079 17.7823C39.6079 14.195 36.7108 11.2762 33.1501 11.2762H33.088C32.9631 11.2762 32.8444 11.2216 32.7626 11.1265C32.6809 11.0314 32.6439 10.9053 32.6618 10.7808C32.7002 10.5106 32.7196 10.2392 32.7196 9.97493C32.7196 6.86594 30.2087 4.33624 27.1228 4.33624C25.9223 4.33624 24.7774 4.71422 23.8118 5.42958C23.5996 5.58666 23.2983 5.51695 23.1756 5.28179C20.4409 0.0353876 13.2982 -0.669152 9.59502 3.89476C8.03504 5.81747 7.4221 8.31861 7.91325 10.7563C7.96737 11.0255 7.76287 11.2765 7.49134 11.2765H7.31883C3.75817 11.2765 0.861076 14.1953 0.861076 17.7826C0.861076 21.37 3.75817 24.2888 7.31883 24.2888H9.29688C9.53458 24.2888 9.29688 24.3699 9.29688 24.6094C9.29688 24.8489 9.53459 25.1562 9.29688 25.1562H7.31883C3.28331 25.1562 0 21.8483 0 17.7826C0 13.8309 3.10154 10.5952 6.98087 10.4167C6.61647 7.88764 7.31329 5.33661 8.92833 3.34577C12.8931 -1.54095 20.4912 -0.993209 23.7031 4.45584C24.7278 3.80863 25.9003 3.46911 27.1227 3.46911C30.8614 3.46911 33.824 6.6751 33.5648 10.4207C37.4084 10.6379 40.4688 13.8566 40.4688 17.7823C40.4688 21.8483 37.1856 25.1559 33.1501 25.1559Z"
fill="black"
/>
<path
d="M19.6875 35C13.6566 35 8.75 30.0935 8.75 24.0625C8.75 18.0316 13.6565 13.125 19.6875 13.125C25.7185 13.125 30.625 18.0315 30.625 24.0625C30.625 30.0934 25.7185 35 19.6875 35V35ZM19.6875 14.0002C14.1392 14.0002 9.62519 18.5142 9.62519 24.0625C9.62519 29.6108 14.1392 34.1248 19.6875 34.1248C25.2358 34.1248 29.7498 29.6108 29.7498 24.0625C29.7498 18.5141 25.2358 14.0002 19.6875 14.0002V14.0002Z"
fill="black"
/>
<path
d="M20.128 28.7076C19.956 28.7076 19.8164 28.5674 19.8164 28.3946V20.2573C19.8164 20.0845 19.956 19.9443 20.128 19.9443C20.3001 19.9443 20.4397 20.0845 20.4397 20.2573V28.3946C20.4397 28.5677 20.3001 28.7076 20.128 28.7076Z"
fill="black"
/>
<path
d="M22.6219 23.0751C22.5422 23.0751 22.4623 23.0444 22.4015 22.9834L20.1289 20.701L17.8563 22.9834C17.7347 23.1057 17.5373 23.1057 17.4155 22.9834C17.2938 22.8611 17.2938 22.6631 17.4155 22.5408L19.9085 20.037C20.03 19.9147 20.2275 19.9147 20.3492 20.037L22.8422 22.5408C22.964 22.6631 22.964 22.8611 22.8422 22.9834C22.7815 23.0447 22.7015 23.0751 22.6219 23.0751H22.6219Z"
fill="black"
/>
</svg>
\ No newline at end of file
src/pages/Home/index.tsx
View file @ b851e88c
import { useCallback, useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { Link, useNavigate } from "react-router-dom"
import { useNavigate } from "react-router-dom"
import Upload from "../../components/Upload"
import FileLoading from "../../components/FileLoading"
import Button from "../../components/Button"
import Dropdown from "../../components/Dropdown"
import HomeIcon from "../../assets/images/HomeIcon.svg"
import { PdfFile, Request } from "./types"
import GlobalStyle, {
Container,
......@@ -12,7 +13,7 @@ import GlobalStyle, {
HeaderTitle,
FilesWrapper,
} from "../../styles/styles"
import { SubTitle, FilesRow, SendButton } from "./styles"
import { SubTitle, FilesRow, SendButton, HomeButton } from "./styles"
const Home = () => {
const [uploadedFiles, setUploadedFiles] = useState<PdfFile[]>([])
......@@ -53,49 +54,46 @@ const Home = () => {
return (
<Container>
<Content>
<>
<Link to="/view">
<HeaderTitle variant="h6">{t("fileUpload.title")}</HeaderTitle>
</Link>
<Upload
size={uploadedFiles.length > 0}
uploadedFiles={uploadedFiles}
setUploadedFiles={setUploadedFiles}
/>
{uploadedFiles.length > 0 && (
<>
<SubTitle>{t("fileUpload.selectedPdfs")}</SubTitle>
<FilesWrapper>
{uploadedFiles.map((file, index) => {
return (
<FilesRow
key={file.pdf.name + file.pdf.size + file.pdf.type}
>
<FileLoading
fileName={file.pdf.name}
status="downloaded"
handleDeleteClick={() => handleDeleteClick(index)}
/>
<Dropdown
fileName={file.pdf.name}
index={index}
setUploadedFiles={setUploadedFiles}
/>
</FilesRow>
)
})}
</FilesWrapper>
<SendButton>
<Button
text={t("fileUpload.buttons.send")}
color="blue"
onClick={() => processUpload()}
disabled={!canUpload}
/>
</SendButton>
</>
)}
</>
<HomeButton to="/view" data-testid="home-button">
<img src={HomeIcon} alt="Ir para a página principal" />
</HomeButton>
<HeaderTitle variant="h6">{t("fileUpload.title")}</HeaderTitle>
<Upload
size={uploadedFiles.length > 0}
uploadedFiles={uploadedFiles}
setUploadedFiles={setUploadedFiles}
/>
{uploadedFiles.length > 0 && (
<>
<SubTitle>{t("fileUpload.selectedPdfs")}</SubTitle>
<FilesWrapper>
{uploadedFiles.map((file, index) => {
return (
<FilesRow key={file.pdf.name + file.pdf.size + file.pdf.type}>
<FileLoading
fileName={file.pdf.name}
status="downloaded"
handleDeleteClick={() => handleDeleteClick(index)}
/>
<Dropdown
fileName={file.pdf.name}
index={index}
setUploadedFiles={setUploadedFiles}
/>
</FilesRow>
)
})}
</FilesWrapper>
<SendButton>
<Button
text={t("fileUpload.buttons.send")}
color="blue"
onClick={() => processUpload()}
disabled={!canUpload}
/>
</SendButton>
</>
)}
</Content>
<GlobalStyle />
</Container>
......
src/pages/Home/styles.ts
View file @ b851e88c
import styled from "styled-components"
import { Typography } from "@mui/material"
import { darkGray } from "../../styles/colors"
import { Link } from "react-router-dom"
import { buttonBlue, darkGray } from "../../styles/colors"
export const HomeButton = styled(Link)`
position: absolute;
width: 55px;
height: 55px;
left: 25px;
top: 25px;
background-color: ${buttonBlue};
border-radius: 50px;
outline: 0;
border: 0;
display: grid;
place-items: center;
&:hover,
&:focus,
&:active {
cursor: pointer;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
svg {
width: 67.5%;
}
`
export const SubTitle = styled(Typography)`
justify-content: "flex-start";
......
src/pages/ViewPdf/index.tsx
View file @ b851e88c
import { useCallback, useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import useGet from "../../hooks/useGet"
import HomeIcon from "../../assets/HomeIcon"
import UploadIcon from "../../assets/images/UploadIcon.svg"
import useDelete from "../../hooks/useDelete"
import { Veiculo } from "../../models/PDF"
import PDFList from "../../components/PDFList"
import TabsView from "../../components/TabsView"
import GlobalStyle from "../../styles/styles"
import { PageWrapper, SaveButton, HomeButton } from "./styles"
import { PageWrapper, SaveButton, UploadButton } from "./styles"
const ViewPdf = () => {
const { t } = useTranslation()
const navigate = useNavigate()
const { result, loading, setResult } = useGet({ init: true })
const { deletePdf, pdfName } = useDelete()
const [veiculos, setVeiculos] = useState<Veiculo[]>([])
......@@ -42,15 +40,11 @@ const ViewPdf = () => {
}
}, [pdfName, result, setResult])
const onHomeClick = () => {
navigate("/")
}
return (
<PageWrapper>
<HomeButton onClick={onHomeClick} data-testid="home-button">
<HomeIcon />
</HomeButton>
<UploadButton to="/" data-testid="upload-button">
<img src={UploadIcon} alt="Ir para a página de envio de pdf" />
</UploadButton>
<PDFList
result={result}
onPDFclick={onPDFclick}
......
src/pages/ViewPdf/styles.ts
View file @ b851e88c
import styled from "styled-components"
import { Button } from "@mui/material"
import { Link } from "react-router-dom"
import { backgroundBlue, buttonBlue } from "../../styles/colors"
export const PageWrapper = styled.div`
......@@ -66,7 +67,7 @@ export const SaveButton = styled(Button)`
}
`
export const HomeButton = styled.button`
export const UploadButton = styled(Link)`
position: absolute;
width: 55px;
height: 55px;
......@@ -78,6 +79,9 @@ export const HomeButton = styled.button`
outline: 0;
border: 0;
display: grid;
place-items: center;
&:hover,
&:focus,
&:active {
......
tests/pages/ViewPdf.test.tsx
View file @ b851e88c
......@@ -12,8 +12,8 @@ describe("view pdf page", () => {
)
})
test("should render return to home button", () => {
const button = screen.getByTestId("home-button")
test("should render go to upload page button", () => {
const button = screen.getByTestId("upload-button")
expect(button).toBeVisible()
})
})
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment