trevorpfiz · trevorpfiz · Nov 29, 2023 · Nov 29, 2023 · Nov 29, 2023 · Nov 29, 2023
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -13,36 +13,40 @@
     "with-env": "dotenv -e ../../.env --"
   },
   "dependencies": {
-    "@acme/api": "workspace:^0.1.0",
-    "@acme/auth": "workspace:^0.1.0",
-    "@acme/db": "workspace:^0.1.0",
+    "@acme/api": "workspace:^",
+    "@acme/auth": "workspace:^",
+    "@acme/db": "workspace:^",
+    "@acme/ui": "workspace:^",
+    "@hookform/resolvers": "^3.3.2",
     "@t3-oss/env-nextjs": "^0.7.1",
-    "@tanstack/react-query": "^5.8.1",
-    "@tanstack/react-query-devtools": "^5.8.1",
-    "@tanstack/react-query-next-experimental": "5.8.1",
-    "@trpc/client": "next",
-    "@trpc/next": "next",
-    "@trpc/react-query": "next",
-    "@trpc/server": "next",
-    "next": "^14.0.2",
+    "@tanstack/react-query": "^4.36.1",
+    "@trpc/client": "^10.43.6",
+    "@trpc/next": "^10.43.6",
+    "@trpc/react-query": "^10.43.6",
+    "@trpc/server": "^10.43.6",
+    "framer-motion": "^10.16.5",
+    "next": "^14.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "superjson": "2.2.0",
-    "zod": "^3.22.2"
+    "react-hook-form": "^7.48.2",
+    "react-wrap-balancer": "^1.1.0",
+    "server-only": "^0.0.1",
+    "superjson": "^2.2.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@acme/eslint-config": "workspace:^0.2.0",
-    "@acme/prettier-config": "workspace:^0.1.0",
-    "@acme/tailwind-config": "workspace:^0.1.0",
-    "@acme/tsconfig": "workspace:^0.1.0",
-    "@types/node": "^18.18.9",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@acme/eslint-config": "workspace:^",
+    "@acme/prettier-config": "workspace:^",
+    "@acme/tailwind-config": "workspace:^",
+    "@acme/tsconfig": "workspace:^",
+    "@types/node": "^18.18.13",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
     "dotenv-cli": "^7.3.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "prettier": "^3.1.0",
     "tailwindcss": "3.3.5",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   },
   "eslintConfig": {
     "root": true,

diff --git a/apps/nextjs/public/fonts/CalSans-SemiBold.ttf b/apps/nextjs/public/fonts/CalSans-SemiBold.ttf
diff --git a/apps/nextjs/src/app/(authenticated)/layout.tsx b/apps/nextjs/src/app/(authenticated)/layout.tsx
@@ -0,0 +1,60 @@
+import "~/styles/globals.css";
+
+import type { Metadata } from "next";
+import { Inter as FontSans } from "next/font/google";
+import LocalFont from "next/font/local";
+import { cookies } from "next/headers";
+
+import { cn } from "@acme/ui";
+import { Toaster } from "@acme/ui/toaster";
+
+import { TRPCReactProvider } from "~/trpc/react";
+
+const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+const fontCal = LocalFont({
+  src: "../../../public/fonts/CalSans-SemiBold.ttf",
+  variable: "--font-cal",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Create T3 Turbo",
+  description: "Simple monorepo with shared backend for web & mobile apps",
+  openGraph: {
+    title: "Create T3 Turbo",
+    description: "Simple monorepo with shared backend for web & mobile apps",
+    url: "https://create-t3-turbo.vercel.app",
+    siteName: "Create T3 Turbo",
+  },
+  twitter: {
+    card: "summary_large_image",
+    site: "@jullerino",
+    creator: "@jullerino",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={cn(
+          "flex h-full flex-col font-sans",
+          fontSans.variable,
+          fontCal.variable,
+        )}
+      >
+        <TRPCReactProvider cookies={cookies().toString()}>
+          {children}
+        </TRPCReactProvider>
+        <Toaster />
+      </body>
+    </html>
+  );
+}
diff --git a/apps/nextjs/src/app/(authenticated)/onboarding/_components/done.tsx b/apps/nextjs/src/app/(authenticated)/onboarding/_components/done.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useTransition } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { motion } from "framer-motion";
+
+export function Done() {
+  const router = useRouter();
+  const search = useSearchParams();
+  const step = search.get("step");
+
+  const [_, startTransition] = useTransition();
+  useEffect(() => {
+    if (step === "done") {
+      setTimeout(() => {
+        startTransition(() => {
+          router.push(`/dashboard`);
+          router.refresh();
+        });
+      }, 2000);
+    }
+  }, [router, step]);
+
+  return (
+    <motion.div
+      className=" flex h-full w-full flex-col items-center justify-center p-8"
+      exit={{ opacity: 0, scale: 0.95 }}
+      initial={{ background: "transparent" }}
+      animate={{ background: "var(--background)" }}
+      transition={{ duration: 0.3, type: "spring" }}
+    >
+      <motion.div
+        variants={{
+          hidden: { opacity: 0, x: 250 },
+          show: {
+            opacity: 1,
+            x: 0,
+            transition: { duration: 0.4, type: "spring" },
+          },
+        }}
+        initial="hidden"
+        animate="show"
+        className="flex flex-col space-y-4 rounded-xl bg-background/60 p-8"
+      >
+        <h1 className="font-cal text-2xl font-bold transition-colors sm:text-3xl">
+          You are all set!
+        </h1>
+        <p className="max-w-md text-muted-foreground transition-colors sm:text-lg">
+          Congratulations, you have successfully finished the condition
+          assessment. Check out the{" "}
+          <a
+            href="https://docs.mithrid.health"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Clinical Docs
+          </a>{" "}
+          to learn more on our treatment process.
+        </p>
+        <p className="text-sm text-muted-foreground">
+          You will be redirected to your patient dashboard momentarily.
+        </p>
+      </motion.div>
+    </motion.div>
+  );
+}
diff --git a/apps/nextjs/src/app/(authenticated)/onboarding/_components/section.tsx b/apps/nextjs/src/app/(authenticated)/onboarding/_components/section.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { api } from "~/trpc/react";
+import { CheckboxQuestion } from "./checkbox-question";
+import { RadioQuestion } from "./radio-question";
+
+interface SectionProps {
+  sectionIndex: number;
+  templateId: string;
+}
+
+export function Section(props: SectionProps) {
+  const { sectionIndex, templateId } = props;
+
+  const { isPending, isError, data, error } =
+    api.assessmentInstance.byId.useQuery({ templateId });
+
+  useEffect(() => {
+    // Any logic that needs to happen when the section becomes active.
+  }, [sectionIndex]);
+
+  if (isPending) {
+    return <span>Loading...</span>;
+  }
+
+  if (isError) {
+    return <span>Error: {error.message}</span>;
+  }
+
+  const sectionJSON = data?.assessmentTemplate.template[sectionIndex];
+
+  return (
+    <div>
+      {sectionJSON?.questions.map((questionJSON, questionIndex) => {
+        const key = `${templateId}-${sectionIndex}-${questionIndex}`;
+        if (questionJSON.type === "radio") {
+          return (
+            <RadioQuestion
+              key={key}
+              sectionIndex={sectionIndex}
+              questionIndex={questionIndex}
+              questionId={key}
+              templateId={props.templateId}
+            />
+          );
+        } else if (questionJSON.type === "checkbox") {
+          return (
+            <CheckboxQuestion
+              key={key}
+              sectionIndex={sectionIndex}
+              questionIndex={questionIndex}
+              questionId={key}
+              templateId={props.templateId}
+            />
+          );
+        } else {
+          // handle unsupported types or throw an error
+          console.warn("Unsupported question type:", questionJSON.type);
+          return null;
+        }
+      })}
+    </div>
+  );
+}
diff --git a/apps/nextjs/src/app/(authenticated)/onboarding/_components/welcome-form.tsx b/apps/nextjs/src/app/(authenticated)/onboarding/_components/welcome-form.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import type { NewPatient } from "@acme/api/src/validators";
+import { newPatientSchema } from "@acme/api/src/validators";
+import { Button } from "@acme/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@acme/ui/form";
+import { Input } from "@acme/ui/input";
+import { useToast } from "@acme/ui/use-toast";
+
+import { useZodForm } from "~/lib/zod-form";
+
+export const WelcomeForm = (props: {
+  onSuccess?: (data: NewPatient) => void;
+}) => {
+  const router = useRouter();
+  const toaster = useToast();
+
+  const form = useZodForm({
+    schema: newPatientSchema,
+    defaultValues: {
+      name: "",
+      address: "",
+      phoneNumber: "",
+    },
+  });
+
+  async function onSubmit(data: NewPatient) {
+    try {
+      //   const projectId = await api.project.create.mutate(data); TODO
+      if (props.onSuccess) {
+        props.onSuccess({
+          ...data,
+        });
+      } else {
+        router.push(`/onboarding`);
+      }
+      toaster.toast({
+        title: "You submitted the following values:",
+        description: (
+          <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+            <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+          </pre>
+        ),
+      });
+    } catch (error) {
+      toaster.toast({
+        title: "Error submitting answer",
+        variant: "destructive",
+        description:
+          "An issue occurred while submitting answer. Please try again.",
+      });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel>{`Name`}</FormLabel>
+              <FormControl>
+                <Input placeholder="Full name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="address"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel>{`Address`}</FormLabel>
+              <FormControl>
+                <Input placeholder="Address" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="phoneNumber"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel>{`Phone number`}</FormLabel>
+              <FormControl>
+                <Input placeholder="555-555-5555" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" variant="outline">
+          Submit
+        </Button>
+      </form>
+    </Form>
+  );
+};