🚧🍻 WIP GraphQL Query Logic (Conditional. Needs refactor into two prov…

…ider elements)
D1no · Mar 1, 2019 · d2e10ef · d2e10ef
1 parent b7be214
commit d2e10ef
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 42 deletions.
diff --git a/src/containers/home/index.js b/src/containers/home/index.js
@@ -1,7 +1,7 @@
 /**
  * Main page of the app
  */
-import React, { Suspense } from "react";
+import React, { Suspense, useState } from "react";
 import { Box } from "rebass";
 
 import Layout from "components/layout";
@@ -16,40 +16,50 @@ const ContentWrapper = styled(Box)`
   max-width: ${props => props.theme.maxWidth};
 `;
 
-const Home = props => (
-  <ContentWrapper mx="auto" p={[0]}>
-    <Layout
-      debug={false}
-      sectionHeader={<Header />}
-      sectionTopControl={<HeadSelect />}
-    >
-      <Suspense fallback={<h4>Loading...</h4>}>
-        <ProductStats
-          onError={error => <h4>{error.message}</h4>}
-          onNoResult={data => <h4>No Result!</h4>}
-        >
-          {({ products }) =>
-            products.map(
-              ({ id, base_currency, quote_currency, display_name, stats }) => (
-                <CardItem
-                  displayName={display_name}
-                  baseCurrency={base_currency}
-                  quoteCurrency={quote_currency}
-                  last={stats.last}
-                  highLow={stats.high - stats.low}
-                  volume={stats.volume}
-                  volume30Day={stats.volume_30day}
-                  high={stats.high}
-                  low={stats.low}
-                  key={id}
-                />
+function Home(props) {
+  const [baseCurrency, setBaseCurrency] = useState("EUR");
+
+  return (
+    <ContentWrapper mx="auto" p={[0]}>
+      <Layout
+        debug={false}
+        sectionHeader={<Header />}
+        sectionTopControl={<HeadSelect />}
+      >
+        <Suspense fallback={<h4>Loading...</h4>}>
+          <ProductStats
+            onError={error => <h4>{error.message}</h4>}
+            onNoResult={data => <h4>No Result!</h4>}
+          >
+            {({ products }) =>
+              products.map(
+                ({
+                  id,
+                  base_currency,
+                  quote_currency,
+                  display_name,
+                  stats,
+                }) => (
+                  <CardItem
+                    displayName={display_name}
+                    baseCurrency={base_currency}
+                    quoteCurrency={quote_currency}
+                    last={stats.last}
+                    highLow={stats.high - stats.low}
+                    volume={stats.volume}
+                    volume30Day={stats.volume_30day}
+                    high={stats.high}
+                    low={stats.low}
+                    key={id}
+                  />
+                )
               )
-            )
-          }
-        </ProductStats>
-      </Suspense>
-    </Layout>
-  </ContentWrapper>
-);
+            }
+          </ProductStats>
+        </Suspense>
+      </Layout>
+    </ContentWrapper>
+  );
+}
 
 export default Home;
diff --git a/src/providers/coinbase/productStats.js b/src/providers/coinbase/productStats.js
@@ -5,13 +5,14 @@ import { useQuery } from "react-apollo-hooks";
 /**
  * Standard (slow) query, mitigated by provider against rate limiting
  * (Queueing requests on fetch layer)
+ * TODO: Split up query... the graphQL DSL is not meant for n+1 subsection conditionals :(
  */
 const GET_PRODUCTS = gql`
-  query products {
+  query products($baseCurrency: String!, $fetchStats: Boolean!) {
     products @rest(type: "[Product]", path: "/products", endpoint: "coinbase") {
       id @export(as: "id")
-      base_currency
-      quote_currency
+      base_currency @export(as: "base")
+      quote_currency @export(as: "quote")
       base_min_size
       base_max_size
       quote_increment
@@ -24,10 +25,11 @@ const GET_PRODUCTS = gql`
       post_only # : Boolean
       limit_only # : Boolean
       cancel_only # : Boolean
-      stats
+      stats(baseCurrency: $baseCurrency)
+        @include(if: $fetchStats)
         @rest(
           type: "[Stats]"
-          path: "/products/{exportVariables.id}/stats"
+          path: "/products/{exportVariables.base}-{exportVariables.quote}/stats"
           endpoint: "coinbase"
         ) {
         open
@@ -49,9 +51,19 @@ const GET_PRODUCTS = gql`
 function ProductStats({
   onError = error => <>{error.message}</>,
   onNoResult = data => <>No Result!</>,
+  onNoBaseCurrency = data => <>Please Select a Base Currency</>,
+  baseCurrency = "USD",
   children,
 }) {
-  const { data, error } = useQuery(GET_PRODUCTS, { suspend: true });
+  const { data, error } = useQuery(GET_PRODUCTS, {
+    suspend: true,
+    variables: {
+      baseCurrency: baseCurrency,
+      // This converts baseCurrency to Boolean directive since GraphQL
+      // is handling null and undefined differently.
+      fetchStats: !!baseCurrency,
+    },
+  });
 
   if (error) {
     return onError(error);
@@ -61,7 +73,17 @@ function ProductStats({
     return onNoResult(data);
   }
 
-  return children(data);
+  // Filter Empty Pairs
+  const productsFiltered = data.products.filter(
+    product => ((product || {}).stats || {}).last
+  );
+  // console.dir(productsFiltered);
+
+  if (!productsFiltered) {
+    return onNoBaseCurrency(data);
+  }
+
+  return children({ products: productsFiltered });
 }
 
 export default ProductStats;