feat: preview files

- allow for previewing of files
- merged the multiple places where uploaded files were being viewed in a single component that can list/download/preview/delete uploaded files

src/components/admin/campaign-news/UploadedCampaignNewsArticleFile.tsx

@@ -0,0 +1,47 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { AxiosError, AxiosResponse } from 'axios'
+import { useTranslation } from 'next-i18next'
+
+import { endpoints } from 'service/apiEndpoints'
+import { ApiErrors } from 'service/apiErrors'
+
+import { UploadedFilesList } from 'components/common/file-upload/UploadedFilesList'
+import { CampaignNewsFile } from 'gql/campaign-news'
+import { Session } from 'next-auth'
+import { useSession } from 'next-auth/react'
+import { deleteCampaignNewsFile, downloadCampaignNewsFile } from 'service/campaign-news'
+import { AlertStore } from 'stores/AlertStore'
+
+type Props = {
+  articleId: string
+  files: CampaignNewsFile[]
+}
+
+export default function UploadedCampaignNewsArticleFiles({ files, articleId }: Props) {
+  const { t } = useTranslation('campaigns')
+  const queryClient = useQueryClient()
+  const { data: session } = useSession()
+
+  const mutation = useMutation<
+    AxiosResponse<CampaignNewsFile>,
+    AxiosError<ApiErrors>,
+    [string, Session | null]
+  >({
+    mutationFn: ([id, session]) => deleteCampaignNewsFile(id, session),
+    onError: () => AlertStore.show(t('alerts.error'), 'error'),
+    onSuccess: () => {
+      AlertStore.show(t('alerts.deletedFile'), 'success')
+      queryClient.invalidateQueries([endpoints.campaignNews.viewNewsArticleById(articleId).url])
+    },
+  })
+
+  return (
+    <UploadedFilesList
+      files={files}
+      downloadQuery={(f) => downloadCampaignNewsFile(f.id, session).then((r) => r.data)}
+      deleteMutation={(f) => mutation.mutateAsync([f.id, session])}
+      title={t('campaigns:cta.attached-files')}
+      downloadText={t('cta.download')}
+    />
+  )
+}

src/components/admin/campaigns/grid/EditForm.tsx

@@ -45,7 +45,7 @@ import FileList from 'components/common/file-upload/FileList'
 import FileUpload from 'components/common/file-upload/FileUpload'
 import CampaignStateSelect from '../../../client/campaigns/CampaignStateSelect'
 import { endpoints } from 'service/apiEndpoints'
-import UploadedCampaignFile from './UploadedCampaignFile'
+import UploadedCampaignFiles from './UploadedCampaignFile'
 import { fromMoney, toMoney } from 'common/util/money'
 import CurrencySelect from 'components/common/currency/CurrencySelect'
 import OrganizerSelect from './OrganizerSelect'
