Merge pull request #155 from 0101oak/oak/refactor-fix-archive

Oak/refactor fix archive
jekabolt · Oct 28, 2024 · acb620f · acb620f
2 parents c834bb9 + c0f0357
commit acb620f
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 113 deletions.
diff --git a/src/components/managers/archive/archive.tsx b/src/components/managers/archive/archive.tsx
@@ -1,6 +1,6 @@
-import { Alert, Divider, Grid, Snackbar } from '@mui/material';
+import { Alert, AppBar, Button, Grid, Snackbar, Toolbar } from '@mui/material';
 import { Layout } from 'components/login/layout';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { CreateArchive } from './createArchive/createArchive';
 import { fetchArchives } from './fetcharchive';
 import { ListArchive } from './listArchive/listArchive';
@@ -21,6 +21,10 @@ export const Archive: FC = () => {
     setArchive,
     updateArchiveInformation,
   } = fetchArchives();
+  const [isCreateArchiveModalOpen, setIsCreateArchiveModalOpen] = useState(false);
+
+  const handleOpenCreateArchiveModal = () => setIsCreateArchiveModalOpen(true);
+  const handleCloseCreateArchiveModal = () => setIsCreateArchiveModalOpen(false);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -43,12 +47,29 @@ export const Archive: FC = () => {
 
   return (
     <Layout>
+      <AppBar
+        position='fixed'
+        sx={{
+          top: 'auto',
+          bottom: 0,
+          backgroundColor: 'transparent',
+          boxShadow: 'none',
+        }}
+      >
+        <Toolbar sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button variant='contained' onClick={handleOpenCreateArchiveModal}>
+            add
+          </Button>
+        </Toolbar>
+      </AppBar>
       <Grid container spacing={2} justifyContent='center'>
         <Grid item xs={12}>
-          <CreateArchive fetchArchive={fetchArchive} showMessage={showMessage} />
-        </Grid>
-        <Grid item xs={12}>
-          <Divider />
+          <CreateArchive
+            open={isCreateArchiveModalOpen}
+            close={handleCloseCreateArchiveModal}
+            fetchArchive={fetchArchive}
+            showMessage={showMessage}
+          />
         </Grid>
         <Grid item xs={12}>
           <ListArchive

diff --git a/src/components/managers/archive/createArchive/createArchive.tsx b/src/components/managers/archive/createArchive/createArchive.tsx
@@ -1,5 +1,5 @@
 import ClearIcon from '@mui/icons-material/Clear';
-import { Button, Grid, IconButton, TextField, Typography } from '@mui/material';
+import { Button, Dialog, Grid, IconButton, TextField, Typography } from '@mui/material';
 import { addArchive } from 'api/archive';
 import {
   common_ArchiveItemInsert,
@@ -16,7 +16,7 @@ import { ArchiveModal } from '../archiveModal/archiveModal';
 import { createArchives } from '../interfaces/interfaces';
 import { isValidUrl } from '../utility/isValidUrl';
 
-export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage }) => {
+export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, open, close }) => {
   const initialArchiveState: common_ArchiveNew = {
     archive: {
       heading: '',
@@ -53,6 +53,11 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage })
   const mediaPreview = (newSelectedMedia: common_MediaFull[]) => {
     if (newSelectedMedia.length === 0) return;
     const selectedMedia = newSelectedMedia[0];
+    const isDuplicate = archive.itemsInsert?.some((item) => item.mediaId === selectedMedia.id);
+    if (isDuplicate) {
+      showMessage('This media is already in the archive', 'error');
+      return;
+    }
     setMediaId(selectedMedia.id);
     const previewMediaUrl = selectedMedia.media?.thumbnail?.mediaUrl;
     setMedia(previewMediaUrl);
@@ -65,6 +70,14 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage })
       return;
     }
 
+    if (mediaId && selectedItemIndex === null) {
+      const isDuplicate = archive.itemsInsert?.some((item) => item.mediaId === mediaId);
+      if (isDuplicate) {
+        showMessage('This media is already in the archive', 'error');
+        return;
+      }
+    }
+
     const newItem: common_ArchiveItemInsert = {
       mediaId: mediaId,
       url: url,
@@ -158,110 +171,115 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage })
         fetchArchive(50, 0);
         setMediaItem([]);
         showMessage('archive created', 'success');
