trying to fix protected route data fetch problem and only one more problem somewhere in the

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);

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>("");
 

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

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";

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}</>;
+}

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>
   );
 }
 

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>
   );
 };