refactor: RecentSandboxes to use apollo react hooks

Author: yevhenorlov

packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import { Query } from 'react-apollo';
+import { useQuery } from '@apollo/react-hooks';
 
 import { useOvermind } from 'app/overmind';
 import getMostUsedTemplate from '../../../utils/get-most-used-template';
@@ -10,55 +10,44 @@ import { RECENT_SANDBOXES_CONTENT_QUERY } from '../../../queries';
 
 export const RecentSandboxes = () => {
   const { state } = useOvermind();
+  const { loading, error, data } = useQuery(RECENT_SANDBOXES_CONTENT_QUERY, {
+    variables: {
+      orderField: state.dashboard.orderBy.field,
+      orderDirection: state.dashboard.orderBy.order.toUpperCase(),
+    },
+  });
+  const sandboxes = loading ? [] : (data && data.me && data.me.sandboxes) || [];
+
+  let mostUsedTemplate = null;
+  try {
+    mostUsedTemplate = getMostUsedTemplate(sandboxes);
+  } catch (e) {
+    // Not critical
+  }
+
+  // We want to hide all templates
+  // TODO: make this a query variable for graphql and move the logic to the server
+  const noTemplateSandboxes = sandboxes.filter(s => !s.customTemplate);
+
   return (
     <>
       <Helmet>
         <title>Recent Sandboxes - CodeSandbox</title>
       </Helmet>
-      <Query
-        variables={{
-          orderField: state.dashboard.orderBy.field,
-          orderDirection: state.dashboard.orderBy.order.toUpperCase(),
-        }}
-        query={RECENT_SANDBOXES_CONTENT_QUERY}
-      >
-        {({ loading, error, data }) => {
-          if (error) {
-            return <div>Error!</div>;
-          }
-
-          const sandboxes = loading
-            ? []
-            : (data && data.me && data.me.sandboxes) || [];
-
-          let mostUsedTemplate = null;
-          try {
-            mostUsedTemplate = getMostUsedTemplate(sandboxes);
-          } catch (e) {
-            // Not critical
-          }
-
-          // We want to hide all templates
-          // TODO: make this a query variable for graphql and move the logic to the server
-          const noTemplateSandboxes = sandboxes.filter(s => !s.customTemplate);
-
-          return (
-            <Sandboxes
-              isLoading={loading}
-              Header="Recent Sandboxes"
-              ExtraElement={({ style }) => (
-                <CreateNewSandbox
-                  mostUsedSandboxTemplate={mostUsedTemplate}
-                  style={style}
-                />
-              )}
-              hideFilters
-              sandboxes={noTemplateSandboxes}
-              page="recent"
-            />
-          );
-        }}
-      </Query>
+      {error && <div>Error!</div>}
+      <Sandboxes
+        isLoading={loading}
+        Header="Recent Sandboxes"
+        ExtraElement={({ style }) => (
+          <CreateNewSandbox
+            mostUsedSandboxTemplate={mostUsedTemplate}
+            style={style}
+          />
+        )}
+        hideFilters
+        sandboxes={noTemplateSandboxes}
+        page="recent"
+      />
     </>
   );
 };