In this article, we will review ConfirmUploadState component in FilePizza codebase.
ConfirmUploadState
This is the component that you see once you upload a file on FilePizza.
When you look at the code below for ConfirmUploadState component, it makes sense.
function ConfirmUploadState({
uploadedFiles,
password,
onChangePassword,
onCancel,
onStart,
onRemoveFile,
}: {
uploadedFiles: UploadedFile[]
password: string
onChangePassword: (pw: string) => void
onCancel: () => void
onStart: () => void
onRemoveFile: (index: number) => void
}): JSX.Element {
const fileListData = useUploaderFileListData(uploadedFiles)
return (
You are about to start uploading{' '}
{pluralize(uploadedFiles.length, 'file', 'files')}.
)
}You can see, there’s StartButton, CancelButton and the UploadFileList components, most importantly PasswordField.
PasswordField
import React, { JSX, useCallback } from 'react'
import InputLabel from './InputLabel'
export default function PasswordField({
value,
onChange,
isRequired = false,
isInvalid = false,
}: {
value: string
onChange: (v: string) => void
isRequired?: boolean
isInvalid?: boolean
}): JSX.Element {
const handleChange = useCallback(
function (e: React.ChangeEvent): void {
onChange(e.target.value)
},
[onChange],
)
return (
{isRequired ? 'Password' : 'Password (optional)'}
)
}The password entered here is managed in the root component, UploadPage and is passed as a prop to UploadingState component that has WebRTCProvider as shown below
This password is passed as a parameter to a function named useUploaderConnections
export default function Uploader({
files,
password,
onStop,
}: {
files: UploadedFile[]
password: string
onStop: () => void
}): JSX.Element {
const { peer, stop } = useWebRTCPeer()
const { isLoading, error, longSlug, shortSlug, longURL, shortURL } =
useUploaderChannel(peer.id)
const connections = useUploaderConnections(peer, files, password)useUploaderConnections hook seems to large and complicated, I might write more about this in another article.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at [email protected]
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — hhttps://www.youtube.com/@ramu-narasinga
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects
