Added albums and item count to /albums

docker-compose.yaml

@@ -1,17 +1,17 @@
 version: '3'
 services:
   # applications
-  frontend:
-    build:
-      context: frontend
-      args:
-        REACT_APP_API_URL: http://api:5001/graphql
-    restart: always
-    container_name: frontend
-    ports:
-      - '5000:80'
-    depends_on:
-      - api
+  # frontend:
+  #   build:
+  #     context: frontend
+  #     args:
+  #       REACT_APP_API_URL: http://api:5001/graphql
+  #   restart: always
+  #   container_name: frontend
+  #   ports:
+  #     - '5000:80'
+  #   depends_on:
+  #     - api
   api:
     build: api
     restart: always

frontend/src/App.scss

@@ -158,7 +158,6 @@ p {
 
 .mdc-image-list--with-text-protection .mdc-image-list__supporting {
   background: rgba(0, 0, 0, 0.2) !important;
-  justify-content: center !important;
 }
 
 .mdc-layout-grid {
@@ -186,6 +185,10 @@ p {
   justify-content: center !important;
 }
 
+.album-list-info {
+  justify-content: left !important;
+}
+
 .mdc-image-list__label,
 .mdc-text-field__input {
   font-family: $font;

frontend/src/components/Content.js

@@ -2,7 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Route, Switch } from 'react-router-dom';
 import { DrawerAppContent } from '@rmwc/drawer';
-import { Photo, Photos, Search, Upcoming, Favourites, Trash } from '../pages';
+import {
+  Photo,
+  Photos,
+  Search,
+  Upcoming,
+  Favourites,
+  Trash,
+  Albums,
+  Album,
+} from '../pages';
 import { Explore, People, Places, Things, Entity } from '../pages/explore';
 import SideNav from './SideNav';
 
@@ -23,10 +32,11 @@ const Content = (props) => {
           <Route exact path="/explore/things/:id" component={Entity} />
           <Route exact path="/photo/:id" component={Photo} />
           <Route exact path="/favourites" component={Favourites} />
+          <Route exact path="/albums" component={Albums} />
+          <Route exact path="/album/:id" component={Album} />
           <Route path="/search" component={Search} />
           {/* static */}
           <Route exact path="/sharing" component={Upcoming} />
-          <Route exact path="/albums" component={Upcoming} />
           <Route exact path="/utilities" component={Upcoming} />
           <Route exact path="/archive" component={Upcoming} />
           <Route exact path="/trash" component={Trash} />

frontend/src/components/DeleteAlbumDialog.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { gql, useMutation } from '@apollo/client';
+import { CircularProgress } from '@rmwc/circular-progress';
+import { Dialog, DialogTitle, DialogActions, DialogButton } from '@rmwc/dialog';
+import '@rmwc/dialog/styles';
+
+const DELETE_ALBUM = gql`
+  mutation deleteAlbum($id: String!) {
+    deleteAlbum(id: $id)
+  }
+`;
+
+const DeleteAlbumDialog = ({ open, setOpen, albumName, albumId }) => {
+  const history = useHistory();
+  const [deleteAlbum, { data: delData, loading: delLoading, error: delError }] =
+    useMutation(DELETE_ALBUM);
+
+  const handleDeleteAlbum = (albumId) => {
+    deleteAlbum({
+      variables: { id: albumId },
+    });
+  };
+
+  if (delData && delData.deleteAlbum) {
+    setTimeout(() => {
+      history.push('/albums');
+    }, 2000);
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+    >
+      <DialogTitle>
+        Are you sure you want to delete album &quot;{albumName}&quot;?
+      </DialogTitle>
+      <br />
+      <br />
+      <DialogActions>
+        {delLoading && <CircularProgress size="small" />} &nbsp;&nbsp;
+        {delError && <>Sorry, some error occured!</>} &nbsp;&nbsp;
+        <DialogButton
+          unelevated
+          onClick={() => handleDeleteAlbum(albumId)}
+          style={{ color: '#fff' }}
+        >
+          Delete
+        </DialogButton>
+        &nbsp;&nbsp;
+        <DialogButton outlined action="close">
+          Close
+        </DialogButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+DeleteAlbumDialog.propTypes = {
+  open: PropTypes.bool,
+  setOpen: PropTypes.func,
+  albumId: PropTypes.string,
+  albumName: PropTypes.string,
+};
+
+export default DeleteAlbumDialog;

frontend/src/components/EditAlbum.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { gql, useMutation } from '@apollo/client';
+import PropTypes from 'prop-types';
+import { Icon } from '@rmwc/icon';
+import { Button } from '@rmwc/button';
+import { TextField } from '@rmwc/textfield';
+import { CircularProgress } from '@rmwc/circular-progress';
+
+const UPDATE_ALBUM = gql`
+  mutation updateAlbum($id: String!, $name: String!) {
+    updateAlbum(id: $id, input: { name: $name })
+  }
+`;
+
+const EditAlbum = ({ albumId, albumName }) => {
+  const [
+    updateAlbum,
+    { loading: updateAlbumNameLoading, error: updateAlbumNameyError },
+  ] = useMutation(UPDATE_ALBUM);
+
+  const [showEdit, setShowEdit] = useState(false);
+  const [updatedAlbumName, setupdatedAlbumName] = useState(albumName);
+
+  const handleEditAlbumName = (albumId, updatedAlbumName) => {
+    updateAlbum({ variables: { id: albumId, name: updatedAlbumName } });
+    setShowEdit(false);
+  };
+
+  return (
+    <>
+      {showEdit ? (
+        <>
+          <div className="edit-section">
+            <TextField
+              defaultValue={updatedAlbumName}
+              onChange={(e) => setupdatedAlbumName(e.target.value)}
+              style={{ height: '36px' }}
+            />
+            &nbsp;&nbsp;&nbsp;
+            <Button
+              onClick={() => handleEditAlbumName(albumId, updatedAlbumName)}
+              label="update"
+              unelevated
+              disabled={updatedAlbumName ? false : true}
+              style={{ color: '#fff' }}
+            />
+            &nbsp;&nbsp;&nbsp;
+            <Button
+              onClick={() => setShowEdit(!showEdit)}
+              label="cancel"
+              outlined
+            />
+            &nbsp;&nbsp;&nbsp;
+            {updateAlbumNameLoading && <CircularProgress size="medium" />}
+            {updateAlbumNameyError && (
+              <>Sorry, some error occured while updating name</>
+            )}
+          </div>
+          <br />
+          <br />
+        </>
+      ) : (
+        <>
+          <h2>{updatedAlbumName}</h2>
+          &nbsp;&nbsp;&nbsp;
+          <Icon
+            onClick={() => setShowEdit(!showEdit)}
+            style={{ cursor: 'pointer', color: '#424242' }}
+            icon={{ icon: 'edit', size: 'small' }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+EditAlbum.propTypes = {
+  albumId: PropTypes.string,
+  albumName: PropTypes.string,
+};
+
+export default EditAlbum;

frontend/src/components/index.js

@@ -8,6 +8,8 @@ import ExploreEntity from './explore/ExploreEntity';
 import PeopleList from './PeopleList';
 import FavouriteAction from './FavouriteAction';
 import DeleteAction from './DeleteAction';
+import DeleteAlbumDialog from './DeleteAlbumDialog';
+import EditAlbum from './EditAlbum';
 
 export {
   Content,
@@ -20,4 +22,6 @@ export {
   PeopleList,
   FavouriteAction,
   DeleteAction,
+  DeleteAlbumDialog,
+  EditAlbum,
 };