From 7fafbc1da07e21d7220b7348e736032f697897a6 Mon Sep 17 00:00:00 2001 From: Akshay Pithadiya Date: Sun, 26 Dec 2021 16:06:47 +0530 Subject: [PATCH] Added remove photos from album feature (#98) * Added remove photos from album feature * Add photos to album feature added * added page not found * Minor changes done --- frontend/public/404.svg | 1 + frontend/src/App.js | 14 ++- frontend/src/components/Content.js | 3 + frontend/src/components/DeleteAlbumDialog.js | 2 + frontend/src/components/header/CreateAlbum.js | 2 +- frontend/src/components/header/Header.js | 11 +- frontend/src/components/header/UpdateAlbum.js | 107 ++++++++++++++++ frontend/src/pages/Album.js | 117 ++++++++++++++++-- frontend/src/pages/PageNotFound.js | 24 ++++ frontend/src/pages/Photos.js | 40 +++++- frontend/src/pages/index.js | 2 + 11 files changed, 299 insertions(+), 24 deletions(-) create mode 100644 frontend/public/404.svg create mode 100644 frontend/src/components/header/UpdateAlbum.js create mode 100644 frontend/src/pages/PageNotFound.js diff --git a/frontend/public/404.svg b/frontend/public/404.svg new file mode 100644 index 0000000..e953283 --- /dev/null +++ b/frontend/public/404.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js index fd3857d..1331a60 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -8,7 +8,7 @@ import SideNav from './components/SideNav'; import { DrawerAppContent } from '@rmwc/drawer'; import '@rmwc/theme/styles'; import './App.scss'; -export const CreateAlbumContext = createContext(); +export const AlbumsContext = createContext(); const link = createUploadLink({ uri: process.env.REACT_APP_API_URL }); const client = new ApolloClient({ @@ -21,11 +21,19 @@ const App = () => { const toggle = () => setOpen(!open); const [imageList, setImageList] = useState([]); + const [removeImageList, setRemoveImageList] = useState([]); + const [addImageList, setAddImageList] = useState([]); return (
- + { - +
); diff --git a/frontend/src/components/Content.js b/frontend/src/components/Content.js index abe0e1d..f741377 100644 --- a/frontend/src/components/Content.js +++ b/frontend/src/components/Content.js @@ -5,6 +5,7 @@ import { Photos, Search, Upcoming, + PageNotFound, Favourites, Trash, Albums, @@ -28,12 +29,14 @@ const Content = () => { + {/* static */} + ); diff --git a/frontend/src/components/DeleteAlbumDialog.js b/frontend/src/components/DeleteAlbumDialog.js index 4a05e9d..aaabed8 100644 --- a/frontend/src/components/DeleteAlbumDialog.js +++ b/frontend/src/components/DeleteAlbumDialog.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; import { gql, useMutation } from '@apollo/client'; import { CircularProgress } from '@rmwc/circular-progress'; +import { Snackbar } from '@rmwc/snackbar'; import { Dialog, DialogTitle, DialogActions, DialogButton } from '@rmwc/dialog'; import '@rmwc/dialog/styles'; @@ -27,6 +28,7 @@ const DeleteAlbumDialog = ({ open, setOpen, albumName, albumId }) => { setTimeout(() => { history.push('/albums'); }, 2000); + return ; } return ( diff --git a/frontend/src/components/header/CreateAlbum.js b/frontend/src/components/header/CreateAlbum.js index 4db7692..c123e31 100644 --- a/frontend/src/components/header/CreateAlbum.js +++ b/frontend/src/components/header/CreateAlbum.js @@ -27,7 +27,7 @@ const CreateAlbum = ({ disabled, imageList }) => { if (data && data.createAlbum) { setTimeout(() => { - history.push('/albums'); + history.push(`/album/${data.createAlbum}`); history.go(0); }); return ; diff --git a/frontend/src/components/header/Header.js b/frontend/src/components/header/Header.js index dd2e169..58a8541 100644 --- a/frontend/src/components/header/Header.js +++ b/frontend/src/components/header/Header.js @@ -13,10 +13,13 @@ import { NavLink } from 'react-router-dom'; import SearchBar from './SearchBar'; import Upload from './Upload'; import CreateAlbum from './CreateAlbum'; -import { CreateAlbumContext } from '../../App'; +import UpdateAlbum from './UpdateAlbum'; +import { AlbumsContext } from '../../App'; const Header = ({ toggleSideNav }) => { - const { imageList } = useContext(CreateAlbumContext); + const { createAlbum, removePhotos } = useContext(AlbumsContext); + const [removeImageList] = removePhotos; + const [imageList] = createAlbum; return (
@@ -34,6 +37,10 @@ const Header = ({ toggleSideNav }) => { + { + const history = useHistory(); + const [updateAlbum, { data, error, loading }] = useMutation(UPDATE_ALBUM); + const handleUpdate = (updatedList, type) => { + type === 'add' + ? updateAlbum({ + variables: { + id: String(albumId[albumId.length - 2]), + type: type, + mediaItems: updatedList, + }, + }) + : updateAlbum({ + variables: { + id: String(albumId[albumId.length - 1]), + type: type, + mediaItems: updatedList, + }, + }); + }; + + if (loading) + return ( + + ); + + if (data && data.updateAlbumMediaItems) { + setTimeout(() => { + if (removeImageList) { + history.go(0); + } else { + history.push(`/album/${albumId[albumId.length - 2]}`); + } + }); + return ( + + ); + } + + if (error) return ; + + return ( + <> + {removeImageList ? ( + handleUpdate(removeImageList, 'remove')} + /> + ) : ( +
{moment(data.album.createdAt).format('MMMM D, YYYY')} @@ -95,13 +154,12 @@ const Album = () => { {data.album.mediaItems.nodes.map((img) => ( - - history.push(`/photo/${img.id}`)} - /> - + ))} @@ -112,9 +170,37 @@ const Album = () => { <> - {data.album.name} -     -