feat: cf

.gitignore

@@ -45,3 +45,4 @@ webapp.xml
 
 # IDE
 .idea/
+.env*.local

package.json

@@ -13,6 +13,9 @@
   "pnpm": {
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]"
+    },
+    "overrides": {
+      "eslint": "^7.32.0"
     }
   }
 }

packages/shared/src/components/CalendarHeatmap.tsx

@@ -47,6 +47,10 @@ const binsAttributes: React.SVGProps<SVGRectElement>[] = [
 ];
 
 function getRange(count: number): number[] {
+  if (count <= 0) {
+    return [];
+  }
+
   return Array.from(new Array(count), (_, i) => i);
 }
 

packages/shared/src/components/GrowthBookProvider.tsx

@@ -26,6 +26,7 @@ import { apiUrl } from '../lib/config';
 import { useRequestProtocol } from '../hooks/useRequestProtocol';
 import { feature as localFeature, Feature } from '../lib/featureManagement';
 import { useViewSize, ViewSize } from '../hooks/useViewSize';
+import { withCredentials } from '../lib/withCredentials';
 
 const ServerError = dynamic(
   () => import(/* webpackChunkName: "serverError" */ './errors/ServerError'),
@@ -81,7 +82,7 @@ export const GrowthBookProvider = ({
           experiment_id: data.experimentId,
           variation_id: data.variationId,
         }),
-        credentials: 'include',
+        credentials: withCredentials('include'),
         headers: {
           'content-type': 'application/json',
         },

packages/shared/src/components/MainLayout.tsx

@@ -13,7 +13,6 @@ import PromotionalBanner from './PromotionalBanner';
 import useSidebarRendered from '../hooks/useSidebarRendered';
 import LogContext from '../contexts/LogContext';
 import SettingsContext from '../contexts/SettingsContext';
-import Toast from './notifications/Toast';
 import { useAuthErrors } from '../hooks/useAuthErrors';
 import { useAuthVerificationRecovery } from '../hooks/useAuthVerificationRecovery';
 import MainLayoutHeader, {
@@ -52,6 +51,10 @@ const Sidebar = dynamic(() =>
   ),
 );
 
+const Toast = dynamic(
+  () => import(/* webpackChunkName: "toast" */ './notifications/Toast'),
+);
+
 export interface MainLayoutProps
   extends Omit<MainLayoutHeaderProps, 'onMobileSidebarToggle'>,
     HTMLAttributes<HTMLDivElement> {

packages/shared/src/components/RenderMarkdown.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { LightAsync as SyntaxHighlighterAsync } from 'react-syntax-highlighter';
 import dynamic from 'next/dynamic';
-import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import styles from './markdown.module.css';
 import {
   Button,
@@ -21,6 +21,9 @@ import {
 
 const ReactMarkdown = dynamic(
   () => import(/* webpackChunkName: "reactMarkdown" */ 'react-markdown'),
+  {
+    ssr: false,
+  },
 );
 
 const SyntaxHighlighter = dynamic(() =>

packages/shared/src/components/cards/common/Card.tsx

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode, ReactElement } from 'react';
 import classNames from 'classnames';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 import styles from './Card.module.css';
 import classed from '../../../lib/classed';
 import { Post } from '../../../graphql/posts';

packages/shared/src/components/cards/common/list/ListCard.tsx

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 import classed from '../../../../lib/classed';
 import { Image } from '../../../image/Image';
 

packages/shared/src/components/feeds/FeedPreviewControls.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
+import React, { ReactElement } from 'react';
 import { Button } from '../buttons/Button';
 import { ButtonVariant, ButtonIconPosition } from '../buttons/common';
 import { ArrowIcon } from '../icons';

packages/shared/src/components/modals/NewSourceModal.tsx

@@ -38,6 +38,7 @@ import { ReputationAlert } from './ReputationAlert';
 import { RequestKey } from '../../lib/query';
 import { ProfileImageSize } from '../ProfilePicture';
 import { gqlClient } from '../../graphql/common';
+import { withCredentials } from '../../lib/withCredentials';
 
 interface RSS {
   url: string;
@@ -136,7 +137,7 @@ export default function NewSourceModal(props: ModalProps): ReactElement {
         `${apiUrl}/scrape/source?url=${url}`,
         20000,
         {
-          credentials: 'same-origin',
+          credentials: withCredentials('same-origin'),
         },
       );
       return res.json();

packages/shared/src/contexts/DndContext.tsx

@@ -26,7 +26,6 @@ const DEFAULT_VALUE = {
   onDndSettings: null,
 };
 const DndContext = React.createContext<DndContextData>(DEFAULT_VALUE);
-const now = new Date();
 
 interface DndContextProviderProps {
   children: ReactNode;
@@ -35,6 +34,7 @@ interface DndContextProviderProps {
 export const DndContextProvider = ({
   children,
 }: DndContextProviderProps): ReactElement => {
+  const now = new Date();
   const [showDnd, setShowDnd] = useState(false);
   const [dndSettings, setDndSettings] =
     usePersistentContext<DndSettings>('dnd');

packages/shared/src/graphql/common.ts

@@ -3,6 +3,7 @@ import { QueryKey, UseInfiniteQueryOptions } from '@tanstack/react-query';
 import { GraphQLError } from 'graphql-request/dist/types';
 import type { PublicProfile, UserShortProfile } from '../lib/user';
 import { graphqlUrl } from '../lib/config';
+import { withCredentials } from '../lib/withCredentials';
 // GraphQL Relay pagination types
 
 export type ConnectionCursor = string;
@@ -140,7 +141,7 @@ export interface ResponseError {
 }
 
 export const gqlClient = new GraphQLClient(graphqlUrl, {
-  credentials: 'include',
+  credentials: withCredentials('include'),
   fetch: globalThis.fetch,
 });
 

packages/shared/src/hooks/log/useLogQueue.ts

@@ -3,6 +3,7 @@ import { MutableRefObject, useMemo, useRef } from 'react';
 import { apiUrl } from '../../lib/config';
 import useDebounceFn from '../useDebounceFn';
 import { ExtensionMessageType } from '../../lib/extension';
+import { withCredentials } from '../../lib/withCredentials';
 
 export interface LogEvent extends Record<string, unknown> {
   visit_id?: string;
@@ -37,7 +38,7 @@ export default function useLogQueue({
       const res = await fetchMethod(LOG_ENDPOINT, {
         method: 'POST',
         body: JSON.stringify({ events }),
-        credentials: 'include',
+        credentials: withCredentials('include'),
         headers: {
           'content-type': 'application/json',
         },
@@ -84,7 +85,7 @@ export default function useLogQueue({
               type: ExtensionMessageType.FetchRequest,
               args: {
                 body: JSON.stringify({ events }),
-                credentials: 'include',
+                credentials: withCredentials('include'),
                 method: 'POST',
                 headers: {
                   'content-type': 'application/json',

packages/shared/src/hooks/profile/useActivityTimeFilter.ts

@@ -11,13 +11,6 @@ import { useViewSize, ViewSize } from '../useViewSize';
 import SettingsContext from '../../contexts/SettingsContext';
 
 const BASE_YEAR = 2018;
-const currentYear = new Date().getFullYear();
-const dropdownOptions = [
-  'Last year',
-  ...Array.from(new Array(currentYear - BASE_YEAR + 1), (_, i) =>
-    (currentYear - i).toString(),
-  ),
-];
 
 type UseActivityTimeFilterRet = {
   selectedHistoryYear: number;
@@ -29,6 +22,18 @@ type UseActivityTimeFilterRet = {
 };
 
 export function useActivityTimeFilter(): UseActivityTimeFilterRet {
+  const dropdownOptions = useMemo(() => {
+    const currentYear = new Date().getFullYear();
+    const optionsLength = Math.max(currentYear - BASE_YEAR + 1, 0);
+
+    return [
+      'Last year',
+      ...Array.from(new Array(optionsLength), (_, i) =>
+        (currentYear - i).toString(),
+      ),
+    ];
+  }, []);
+
   const laptop = useViewSize(ViewSize.Laptop);
   const laptopL = useViewSize(ViewSize.LaptopL);
   const { sidebarExpanded } = useContext(SettingsContext);
@@ -47,7 +52,7 @@ export function useActivityTimeFilter(): UseActivityTimeFilterRet {
     const startYear = new Date(selected, 0, 1);
 
     return [addDays(endOfYear(startYear), 1), startYear];
-  }, [fullHistory, selectedHistoryYear]);
+  }, [fullHistory, selectedHistoryYear, dropdownOptions]);
 
   return {
     selectedHistoryYear,

packages/shared/src/hooks/useAutomation.ts

@@ -4,6 +4,7 @@ import {
   useMutation,
 } from '@tanstack/react-query';
 import { HttpError } from '../lib/errors';
+import { withCredentials } from '../lib/withCredentials';
 
 export enum Automation {
   Roaster = 'roaster',
@@ -28,7 +29,7 @@ export function useAutomation<
       const url = `${process.env.NEXT_PUBLIC_API_URL}/auto/${name}`;
       const res = await fetch(url, {
         method: 'POST',
-        credentials: 'include',
+        credentials: withCredentials('include'),
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify(vars),
         keepalive: true,

packages/shared/src/lib/boot.ts

@@ -8,6 +8,7 @@ import { Squad } from '../graphql/sources';
 import { decrypt } from '../components/crypto';
 import { MarketingCta } from '../components/marketingCta/common';
 import { Feed } from '../graphql/feed';
+import { withCredentials } from './withCredentials';
 
 interface NotificationsBootData {
   unreadNotificationsCount: number;
@@ -94,7 +95,7 @@ export async function getBootData(app: string, url?: string): Promise<Boot> {
 
   const res = await fetch(`${apiUrl}/boot${appRoute}?${params}`, {
     method: 'GET',
-    credentials: 'include',
+    credentials: withCredentials('include'),
     headers: { app, 'Content-Type': 'application/json' },
   });
   const result = await res.json();

packages/shared/src/lib/dynamicParent.tsx

@@ -2,10 +2,10 @@ import React, {
   ComponentClass,
   FunctionComponent,
   PropsWithChildren,
+  ReactElement,
   ReactHTML,
   ReactNode,
 } from 'react';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 
 type LoaderResult<P> = ComponentClass<P> | FunctionComponent<P>;
 

packages/shared/src/lib/kratos.ts

@@ -1,3 +1,4 @@
+import { withCredentials } from './withCredentials';
 import { authUrl, heimdallUrl } from './constants';
 
 export type EmptyObjectLiteral = Record<string, never | string>;
@@ -221,7 +222,7 @@ export const initializeKratosFlow = async (
 ): Promise<InitializationData> => {
   const search = new URLSearchParams(params);
   const res = await fetch(`${authUrl}/self-service${flow}/browser?${search}`, {
-    credentials: 'include',
+    credentials: withCredentials('include'),
     headers: { Accept: 'application/json' },
   });
 
@@ -233,7 +234,7 @@ export const getKratosSettingsFlow = async (
   id: string,
 ): Promise<InitializationData> => {
   const res = await fetch(`${authUrl}/self-service${flow}/flows?id=${id}`, {
-    credentials: 'include',
+    credentials: withCredentials('include'),
     headers: { Accept: 'application/json' },
   });
   return res.json();
@@ -244,15 +245,15 @@ export const getKratosFlow = async <T = InitializationData>(
   id: string,
 ): Promise<T> => {
   const res = await fetch(`${authUrl}/self-service${flow}?flow=${id}`, {
-    credentials: 'include',
+    credentials: withCredentials('include'),
     headers: { Accept: 'application/json' },
   });
   return res.json();
 };
 
 export const getKratosError = async (id: string): Promise<ErrorData> => {
   const res = await fetch(`${authUrl}/self-service/errors?id=${id}`, {
-    credentials: 'include',
+    credentials: withCredentials('include'),
     headers: { Accept: 'application/json' },
   });
   return res.json();
@@ -296,7 +297,7 @@ export const getKratosProviders = async (
 ): Promise<KratosProviderData> => {
   const search = flow ? new URLSearchParams({ flow }) : '';
   const res = await fetch(`${heimdallUrl}/api/list_providers?${search}`, {
-    credentials: 'include',
+    credentials: withCredentials('include'),
     method: flow ? 'GET' : 'POST',
   });
   return res.json();
@@ -313,7 +314,7 @@ export const submitKratosFlow = async <
 }: KratosFormParams<T>): Promise<RequestResponse<R, E>> => {
   const res = await fetch(action, {
     method,
-    credentials: 'include',
+    credentials: withCredentials('include'),
     headers: {
       'Content-Type': 'application/json',
       'X-CSRF-Token': params.csrf_token,
@@ -350,7 +351,7 @@ interface KratosSession {
 
 export const getKratosSession = async (): Promise<KratosSession> => {
   const res = await fetch(`${heimdallUrl}/api/whoami`, {
-    credentials: 'include',
+    credentials: withCredentials('include'),
   });
 
   if (res.status === 401) {
@@ -363,7 +364,7 @@ export const getKratosSession = async (): Promise<KratosSession> => {
 export const getVerificationSession =
   async (): Promise<VerificationSession> => {
     const res = await fetch(`${heimdallUrl}/api/get_verification_flow`, {
-      credentials: 'include',
+      credentials: withCredentials('include'),
     });
 
     if (!res.ok) {

packages/shared/src/lib/user.ts

@@ -8,6 +8,7 @@ import {
 import type { Company } from './userCompany';
 import type { ContentPreference } from '../graphql/contentPreference';
 import type { TopReader } from '../components/badges/TopReaderBadge';
+import { withCredentials } from './withCredentials';
 
 export enum Roles {
   Moderator = 'moderator',
@@ -152,14 +153,14 @@ export async function logout(reason: string): Promise<void> {
   const urlParams = reason ? `?${new URLSearchParams({ reason })}` : '';
   await fetch(`${apiUrl}/v1/users/logout${urlParams}`, {
     method: 'POST',
-    credentials: 'include',
+    credentials: withCredentials('include'),
   });
 }
 
 export async function deleteAccount(): Promise<void> {
   await fetch(`${apiUrl}/v1/users/me`, {
     method: 'DELETE',
-    credentials: 'include',
+    credentials: withCredentials('include'),
   });
 }
 
@@ -175,7 +176,7 @@ const getProfileRequest = async (method = fetch, id: string) => {
         id,
       },
     }),
-    credentials: 'include',
+    credentials: withCredentials('include'),
   });
   if (userRes.status === 404) {
     throw new Error('not found');
@@ -200,7 +201,7 @@ const getProfileV2ExtraRequest = async (
         id,
       },
     }),
-    credentials: 'include',
+    credentials: withCredentials('include'),
   });
   if (userRes.status === 404) {
     throw new Error('not found');