Issue#602 v2 for graphql and mediaservice

package.json

@@ -40,9 +40,9 @@
     "copy-webpack-plugin": "4.5.4",
     "cross-env": "^5.0.1",
     "cypress": "^3.1.5",
-    "enzyme": "3.7.0",
-    "enzyme-adapter-react-16": "1.7.0",
-    "enzyme-to-json": "^3.3.4",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
+    "enzyme-to-json": "3.4.0",
     "eslint": "^5.16.0",
     "eslint-config-react-app": "3.0.5",
     "eslint-plugin-chai-friendly": "^0.4.1",
@@ -73,7 +73,7 @@
     "@lingui/cli": "2.7.2",
     "@lingui/react": "2.7.2",
     "@material-ui/core": "3.6.1",
-    "@material-ui/icons": "3.0.1",
+    "@material-ui/icons": "4.4.1",
     "@sentry/browser": "4.4.2",
     "@sentry/node": "4.4.2",
     "@zeit/next-css": "1.0.1",
@@ -113,6 +113,7 @@
     "lscache": "1.2.0",
     "micro-proxy": "1.1.0",
     "next": "^8.1.0",
+    "next-images": "^1.1.2",
     "next-routes": "1.4.2",
     "next-transpile-modules": "^2.3.1",
     "polished": "3.0.3",
@@ -129,6 +130,7 @@
     "react-joyride": "2.0.5",
     "react-jss": "8.6.1",
     "react-swipeable": "^4.3.0",
+    "react-swipeable-views": "^0.13.3",
     "universal-cookie": "3.0.4",
     "workbox-webpack-plugin": "3.6.3"
   },

packages/admin-frontend/package.json

@@ -12,7 +12,7 @@
     "@emotion/core": "^10.0.14",
     "@emotion/styled": "^10.0.14",
     "@material-ui/core": "3.6.1",
-    "@material-ui/icons": "3.0.1",
+    "@material-ui/icons": "4.4.1",
     "cookie-parser": "^1.4.3",
     "downshift": "2.0.10",
     "express": "4.16.4",
@@ -32,4 +32,4 @@
   "devDependencies": {
     "@zeit/next-css": "1.0.1"
   }
-}
+}

packages/gdl-frontend/components/BookListSection/PaginationArrowView.js

@@ -16,6 +16,7 @@ import colorMap from '../../style/colorMapping';
 import GameLink from './GameLink';
 import BookLink from './BookLink';
 import PaginationScrollGrid from './PaginationScrollGrid';
+import { AMOUNT_OF_ITEMS_PER_LEVEL } from '../HomePage';
 
 import type { Book } from './BookLink';
 import type {
@@ -72,7 +73,10 @@ const PaginationArrowView = ({
 
       <PaginationScrollGrid>
         {items
-          .slice((currentIndex - 1) * 5, currentIndex * 5)
+          .slice(
+            (currentIndex - 1) * AMOUNT_OF_ITEMS_PER_LEVEL,
+            currentIndex * AMOUNT_OF_ITEMS_PER_LEVEL
+          )
           .map((item: any) => (
             <div className={itemStyle} key={item.id}>
               {level === 'Games' ? (

packages/gdl-frontend/components/EditBookLibrary/BookGrid.js

@@ -0,0 +1,34 @@
+// @flow
+
+import * as React from 'react';
+import GridContainer from '../BookGrid/styledGridContainer';
+import BookLink, { type Book } from './BookSelectionLink';
+
+type Props = {
+  books: $ReadOnlyArray<Book>,
+  selectedBooks: Array<string>,
+  changeActive: () => void,
+  selectAll: boolean
+};
+
+class BookGrid extends React.Component<Props> {
+  render() {
+    const { books, selectedBooks } = this.props;
+
+    return (
+      <GridContainer>
+        {books.map(book => (
+          <BookLink
+            key={book.id}
+            book={book}
+            selectedBooks={selectedBooks}
+            changeActive={this.props.changeActive}
+            selectAll={this.props.selectAll}
+          />
+        ))}
+      </GridContainer>
+    );
+  }
+}
+
+export default BookGrid;

packages/gdl-frontend/components/EditBookLibrary/BookSelectionLink.js

@@ -0,0 +1,127 @@
+// @flow
+
+import * as React from 'react';
+import { CardContent, Typography } from '@material-ui/core';
+import { CheckCircle } from '@material-ui/icons';
+import styled from '@emotion/styled';
+
+import CoverImage from '../CoverImage';
+import media from '../../style/media';
+import { coverWidths } from '../BookListSection/coverWidths';
+
+export type Book = $ReadOnly<{
+  id: string,
+  bookId: number,
+  title: string,
+  language: {
+    code: string
+  },
+  coverImage: ?{ url: string }
+}>;
+
+type Props = {
+  book: Book,
+  selectedBooks: Array<string>,
+  changeActive: () => void,
+  selectAll: boolean
+};
+
+type State = {
+  active: boolean
+};
+
+export default class BookLink extends React.Component<Props, State> {
+  state = {
+    active: false
+  };
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.selectedBooks !== this.props.selectedBooks) {
+      this.props.selectAll
+        ? this.setState({ active: true })
+        : this.setState({ active: false });
+    }
+  }
+
+  handleClick(id: string, selectedBooks: Array<string>) {
+    if (!selectedBooks.some(item => id === item)) {
+      selectedBooks.push(id);
+      this.setState({ active: true });
+    } else {
+      selectedBooks.splice(selectedBooks.indexOf(id), 1);
+      this.setState({ active: false });
+    }
+    this.props.changeActive();
+  }
+
+  render() {
+    const { book, selectedBooks } = this.props;
+    const bookSelected = selectedBooks.some(item => book.id === item);
+    if (this.state.active && !bookSelected) {
+      selectedBooks.push(book.id);
+    } else if (!this.state.active && bookSelected) {
+      selectedBooks.splice(selectedBooks.indexOf(book.id), 1);
+    }
+
+    return (
+      <Card onClick={() => this.handleClick(book.id, selectedBooks)}>
+        <CheckCircle
+          className={this.state.active ? 'isSelected' : 'selectBook'}
+          style={{ position: 'absolute' }}
+        />
+        <CoverImage
+          size="small"
+          className={this.state.active ? 'active' : 'notActive'}
+          coverImage={book.coverImage}
+          noShadow
+        />
+        <CardContent
+          className={this.state.active ? 'active' : 'notActive'}
+          css={{ padding: 10, ':last-child': { paddingBottom: 10 } }}
+        >
+          <Typography
+            lang={book.language.code}
+            title={book.title}
+            noWrap
+            component="a"
+            align="center"
+          >
+            {book.title}
+          </Typography>
+        </CardContent>{' '}
+      </Card>
+    );
+  }
+}
+
+const Card = styled('div')`
+  .selectBook {
+    color: rgb(68, 68, 68);
+  }
+  .isSelected {
+    color: #0277bd;
+  }
+  .active img {
+    transition: all 0.08s ease-in-out;
+    padding: 10px;
+    padding-bottom: 0px;
+  }
+  .active svg {
+    color: #0277bd;
+  }
+  .active {
+    background-color: #d7e2f5;
+  }
+  position: relative;
+  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
+  :hover {
+    .selectBook {
+      color: #8a8b91;
+    }
+  }
+  margin-right: 15px;
+  width: ${coverWidths.small}px;
+  ${media.tablet`
+    width: ${coverWidths.large}px;
+  `};
+`;