migrate to app dir and ssr

apps/web/src/utils/api.ts

@@ -1,86 +0,0 @@
-/**
- * This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
- * contains the Next.js App-wrapper, as well as your type-safe React Query hooks.
- *
- * We also create a few inference helpers for input and output types.
- */
-import { toast } from '@/components/ui/use-toast';
-import type { AppRouter } from '@/server/api/root';
-import { httpLink, loggerLink } from '@trpc/client';
-import type { TRPCClientErrorBase } from '@trpc/client';
-import { createTRPCNext } from '@trpc/next';
-import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
-import superjson from 'superjson';
-
-const getBaseUrl = () => {
-  if (typeof window !== 'undefined') return ''; // browser should use relative url
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
-  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
-};
-
-/** A set of type-safe react-query hooks for your tRPC API. */
-export const api = createTRPCNext<AppRouter>({
-  config() {
-    return {
-      queryClientConfig: {
-        defaultOptions: {
-          queries: {
-            refetchOnWindowFocus: false,
-            refetchOnReconnect: false,
-            refetchOnMount: false,
-            enabled: typeof window !== 'undefined',
-          },
-        },
-      },
-      /**
-       * Transformer used for data de-serialization from the server.
-       *
-       * @see https://trpc.io/docs/data-transformers
-       */
-      transformer: superjson,
-
-      /**
-       * Links used to determine request flow from client to server.
-       *
-       * @see https://trpc.io/docs/links
-       */
-      links: [
-        loggerLink({
-          enabled: (opts) =>
-            process.env.NODE_ENV === 'development' ||
-            (opts.direction === 'down' && opts.result instanceof Error),
-        }),
-        httpLink({
-          url: `${getBaseUrl()}/api/trpc`,
-        }),
-      ],
-    };
-  },
-  /**
-   * Whether tRPC should await queries when server rendering pages.
-   *
-   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
-   */
-  ssr: false,
-});
-
-/**
- * Inference helper for inputs.
- *
- * @example type HelloInput = RouterInputs['example']['hello']
- */
-export type RouterInputs = inferRouterInputs<AppRouter>;
-
-/**
- * Inference helper for outputs.
- *
- * @example type HelloOutput = RouterOutputs['example']['hello']
- */
-export type RouterOutputs = inferRouterOutputs<AppRouter>;
-
-export function handleError(error: TRPCClientErrorBase<any>) {
-  toast({
-    title: 'Error',
-    description: error.message,
-  });
-}

apps/web/src/utils/constants.ts

@@ -14,6 +14,24 @@ export const chartTypes = {
   area: 'Area',
 };
 
+export const lineTypes = {
+  monotone: 'Monotone',
+  monotoneX: 'Monotone X',
+  monotoneY: 'Monotone Y',
+  linear: 'Linear',
+  natural: 'Natural',
+  basis: 'Basis',
+  step: 'Step',
+  stepBefore: 'Step before',
+  stepAfter: 'Step after',
+  basisClosed: 'Basis closed',
+  basisOpen: 'Basis open',
+  bumpX: 'Bump X',
+  bumpY: 'Bump Y',
+  bump: 'Bump',
+  linearClosed: 'Linear closed',
+};
+
 export const intervals = {
   minute: 'Minute',
   day: 'Day',
@@ -50,3 +68,22 @@ export const timeRanges = {
 export function isMinuteIntervalEnabledByRange(range: keyof typeof timeRanges) {
   return range === '30min' || range === '1h';
 }
+
+export function isHourIntervalEnabledByRange(range: keyof typeof timeRanges) {
+  return (
+    isMinuteIntervalEnabledByRange(range) ||
+    range === 'today' ||
+    range === '24h'
+  );
+}
+
+export function getDefaultIntervalByRange(range: keyof typeof timeRanges) {
+  if (range === '30min' || range === '1h') {
+    return 'minute';
+  } else if (range === 'today' || range === '24h') {
+    return 'hour';
+  } else if (range === '7d' || range === '14d' || range === '1m') {
+    return 'day';
+  }
+  return 'month';
+}

apps/web/src/utils/getters.ts

@@ -1,6 +1,6 @@
 import type { Profile } from '@mixan/db';
 
 export function getProfileName(profile: Profile | undefined | null) {
-  if (!profile) return '';
+  if (!profile) return 'No profile';
   return [profile.first_name, profile.last_name].filter(Boolean).join(' ');
 }

apps/web/src/utils/theme.ts

@@ -4,7 +4,7 @@ import tailwinConfig from '../../tailwind.config';
 
 export const resolvedTailwindConfig = resolveConfig(tailwinConfig);
 
-export const theme = resolvedTailwindConfig.theme;
+export const theme = resolvedTailwindConfig.theme as Record<string, any>;
 
 export function getChartColor(index: number): string {
   const colors = theme?.colors ?? {};

apps/web/src/utils/validation.ts

@@ -1,8 +1,16 @@
 import { z } from 'zod';
 
-import { chartTypes, intervals, operators, timeRanges } from './constants';
+import {
+  chartTypes,
+  intervals,
+  lineTypes,
+  operators,
+  timeRanges,
+} from './constants';
 
-function objectToZodEnums<K extends string>(obj: Record<K, any>): [K, ...K[]] {
+export function objectToZodEnums<K extends string>(
+  obj: Record<K, any>
+): [K, ...K[]] {
   const [firstKey, ...otherKeys] = Object.keys(obj) as K[];
   return [firstKey!, ...otherKeys];
 }
@@ -31,11 +39,14 @@ export const zChartBreakdowns = z.array(zChartBreakdown);
 
 export const zChartType = z.enum(objectToZodEnums(chartTypes));
 
+export const zLineType = z.enum(objectToZodEnums(lineTypes));
+
 export const zTimeInterval = z.enum(objectToZodEnums(intervals));
 
 export const zChartInput = z.object({
   name: z.string(),
   chartType: zChartType,
+  lineType: zLineType,
   interval: zTimeInterval,
   events: zChartEvents,
   breakdowns: zChartBreakdowns,