Merge pull request #192 from 0101oak/feature/stores

store and separate component for snackbar created

src/components/common/media-selector-layout/media-selector-components/dragDrop.tsx

@@ -1,16 +1,15 @@
 import {
-  Alert,
   Box,
   Button,
   CircularProgress,
   Grid,
   Paper,
-  Snackbar,
   Theme,
   Typography,
   useMediaQuery,
 } from '@mui/material';
 import { getBase64File } from 'features/utilitty/getBase64';
+import { useSnackBarStore } from 'lib/stores/store';
 import React, { Dispatch, FC, SetStateAction, useState } from 'react';
 
 interface DragDropProps {
@@ -28,22 +27,10 @@ export const DragDrop: FC<DragDropProps> = ({
   setSelectedFiles,
   loading,
 }) => {
+  const { showMessage } = useSnackBarStore();
   const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [snackbarOpen, setSnackbarOpen] = useState<boolean>(false);
-  const [snackbarMessage, setSnackbarMessage] = useState<string>('');
-  const [snackBarSeverity, setSnackBarSeverity] = useState<'success' | 'error'>('success');
   const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
 
-  const handleSnackbarClose = () => {
-    setSnackbarOpen(false);
-  };
-
-  const showMessage = (message: string, severity: 'success' | 'error') => {
-    setSnackbarMessage(message);
-    setSnackBarSeverity(severity);
-    setSnackbarOpen(true);
-  };
-
   const processFiles = async (files: FileList) => {
     if (files && files.length > 0) {
       const file = files[0];
@@ -69,7 +56,7 @@ export const DragDrop: FC<DragDropProps> = ({
     if (files && files.length > 0) {
       processFiles(files);
     } else {
-      showMessage('NO SELECTED FILES', 'error');
+      showMessage('no files selected', 'error');
     }
     if ('dataTransfer' in e) {
       setIsDragging(false);
@@ -123,9 +110,6 @@ export const DragDrop: FC<DragDropProps> = ({
           </Paper>
           {loading && <CircularProgress />}
         </Box>
-        <Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={handleSnackbarClose}>
-          <Alert severity={snackBarSeverity}>{snackbarMessage}</Alert>
-        </Snackbar>
       </Grid>
     </Grid>
   );

src/components/common/media-selector-layout/media-selector-components/fullSizeMediaModal.tsx

@@ -1,4 +1,4 @@
-import { Grid2 as Grid, Snackbar, Theme, Typography, useMediaQuery } from '@mui/material';
+import { Grid2 as Grid, Theme, Typography, useMediaQuery } from '@mui/material';
 import { common_MediaInfo, common_MediaItem } from 'api/proto-http/admin';
 import { CopyToClipboard } from 'components/common/copyToClipboard';
 import { PreviewMediaForUpload } from 'components/common/cropper/previewMediaForUpload';
@@ -20,8 +20,6 @@ export const FullSizeMediaModal: FC<FullSizeMediaModalInterface> = ({
   setCroppedImage,
   handleUploadMedia,
 }) => {
-  const [snackBarOpen, setSnackbarOpen] = useState(false);
-  const [snackBarMessage, setSnackBarMessage] = useState<string>('');
   const [videoDimensions, setVideoDimensions] = useState<VideoDimensions>({});
   const [isCropperOpen, setIsCropperOpen] = useState<boolean>(false);
   const [isPreviewOpen, setIsPreviewOpen] = useState<boolean>(true);
@@ -54,11 +52,6 @@ export const FullSizeMediaModal: FC<FullSizeMediaModalInterface> = ({
     }
   }, [clickedMedia]);
 
-  const showMessage = (message: string) => {
-    setSnackBarMessage(message);
-    setSnackbarOpen(true);
-  };
-
   const clearDragDropSelector = () => {
     setCroppedImage('');
     setIsPreviewOpen(!isPreviewOpen);
@@ -120,12 +113,6 @@ export const FullSizeMediaModal: FC<FullSizeMediaModalInterface> = ({
           ))}
         </Grid>
       </Dialog>
-      <Snackbar
-        open={snackBarOpen}
-        autoHideDuration={6000}
-        onClose={() => setSnackbarOpen(false)}
-        message={snackBarMessage}
-      />
     </>
   );
 };

src/components/common/media-selector-layout/media-selector-components/listMedia.tsx

@@ -1,14 +1,12 @@
 import CheckIcon from '@mui/icons-material/Check';
 import ClearIcon from '@mui/icons-material/Clear';
 import {
-  Alert,
   Box,
   Grid,
   IconButton,
   ImageList,
   ImageListItem,
   InputLabel,
-  Snackbar,
   Typography,
   useMediaQuery,
   useTheme,
@@ -18,7 +16,7 @@ import { common_MediaFull, common_MediaItem } from 'api/proto-http/admin';
 import { MediaSelectorMediaListProps } from 'components/common/interfaces/mediaSelectorInterfaces';
 import { calculateAspectRatio } from 'features/utilitty/calculateAspectRatio';
 import { isVideo } from 'features/utilitty/filterContentType';
-import useMediaSelector from 'features/utilitty/useMediaSelector';
+import { useSnackBarStore } from 'lib/stores/store';
 import { FC, useCallback, useEffect, useState } from 'react';
 import styles from 'styles/media-selector.scss';
 import { FullSizeMediaModal } from './fullSizeMediaModal';
@@ -37,8 +35,7 @@ export const MediaList: FC<MediaSelectorMediaListProps> = ({
   sortedAndFilteredMedia,
   handleUploadMedia,
 }) => {
-  const { isSnackBarOpen, snackBarMessage, snackBarSeverity, showMessage, closeSnackBar } =
-    useMediaSelector();
+  const { showMessage } = useSnackBarStore();
   const [openModal, setOpenModal] = useState(false);
   const [clickedMedia, setClickedMedia] = useState<common_MediaItem | undefined>();
   const theme = useTheme();
@@ -223,9 +220,6 @@ export const MediaList: FC<MediaSelectorMediaListProps> = ({
         setCroppedImage={setCroppedImage}
         handleUploadMedia={handleUploadMedia}
       />
-      <Snackbar open={isSnackBarOpen} autoHideDuration={3000} onClose={closeSnackBar}>
-        <Alert severity={snackBarSeverity}>{snackBarMessage}</Alert>
-      </Snackbar>
     </Grid>
   );
 };

src/components/common/media-selector-layout/media-selector-components/mediaSelectorModal.tsx

@@ -1,8 +1,7 @@
-import { Alert, Snackbar } from '@mui/material';
 import { common_MediaFull } from 'api/proto-http/admin';
 import { Dialog } from 'components/common/dialog';
 import { MediaSelectorModalProps } from 'components/common/interfaces/mediaSelectorInterfaces';
-import useMediaSelector from 'features/utilitty/useMediaSelector';
+import { useSnackBarStore } from 'lib/stores/store';
 import { FC, useState } from 'react';
 import { MediaSelector } from './mediaSelector';
 
@@ -14,8 +13,7 @@ export const MediaSelectorModal: FC<MediaSelectorModalProps> = ({
   closeMediaSelector,
   saveSelectedMedia,
 }) => {
-  const { snackBarMessage, closeSnackBar, isSnackBarOpen, showMessage, snackBarSeverity } =
-    useMediaSelector();
+  const { showMessage } = useSnackBarStore();
   const [selectedMedia, setSelectedMedia] = useState<common_MediaFull[]>([]);
   const [open, setOpen] = useState(true);
 
@@ -53,9 +51,6 @@ export const MediaSelectorModal: FC<MediaSelectorModalProps> = ({
         selectedMedia={selectedMedia}
         select={select}
       />
-      <Snackbar open={isSnackBarOpen} autoHideDuration={3000} onClose={closeSnackBar}>
-        <Alert severity={snackBarSeverity}>{snackBarMessage}</Alert>
-      </Snackbar>
     </Dialog>
   );
 };

src/components/common/snackbar.tsx

@@ -0,0 +1,30 @@
+import { Alert, Snackbar } from '@mui/material';
+import { useSnackBarStore } from 'lib/stores/store';
+
+export function SnackBar() {
+  const { alerts, closeMessage } = useSnackBarStore();
+
+  return (
+    <>
+      {alerts.map((alert, index) => (
+        <Snackbar
+          key={alert.id}
+          open={true}
+          autoHideDuration={6000}
+          onClose={() => closeMessage(alert.id)}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          style={{
+            bottom: `${index * 60 + 20}px`,
+          }}
+        >
+          <Alert severity={alert.severity} onClose={() => closeMessage(alert.id)}>
+            {alert.message.toUpperCase()}
+          </Alert>
+        </Snackbar>
+      ))}
+    </>
+  );
+}

src/components/login/layout.tsx

@@ -2,6 +2,7 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import { AppBar, Box, Button, Container, IconButton, Toolbar, styled } from '@mui/material';
 import { useNavigate } from '@tanstack/react-location';
+import { SnackBar } from 'components/common/snackbar';
 import { ROUTES } from 'constants/routes';
 import logo from 'img/tex-text.png';
 import { FC, ReactNode } from 'react';
@@ -60,6 +61,7 @@ export const Layout: FC<LayoutProps> = ({ children }) => {
       <Container component='main' sx={{ flexGrow: 1, overflowY: 'auto' }}>
         {children}
       </Container>
+      <SnackBar />
     </Box>
   );
 };

src/components/managers/archive/archive.tsx

@@ -1,4 +1,4 @@
-import { Alert, AppBar, Button, Grid, Snackbar, Toolbar } from '@mui/material';
+import { AppBar, Button, Grid, Toolbar } from '@mui/material';
 import { Layout } from 'components/login/layout';
 import { FC, useEffect, useState } from 'react';
 import { CreateArchive } from './createArchive/createArchive';
@@ -11,11 +11,6 @@ export const Archive: FC = () => {
     isLoading,
     hasMore,
     fetchArchive,
-    showMessage,
-    snackBarMessage,
-    snackBarSeverity,
-    isSnackBarOpen,
-    setIsSnackBarOpen,
     deleteArchiveFromList,
     deleteItemFromArchive,
     setArchive,
@@ -68,7 +63,6 @@ export const Archive: FC = () => {
             open={isCreateArchiveModalOpen}
             close={handleCloseCreateArchiveModal}
             fetchArchive={fetchArchive}
-            showMessage={showMessage}
           />
         </Grid>
         <Grid item xs={12}>
@@ -78,16 +72,8 @@ export const Archive: FC = () => {
             deleteArchiveFromList={deleteArchiveFromList}
             deleteItemFromArchive={deleteItemFromArchive}
             updateArchiveInformation={updateArchiveInformation}
-            showMessage={showMessage}
           />
         </Grid>
-        <Snackbar
-          open={isSnackBarOpen}
-          autoHideDuration={6000}
-          onClose={() => setIsSnackBarOpen(!isSnackBarOpen)}
-        >
-          <Alert severity={snackBarSeverity}>{snackBarMessage.toUpperCase()}</Alert>
-        </Snackbar>
       </Grid>
     </Layout>
   );

src/components/managers/archive/createArchive/createArchive.tsx

@@ -11,13 +11,15 @@ import { CopyToClipboard } from 'components/common/copyToClipboard';
 import { Dialog } from 'components/common/dialog';
 import { MediaSelectorLayout } from 'components/common/media-selector-layout/layout';
 import { TruncateText } from 'components/common/truncateText';
+import { useSnackBarStore } from 'lib/stores/store';
 import { FC, useState } from 'react';
 import styles from 'styles/archive.scss';
 import { ArchiveModal } from '../archiveModal/archiveModal';
 import { createArchives } from '../interfaces/interfaces';
 import { isValidUrl } from '../utility/isValidUrl';
 
-export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, open, close }) => {
+export const CreateArchive: FC<createArchives> = ({ fetchArchive, open, close }) => {
+  const { showMessage } = useSnackBarStore();
   const initialArchiveState: common_ArchiveNew = {
     archive: {
       heading: '',

src/components/managers/archive/fetcharchive.ts

@@ -1,5 +1,6 @@
 import { deleteArchive, getArchive, updateArchive } from 'api/archive';
 import { common_ArchiveFull } from 'api/proto-http/frontend';
+import { useSnackBarStore } from 'lib/stores/store';
 import { useCallback, useState } from 'react';
 import { convertArchiveFullToNew } from './utility/convertArchiveFromFullToNew';
 
@@ -10,29 +11,16 @@ export const fetchArchives = (
     archive: common_ArchiveFull[];
     isLoading: boolean;
     hasMore: boolean;
-    snackBarMessage: string;
-    snackBarSeverity: 'success' | 'error';
-    isSnackBarOpen: boolean;
     setArchive: React.Dispatch<React.SetStateAction<common_ArchiveFull[]>>;
     fetchArchive: (limit: number, offset: number) => Promise<void>;
-    setIsSnackBarOpen: (value: boolean) => void;
-    showMessage: (message: string, severity: 'success' | 'error') => void;
     deleteArchiveFromList: (id: number | undefined) => void;
     deleteItemFromArchive: (archiveId: number | undefined, itemId: number | undefined) => void;
     updateArchiveInformation: (archiveId: number | undefined, items: common_ArchiveFull) => void;
 } => {
     const [archive, setArchive] = useState<common_ArchiveFull[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(initialLoading);
     const [hasMore, setHasMore] = useState<boolean>(initialHasMore);
-    const [snackBarMessage, setSnackBarMessage] = useState<string>('');
-    const [isSnackBarOpen, setIsSnackBarOpen] = useState<boolean>(false);
-    const [snackBarSeverity, setSnackBarSeverity] = useState<'success' | 'error'>('success');
-
-    const showMessage = (message: string, severity: 'success' | 'error') => {
-        setSnackBarMessage(message);
-        setSnackBarSeverity(severity);
-        setIsSnackBarOpen(!isSnackBarOpen);
-    };
+    const { showMessage } = useSnackBarStore();
 
     const fetchArchive = useCallback(async (limit: number, offset: number) => {
         setIsLoading(true);
@@ -109,13 +97,8 @@ export const fetchArchives = (
         archive,
         isLoading,
         hasMore,
-        snackBarMessage,
-        snackBarSeverity,
-        isSnackBarOpen,
         setArchive,
         fetchArchive,
-        showMessage,
-        setIsSnackBarOpen,
         deleteArchiveFromList,
         deleteItemFromArchive,
         updateArchiveInformation,

src/components/managers/archive/interfaces/interfaces.ts

@@ -17,7 +17,6 @@ export interface createArchives {
     open: boolean;
     close: () => void;
     fetchArchive: (limit: number, offset: number) => void;
-    showMessage: (message: string, severity: 'success' | 'error') => void;
 }
 
 export interface ListArchiveInterface {
@@ -26,5 +25,4 @@ export interface ListArchiveInterface {
     deleteArchiveFromList: (id: number | undefined) => void
     deleteItemFromArchive: (archiveId: number | undefined, itemId: number | undefined) => void;
     updateArchiveInformation: (archiveId: number | undefined, items: common_ArchiveFull) => void
-    showMessage: (message: string, severity: 'success' | 'error') => void;
 }

src/components/managers/archive/listArchive/listArchive.tsx

@@ -6,6 +6,7 @@ import { CopyToClipboard } from 'components/common/copyToClipboard';
 import { MediaSelectorLayout } from 'components/common/media-selector-layout/layout';
 import { TruncateText } from 'components/common/truncateText';
 import { isValidURL } from 'features/utilitty/isValidUrl';
+import { useSnackBarStore } from 'lib/stores/store';
 import { FC, useEffect, useState } from 'react';
 import styles from 'styles/archiveList.scss';
 import { ArchiveModal } from '../archiveModal/archiveModal';
@@ -18,8 +19,8 @@ export const ListArchive: FC<ListArchiveInterface> = ({
   deleteArchiveFromList,
   deleteItemFromArchive,
   updateArchiveInformation,
-  showMessage,
 }) => {
+  const { showMessage } = useSnackBarStore();
   const [media, setMedia] = useState('');
   const [mediaId, setMediaId] = useState<number>();
   const [title, setTitle] = useState('');