dialogbox on delete++

packages/admin-frontend/pages/_app.js

@@ -50,9 +50,10 @@ class App extends NextApp {
       pageProps = await Component.getInitialProps(ctx);
     }
 
-    const userHasAuthToken = true; // hasAuthToken(ctx.req);
+    const userHasAuthToken = hasAuthToken(ctx.req); //true
 
-    const userHasAdminPrivileges = true; //hasClaim(claims.readAdmin, ctx.req);
+    const userHasAdminPrivileges = hasClaim(claims.readAdmin, ctx.req); //true
+    console.log(hasAuthToken(ctx.req), hasClaim(claims.readAdmin, ctx.req));
 
     // If we have response object, set a proper HTTP status code
     if (!userHasAdminPrivileges && ctx.res) {

packages/admin-frontend/pages/admin/featured.js

@@ -10,43 +10,44 @@ import * as React from 'react';
 import {
   Select,
   Button,
-  FormHelperText,
   InputLabel,
   FormControl,
-  TextField,
   Typography,
   Card,
   CardContent,
   CardMedia,
-  CardActions
+  CardActions,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle
 } from '@material-ui/core';
-import { Form, Field, FormSpy } from 'react-final-form';
 import {
   fetchLanguages,
   fetchFeaturedContent,
   updateFeaturedContent,
   saveFeaturedContent,
   deleteFeaturedContent
 } from '../../lib/fetch';
-import UploadFileDialog from '../../components/UploadFileDialog';
-import FeaturedImage from '../../components/FeaturedImage';
 import Layout from '../../components/Layout';
-import Row from '../../components/Row';
 import Container from '../../components/Container';
-import isEmptyString from '../../lib/isEmptyString';
 import type { FeaturedContent, Language } from '../../types';
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import FeaturedEdit from './featuredEdit';
 import FeatureAdd from './featuredAdd';
+
 type Props = {
   languages: Array<Language>
 };
 
 type State = {
   featuredContentList: Array<FeaturedContent>,
   selectedLanguage: string,
-  file: ?File
+  file: ?File,
+  openDeleteDialog: boolean,
+  placementOfSelectedContent: number,
+  selectedContent: null | FeaturedContent
 };
 
 export default class EditFeaturedContent extends React.Component<Props, State> {
@@ -62,14 +63,17 @@ export default class EditFeaturedContent extends React.Component<Props, State> {
     selectedLanguage: '',
     croppedParameters: null,
     file: null,
-    featuredContentList: []
+    featuredContentList: [],
+    openDeleteDialog: false,
+    selectedContent: null,
+    placementOfSelectedContent: 0
   };
 
   getFeaturedContent = async (languageCode: string) => {
     const featuredContentRes = await fetchFeaturedContent(languageCode);
     const featContList = [];
     let i = 0;
-    while (true) {
+    while (featuredContentRes.isOk) {
       if (featuredContentRes.data[i]) {
         featContList.push(featuredContentRes.data[i]);
       } else {
@@ -133,18 +137,33 @@ export default class EditFeaturedContent extends React.Component<Props, State> {
     this.getFeaturedContent(event.target.value);
   };
 
-  deleteFeaturedContent = async (id: string) => {
+  deleteFeaturedContent = async (id: number) => {
     await deleteFeaturedContent(id);
   };
+  handleCloseDeleteDialog = () => {
+    this.setState({
+      openDeleteDialog: false,
+      selectedContent: null
+    });
+  };
 
-  handleDelete = (id: string, index: number) => {
+  handleOpenDeleteDialog = (content: FeaturedContent, i: number) => {
+    this.setState({
+      openDeleteDialog: true,
+      selectedContent: content,
+      placementOfSelectedContent: i
+    });
+  };
+  handleDelete = (id: number, index: number) => {
     this.deleteFeaturedContent(this.state.featuredContentList[index].id);
     this.setState(state => {
       const featuredContentList = this.state.featuredContentList.filter(
         item => item.id !== id
       );
       return {
-        featuredContentList
+        featuredContentList,
+        openDeleteDialog: false,
+        selectedContent: null
       };
     });
   };
@@ -166,9 +185,6 @@ export default class EditFeaturedContent extends React.Component<Props, State> {
       file: event.target.files[0]
     });
   };
-  addFeatureContent = () => {
-    console.log('ADDING');
-  };
   handleSaveButtonClick = (
     defaultReturned: boolean,
     content: FeaturedContent
@@ -198,6 +214,42 @@ export default class EditFeaturedContent extends React.Component<Props, State> {
     this.postNewFeaturedContent(content);
   };
 
+  getDialog = () => {
+    if (this.state.selectedContent) {
+      const contentId = this.state.selectedContent.id;
+      return (
+        <Dialog
+          open={this.state.openDeleteDialog}
+          onClose={this.handleCloseDeleteDialog}
+          style={{ backgroundColor: 'rbga(0,0,0,0)' }}
+        >
+          <DialogContent>
+            <DialogTitle>
+              Do you want to delete {this.state.selectedContent.title} form
+              featured content?
+            </DialogTitle>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              color="secondary"
+              onClick={() =>
+                this.handleDelete(
+                  contentId,
+                  this.state.placementOfSelectedContent
+                )
+              }
+            >
+              Delete
+            </Button>
+            <Button color="primary" onClick={this.handleCloseDeleteDialog}>
+              Cancel
+            </Button>
+          </DialogActions>
+        </Dialog>
+      );
+    }
+  };
+
   render() {
     const { selectedLanguage, featuredContentList } = this.state;
 
@@ -261,24 +313,24 @@ export default class EditFeaturedContent extends React.Component<Props, State> {
           >
             {featuredContentList.map((content, i) => {
               return (
-                <Card style={{ width: 296, height: 450 }} key={content.id}>
+                <Card
+                  style={{ width: 296, height: 450, position: 'relative' }}
+                  key={content.id}
+                >
                   <CardMedia
                     style={{ height: 150 }}
                     image={content.imageUrl}
                     title={content.title}
                   />
-
                   <CardContent>
                     <h4>{content.title}</h4>
                     <p>{content.description}</p>
                   </CardContent>
-                  <CardActions>
+                  <CardActions
+                    style={{ position: 'absolute', bottom: 0, left: 0 }}
+                  >
                     <FeaturedEdit
-                      button={
-                        <Button size="small" color="primary">
-                          Edit
-                        </Button>
-                      }
+                      button={<Button color="primary">Edit</Button>}
                       featuredContentList={featuredContentList}
                       selectedLanguage={selectedLanguage}
                       i={i}
@@ -291,8 +343,8 @@ export default class EditFeaturedContent extends React.Component<Props, State> {
                     />
 
                     <Button
-                      color="secondary"
-                      onClick={() => this.handleDelete(content.id, i)}
+                      color="primary"
+                      onClick={() => this.handleOpenDeleteDialog(content, i)}
                     >
                       Delete
                     </Button>
@@ -308,35 +360,14 @@ export default class EditFeaturedContent extends React.Component<Props, State> {
                   this.handleOnCancel,
                   this.state.file,
                   this.handleOnUpload,
-                  this.state.featuredContentList
+                  this.state.featuredContentList,
+                  this.state.selectedLanguage
                 )
               : null}
           </div>
+          {this.getDialog()}
         </Container>
       </Layout>
     );
   }
 }
-function handleValidate(values) {
-  const errors = {};
-
-  if (isEmptyString(values.title)) {
-    errors.title = 'Required';
-  }
-
-  if (isEmptyString(values.description)) {
-    errors.description = 'Required';
-  }
-
-  const regex = /http(s)?:\/\/.*/;
-  if (isEmptyString(values.link) || !values.link.match(regex)) {
-    errors.link = 'Must be a valid URL e.g "https://digitallibrary.io"';
-  }
-
-  if (isEmptyString(values.imageUrl) || !values.imageUrl.match(regex)) {
-    errors.imageUrl =
-      'Must be a valid URL image url e.g "https://images.digitallibrary.io/imageId.png';
-  }
-
-  return errors;
-}

packages/admin-frontend/pages/admin/featuredAdd.js

@@ -1,7 +1,9 @@
-import React from 'react';
+//@flow
 import { Card } from '@material-ui/core';
 import { Add } from '@material-ui/icons';
 import FeaturedEdit from './featuredEdit';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
 
 export default function FeatureAdd(
   defaultReturned: boolean,
@@ -10,13 +12,21 @@ export default function FeatureAdd(
   handleOnCancel: any,
   file: any,
   handleOnUpload: any,
-  featuredContentList: Array<any>
+  featuredContentList: Array<any>,
+  selectedLanguage: string
 ) {
   return (
     <FeaturedEdit
       button={
         <Card
-          style={{ width: 296, height: 450, display: 'table' }}
+          css={css`
+            width: 296px;
+            height: 450px;
+            display: table;
+            :hover {
+              background-color: #aeb6e3;
+            }
+          `}
           key="addFeaturedCard"
         >
           <div
@@ -49,6 +59,7 @@ export default function FeatureAdd(
       handleOnCancel={handleOnCancel}
       file={file}
       handleOnUpload={handleOnUpload}
+      selectedLanguage={selectedLanguage}
     />
   );
 }

packages/admin-frontend/pages/admin/featuredEdit.js

@@ -7,13 +7,6 @@ import UploadFileDialog from '../../components/UploadFileDialog';
 import Row from '../../components/Row';
 import FeaturedImage from '../../components/FeaturedImage';
 import type { FeaturedContent } from '../../types';
-import {
-  fetchLanguages,
-  fetchFeaturedContent,
-  updateFeaturedContent,
-  saveFeaturedContent,
-  deleteFeaturedContent
-} from '../../lib/fetch';
 
 type Props = {
   i: number,
@@ -215,14 +208,18 @@ export default class FeaturedEdit extends React.Component<Props, State> {
                       type="submit"
                       onClick={handleSubmit}
                     >
-                      Save changes
+                      {this.props.featuredContentList.length > this.props.i
+                        ? 'Save changes'
+                        : 'Save'}
                     </Button>
                     <Button
                       color="secondary"
                       disabled={pristine}
                       onClick={form.reset}
                     >
-                      Discard changes
+                      {this.props.featuredContentList.length > this.props.i
+                        ? 'Discard changes'
+                        : 'Discard'}
                     </Button>
                   </form>
                 )}