fix: useSigitProfiles dep, map item keys warnining, sign button styles, placeholder, optional button label #160

Merged
enes merged 7 commits from fix-collection-21-8 into staging 2024-08-21 11:15:45 +00:00
5 changed files with 74 additions and 70 deletions

View File

@ -9,13 +9,15 @@ interface FileListProps {
currentFile: CurrentUserFile currentFile: CurrentUserFile
setCurrentFile: (file: CurrentUserFile) => void setCurrentFile: (file: CurrentUserFile) => void
handleDownload: () => void handleDownload: () => void
downloadLabel?: string
} }
const FileList = ({ const FileList = ({
files, files,
currentFile, currentFile,
setCurrentFile, setCurrentFile,
handleDownload handleDownload,
downloadLabel
}: FileListProps) => { }: FileListProps) => {
const isActive = (file: CurrentUserFile) => file.id === currentFile.id const isActive = (file: CurrentUserFile) => file.id === currentFile.id
return ( return (
@ -41,7 +43,7 @@ const FileList = ({
</ul> </ul>
</div> </div>
<Button variant="contained" fullWidth onClick={handleDownload}> <Button variant="contained" fullWidth onClick={handleDownload}>
Download Files {downloadLabel || 'Download Files'}

You can probably use the ?? operator. Should Download Files be a constant?

You can probably use the `??` operator. Should `Download Files` be a constant?
Outdated
Review

|| (logical OR) should be used instead of ?? (Nullish Coalescing).
With ?? if downloadLabel is blank string it will return blank but with || we will get default value Download Files

`||` (logical OR) should be used instead of `??` (Nullish Coalescing). With `??` if downloadLabel is blank string it will return blank but with `||` we will get default value `Download Files`
</Button> </Button>
</div> </div>
) )

View File

@ -41,6 +41,67 @@
background: #447592; background: #447592;
color: white; color: white;
} }
.actionButtons {
display: flex;
flex-direction: row;
grid-gap: 5px;
}
.actionsBottom {
display: flex;
flex-direction: row;
grid-gap: 5px;
justify-content: center;
align-items: center;
}
.submitButton {
width: 100%;
max-width: 300px;
margin-top: 10px;
}
.paginationButton {
font-size: 12px;
padding: 5px 10px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.5);
}
.paginationButton:hover {
background: #447592;
color: rgba(255, 255, 255, 0.5);
}
.paginationButtonDone {
background: #5e8eab;
color: rgb(255, 255, 255);
}
.paginationButtonCurrent {
height: 2px;
width: 100%;
background: #4c82a3;
}
.trigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.triggerBtn {
background: white;
color: #434343;
padding: 5px 30px;
box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
position: absolute;
top: -25px;
}
} }
.actions { .actions {
@ -92,12 +153,6 @@
position: relative; position: relative;
} }
.actionButtons {
display: flex;
flex-direction: row;
grid-gap: 5px;
}
.inputWrapper { .inputWrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -132,20 +187,6 @@
linear-gradient(white, white); linear-gradient(white, white);
} }
.actionsBottom {
display: flex;
flex-direction: row;
grid-gap: 5px;
justify-content: center;
align-items: center;
}
.submitButton {
width: 100%;
max-width: 300px;
margin-top: 10px;
}
.footerContainer { .footerContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -167,44 +208,3 @@
flex-direction: column; flex-direction: column;
grid-gap: 5px; grid-gap: 5px;
} }
.paginationButton {
font-size: 12px;
padding: 5px 10px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.5);
}
.paginationButton:hover {
background: #447592;
color: rgba(255, 255, 255, 0.5);
}
.paginationButtonDone {
background: #5e8eab;
color: rgb(255, 255, 255);
}
.paginationButtonCurrent {
height: 2px;
width: 100%;
background: #4c82a3;
}
.trigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.triggerBtn {
background: white;
color: #434343;
padding: 5px 30px;
box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
position: absolute;
top: -25px;
}

View File

@ -64,7 +64,8 @@ export const useSigitProfiles = (
}) })
} }
} }
}, [pubkeys, profileMetadata]) // eslint-disable-next-line react-hooks/exhaustive-deps
}, [pubkeys])
return profileMetadata return profileMetadata
} }

View File

@ -133,7 +133,7 @@ export const CreatePage = () => {
identifier: MarkType.TEXT, identifier: MarkType.TEXT,
icon: <FontAwesomeIcon icon={faT} />, icon: <FontAwesomeIcon icon={faT} />,
label: 'Text', label: 'Text',
active: false active: true
}, },
{ {
identifier: MarkType.SIGNATURE, identifier: MarkType.SIGNATURE,
@ -151,7 +151,7 @@ export const CreatePage = () => {
identifier: MarkType.FULLNAME, identifier: MarkType.FULLNAME,
icon: <FontAwesomeIcon icon={faIdCard} />, icon: <FontAwesomeIcon icon={faIdCard} />,
label: 'Full Name', label: 'Full Name',
active: true active: false
}, },
{ {
identifier: MarkType.INITIALS, identifier: MarkType.INITIALS,
@ -930,7 +930,7 @@ export const CreatePage = () => {
<div className={styles.flexWrap}> <div className={styles.flexWrap}>
<div className={styles.inputWrapper}> <div className={styles.inputWrapper}>
<TextField <TextField
placeholder="User (nip05 / npub)" placeholder="Add user"
value={userInput} value={userInput}
onChange={(e) => setUserInput(e.target.value)} onChange={(e) => setUserInput(e.target.value)}
onKeyDown={handleInputKeyDown} onKeyDown={handleInputKeyDown}

View File

@ -48,6 +48,7 @@ import { TooltipChild } from '../../components/TooltipChild.tsx'
import FileList from '../../components/FileList' import FileList from '../../components/FileList'
import { CurrentUserFile } from '../../types/file.ts' import { CurrentUserFile } from '../../types/file.ts'
import { Mark } from '../../types/mark.ts' import { Mark } from '../../types/mark.ts'
import React from 'react'
interface PdfViewProps { interface PdfViewProps {
files: CurrentUserFile[] files: CurrentUserFile[]
@ -78,11 +79,10 @@ const SlimPdfView = ({
const signatureEvents = Object.keys(parsedSignatureEvents) const signatureEvents = Object.keys(parsedSignatureEvents)
if (!hash) return if (!hash) return
return ( return (
<> <React.Fragment key={filename}>
<div <div
id={filename} id={filename}
ref={(el) => (pdfRefs.current[id] = el)} ref={(el) => (pdfRefs.current[id] = el)}
key={filename}
className={styles.fileWrapper} className={styles.fileWrapper}
> >
{pdfFile.pages.map((page, i) => { {pdfFile.pages.map((page, i) => {
@ -132,7 +132,7 @@ const SlimPdfView = ({
File Separator File Separator
</Divider> </Divider>
)} )}
</> </React.Fragment>
) )
})} })}
</div> </div>
@ -538,6 +538,7 @@ export const VerifyPage = () => {
currentFile={currentFile} currentFile={currentFile}
setCurrentFile={setCurrentFile} setCurrentFile={setCurrentFile}
handleDownload={handleExport} handleDownload={handleExport}
downloadLabel="Download Sigit"
/> />
)} )}
{displayExportedBy()} {displayExportedBy()}