add a spacer to avoid UpgradeTile

beneath-hq · Oct 14, 2020 · 4197404 · 4197404
1 parent c3b2d80
commit 4197404
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/web/components/console/MyProjectsTiles.tsx b/web/components/console/MyProjectsTiles.tsx
@@ -1,21 +1,24 @@
 import { useQuery } from "@apollo/client";
 import { FC } from "react";
+import { Grid, useMediaQuery, useTheme } from "@material-ui/core";
 
 import { QUERY_PROJECTS_FOR_USER } from "../../apollo/queries/project";
-import { Me_me } from "../../apollo/types/Me";
 import { ProjectsForUser, ProjectsForUserVariables } from "../../apollo/types/ProjectsForUser";
 import { toURLName } from "../../lib/names";
 import ErrorTile from "./tiles/ErrorTile";
 import LoadingTile from "./tiles/LoadingTile";
 import ProjectHeroTile from "./tiles/ProjectHeroTile";
 import PlaceholderTile from "./tiles/PlaceholderTile";
+import useMe from "hooks/useMe";
+import { BillingInfo, BillingInfoVariables } from "apollo/types/BillingInfo";
+import { QUERY_BILLING_INFO } from "apollo/queries/billinginfo";
 
-export interface MyProjectsTilesProps {
-  me: Me_me;
-}
+const MyProjectsTiles: FC = () => {
+  const me = useMe();
+  const theme = useTheme();
+  const isMd = useMediaQuery(theme.breakpoints.up("md"));
 
-const MyProjectsTiles: FC<MyProjectsTilesProps> = ({ me }) => {
-  if (!me.personalUserID) {
+  if (!me || !me.personalUserID) {
     return <></>;
   }
 
@@ -25,23 +28,34 @@ const MyProjectsTiles: FC<MyProjectsTilesProps> = ({ me }) => {
     },
   });
 
+  const { loading: loading2, error: error2, data: data2 } = useQuery<BillingInfo, BillingInfoVariables>(QUERY_BILLING_INFO, {
+    variables: {
+      organizationID: me.organizationID,
+    },
+  });
+
   return (
     <>
-      {loading && <LoadingTile />}
-      {error && <ErrorTile error={error?.message || "Couldn't load your projects"} />}
+      {(loading || loading2 ) && <LoadingTile />}
+      {error && <ErrorTile error={error?.message || error2?.message || "Couldn't load your projects"} />}
       {data &&
         data.projectsForUser &&
-        data.projectsForUser.map(({ projectID, name, description, photoURL, organization }) => (
-          <ProjectHeroTile
-            key={`explore:${projectID}`}
-            href={`/project?organization_name=${toURLName(organization.name)}&project_name=${toURLName(name)}`}
-            as={`/${toURLName(organization.name)}/${toURLName(name)}`}
-            organizationName={organization.name}
-            name={toURLName(name)}
-            description={description}
-            avatarURL={photoURL}
-          />
-        ))}
+        data.projectsForUser.map(({ projectID, name, description, photoURL, organization }, i) => (
+          // if its the 3rd or 5th item, on medium+ screens, and you're on the free plan, then add a spacer to avoid overlap with the UpgradeTile
+          <>
+            {(i === 2 || i === 4) && isMd && data2 && data2.billingInfo.billingPlan.default && <Grid item xs={4} />}
+              <ProjectHeroTile
+                key={`explore:${projectID}`}
+                href={`/project?organization_name=${toURLName(organization.name)}&project_name=${toURLName(name)}`}
+                as={`/${toURLName(organization.name)}/${toURLName(name)}`}
+                organizationName={organization.name}
+                name={toURLName(name)}
+                description={description}
+                avatarURL={photoURL}
+              />
+            </>
+          )
+        )}
       {data && !data.projectsForUser && <PlaceholderTile title="Your first project will show up here" />}
     </>
   );

diff --git a/web/components/console/Springboard.tsx b/web/components/console/Springboard.tsx
@@ -116,7 +116,7 @@ const Springboard: FC = () => {
           My projects
         </Typography>
       </Grid>
-      <MyProjectsTiles me={me} />
+      <MyProjectsTiles />
       <Grid item xs={12}>
         <Typography variant="h3" className={classes.sectionTitle}>
           Featured projects and tutorials

diff --git a/web/components/console/tiles/UpgradeTile.tsx b/web/components/console/tiles/UpgradeTile.tsx
@@ -25,7 +25,7 @@ export const UpgradeTile: FC<TileProps> = ({ ...tileProps }) => {
   const me = useMe();
 
   if (!me || !me.personalUserID) {
-    return <p>Need to log in to view your dashboard -- this shouldn't ever get hit</p>;
+    return <></>;
   }
 
   const { loading, error, data } = useQuery<BillingInfo, BillingInfoVariables>(QUERY_BILLING_INFO, {