From 59e25ad04eb4e23e6680d41bb4a14af5c5fc0c19 Mon Sep 17 00:00:00 2001
From: Alex Johansson <alexander@n1s.se>
Date: Fri, 15 Oct 2021 00:00:50 +0200
Subject: [PATCH] remove unnecessary fetches of api (#960)

* skip repeating fetch of user on session changes
* fix some issues on integrations
---
 components/Shell.tsx         |  7 -------
 pages/integrations/index.tsx | 20 +++++++++++---------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 112d5817..baaca17d 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -37,15 +37,8 @@ import { useViewerI18n } from "./I18nLanguageHandler";
 import Logo from "./Logo";
 
 function useMeQuery() {
-  const [session] = useSession();
   const meQuery = trpc.useQuery(["viewer.me"]);
 
-  useEffect(() => {
-    // refetch if sesion changes
-    meQuery.refetch();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session]);
-
   return meQuery;
 }
 
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 0914debf..cbc6b835 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { ReactNode, useEffect, useState } from "react";
+import { Fragment, ReactNode, useState } from "react";
 import { useMutation } from "react-query";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -56,13 +56,15 @@ function ConnectIntegration(props: { type: string; render: (renderProps: ButtonB
     window.location.href = json.url;
     setIsLoading(true);
   });
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  // refetch intergrations when modal closes
+  const [isModalOpen, _setIsModalOpen] = useState(false);
   const utils = trpc.useContext();
-  useEffect(() => {
+
+  const setIsModalOpen: typeof _setIsModalOpen = (v) => {
+    _setIsModalOpen(v);
+    // refetch intergrations on modal toggles
+
     utils.invalidateQueries(["viewer.integrations"]);
-  }, [isModalOpen, utils]);
+  };
 
   return (
     <>
@@ -340,8 +342,8 @@ export default function IntegrationsPage() {
               {data.connectedCalendars.length > 0 && (
                 <>
                   <List>
-                    {data.connectedCalendars.map((item, index) => (
-                      <li key={index}>
+                    {data.connectedCalendars.map((item) => (
+                      <Fragment key={item.credentialId}>
                         {item.calendars ? (
                           <IntegrationListItem
                             {...item.integration}
@@ -385,7 +387,7 @@ export default function IntegrationsPage() {
                             }
                           />
                         )}
-                      </li>
+                      </Fragment>
                     ))}
                   </List>
                   <ShellSubHeading