feat(funnels): app directory and web funnel setup

packages/extension/__tests__/setup.ts

@@ -91,4 +91,16 @@ Object.defineProperty(global, 'BroadcastChannel', {
   })),
 });
 
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    refresh: jest.fn(),
+    back: jest.fn(),
+    forward: jest.fn(),
+  }),
+  usePathname: () => '',
+  useSearchParams: () => new URLSearchParams(),
+}));
+
 structuredCloneJsonPolyfill();

packages/shared/__tests__/setup.ts

@@ -83,6 +83,18 @@ jest.mock('next/router', () => ({
   ),
 }));
 
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    refresh: jest.fn(),
+    back: jest.fn(),
+    forward: jest.fn(),
+  }),
+  usePathname: () => '',
+  useSearchParams: () => new URLSearchParams(),
+}));
+
 beforeEach(() => {
   clear();
   storage.clear();

packages/shared/src/components/buttons/Button.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
 import React, { forwardRef, useState } from 'react';
 import classNames from 'classnames';

packages/shared/src/components/fields/ImageInput.tsx

@@ -8,6 +8,11 @@ import { IconSize } from '../Icon';
 import { useToastNotification } from '../../hooks/useToastNotification';
 import { ButtonSize, ButtonVariant } from '../buttons/common';
 import CloseButton from '../CloseButton';
+import {
+  MEGABYTE,
+  acceptedTypesList,
+  ACCEPTED_TYPES,
+} from '../../graphql/posts';
 
 type Size = 'medium' | 'large' | 'cover';
 
@@ -34,8 +39,6 @@ interface ImageInputProps {
   fileSizeLimitMB?: number;
 }
 
-export const MEGABYTE = 1024 * 1024;
-
 const componentSize: Record<Size, string> = {
   medium: 'w-24 h-24 rounded-26',
   large: 'w-40 h-40 rounded-40',
@@ -46,8 +49,6 @@ const sizeToIconSize: Record<Size, IconSize> = {
   large: IconSize.Medium,
   cover: IconSize.Small,
 };
-export const ACCEPTED_TYPES = 'image/png,image/jpeg';
-export const acceptedTypesList = ACCEPTED_TYPES.split(',');
 
 function ImageInput({
   initialValue,

packages/shared/src/components/fields/MarkdownInput/index.tsx

@@ -27,7 +27,6 @@ import type {
   UseMarkdownInputProps,
 } from '../../../hooks/input';
 import { useMarkdownInput } from '../../../hooks/input';
-import { ACCEPTED_TYPES } from '../ImageInput';
 import { MarkdownUploadLabel } from './MarkdownUploadLabel';
 import { markdownGuide } from '../../../lib/constants';
 import useSidebarRendered from '../../../hooks/useSidebarRendered';
@@ -43,6 +42,7 @@ import { Divider } from '../../utilities';
 import { usePopupSelector } from '../../../hooks/usePopupSelector';
 import { focusInput } from '../../../lib/textarea';
 import CloseButton from '../../CloseButton';
+import { ACCEPTED_TYPES } from '../../../graphql/posts';
 
 interface ClassName {
   container?: string;

packages/shared/src/contexts/AuthContext.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import type { ReactElement, ReactNode } from 'react';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import type { QueryObserverResult } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import type { AnonymousUser, LoggedUser } from '../lib/user';
 import {
   deleteAccount,
@@ -77,14 +79,12 @@ export const getQueryParams = (): Record<string, string> => {
   }
 
   const urlSearchParams = new URLSearchParams(window.location.search);
-  const params = Object.fromEntries(urlSearchParams.entries());
-
-  return params;
+  return Object.fromEntries(urlSearchParams.entries());
 };
 
 export const REGISTRATION_PATH = '/register';
 
-const logout = async (reason: string): Promise<void> => {
+export const logout = async (reason: string): Promise<void> => {
   await dispatchLogout(reason);
   const params = getQueryParams();
   if (params.redirect_uri) {

packages/shared/src/contexts/ProgressiveEnhancementContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
 import { requestIdleCallback } from 'next/dist/client/request-idle-callback';

packages/shared/src/contexts/SubscriptionContext.tsx

@@ -1,9 +1,13 @@
+'use client';
+
 import type { ReactElement, ReactNode } from 'react';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import type { Client } from 'graphql-ws';
 import { requestIdleCallback } from 'next/dist/client/request-idle-callback';
+import { useQuery } from '@tanstack/react-query';
 import ProgressiveEnhancementContext from './ProgressiveEnhancementContext';
 import AuthContext from './AuthContext';
+import { appBootDataQuery } from '../lib/boot';
 
 export interface SubscriptionContextData {
   subscriptionClient: Client;
@@ -20,12 +24,14 @@ export type SubscriptionContextProviderProps = {
   children?: ReactNode;
 };
 
-export const SubscriptionContextProvider = ({
-  children,
-}: SubscriptionContextProviderProps): ReactElement => {
+const useSubscriptionContext = ({
+  tokenRefreshed,
+  accessToken,
+}: {
+  tokenRefreshed: boolean;
+  accessToken: { token: string };
+}): SubscriptionContextData => {
   const { windowLoaded } = useContext(ProgressiveEnhancementContext);
-  const { tokenRefreshed, accessToken } = useContext(AuthContext);
-
   const [connected, setConnected] = useState(false);
   const [subscriptionClient, setSubscriptionClient] = useState<Client>(null);
 
@@ -43,14 +49,40 @@ export const SubscriptionContextProvider = ({
     }
   }, [windowLoaded, tokenRefreshed, accessToken, subscriptionClient]);
 
-  const contextData = useMemo<SubscriptionContextData>(
+  return useMemo<SubscriptionContextData>(
     () => ({
       connected,
       subscriptionClient,
     }),
     [connected, subscriptionClient],
   );
+};
+
+export const AppSubscriptionContextProvider = ({
+  children,
+}: SubscriptionContextProviderProps): ReactElement => {
+  const { data: boot, dataUpdatedAt } = useQuery(appBootDataQuery);
+  const tokenRefreshed = dataUpdatedAt > 0;
+  const accessToken = boot?.accessToken;
+  const contextData = useSubscriptionContext({
+    tokenRefreshed,
+    accessToken,
+  });
+  return (
+    <SubscriptionContext.Provider value={contextData}>
+      {children}
+    </SubscriptionContext.Provider>
+  );
+};
 
+export const SubscriptionContextProvider = ({
+  children,
+}: SubscriptionContextProviderProps): ReactElement => {
+  const { tokenRefreshed, accessToken } = useContext(AuthContext);
+  const contextData = useSubscriptionContext({
+    tokenRefreshed,
+    accessToken,
+  });
   return (
     <SubscriptionContext.Provider value={contextData}>
       {children}

packages/shared/src/features/common/components/AppHeadMetas.tsx

@@ -0,0 +1,59 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { fromCDN } from '../../../lib';
+
+export function AppHeadMetas(): ReactElement {
+  return (
+    <>
+      <meta
+        name="viewport"
+        content="initial-scale=1.0, width=device-width, viewport-fit=cover"
+      />
+
+      <meta name="application-name" content="daily.dev" />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+      <meta name="apple-mobile-web-app-title" content="daily.dev" />
+      <meta name="format-detection" content="telephone=no" />
+      <meta name="mobile-web-app-capable" content="yes" />
+      <meta name="slack-app-id" content="A07AM7XC529" />
+      <meta name="apple-itunes-app" content="app-id=6740634400" />
+
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href={fromCDN('/apple-touch-icon.png')}
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href={fromCDN('/favicon-32x32.png')}
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href={fromCDN('/favicon-16x16.png')}
+      />
+      <link rel="manifest" href="/manifest.json" />
+      <link
+        rel="sitemap"
+        type="text/plain"
+        title="Sitemap"
+        href="/sitemap.txt"
+      />
+
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.addEventListener('load', () => { window.windowLoaded = true; }, {
+      once: true,
+    });`,
+        }}
+      />
+
+      <link rel="preconnect" href="https://api.daily.dev" />
+      <link rel="preconnect" href="https://sso.daily.dev" />
+      <link rel="preconnect" href="https://media.daily.dev" />
+    </>
+  );
+}

packages/shared/src/features/common/hooks/useAppAuth.ts

@@ -0,0 +1,61 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { Boot } from '../../../lib/boot';
+import type { LoggedUser, AnonymousUser } from '../../../lib/user';
+import { appBootDataQuery } from '../../../lib/boot';
+import { logout } from '../../../contexts/AuthContext';
+import { generateQueryKey, RequestKey } from '../../../lib/query';
+import { useRefreshToken } from '../../../hooks/useRefreshToken';
+
+export enum AppAuthActionsKeys {
+  LOGOUT = 'logout',
+  REFRESH = 'refresh',
+  UPDATE_USER = 'updateUser',
+}
+
+export type AppAuthActions = Record<
+  AppAuthActionsKeys,
+  (data?: unknown) => void
+>;
+
+interface UseAppAuthReturn {
+  boot: Boot;
+  dispatch: <Data>(action: { type: AppAuthActionsKeys; data?: Data }) => void;
+  isLoggedIn: boolean;
+  user: LoggedUser | null;
+}
+
+function checkIfUserIsLoggedIn(user: Boot['user']): user is LoggedUser {
+  return 'username' in user;
+}
+
+export const useAppAuth = (): UseAppAuthReturn => {
+  const queryClient = useQueryClient();
+  const initialData = queryClient.getQueryData(appBootDataQuery.queryKey);
+  const { data: boot, refetch } = useQuery({
+    ...appBootDataQuery,
+    initialData,
+  });
+  const user = boot && checkIfUserIsLoggedIn(boot.user) ? boot.user : null;
+  const isLoggedIn = !!user;
+
+  useRefreshToken(boot?.accessToken, refetch);
+
+  const actions: Readonly<AppAuthActions> = {
+    [AppAuthActionsKeys.LOGOUT]: logout,
+    [AppAuthActionsKeys.REFRESH]: refetch,
+    [AppAuthActionsKeys.UPDATE_USER]: async (
+      newUser: LoggedUser | AnonymousUser,
+    ) => {
+      await queryClient.invalidateQueries({
+        queryKey: generateQueryKey(RequestKey.Profile, newUser),
+      });
+    },
+  };
+
+  return {
+    boot,
+    dispatch: ({ type, data }) => actions[type](data),
+    isLoggedIn,
+    user,
+  };
+};

packages/shared/src/features/common/hooks/useRouterQuery.ts

@@ -0,0 +1,14 @@
+import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
+
+export const useRouterQuery = (): {
+  query: Record<string, string>;
+} => {
+  const params = useSearchParams();
+  return useMemo(
+    () => ({
+      query: Object.fromEntries(params.entries()),
+    }),
+    [params],
+  );
+};

packages/shared/src/features/common/types/page.ts

@@ -0,0 +1,4 @@
+export interface AppPageProps {
+  params: Promise<Record<string, string>>;
+  searchParams: Promise<Record<string, string>>;
+}