fixed add/remove album issue (#100)

* fixed add/remove album issue * added common handler for removing/adding photos * quick fix * minor changes done
prabhuomkar · Dec 31, 2021 · f2c5f20 · f2c5f20
1 parent 8fd3698
commit f2c5f20
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 41 deletions.
diff --git a/...tend/src/components/header/UpdateAlbum.js → frontend/src/components/UpdateAlbum.js b/...tend/src/components/header/UpdateAlbum.js → frontend/src/components/UpdateAlbum.js
@@ -5,7 +5,7 @@ import { gql, useMutation } from '@apollo/client';
 import { TopAppBarActionItem } from '@rmwc/top-app-bar';
 import { Snackbar } from '@rmwc/snackbar';
 import { Button } from '@rmwc/button';
-import { Error } from '..';
+import { Error } from '.';
 
 const UPDATE_ALBUM = gql`
   mutation updateAlbumMediaItems(
@@ -17,28 +17,18 @@ const UPDATE_ALBUM = gql`
   }
 `;
 
-var pageURL = window.location.href;
-var albumId = pageURL.split('/');
-
-const UpdateAlbum = ({ disabled, removeImageList, addImageList }) => {
+const UpdateAlbum = ({ disabled, albumId, removeImageList, addImageList }) => {
   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,
-          },
-        });
+
+  const handleUpdateAlbum = (updatedList, type) => {
+    updateAlbum({
+      variables: {
+        id: albumId,
+        type: type,
+        mediaItems: updatedList,
+      },
+    });
   };
 
   if (loading)
@@ -58,15 +48,15 @@ const UpdateAlbum = ({ disabled, removeImageList, addImageList }) => {
       if (removeImageList) {
         history.go(0);
       } else {
-        history.push(`/album/${albumId[albumId.length - 2]}`);
+        history.push(`/album/${albumId}`);
       }
     });
     return (
       <Snackbar
         open={true}
         message={
           removeImageList
-            ? 'Photo has been deleted'
+            ? 'Photo has been removed'
             : 'Photo has been added to album'
         }
       />
@@ -82,7 +72,7 @@ const UpdateAlbum = ({ disabled, removeImageList, addImageList }) => {
           icon={disabled ? '' : 'remove_circle_outline'}
           style={{ color: 'red' }}
           disabled={disabled ? true : false}
-          onClick={() => handleUpdate(removeImageList, 'remove')}
+          onClick={() => handleUpdateAlbum(removeImageList, 'remove')}
         />
       ) : (
         <Button
@@ -91,7 +81,7 @@ const UpdateAlbum = ({ disabled, removeImageList, addImageList }) => {
           unelevated
           style={{ color: '#fff' }}
           disabled={disabled ? true : false}
-          onClick={() => handleUpdate(addImageList, 'add')}
+          onClick={() => handleUpdateAlbum(addImageList, 'add')}
         />
       )}
     </>
@@ -102,6 +92,7 @@ UpdateAlbum.propTypes = {
   disabled: PropTypes.bool,
   removeImageList: PropTypes.array,
   addImageList: PropTypes.array,
+  albumId: PropTypes.string,
 };
 
 export default UpdateAlbum;
diff --git a/frontend/src/components/header/Header.js b/frontend/src/components/header/Header.js
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import {
   TopAppBar,
@@ -13,10 +14,12 @@ import { NavLink } from 'react-router-dom';
 import SearchBar from './SearchBar';
 import Upload from './Upload';
 import CreateAlbum from './CreateAlbum';
-import UpdateAlbum from './UpdateAlbum';
+import UpdateAlbum from '../UpdateAlbum';
 import { AlbumsContext } from '../../App';
 
 const Header = ({ toggleSideNav }) => {
+  const location = useLocation();
+  const albumId = location.pathname.split('/').pop();
   const { createAlbum, removePhotos } = useContext(AlbumsContext);
   const [removeImageList] = removePhotos;
   const [imageList] = createAlbum;
@@ -40,6 +43,7 @@ const Header = ({ toggleSideNav }) => {
             <UpdateAlbum
               removeImageList={removeImageList}
               disabled={removeImageList.length === 0}
+              albumId={albumId}
             />
             <CreateAlbum
               imageList={imageList}

diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
@@ -10,6 +10,7 @@ import FavouriteAction from './FavouriteAction';
 import DeleteAction from './DeleteAction';
 import DeleteAlbumDialog from './DeleteAlbumDialog';
 import EditAlbum from './EditAlbum';
+import UpdateAlbum from './UpdateAlbum';
 
 export {
   Content,
@@ -24,4 +25,5 @@ export {
   DeleteAction,
   DeleteAlbumDialog,
   EditAlbum,
+  UpdateAlbum,
 };
diff --git a/frontend/src/pages/Photo.js b/frontend/src/pages/Photo.js
@@ -20,7 +20,7 @@ import { capEntityName } from '../utils';
 import {
   Loading,
   Error,
-  //PeopleList,
+  PeopleList,
   FavouriteAction,
   DeleteAction,
 } from '../components';
@@ -39,9 +39,13 @@ const GET_MEDIA_ITEM = gql`
       favourite
       deleted
       entities {
-        entityType
-        name
         id
+        name
+        entityType
+        displayMediaItem {
+          imageUrl
+          id
+        }
       }
       mediaMetadata {
         creationTime
@@ -211,12 +215,10 @@ const Photo = () => {
                   {people && people.length > 0 && (
                     <>
                       <div style={{ marginLeft: '60px' }}>
-                        {/*
                         <PeopleList
                           type="people"
-                          data={data.mediaItem?.entities}
+                          data={data?.mediaItem?.entities}
                         />
-                        */}
                       </div>
                     </>
                   )}

diff --git a/frontend/src/pages/Photos.js b/frontend/src/pages/Photos.js
@@ -1,15 +1,14 @@
 import React, { useState, useContext } from 'react';
-import { useRouteMatch } from 'react-router-dom';
+import { useRouteMatch, useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 import { gql, useQuery } from '@apollo/client';
 import { Grid, GridCell } from '@rmwc/grid';
 import { Icon } from '@rmwc/icon';
 import '@rmwc/grid/styles';
-import { Loading, Error } from '../components';
+import { Loading, Error, UpdateAlbum } from '../components';
 import { reducePhotos, sortPhotos } from '../utils';
-import UpdateAlbum from '../components/header/UpdateAlbum';
 import { AlbumsContext } from '../App';
 
 const GET_MEDIA_ITEMS = gql`
@@ -79,6 +78,7 @@ const Photos = () => {
   const { loading, error, data } = useQuery(GET_MEDIA_ITEMS, {
     fetchPolicy: 'no-cache',
   });
+  const params = useParams();
   let match = useRouteMatch('/album/:id/add');
 
   const { createAlbum, addPhotos } = useContext(AlbumsContext);
@@ -121,6 +121,7 @@ const Photos = () => {
                     <UpdateAlbum
                       addImageList={addImageList}
                       disabled={addImageList.length === 0}
+                      albumId={params.id}
                     />
                   </GridCell>
                 </Grid>

diff --git a/frontend/src/pages/explore/People.js b/frontend/src/pages/explore/People.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { Grid, GridCell } from '@rmwc/grid';
 import { gql, useQuery } from '@apollo/client';
 import { Loading, Error, ExploreEntity } from '../../components';
@@ -19,8 +20,8 @@ const GET_PEOPLE = gql`
 `;
 
 const People = () => {
-  const url = window.location.pathname;
-  const type = url.split('/').pop();
+  const location = useLocation();
+  const type = location.pathname.split('/').pop();
 
   const { error: peopleError, data: peopleData } = useQuery(GET_PEOPLE, {
     variables: { entityType: 'people' },

diff --git a/frontend/src/pages/explore/Places.js b/frontend/src/pages/explore/Places.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { Grid, GridCell } from '@rmwc/grid';
 import { gql, useQuery } from '@apollo/client';
 import { Loading, Error, ExploreEntity } from '../../components';
@@ -19,8 +20,8 @@ const GET_PLACES = gql`
 `;
 
 const Places = () => {
-  const url = window.location.pathname;
-  const type = url.split('/').pop();
+  const location = useLocation();
+  const type = location.pathname.split('/').pop();
 
   const { error: placesError, data: placesData } = useQuery(GET_PLACES, {
     variables: { entityType: 'places' },

diff --git a/frontend/src/pages/explore/Things.js b/frontend/src/pages/explore/Things.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { Grid, GridCell } from '@rmwc/grid';
 import { gql, useQuery } from '@apollo/client';
 import { Loading, Error, ExploreEntity } from '../../components';
@@ -19,8 +20,8 @@ const GET_THINGS = gql`
 `;
 
 const Things = () => {
-  const url = window.location.pathname;
-  const type = url.split('/').pop();
+  const location = useLocation();
+  const type = location.pathname.split('/').pop();
   const { error: thingsError, data: thingsData } = useQuery(GET_THINGS, {
     variables: { entityType: 'things' },
     fetchPolicy: 'no-cache',