redirect "me" in org page url; tried to correct weird apollo behaviou…

…r, but turns out it's unresolved: apollographql/react-apollo#3918
beneath-hq · Apr 21, 2020 · e7b6f91 · e7b6f91
1 parent b6bc68a
commit e7b6f91
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 47 deletions.
diff --git a/web/apollo/client.js b/web/apollo/client.js
@@ -53,6 +53,14 @@ const createApolloClient = ({ req, res, initialState }) => {
     cache,
     typeDefs,
     resolvers,
+    defaultOptions: {
+      mutate: {
+        errorPolicy: "all",
+      },
+      query: {
+        errorPolicy: "all",
+      },
+    },
   });
 };
 
@@ -110,13 +118,6 @@ const makeErrorHook = ({ token, res }) => {
         }
       }
     }
-
-    if (graphQLErrors && graphQLErrors.length > 0) {
-      let error = graphQLErrors[0];
-      if (error.extensions && error.extensions.code === "VALIDATION_ERROR") {
-        console.log("Validation error", error.extensions.exception);
-      }
-    }
   };
 };
 

diff --git a/web/apollo/withApollo.js b/web/apollo/withApollo.js
@@ -66,7 +66,7 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
           // Prevent Apollo Client GraphQL errors from crashing SSR.
           // Handle them in components via the data.error prop:
           // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
-          console.error("Error while running `getDataFromTree`", error);
+          // console.error("Error while running `getDataFromTree`", error);
         }
 
         // getDataFromTree does not call componentWillUnmount

diff --git a/web/pages/organization.tsx b/web/pages/organization.tsx
@@ -1,61 +1,89 @@
+import { useQuery } from "@apollo/react-hooks";
 import { useRouter } from "next/router";
 import React from "react";
-import { withApollo } from "../apollo/withApollo";
 
+import { QUERY_ORGANIZATION } from "../apollo/queries/organization";
+import { QUERY_USER_BY_USERNAME } from "../apollo/queries/user";
+import { OrganizationByName, OrganizationByNameVariables } from "../apollo/types/OrganizationByName";
+import { UserByUsername, UserByUsernameVariables } from "../apollo/types/UserByUsername";
+import { withApollo } from "../apollo/withApollo";
 import useMe from "../hooks/useMe";
 import { toBackendName } from "../lib/names";
-import Page from "../components/Page";
+
 import ErrorPage from "../components/ErrorPage";
-import PageTitle from "../components/PageTitle";
-import ProfileHero from "../components/ProfileHero";
-import SubrouteTabs from "../components/SubrouteTabs";
-import ViewUsers from "../components/organization/ViewUsers";
+import Loading from "../components/Loading";
 import BillingTab from "../components/organization/billing/BillingTab";
-import ViewServices from "../components/organization/ViewServices";
-import ViewUserProjects from "../components/organization/personal/ViewUserProjects";
-import ViewOrganizationProjects from "../components/organization/ViewOrganizationProjects";
-import { OrganizationByName, OrganizationByNameVariables } from "../apollo/types/OrganizationByName";
-import { QUERY_USER_BY_USERNAME } from "../apollo/queries/user";
-import { UserByUsername, UserByUsernameVariables } from "../apollo/types/UserByUsername";
-import { QUERY_ORGANIZATION } from "../apollo/queries/organization";
-import { useQuery } from "@apollo/react-hooks";
 import EditMe from "../components/organization/personal/EditMe";
 import IssueSecret from "../components/organization/personal/IssueSecret";
 import Monitoring from "../components/organization/personal/Monitoring";
-import ViewSecrets from "../components/organization/personal/ViewSecrets";
 import ViewBrowserSessions from "../components/organization/personal/ViewBrowserSessions";