@@ -356,12 +356,7 @@ export default function EditForm({ campaign }: { campaign: AdminSingleCampaignRe
             <OrganizerSelect />
           </Grid>
           <Grid item xs={12}>
-            <List dense>
-              <ListItemText primary={t('campaigns:cta.attached-files')} />
-              {(campaign?.campaignFiles || []).map((file, key) => (
-                <UploadedCampaignFile key={key} file={file} campaignId={campaign.id} />
-              ))}
-            </List>
+            <UploadedCampaignFiles files={campaign.campaignFiles} campaignId={campaign.id} />
           </Grid>
           <Grid item xs={12}>
             <FileUpload

src/components/admin/campaigns/grid/UploadedCampaignFile.tsx

@@ -1,85 +1,47 @@
-import { useTranslation } from 'next-i18next'
-import { AxiosError, AxiosResponse } from 'axios'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { AxiosError, AxiosResponse } from 'axios'
+import { useTranslation } from 'next-i18next'
 
-import FilePresentIcon from '@mui/icons-material/FilePresent'
-import {
-  Avatar,
-  Button,
-  IconButton,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Tooltip,
-} from '@mui/material'
-
-import { ApiErrors } from 'service/apiErrors'
 import { endpoints } from 'service/apiEndpoints'
+import { ApiErrors } from 'service/apiErrors'
 
-import { AlertStore } from 'stores/AlertStore'
-import { useSession } from 'next-auth/react'
+import { UploadedFilesList } from 'components/common/file-upload/UploadedFilesList'
 import { CampaignFile } from 'gql/campaigns'
+import { useSession } from 'next-auth/react'
 import { deleteCampaignFile, downloadCampaignFile } from 'service/campaign'
-import { Delete } from '@mui/icons-material'
+import { AlertStore } from 'stores/AlertStore'
+import { Session } from 'next-auth'
 
 type Props = {
   campaignId: string
-  file: CampaignFile
+  files: CampaignFile[]
 }
 
-export default function UploadedCampaignFile({ file, campaignId }: Props) {
+export default function UploadedCampaignFiles({ files, campaignId }: Props) {
   const { t } = useTranslation('campaigns')
   const queryClient = useQueryClient()
   const { data: session } = useSession()
 
-  const mutation = useMutation<AxiosResponse<CampaignFile>, AxiosError<ApiErrors>>({
-    mutationFn: deleteCampaignFile(file.id),
+  const mutation = useMutation<
+    AxiosResponse<CampaignFile>,
+    AxiosError<ApiErrors>,
+    [string, Session | null]
+  >({
+    mutationFn: deleteCampaignFile,
     onError: () => AlertStore.show(t('alerts.error'), 'error'),
     onSuccess: () => {
       AlertStore.show(t('alerts.deletedFile'), 'success')
       queryClient.invalidateQueries([endpoints.campaign.viewCampaignById(campaignId).url])
     },
   })
-  const downloadFileHandler = async () => {
-    downloadCampaignFile(file.id, session)
-      .then((response) => {
-        const url = window.URL.createObjectURL(new Blob([response.data]))
-        const link = document.createElement('a')
-        link.href = url
-        link.setAttribute('download', `${file.filename}`)
-        link.click()
-      })
-      .catch((error) => console.log(error))
-  }
-
-  const deleteFileHandler = () => {
-    mutation.mutate()
-  }
-
-  // in a preview file handler function we would (much like the downloadFileHandler function above)
-  // downloadCampaignFile(file.id, session)
-  // .then((response) => {
-  // const url = window.URL.createObjectURL(new Blob([response.data], type: {file.mimetype}))
-  const blob = new Blob(['<a id="a"><b id="b">hey!</b></a>'], { type: 'text/html' })
-  const newurl = window.URL.createObjectURL(blob)
 
   return (
-    <ListItem key={file.id}>
-      <ListItemAvatar>
-        <Avatar>
-          <FilePresentIcon />
-        </Avatar>
-      </ListItemAvatar>
-      <ListItemText primary={file.filename} />
-      <ListItemText primary={file.role} sx={{ textAlign: 'right', pr: 'inherit' }} />
-      <></>
-      <Tooltip title={'download'}>
-        <Button onClick={downloadFileHandler}>{t('cta.download')}</Button>
-      </Tooltip>
-      <IconButton edge="end" aria-label="delete" onClick={deleteFileHandler}>
-        <Delete />
-      </IconButton>
-      <iframe id={file.id} src={newurl} />
-    </ListItem>
+    <UploadedFilesList
+      files={files}
+      downloadQuery={(f) => downloadCampaignFile(f.id, session).then((r) => r.data)}
+      deleteMutation={(f) => mutation.mutateAsync([f.id, session])}
+      title={t('campaigns:cta.attached-files')}
+      downloadText={t('cta.download')}
+    />
   )
 }

src/components/client/campaign-news/secured/EditForm.tsx

@@ -48,7 +48,7 @@ import {
 } from 'gql/campaign-news'
 import { useEditNewsArticle, useUploadCampaignNewsFiles } from 'service/campaign-news'
 
-import UploadedCampaignFile from 'components/admin/campaign-news/UploadedCampaignFile'
+import UploadedCampaignFiles from 'components/admin/campaign-news/UploadedCampaignNewsArticleFile'
 import CampaignDropdownSelector from 'components/admin/campaign-news/CampaignDropdownSelector'
 import CheckboxField from 'components/common/form/CheckboxField'
 
@@ -271,12 +271,7 @@ export default function EditForm({ article, campaignId = '', isAdmin = true }: P
             <FormRichTextField name="description" />
           </Grid>
           <Grid item xs={12}>
-            <List dense>
-              <ListItemText primary={t('campaigns:cta.attached-files')} />
-              {(article?.newsFiles || []).map((file, key) => (
-                <UploadedCampaignFile key={key} file={file} articleId={article.id} />
-              ))}
-            </List>
+            <UploadedCampaignFiles files={article.newsFiles} articleId={article.id} />
           </Grid>
           <Grid item xs={12}>
             <FileUpload