+        close();
       } else {
         showMessage('add item to the archive', 'error');
       }
     } catch (error) {
       showMessage('archive cannot be created ', 'error');
     }
   };
-
   return (
-    <Grid container spacing={2} marginTop={4} alignItems='center'>
-      <Grid item xs={12}>
-        <Typography variant='h5' textTransform='uppercase'>
-          create new archive
-        </Typography>
-        <Grid container className={styles.scroll_container} wrap='nowrap'>
-          <Grid item xs={12} md={3} className={styles.media_item_add}>
-            <MediaSelectorLayout
-              label='add media'
-              allowMultiple={false}
-              saveSelectedMedia={mediaPreview}
-              aspectRatio={['1:1', '3:4', '4:3']}
-              hideVideos={true}
-              isDeleteAccepted={false}
-            />
-          </Grid>
-          {mediaItem.map((media, id) => (
-            <Grid item key={id} xs={12} md={3}>
-              <Grid container>
-                <Grid item xs={12} className={styles.media_item}>
-                  <img
-                    src={media.media?.fullSize?.mediaUrl}
-                    alt=''
-                    onClick={() => toggleModal(id)}
-                  />
-                  <IconButton onClick={() => removeMediaItem(id)} className={styles.delete_item}>
-                    <ClearIcon fontSize='small' />
-                  </IconButton>
-                </Grid>
-                <Grid item xs={12}>
-                  <TruncateText text={archive.itemsInsert?.[id].name} length={60} />
-                  {archive.itemsInsert?.[id]?.url && isValidUrl(archive.itemsInsert[id].url) && (
-                    <CopyToClipboard
-                      text={archive.itemsInsert[id].url || ''}
-                      displayText={`${archive.itemsInsert[id].url?.slice(0, 5)}...${archive.itemsInsert[id].url?.slice(-7)}`}
+    <Dialog open={open} onClose={close} fullWidth maxWidth='xl'>
+      <Button onClick={close} sx={{ position: 'absolute', right: 0, top: 0 }}>
+        <ClearIcon />
+      </Button>
+      <Grid container spacing={2} padding={4} alignItems='center'>
+        <Grid item xs={12}>
+          <Typography variant='h5' textTransform='uppercase'>
+            create new archive
+          </Typography>
+          <Grid container className={styles.scroll_container} wrap='nowrap'>
+            <Grid item xs={12} md={3} className={styles.media_item_add}>
+              <MediaSelectorLayout
+                label='add media'
+                allowMultiple={false}
+                saveSelectedMedia={mediaPreview}
+                aspectRatio={['1:1', '3:4', '4:3']}
+                hideVideos={true}
+                isDeleteAccepted={false}
+              />
+            </Grid>
+            {mediaItem.map((media, id) => (
+              <Grid item key={id} xs={12} md={3}>
+                <Grid container>
+                  <Grid item xs={12} className={styles.media_item}>
+                    <img
+                      src={media.media?.fullSize?.mediaUrl}
+                      alt=''
+                      onClick={() => toggleModal(id)}
                     />
-                  )}
+                    <IconButton onClick={() => removeMediaItem(id)} className={styles.delete_item}>
+                      <ClearIcon fontSize='small' />
+                    </IconButton>
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TruncateText text={archive.itemsInsert?.[id].name} length={60} />
+                    {archive.itemsInsert?.[id]?.url && isValidUrl(archive.itemsInsert[id].url) && (
+                      <CopyToClipboard
+                        text={archive.itemsInsert[id].url || ''}
+                        displayText={`${archive.itemsInsert[id].url?.slice(0, 5)}...${archive.itemsInsert[id].url?.slice(-7)}`}
+                      />
+                    )}
+                  </Grid>
                 </Grid>
               </Grid>
+            ))}
+          </Grid>
+
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <TextField
+                type='text'
+                name='heading'
+                fullWidth
+                value={archive.archive?.heading}
+                onChange={handleTextFieldChange}
+                label='TITLE'
+                InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
+                size='small'
+                required
+              />
             </Grid>
-          ))}
+            <Grid item xs={12}>
+              <TextField
+                type='text'
+                name='description'
+                value={archive.archive?.text}
+                onChange={handleTextFieldChange}
+                label='DESCRIPTION'
+                InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
+                inputProps={{ maxLength: 255 }}
+                size='small'
+                fullWidth
+                multiline
+              />
+            </Grid>
+          </Grid>
         </Grid>
 
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <TextField
-              type='text'
-              name='heading'
-              fullWidth
-              value={archive.archive?.heading}
-              onChange={handleTextFieldChange}
-              label='TITLE'
-              InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
-              size='small'
-              required
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <TextField
-              type='text'
-              name='description'
-              value={archive.archive?.text}
-              onChange={handleTextFieldChange}
-              label='DESCRIPTION'
-              InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
-              inputProps={{ maxLength: 255 }}
-              size='small'
-              fullWidth
-              multiline
-            />
-          </Grid>
+        <Grid item xs={12}>
+          <Button
+            onClick={() => createArchive()}
+            variant='contained'
+            disabled={mediaItem.length === 0 || archive.archive?.heading?.trim() === ''}
+          >
+            submit
+          </Button>
         </Grid>
-      </Grid>
 
-      <Grid item xs={12}>
-        <Button
-          onClick={() => createArchive()}
-          variant='contained'
-          disabled={mediaItem.length === 0 || archive.archive?.heading?.trim() === ''}
-        >
-          submit
-        </Button>
+        <ArchiveModal
+          open={isModalOpen}
+          isEditMode={selectedItemIndex !== null}
+          media={media?.toString() || ''}
+          title={title}
+          url={url}
+          close={toggleModal}
+          setTitle={setTitle}
+          setUrl={setUrl}
+          addNewItem={addNewItem}
+        />
       </Grid>
-
-      <ArchiveModal
-        open={isModalOpen}
-        isEditMode={selectedItemIndex !== null}
-        media={media?.toString() || ''}
-        title={title}
-        url={url}
-        close={toggleModal}
-        setTitle={setTitle}
-        setUrl={setUrl}
-        addNewItem={addNewItem}
-      />
-    </Grid>
+    </Dialog>
   );
 };