+import ViewSecrets from "../components/organization/personal/ViewSecrets";
+import ViewUserProjects from "../components/organization/personal/ViewUserProjects";
+import ViewOrganizationProjects from "../components/organization/ViewOrganizationProjects";
+import ViewServices from "../components/organization/ViewServices";
+import ViewUsers from "../components/organization/ViewUsers";
+import Page from "../components/Page";
+import PageTitle from "../components/PageTitle";
+import ProfileHero from "../components/ProfileHero";
+import SubrouteTabs from "../components/SubrouteTabs";
 
 const OrganizationPage = () => {
   const me = useMe();
   const router = useRouter();
-  
+
   if (typeof router.query.organization_name !== "string") {
     return <ErrorPage statusCode={404} />;
   }
 
-  const organizationName = toBackendName(router.query.organization_name)
+  const organizationName = toBackendName(router.query.organization_name);
+
+  // little hack to replace organization name "me" with billing organization name if logged in
+  if (me) {
+    if (organizationName === "me") {
+      if (typeof window !== "undefined") {
+        const tab = router.query.tab;
+        const realName = me?.billingOrganization.name;
+        if (tab) {
+          router.replace(`/organization?organization_name=${realName}&tab=${tab}`, `/${realName}/-/${tab}`);
+        } else {
+          router.replace(`/organization?organization_name=${realName}`, `/${realName}`);
+        }
+        return;
+      }
+    }
+  }
 
   const { loading, error, data } = useQuery<OrganizationByName, OrganizationByNameVariables>(QUERY_ORGANIZATION, {
     fetchPolicy: "cache-and-network",
     variables: { name: organizationName },
   });
 
+  if (loading) {
+    return (
+      <Page title="Organization" subheader>
+        <Loading justify="center" />
+      </Page>
+    );
+  }
+
   if (error || !data || !data.organizationByName) {
-    return <p>Error: {JSON.stringify(error)}</p>;
+    return <ErrorPage apolloError={error} />;
   }
 
-  const organization = data.organizationByName
+  const organization = data.organizationByName;
 
-  const tabs = [{ value: "projects", label: "Projects", render: () => <ViewOrganizationProjects organization={organization} /> }]
+  const tabs = [
+    { value: "projects", label: "Projects", render: () => <ViewOrganizationProjects organization={organization} /> },
+  ];
 
   // logged in
   if (me) {
     if (me.billingOrganization.name === organizationName) {
       // only for your user
-      if (organization.personal) { 
-        const user = organization.users[0]
-        tabs.push({ value: "monitoring", label: "Monitoring", render: () => <Monitoring me={me} /> })
-        tabs.push({ value: "edit", label: "Edit", render: () => <EditMe /> })
+      if (organization.personal) {
+        const user = organization.users[0];
+        tabs.push({ value: "monitoring", label: "Monitoring", render: () => <Monitoring me={me} /> });
+        tabs.push({ value: "edit", label: "Edit", render: () => <EditMe /> });
         tabs.push({
           value: "secrets",
           label: "Secrets",
@@ -64,27 +92,32 @@ const OrganizationPage = () => {
               <IssueSecret userID={user.userID} />
               <ViewSecrets userID={user.userID} />
             </>
-          )
-        })
-        tabs.push({ value: "security", label: "Security", render: () => <ViewBrowserSessions userID={user.userID} /> })
-      } else { //  only for your enterprise
-        tabs.push({ value: "users", label: "Users", render: () => <ViewUsers organization={organization} /> })
+          ),
+        });
+        tabs.push({ value: "security", label: "Security", render: () => <ViewBrowserSessions userID={user.userID} /> });
+      } else {
+        //  only for your enterprise
+        tabs.push({ value: "users", label: "Users", render: () => <ViewUsers organization={organization} /> });
       }
       // { value: "services", label: "Services", render: () => <ViewServices organization={organization} /> }
       // TODO: billing tab should only be viewable to admins of the organization
-      tabs.push({ value: "billing", label: "Billing", render: () => <BillingTab organizationID={me.billingOrganization.organizationID} /> });
+      tabs.push({
+        value: "billing",
+        label: "Billing",
+        render: () => <BillingTab organizationID={me.billingOrganization.organizationID} />,
+      });
     }
   }
 
   if (organization.personal) {
-    const user = organization.users[0]
+    const user = organization.users[0];
     return (
       <Page title="User" subheader>
-      <PageTitle title={user.name} />
-      <ProfileHero name={user.name} description={user.bio} avatarURL={user.photoURL} />
-      <SubrouteTabs defaultValue="projects" tabs={tabs} />
-    </Page>
-    )
+        <PageTitle title={user.name} />
+        <ProfileHero name={user.name} description={user.bio} avatarURL={user.photoURL} />
+        <SubrouteTabs defaultValue="projects" tabs={tabs} />
+      </Page>
+    );
   } else {
     return (
       <Page title="Organization" subheader>
@@ -94,7 +127,6 @@ const OrganizationPage = () => {
       </Page>
     );
   }
-
 };
 
 export default withApollo(OrganizationPage);
diff --git a/web/server.js b/web/server.js
@@ -100,8 +100,8 @@ app.prepare().then(() => {
   server.get("/-/redirects/upgrade-pro", (req, res) => {
     let loggedIn = !!req.cookies.token;
     if (loggedIn) {
-      // TODO: get username, main org, upgrade path
-      res.redirect("/");
+      // "me" gets replaced with billing org name in the organization page
+      res.redirect("/me/-/billing");
     } else {
       res.redirect("/-/auth");
     }