From 2f79f769cce8023d37f32801119cd399ba4b9692 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Wed, 9 Feb 2022 16:07:04 -0800
Subject: [PATCH] trying to fix protected route data fetch problem and only one
 more problem somewhere in the

---
 .../CreateConversation.tsx.tsx                |  2 +-
 .../web/components/MainTabsOrPages/Header.tsx |  2 +-
 .../components/MainTabsOrPages/ViewConvo.tsx  |  2 +-
 .../UserDetails/MasterAvatarGroup.tsx         |  2 +-
 packages/web/contexts/ProtectedRoute.tsx      | 22 ++++++++++++++++
 packages/web/pages/_app.tsx                   | 14 ++++++-----
 packages/web/pages/s/index.tsx                | 25 ++++++++-----------
 7 files changed, 44 insertions(+), 25 deletions(-)
 create mode 100644 packages/web/contexts/ProtectedRoute.tsx

diff --git a/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx b/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx
index b5ddd32..b5bbf86 100644
--- a/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx
+++ b/packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx
@@ -30,7 +30,7 @@ export default function CreateConversation() {
   const { currUser } = useAuth();
   const router = useRouter();
 
-  const input = useRef<HTMLInputElement>();
+  const input = useRef<HTMLInputElement>(null);
 
   const [selectedUsers, setSelectedUsers] = useState<User[]>([] as User[]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
diff --git a/packages/web/components/MainTabsOrPages/Header.tsx b/packages/web/components/MainTabsOrPages/Header.tsx
index 164b556..7fe2c6b 100644
--- a/packages/web/components/MainTabsOrPages/Header.tsx
+++ b/packages/web/components/MainTabsOrPages/Header.tsx
@@ -26,7 +26,7 @@ export default function Header() {
 
   const router = useRouter();
 
-  const inputRef = useRef<HTMLInputElement | undefined>();
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const [searchInput, setSearchInput] = useState<string>("");
 
diff --git a/packages/web/components/MainTabsOrPages/ViewConvo.tsx b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
index 2fa9df7..603bc41 100644
--- a/packages/web/components/MainTabsOrPages/ViewConvo.tsx
+++ b/packages/web/components/MainTabsOrPages/ViewConvo.tsx
@@ -97,7 +97,7 @@ export default function ViewConvo(props: { conversationId: string }) {
 
   const allConvosMap = useRecoilValue(allRelevantConversationsAtom);
 
-  const endOfTimeline = useRef<HTMLSpanElement>();
+  const endOfTimeline = useRef<HTMLSpanElement>(null);
 
   const [currentConvoModal, setCurrConvoModal] = useState<ConvoModal>(
     ConvoModal.na
diff --git a/packages/web/components/UserDetails/MasterAvatarGroup.tsx b/packages/web/components/UserDetails/MasterAvatarGroup.tsx
index 67a2c23..3c91fbf 100644
--- a/packages/web/components/UserDetails/MasterAvatarGroup.tsx
+++ b/packages/web/components/UserDetails/MasterAvatarGroup.tsx
@@ -1,4 +1,4 @@
-import { User } from "@nirvana/common/models/user";
+import User from "@nirvana/common/models/user";
 import { useAuth } from "../../contexts/authContext";
 import { useRecoilValue, useRecoilState } from "recoil";
 import { allRelevantContactsAtom } from "../../recoil/main";
diff --git a/packages/web/contexts/ProtectedRoute.tsx b/packages/web/contexts/ProtectedRoute.tsx
new file mode 100644
index 0000000..e152ab7
--- /dev/null
+++ b/packages/web/contexts/ProtectedRoute.tsx
@@ -0,0 +1,22 @@
+import { useRouter } from "next/router";
+import toast from "react-hot-toast";
+import { useAuth } from "./authContext";
+import { useEffect } from "react";
+
+export default function ProtectedRoute({ children }) {
+  const { currUser } = useAuth();
+
+  // figure out what content to render from here
+  const router = useRouter();
+
+  // useEffect(() => {}, []);
+
+  if (!currUser) {
+    console.log("not authenticated...routing from dashboard to teams home");
+    toast.error("Not Authenticated");
+    router.push("/teams/login");
+    return <></>;
+  }
+
+  return <>{currUser && children}</>;
+}
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index b029784..41d2314 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -26,13 +26,15 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
-    <RecoilRoot>
-      <SiteLayout>
-        <AuthProvider>{getLayout(<Component {...pageProps} />)}</AuthProvider>
+    <AuthProvider>
+      <RecoilRoot>
+        <SiteLayout>
+          {getLayout(<Component {...pageProps} />)}
 
-        <Toaster position="top-center" />
-      </SiteLayout>
-    </RecoilRoot>
+          <Toaster position="top-center" />
+        </SiteLayout>
+      </RecoilRoot>
+    </AuthProvider>
   );
 }
 
diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index 26c6466..2d1f181 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -16,20 +16,13 @@ import ViewConvo from "../../components/MainTabsOrPages/ViewConvo";
 import MainRecoilDataHandler from "../../recoil/MainRecoilDataHandler";
 import { useAuth } from "../../contexts/authContext";
 import AudioHandler from "../../components/Audio/AudioHandler";
+import toast from "react-hot-toast";
+import ProtectedRoute from "../../contexts/ProtectedRoute";
 
 export default function Me() {
-  // TODO: if not authenticated, take user away
-  const { currUser } = useAuth();
-  useEffect(() => {
-    if (!currUser) {
-      console.log("not authenticated...routing from dashboard to teams home");
-      router.push("/teams/login");
-      return;
-    }
-  }, []);
-
   // figure out what content to render from here
   const router = useRouter();
+
   const currPage = router.query.page;
   const currConvo = router.query.convoId;
 
@@ -128,15 +121,17 @@ export default function Me() {
 Me.getLayout = function (content: ReactElement) {
   return (
     <div className="flex flex-col">
-      <MainRecoilDataHandler />
+      <ProtectedRoute>
+        <MainRecoilDataHandler />
 
-      <KeyboardShortcutHandler />
+        <KeyboardShortcutHandler />
 
-      <Header />
+        <Header />
 
-      {content}
+        {content}
 
-      <AudioHandler />
+        <AudioHandler />
+      </ProtectedRoute>
     </div>
   );
 };