diff --git a/src/components/managers/archive/fetcharchive.ts b/src/components/managers/archive/fetcharchive.ts
@@ -99,8 +99,6 @@ export const fetchArchives = (
                     showMessage('Item removed from archive', 'success');
                     updateArchiveInformation(archiveId, updatedArchiveEntry);
                     return updatedArchiveEntry;
-                } else {
-                    showMessage('Item cannot be removed from archive', 'error');
                 }
                 return archiveEntry;
             }).filter((archiveEntry) => archiveEntry !== null) as common_ArchiveFull[]

diff --git a/src/components/managers/archive/interfaces/interfaces.ts b/src/components/managers/archive/interfaces/interfaces.ts
@@ -14,6 +14,8 @@ export interface ArchiveModalInterface {
 }
 
 export interface createArchives {
+    open: boolean;
+    close: () => void;
     fetchArchive: (limit: number, offset: number) => void;
     showMessage: (message: string, severity: 'success' | 'error') => void;
 }

diff --git a/src/components/managers/archive/listArchive/archiveTable.tsx b/src/components/managers/archive/listArchive/archiveTable.tsx
@@ -85,15 +85,20 @@ export const ArchiveTable: FC<ArchiveTableInterface> = ({
         />
       ),
     },
-    { accessorKey: 'archiveItem.title', header: 'Description' },
+    { accessorKey: 'archiveItem.name', header: 'Description' },
     {
       accessorKey: 'archiveItem.url',
       header: 'URL',
-      Cell: ({ cell }) => (
-        <a href={cell.getValue() as string} target='_blank' rel='noopener noreferrer'>
-          go to link
-        </a>
-      ),
+      Cell: ({ cell }) => {
+        const url = cell.getValue() as string;
+        return url ? (
+          <a href={url} target='_blank' rel='noopener noreferrer'>
+            go to link
+          </a>
+        ) : (
+          'no link'
+        );
+      },
     },
     {
       accessorKey: 'id',