examples: web analytics refactor graphql

cube-js · Mar 24, 2020 · 29b7641 · 29b7641
1 parent a48e6d6
commit 29b7641
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 65 deletions.
diff --git a/examples/web-analytics/dashboard-app/src/graphql/client.js b/examples/web-analytics/dashboard-app/src/graphql/client.js
@@ -5,88 +5,85 @@ import { SchemaLink } from 'apollo-link-schema';
 import { makeExecutableSchema } from 'graphql-tools';
 
 const cache = new InMemoryCache();
-const defaultDashboardItems = [];
 
-const getDashboardItems = () => JSON.parse(window.localStorage.getItem("dashboardItems"))
-  || defaultDashboardItems;
-
-const setDashboardItems = items => window.localStorage.setItem("dashboardItems", JSON.stringify(items));
+const getCustomReports = () => JSON.parse(window.localStorage.getItem("customReports")) || [];
+const setCustomReports = items => window.localStorage.setItem("customReports", JSON.stringify(items));
 
 const nextId = () => {
-  const currentId = parseInt(window.localStorage.getItem("dashboardIdCounter"), 10) || 1;
-  window.localStorage.setItem("dashboardIdCounter", currentId + 1);
+  const currentId = parseInt(window.localStorage.getItem("customReportCounter"), 10) || 1;
+  window.localStorage.setItem("customReportCounter", currentId + 1);
   return currentId.toString();
 };
 
 const toApolloItem = i => ({
   ...i,
-  __typename: "DashboardItem"
+  __typename: "CustomReport"
 });
 
 const typeDefs = `
-  type DashboardItem {
+  type CustomReport {
     id: String!
     query: String
     name: String
     createdAt: String
   }
 
-  input DashboardItemInput {
+  input CustomReportInput {
     query: String
     name: String
   }
 
   type Query {
-    dashboardItems: [DashboardItem]
-    dashboardItem(id: String!): DashboardItem
+    customReports: [CustomReport]
+    customReport(id: String!): CustomReport
   }
 
   type Mutation {
-    createDashboardItem(input: DashboardItemInput): DashboardItem
-    updateDashboardItem(id: String!, input: DashboardItemInput): DashboardItem
-    deleteDashboardItem(id: String!): DashboardItem
+    createCustomReport(input: CustomReportInput): CustomReport
+    updateCustomReport(id: String!, input: CustomReportInput): CustomReport
+    deleteCustomReport(id: String!): CustomReport
   }
 `;
 
 const schema = makeExecutableSchema({
   typeDefs,
   resolvers: {
     Query: {
-      dashboardItems() {
-        const dashboardItems = getDashboardItems();
-        return dashboardItems.map(toApolloItem);
+      customReports() {
+        const customReports = getCustomReports();
+        return customReports.map(toApolloItem);
       },
-      dashboardItem(_, { id }) {
-        const dashboardItems = getDashboardItems();
-        return toApolloItem(dashboardItems.find(i => i.id.toString() === id));
+      customReport(_, { id }) {
+        const customReports = getCustomReports();
+        return toApolloItem(customReports.find(i => i.id.toString() === id));
       }
     },
     Mutation: {
-      createDashboardItem: (_, { input: { ...item } }) => {
-        const dashboardItems = getDashboardItems();
+      createCustomReport: (_, { input: { ...item } }) => {
+        const customReports = getCustomReports();
         item = { ...item, id: nextId(), createdAt: new Date(), layout: JSON.stringify({}) };
-        dashboardItems.push(item);
-        setDashboardItems(dashboardItems);
+        customReports.push(item);
+        setCustomReports(customReports);
         return toApolloItem(item);
       },
-      updateDashboardItem: (_, { id, input: { ...item } }) => {
-        const dashboardItems = getDashboardItems();
+      updateCustomReport: (_, { id, input: { ...item } }) => {
+        const customReports = getCustomReports();
         item = Object.keys(item)
           .filter(k => !!item[k])
           .map(k => ({
             [k]: item[k]
           }))
           .reduce((a, b) => ({ ...a, ...b }), {});
-        const index = dashboardItems.findIndex(i => i.id.toString() === id);
-        dashboardItems[index] = { ...dashboardItems[index], ...item };
-        setDashboardItems(dashboardItems);
-        return toApolloItem(dashboardItems[index]);
+        const index = customReports.findIndex(i => i.id.toString() === id);
+        customReports[index] = { ...customReports[index], ...item };
+        setCustomReports(customReports);
+        return toApolloItem(customReports[index]);
       },
-      deleteDashboardItem: (_, { id }) => {
-        const dashboardItems = getDashboardItems();
-        const index = dashboardItems.findIndex(i => i.id.toString() === id);
-        const [removedItem] = dashboardItems.splice(index, 1);
-        setDashboardItems(dashboardItems);
+      deleteCustomReport: (_, { id }) => {
+        const customReports = getCustomReports();
+        const index = customReports.findIndex(i => i.id.toString() === id);
+        const [removedItem] = customReports.splice(index, 1);
+        setCustomReports(customReports);
         return toApolloItem(removedItem);
       }
     }

diff --git a/examples/web-analytics/dashboard-app/src/graphql/mutations.js b/examples/web-analytics/dashboard-app/src/graphql/mutations.js
@@ -1,18 +1,18 @@
 import gql from "graphql-tag";
 
-export const CREATE_DASHBOARD_ITEM = gql`
-  mutation CreateDashboardItem($input: DashboardItemInput) {
-    createDashboardItem(input: $input) {
+export const CREATE_CUSTOM_REPORT = gql`
+  mutation createCustomReport($input: CustomReportInput) {
+    createCustomReport(input: $input) {
       id
       query
       name
     }
   }
 `;
 
-export const UPDATE_DASHBOARD_ITEM = gql`
-  mutation UpdateDashboardItem($id: String!, $input: DashboardItemInput) {
-    updateDashboardItem(id: $id, input: $input) {
+export const UPDATE_CUSTOM_REPORT = gql`
+  mutation UpdateCustomReport($id: String!, $input: CustomReportInput) {
+    updateCustomReport(id: $id, input: $input) {
       id
       query
       name
@@ -21,8 +21,8 @@ export const UPDATE_DASHBOARD_ITEM = gql`
 `;
 
 export const DELETE_CUSTOM_REPORT = gql`
-  mutation DeleteDashboardItem($id: String!) {
-    deleteDashboardItem(id: $id) {
+  mutation DeleteCustomReport($id: String!) {
+    deleteCustomReport(id: $id) {
       id
       query
       name

diff --git a/examples/web-analytics/dashboard-app/src/graphql/queries.js b/examples/web-analytics/dashboard-app/src/graphql/queries.js
@@ -1,8 +1,8 @@
 import gql from "graphql-tag";
 
-export const GET_DASHBOARD_ITEMS = gql`
-  query GetDashboardItems {
-    dashboardItems {
+export const GET_CUSTOM_REPORTS = gql`
+  query GetCustomReports {
+    customReports {
       id
       query
       name
@@ -12,8 +12,8 @@ export const GET_DASHBOARD_ITEMS = gql`
 `;
 
 export const GET_CUSTOM_REPORT = gql`
-  query GetDashboardItem($id: String!) {
-    dashboardItem(id: $id) {
+  query GetCustomReport($id: String!) {
+    customReport(id: $id) {
       id
       query
       name

diff --git a/examples/web-analytics/dashboard-app/src/pages/CustomReportPage.js b/examples/web-analytics/dashboard-app/src/pages/CustomReportPage.js
@@ -19,7 +19,7 @@ const CustomReportPage = ({ withTime }) => {
     return "Loading";
   }
 
-  const query = JSON.parse(data.dashboardItem.query);
+  const query = JSON.parse(data.customReport.query);
   const overTimeChartQuery = {
     measures: [query.measures[0]],
     timeDimensions: [{

diff --git a/examples/web-analytics/dashboard-app/src/pages/CustomReportsBuilderPage.js b/examples/web-analytics/dashboard-app/src/pages/CustomReportsBuilderPage.js
@@ -14,10 +14,10 @@ import * as Yup from "yup";
 import { Formik } from "formik";
 
 import MemberSelect from "../components/MemberSelect";
-import { GET_DASHBOARD_ITEMS, GET_CUSTOM_REPORT } from "../graphql/queries";
+import { GET_CUSTOM_REPORTS, GET_CUSTOM_REPORT } from "../graphql/queries";
 import {
-  CREATE_DASHBOARD_ITEM,
-  UPDATE_DASHBOARD_ITEM
+  CREATE_CUSTOM_REPORT,
+  UPDATE_CUSTOM_REPORT
 } from "../graphql/mutations";
 
 
@@ -37,17 +37,17 @@ const useStyles = makeStyles(theme => ({
 
 const CustomReportsBuilderPage = ({ cubejsApi, history }) => {
   const { id } = useParams();
-  const [addDashboardItem] = useMutation(CREATE_DASHBOARD_ITEM, {
+  const [addCustomReport] = useMutation(CREATE_CUSTOM_REPORT, {
     refetchQueries: [
       {
-        query: GET_DASHBOARD_ITEMS
+        query: GET_CUSTOM_REPORTS
       }
     ]
   });
-  const [updateDashboardItem] = useMutation(UPDATE_DASHBOARD_ITEM, {
+  const [updateCustomReport] = useMutation(UPDATE_CUSTOM_REPORT, {
     refetchQueries: [
       {
-        query: GET_DASHBOARD_ITEMS
+        query: GET_CUSTOM_REPORTS
       }
     ]
   });
@@ -70,7 +70,7 @@ const CustomReportsBuilderPage = ({ cubejsApi, history }) => {
         Create Custom Report
        </Typography>
         <QueryBuilder
-          query={(data && data.dashboardItem.query && JSON.parse(data.dashboardItem.query)) || {}}
+          query={(data && data.customReport.query && JSON.parse(data.customReport.query)) || {}}
           wrapWithQueryRenderer={false}
           cubejsApi={cubejsApi}
           render={({
@@ -80,9 +80,9 @@ const CustomReportsBuilderPage = ({ cubejsApi, history }) => {
           }) => (
              <Formik
               enableReinitialize
-              initialValues={{ title: title || (data && data.dashboardItem.name) || "", query: query }}
+              initialValues={{ title: title || (data && data.customReport.name) || "", query: query }}
               onSubmit={async values => {
-                const { data } = await (id ? updateDashboardItem : addDashboardItem)({
+                const { data } = await (id ? updateCustomReport : addCustomReport)({
                   variables: {
                     id: id,
                     input: {
@@ -91,7 +91,7 @@ const CustomReportsBuilderPage = ({ cubejsApi, history }) => {
                     }
                   }
                 });
-                history.push(`/custom-reports/${id || data.createDashboardItem.id}`);
+                history.push(`/custom-reports/${id || data.createCustomReport.id}`);
               }}
               validationSchema={Yup.object().shape({
                 title: Yup.string().required("Required"),

diff --git a/examples/web-analytics/dashboard-app/src/pages/CustomReportsOverviewPage.js b/examples/web-analytics/dashboard-app/src/pages/CustomReportsOverviewPage.js
@@ -12,7 +12,7 @@ import moment from "moment";
 
 import { Link } from "react-router-dom";
 import { useQuery, useMutation } from "@apollo/react-hooks";
-import { GET_DASHBOARD_ITEMS } from "../graphql/queries";
+import { GET_CUSTOM_REPORTS } from "../graphql/queries";
 import { DELETE_CUSTOM_REPORT } from "../graphql/mutations";
 
 import DotsMenu from "../components/DotsMenu";
@@ -21,11 +21,11 @@ const CustomReportsOverviewPage = ({ history }) => {
   const [removeCustomReport] = useMutation(DELETE_CUSTOM_REPORT, {
     refetchQueries: [
       {
-        query: GET_DASHBOARD_ITEMS
+        query: GET_CUSTOM_REPORTS
       }
     ]
   });
-  const { loading, error, data } = useQuery(GET_DASHBOARD_ITEMS);
+  const { loading, error, data } = useQuery(GET_CUSTOM_REPORTS);
   return (
     <Grid container spacing={3} justify="space-between">
       <Grid item>
@@ -49,7 +49,7 @@ const CustomReportsOverviewPage = ({ history }) => {
               </TableRow>
             </TableHead>
             <TableBody>
-              { data && data.dashboardItems && data.dashboardItems.map(report => (
+              { data && data.customReports && data.customReports.map(report => (
                 <TableRow>
                   <TableCell key="title" component="th" scope="row">
                     <Link to={`/custom-reports/${report.id}`}>