Migrated to apollo data

Author: isdenmois

.graphqlconfig

@@ -0,0 +1,3 @@
+{
+  "schemaPath": "dev-tools/schema.graphql"
+}

dev-tools/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql'
+  const Schema: DocumentNode
+
+  export = Schema
+}

dev-tools/schema.graphql

@@ -0,0 +1,41 @@
+type Query {
+  books(where: String!, order: String, limit: Int, offset: Int): BookResult!
+  book(id: String!): Book
+}
+
+type Mutation {
+  changeStatus(id: ID!, status: Int!): Book!
+  deleteBook(id: ID!, status: Int): Book!
+}
+
+type Book {
+  id: ID!
+  title: String
+  author: String
+  status: Int
+  progress: String
+  size: Int
+  LastAccess: Float
+  LastModified: Float
+  location: String
+  startRead: Int
+  endRead: Int
+  readTime: Int
+  lastRead: String
+  thumbnail: String
+  history: [BookHistory]
+}
+
+type BookHistory {
+  date: String!
+  pages: Int!
+  percent: Int
+  progress: String
+  speed: Int
+  time: Int!
+}
+
+type BookResult {
+  total: Int!
+  items: [Book]
+}

dev-tools/webpack/webpack.config.dev.js

@@ -23,7 +23,7 @@ exports.output = {
 }
 
 exports.resolve = {
-  extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx'],
   modules: ['src', 'node_modules'],
 }
 
@@ -34,6 +34,10 @@ exports.module = {
       use: 'babel-loader',
       exclude: /node_modules/,
     },
+    {
+      test: /\.graphql$/i,
+      use: 'raw-loader',
+    },
     {
       test: /\.(png|woff|woff2|eot|ttf)$/,
       loader: 'url-loader',

dev-tools/webpack/webpack.config.prod.js

@@ -24,7 +24,7 @@ const conf = {
     filename: '[name].js',
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx'],
     modules: ['src', 'node_modules'],
     alias: {
       react: 'preact/compat',
@@ -38,6 +38,10 @@ const conf = {
         use: [strip.loader('debug'), 'babel-loader'],
         exclude: /node_modules/,
       },
+      {
+        test: /\.graphql$/i,
+        use: 'raw-loader',
+      },
       {
         test: /\.(png|woff|woff2|eot|ttf)$/,
         loader: 'url-loader',

dev-tools/webpack/webpack.config.test.js

@@ -30,7 +30,7 @@ exports.output = {
 }
 
 exports.resolve = {
-  extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx'],
   modules: ['src', 'node_modules'],
 }
 
@@ -41,6 +41,10 @@ exports.module = {
       use: [strip.loader('debug'), 'babel-loader'],
       exclude: /node_modules/,
     },
+    {
+      test: /\.graphql$/i,
+      use: 'raw-loader',
+    },
     {
       test: /\.(png|woff|woff2|eot|ttf)$/,
       loader: 'url-loader',

package.json

@@ -22,6 +22,12 @@
     "test:open": "cypress open"
   },
   "dependencies": {
+    "@apollo/react-hooks": "~3.1.3",
+    "apollo-cache-inmemory": "~1.6.5",
+    "apollo-client": "~2.6.8",
+    "apollo-link-schema": "~1.2.4",
+    "graphql": "^14.6.0",
+    "graphql-tools": "~4.0.7",
     "hoist-non-react-statics": "~3.3.2",
     "jszip": "~3.2.2",
     "preact": "~10.3.4",
@@ -60,6 +66,7 @@
     "enzyme": "~3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "file-loader": "~6.0.0",
+    "graphql-tag": "^2.10.3",
     "html-webpack-plugin": "~3.2.0",
     "husky": "^4.2.3",
     "identity-obj-proxy": "~3.0.0",
@@ -73,6 +80,7 @@
     "postcss-modules-values": "~3.0.0",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
+    "raw-loader": "^4.0.0",
     "react-addons-test-utils": "~15.6.2",
     "react-test-renderer": "~16.13.1",
     "rimraf": "~3.0.2",

src/components/list-tab.tsx

@@ -45,9 +45,9 @@ export default class ListTab extends React.Component<Props> {
   }
 
   private renderRow(book: Book) {
-    const { MD5, title, author } = book
+    const { id, title, author } = book
     let thumbnail = book.thumbnail ? `/thumbnail/${book.thumbnail}` : null
 
-    return <ListItem thumbnail={thumbnail} center={title} subtitle={author} to={`/book/${MD5}`} key={MD5} />
+    return <ListItem thumbnail={thumbnail} center={title} subtitle={author} to={`/book/${id}`} key={id} />
   }
 }

src/components/rsql.tsx

@@ -8,9 +8,9 @@
 
 .spinner {
   margin-top: 14px;
-  margin-bottom: 13px;
   text-align: center;
   width: 100%;
+  height: 70px;
 }
 
 @media (min-width: 960px) {

src/components/style/list-tab.css

@@ -1,15 +1,20 @@
 import * as React from 'react'
+import { ApolloProvider } from '@apollo/react-hooks'
+
+import { client } from 'services/graphql'
 
 import { Confirm } from 'components/confirm'
 import { FileUploader } from 'components/uploader'
 const s = require('theme/global.css')
 
 export default function App({ children }) {
   return (
-    <div className={s.ios}>
-      <Confirm>
-        <FileUploader>{children}</FileUploader>
-      </Confirm>
-    </div>
+    <ApolloProvider client={client}>
+      <div className={s.ios}>
+        <Confirm>
+          <FileUploader>{children}</FileUploader>
+        </Confirm>
+      </div>
+    </ApolloProvider>
   )
 }

src/containers/App.tsx

@@ -1,8 +1,7 @@
 export interface Book {
-  MD5: string
+  id: string
   title: string
   author: string
-  lastRead: string
   status: number
   progress: string
   size: number
@@ -13,6 +12,8 @@ export interface Book {
   endRead: number
   readTime: number
   thumbnail: string
+  lastRead: string
+  history: BookHistory[]
 }
 
 export interface BookHistory {