feat: navigate to different pages based on uploaded file

This commit is contained in:
SwiftHawk 2024-06-13 11:47:28 +05:00
parent e8da0dc76f
commit 92b62a3cbe
4 changed files with 96 additions and 8 deletions

View File

@ -22,7 +22,7 @@ import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input' import { MuiFileInput } from 'mui-file-input'
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserComponent } from '../../components/username' import { UserComponent } from '../../components/username'
@ -54,6 +54,9 @@ import { Event, kinds } from 'nostr-tools'
export const CreatePage = () => { export const CreatePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation()
const { uploadedFile } = location.state || {}
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('') const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@ -72,6 +75,12 @@ export const CreatePage = () => {
const nostrController = NostrController.getInstance() const nostrController = NostrController.getInstance()
useEffect(() => {
if (uploadedFile) {
setSelectedFiles([uploadedFile])
}
}, [uploadedFile])
useEffect(() => { useEffect(() => {
if (usersPubkey) { if (usersPubkey) {
setUsers((prev) => { setUsers((prev) => {

View File

@ -7,11 +7,61 @@ import {
} from '@mui/icons-material' } from '@mui/icons-material'
import { Box, Button, Tooltip, Typography } from '@mui/material' import { Box, Button, Tooltip, Typography } from '@mui/material'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { appPrivateRoutes } from '../../routes' import { appPrivateRoutes, appPublicRoutes } from '../../routes'
import styles from './style.module.scss' import styles from './style.module.scss'
import { useRef } from 'react'
import JSZip from 'jszip'
import { toast } from 'react-toastify'
export const HomePage = () => { export const HomePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
const fileInputRef = useRef<HTMLInputElement>(null)
const handleUploadClick = () => {
if (fileInputRef.current) {
fileInputRef.current.click()
}
}
const handleFileChange = async (
event: React.ChangeEvent<HTMLInputElement>
) => {
const file = event.target.files?.[0]
if (file) {
// Check if the file extension is .sigit.zip
const fileName = file.name
const fileExtension = fileName.slice(-10) // ".sigit.zip" has 10 characters
if (fileExtension === '.sigit.zip') {
const zip = await JSZip.loadAsync(file).catch((err) => {
console.log('err in loading zip file :>> ', err)
toast.error(err.message || 'An error occurred in loading zip file.')
return null
})
if (!zip) return
// navigate to sign page if zip contains keys.json
if ('keys.json' in zip.files) {
return navigate(appPrivateRoutes.sign, {
state: { uploadedZip: file }
})
}
// navigate to verify page if zip contains meta.json
if ('meta.json' in zip.files) {
return navigate(appPublicRoutes.verify, {
state: { uploadedZip: file }
})
}
toast.error('Invalid zip file')
return
}
// navigate to create page
navigate(appPrivateRoutes.create, { state: { uploadedFile: file } })
}
}
return ( return (
<Box className={styles.container}> <Box className={styles.container}>
@ -29,10 +79,16 @@ export const HomePage = () => {
} }
}} }}
> >
<input
type="file"
ref={fileInputRef}
style={{ display: 'none' }}
onChange={handleFileChange}
/>
<Button <Button
variant="outlined" variant="outlined"
startIcon={<Upload />} startIcon={<Upload />}
onClick={() => navigate(appPrivateRoutes.sign)} onClick={handleUploadClick}
> >
Upload Upload
</Button> </Button>

View File

@ -40,7 +40,8 @@ enum SignedStatus {
export const SignPage = () => { export const SignPage = () => {
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation() const location = useLocation()
const { arrayBuffer: decryptedArrayBuffer } = location.state || {} const { arrayBuffer: decryptedArrayBuffer, uploadedZip } =
location.state || {}
const [searchParams, setSearchParams] = useSearchParams() const [searchParams, setSearchParams] = useSearchParams()
@ -200,11 +201,23 @@ export const SignPage = () => {
handleDecryptedArrayBuffer(decryptedArrayBuffer).finally(() => handleDecryptedArrayBuffer(decryptedArrayBuffer).finally(() =>
setIsLoading(false) setIsLoading(false)
) )
} else if (uploadedZip) {
decrypt(uploadedZip)
.then((arrayBuffer) => {
if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
})
.catch((err) => {
console.error(`error occurred in decryption`, err)
toast.error(err.message || `error occurred in decryption`)
})
.finally(() => {
setIsLoading(false)
})
} else { } else {
setIsLoading(false) setIsLoading(false)
setDisplayInput(true) setDisplayInput(true)
} }
}, [searchParams, decryptedArrayBuffer]) }, [searchParams, decryptedArrayBuffer, uploadedZip])
const parseKeysJson = async (zip: JSZip) => { const parseKeysJson = async (zip: JSZip) => {
const keysFileContent = await readContentOfZipEntry( const keysFileContent = await readContentOfZipEntry(
@ -768,7 +781,8 @@ export const SignPage = () => {
if (!arrayBuffer) return if (!arrayBuffer) return
const blob = new Blob([arrayBuffer]) const blob = new Blob([arrayBuffer])
saveAs(blob, 'exported.zip') const unixNow = Math.floor(Date.now() / 1000)
saveAs(blob, `exported-${unixNow}.sigit.zip`)
setIsLoading(false) setIsLoading(false)

View File

@ -32,14 +32,17 @@ import {
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { Cancel, CheckCircle } from '@mui/icons-material' import { Cancel, CheckCircle } from '@mui/icons-material'
import { useLocation } from 'react-router-dom'
export const VerifyPage = () => { export const VerifyPage = () => {
const theme = useTheme() const theme = useTheme()
const textColor = theme.palette.getContrastText( const textColor = theme.palette.getContrastText(
theme.palette.background.paper theme.palette.background.paper
) )
const location = useLocation()
const { uploadedZip } = location.state || {}
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('') const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@ -62,6 +65,12 @@ export const VerifyPage = () => {
{} {}
) )
useEffect(() => {
if (uploadedZip) {
setSelectedFile(uploadedZip)
}
}, [uploadedZip])
useEffect(() => { useEffect(() => {
if (zip) { if (zip) {
const generateCurrentFileHashes = async () => { const generateCurrentFileHashes = async () => {
@ -364,7 +373,7 @@ export const VerifyPage = () => {
onChange={(value) => setSelectedFile(value)} onChange={(value) => setSelectedFile(value)}
InputProps={{ InputProps={{
inputProps: { inputProps: {
accept: '.zip' accept: '.sigit.zip'
} }
}} }}
/> />