sigit.io/src/pages/home/index.tsx

import {
  Add,
  CalendarMonth,
  Description,
  PersonOutline,
  Upload
} from '@mui/icons-material'
import { Box, Button, Tooltip, Typography } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
import styles from './style.module.scss'
import { useRef } from 'react'
import JSZip from 'jszip'
import { toast } from 'react-toastify'

export const HomePage = () => {
  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 (
    <Box className={styles.container}>
      <Box className={styles.header}>
        <Typography variant="h3" className={styles.title}>
          Sigits
        </Typography>
        {/* This is for desktop view */}
        <Box
          className={styles.actionButtons}
          sx={{
            display: {
              xs: 'none',
              md: 'flex'
            }
          }}
        >
          <input
            type="file"
            ref={fileInputRef}
            style={{ display: 'none' }}
            onChange={handleFileChange}
          />
          <Button
            variant="outlined"
            startIcon={<Upload />}
            onClick={handleUploadClick}
          >
            Upload
          </Button>
          <Button
            variant="contained"
            startIcon={<Add />}
            onClick={() => navigate(appPrivateRoutes.create)}
          >
            Create
          </Button>
        </Box>
        {/* This is for mobile view */}
        <Box
          className={styles.actionButtons}
          sx={{
            display: {
              xs: 'flex',
              md: 'none'
            }
          }}
        >
          <Tooltip title="Upload" arrow>
            <Button
              variant="outlined"
              onClick={() => navigate(appPrivateRoutes.sign)}
            >
              <Upload />
            </Button>
          </Tooltip>
          <Tooltip title="Create" arrow>
            <Button
              variant="contained"
              onClick={() => navigate(appPrivateRoutes.create)}
            >
              <Add />
            </Button>
          </Tooltip>
        </Box>
      </Box>
      <Box className={styles.submissions}>
        <PlaceHolder />
        <PlaceHolder />
        <PlaceHolder />
      </Box>
    </Box>
  )
}

const PlaceHolder = () => {
  return (
    <Box
      className={styles.item}
      sx={{
        flexDirection: {
          xs: 'column',
          md: 'row'
        }
      }}
    >
      <Box
        className={styles.titleBox}
        sx={{
          flexDirection: {
            xs: 'row',
            md: 'column'
          },
          borderBottomLeftRadius: {
            xs: 'initial',
            md: 'inherit'
          },
          borderTopRightRadius: {
            xs: 'inherit',
            md: 'initial'
          }
        }}
      >
        <Typography variant="body1" className={styles.titleBoxItem}>
          <Description />
          Title
        </Typography>
        <Typography variant="body2" className={styles.titleBoxItem}>
          <PersonOutline />
          Sigit
        </Typography>
        <Typography variant="body2" className={styles.titleBoxItem}>
          <CalendarMonth />
          07 Jun 10:23 AM
        </Typography>
      </Box>
      <Box className={styles.signers}>
        <Box className={styles.signerItem}>
          <Typography variant="button" className={styles.status}>
            Sent
          </Typography>
          <Typography variant="body1">placeholder@sigit.io</Typography>
        </Box>
        <Box className={styles.signerItem}>
          <Typography variant="button" className={styles.status}>
            Awaiting
          </Typography>
          <Typography variant="body1">placeholder@sigit.io</Typography>
        </Box>
      </Box>
    </Box>
  )
}