مؤلفه تأیید UPLOADSTATE در FilePizza Codebase.

در این مقاله ، ما مؤلفه تأیید شده در CodeBase Filepizza را بررسی خواهیم کرد.

تأیید UploadState

این مؤلفه ای است که پس از بارگذاری پرونده در FilePizza می بینید.

هنگامی که برای تأیید مؤلفه تأیید به کد زیر نگاه می کنید ، منطقی است.

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')}.
      
      
      
      
    
  )
}

می توانید ببینید ، StartButton ، CancelButton و اجزای UploadFilelist ، از همه مهمتر رمز عبور وجود دارد.

میدان رمز عبور

رمز عبور وارد شده در اینجا در مؤلفه root ، آپلود Page مدیریت می شود و به عنوان یک برنامه برای بارگذاری مؤلفه آپلود شده که دارای WebrtcProvider است همانطور که در زیر آمده است ، منتقل می شود

این رمز عبور به عنوان یک پارامتر به تابعی به نام 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)

به نظر می رسد HOOK UseUploaderConnections بزرگ و پیچیده است ، ممکن است در مقاله دیگری درباره این موضوع بیشتر بنویسم.

درباره من:

سلام ، نام من رامو ناراسینگا است. من پروژه های بزرگ منبع باز را مطالعه می کنم و در مورد معماری پایگاه کد آنها و بهترین شیوه ها مطالب ایجاد می کنم و آن را از طریق مقاله ، فیلم به اشتراک می گذارم.

من برای کار روی پروژه های جالب باز هستم. برای من ایمیل بفرستید در ramu.narasinga@gmail.com

GitHub من-https://github.com/ramu-narasinga

وب سایت من – https://ramunarasinga.com

کانال یوتیوب من – https://www.youtube.com/@thinkthroo

پلت فرم یادگیری – https://thinkthroo.com

معماری پایگاه کد – https://app.thinkthroo.com/architecture

بهترین روشها-https://app.thinkthroo.com/best-practices

پروژه های درجه تولید-https://app.thinkthroo.com/production-prade-projects

منابع:

1. https://github.com/kern/filepizza/blob/main/src/app/page.tsx#l55

2. https://github.com/kern/filepizza/blob/main/src/app/page.tsx#l146

3. https://github.com/kern/filepizza/blob/main/src/hooks/useuploaderconnecontions.ts#l29