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

import { Button, TextField } from '@mui/material'
import JSZip from 'jszip'
import { useCallback, useEffect, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import { useAppSelector } from '../../hooks'
import { appPrivateRoutes, appPublicRoutes } from '../../routes'
import { Meta, ProfileMetadata } from '../../types'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import { Select } from '../../components/Select'
import { DisplaySigit } from '../../components/DisplaySigit'
import { useDropzone } from 'react-dropzone'
import { Container } from '../../components/Container'
import styles from './style.module.scss'
import {
  extractSigitInfo,
  SigitInfo,
  SignedStatus
} from '../../hooks/useSigitMeta'

// Unsupported Filter options are commented
const FILTERS = [
  'Show all',
  // 'Drafts',
  'In-progress',
  'Completed'
  // 'Archived'
] as const
type Filter = (typeof FILTERS)[number]

const SORT_BY = [
  {
    label: 'Newest',
    value: 'desc'
  },
  { label: 'Oldest', value: 'asc' }
] as const
type Sort = (typeof SORT_BY)[number]['value']

export const HomePage = () => {
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()
  const q = searchParams.get('q') ?? ''

  useEffect(() => {
    const searchInput = document.getElementById('q') as HTMLInputElement | null
    if (searchInput) {
      searchInput.value = q
    }
  }, [q])

  const [sigits, setSigits] = useState<{ [key: string]: Meta }>({})
  const [parsedSigits, setParsedSigits] = useState<{
    [key: string]: SigitInfo
  }>({})
  const [profiles, setProfiles] = useState<{ [key: string]: ProfileMetadata }>(
    {}
  )
  const usersAppData = useAppSelector((state) => state.userAppData)

  useEffect(() => {
    if (usersAppData) {
      const getSigitInfo = async () => {
        for (const key in usersAppData.sigits) {
          if (Object.prototype.hasOwnProperty.call(usersAppData.sigits, key)) {
            const sigitInfo = await extractSigitInfo(usersAppData.sigits[key])
            if (sigitInfo) {
              setParsedSigits((prev) => {
                return {
                  ...prev,
                  [key]: sigitInfo
                }
              })
            }
          }
        }
      }

      setSigits(usersAppData.sigits)
      getSigitInfo()
    }
  }, [usersAppData])

  const onDrop = useCallback(
    async (acceptedFiles: File[]) => {
      // When uploading single file check if it's .sigit.zip
      if (acceptedFiles.length === 1) {
        const file = acceptedFiles[0]

        // 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 SiGit zip file')
          return
        }
      }

      // navigate to create page
      navigate(appPrivateRoutes.create, {
        state: { uploadedFiles: acceptedFiles }
      })
    },
    [navigate]
  )

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  const [filter, setFilter] = useState<Filter>('Show all')
  const [sort, setSort] = useState<Sort>('desc')

  return (
    <Container className={styles.container}>
      <div className={styles.header}>
        <div className={styles.filters}>
          <Select
            name={'filter-select'}
            value={filter}
            setValue={setFilter}
            options={FILTERS.map((f) => {
              return {
                label: f,
                value: f
              }
            })}
          />
          <Select
            name={'sort-select'}
            value={sort}
            setValue={setSort}
            options={SORT_BY.map((s) => {
              return { ...s }
            })}
          />
        </div>
        <div className={styles.actionButtons}>
          <form
            className={styles.search}
            onSubmit={(e) => {
              e.preventDefault()
              const searchInput = e.currentTarget.elements.namedItem(
                'q'
              ) as HTMLInputElement
              searchParams.set('q', searchInput.value)
              setSearchParams(searchParams)
            }}
          >
            <TextField
              id="q"
              name="q"
              placeholder="Search"
              size="small"
              type="search"
              defaultValue={q}
              onChange={(e) => {
                // Handle the case when users click native search input's clear or x
                if (e.currentTarget.value === '') {
                  searchParams.delete('q')
                  setSearchParams(searchParams)
                }
              }}
              sx={{
                width: '100%',
                fontSize: '16px',
                borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
                borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
                '& .MuiInputBase-root': {
                  borderTopRightRadius: 0,
                  borderBottomRightRadius: 0
                },
                '& .MuiInputBase-input': {
                  padding: '7px 14px'
                },
                '& .MuiOutlinedInput-notchedOutline': {
                  display: 'none'
                }
              }}
            />
            <Button
              type="submit"
              sx={{
                minWidth: '44px',
                padding: '11.5px 12px',
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0
              }}
              variant={'contained'}
            >
              <FontAwesomeIcon icon={faSearch} />
            </Button>
          </form>
        </div>
      </div>
      <div className={styles.dropzone}>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          {isDragActive ? (
            <p>Drop the files here ...</p>
          ) : (
            <p>Click or drag files to upload!</p>
          )}
        </div>
      </div>
      <div className={styles.submissions}>
        {Object.keys(parsedSigits)
          .filter((s) => {
            const { title, signedStatus } = parsedSigits[s]
            const isMatch = title?.toLowerCase().includes(q.toLowerCase())
            switch (filter) {
              case 'Completed':
                return signedStatus === SignedStatus.Complete && isMatch
              case 'In-progress':
                return signedStatus === SignedStatus.Partial && isMatch
              case 'Show all':
                return isMatch
              default:
                console.error('Filter case not handled.')
            }
          })
          .sort((a, b) => {
            const x = parsedSigits[a].createdAt ?? 0
            const y = parsedSigits[b].createdAt ?? 0
            return sort === 'desc' ? y - x : x - y
          })
          .map((key) => (
            <DisplaySigit
              key={`sigit-${key}`}
              parsedMeta={parsedSigits[key]}
              meta={sigits[key]}
              profiles={profiles}
              setProfiles={setProfiles}
            />
          ))}
      </div>
    </Container>
  )
}