Introduce isPublic prop in Shell (#2437)

Co-authored-by: zomars <zomars@me.com>

apps/web/components/Shell.tsx

@@ -53,14 +53,14 @@ export function useMeQuery() {
   return meQuery;
 }
 
-function useRedirectToLoginIfUnauthenticated() {
+function useRedirectToLoginIfUnauthenticated(isPublic = false) {
   const { data: session, status } = useSession();
   const loading = status === "loading";
   const router = useRouter();
   const shouldDisplayUnauthed = router.pathname.startsWith("/apps");
 
   useEffect(() => {
-    if (shouldDisplayUnauthed) {
+    if (isPublic) {
       return;
     }
 
@@ -73,7 +73,7 @@ function useRedirectToLoginIfUnauthenticated() {
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, session]);
+  }, [loading, session, isPublic]);
 
   return {
     loading: loading && !session,
@@ -133,10 +133,11 @@ export default function Shell(props: {
   backPath?: string; // renders back button to specified path
   // use when content needs to expand with flex
   flexChildrenContainer?: boolean;
+  isPublic?: boolean;
 }) {
   const { t } = useLocale();
   const router = useRouter();
-  const { loading, shouldDisplayUnauthed, session } = useRedirectToLoginIfUnauthenticated();
+  const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic);
   const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
 
   const telemetry = useTelemetry();
@@ -209,7 +210,7 @@ export default function Shell(props: {
     );
   }
 
-  if (!session && !shouldDisplayUnauthed) return null;
+  if (!session && !props.isPublic) return null;
 
   return (
     <>

apps/web/pages/apps/categories/[category].tsx

@@ -15,7 +15,7 @@ export default function Apps({ appStore }: InferGetStaticPropsType<typeof getSta
 
   return (
     <>
-      <Shell large>
+      <Shell isPublic large>
         <div className="-mx-4 md:-mx-8">
           <div className="mb-10 bg-gray-50 px-4 pb-2">
             <Link href="/apps">

apps/web/pages/apps/categories/index.tsx

@@ -12,7 +12,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
   const { t } = useLocale();
 
   return (
-    <Shell large>
+    <Shell isPublic large>
       <div className="-mx-4 md:-mx-8">
         <div className="mb-10 bg-gray-50 px-4 pb-2">
           <Link href="/apps">

apps/web/pages/apps/index.tsx

@@ -13,7 +13,7 @@ export default function Apps({ appStore, categories }: InferGetStaticPropsType<t
   const { t } = useLocale();
 
   return (
-    <Shell heading={t("app_store")} subtitle={t("app_store_description")} large>
+    <Shell heading={t("app_store")} subtitle={t("app_store_description")} large isPublic>
       <AppsShell>
         <AppStoreCategories categories={categories} />
         <TrendingAppsSlider items={appStore} />