Improve styles on sentence generator (#113)

.vscode/settings.json

@@ -1,3 +1,23 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#70bbd3",
+    "activityBar.background": "#70bbd3",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#c33ca2",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#70bbd3",
+    "statusBar.background": "#49a8c7",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#348ca9",
+    "statusBarItem.remoteBackground": "#49a8c7",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#49a8c7",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#49a8c799",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#49a8c7"
 }

src/components/sentences/SentenceCreatorDialog.tsx

@@ -38,7 +38,7 @@ export function SentenceCreatorDialog() {
   return (
     <div>
       <Dialog open={isModalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="max-w-[800px]">
+        <DialogContent className="max-h-[90vh] max-w-[800px] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>Sentence Creator Helper</DialogTitle>
             <DialogDescription>

src/components/sentences/SentenceCreatorForm.tsx

@@ -138,7 +138,7 @@ export function SentenceCreatorForm(props: Props) {
   };
 
   return (
-    <div className="grid grid-cols-[1.5fr,1fr] gap-4">
+    <div className="grid  grid-cols-1 gap-4  md:grid-cols-[1.5fr,1fr]">
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <FormField
@@ -286,7 +286,10 @@ export function SentenceCreatorForm(props: Props) {
               <Icons.spinner />{" "}
             </p>
           )}
-          {!isLoadingSentences && newSentences?.length && (
+          {!isLoadingSentences && newSentences?.length == 0 && (
+            <p>No sentences yet</p>
+          )}
+          {!isLoadingSentences && newSentences?.length > 0 && (
             <div>
               <div>
                 <ButtonLoading

src/hooks/useQuerySsr.ts

@@ -11,8 +11,7 @@ import { type TRPCClientErrorLike } from "@trpc/client";
 import { useContext } from "react";
 
 import { SsrContext } from "~/lib/trpc/SsrContext";
-
-import { deepSortObjectByKeys } from "../lib/deepSortObjectByKeys";
+import { deepSortObjectByKeys } from "~/lib/deepSortObjectByKeys";
 
 export function useQuerySsr<
   QueryProcedure extends AnyQueryProcedure,
@@ -40,11 +39,15 @@ export function useQuerySsr<
 
   // traverse the keys into the context object, assume arbitrary depth
   const initialDataForProc = fullQueryKey.reduce((acc, key) => {
+    if (acc === undefined) {
+      return undefined;
+    }
+
     const possibleData = (acc as any)[key];
     if (possibleData === undefined) {
       // throw error if dev
       if (process.env.NODE_ENV === "development") {
-        throw new Error(
+        console.error(
           `Could not find initialData for ${fullQueryKey.join(".")}`
         );
       }

src/hooks/useQuerySsrServer.ts

@@ -12,8 +12,7 @@ import { type SsrQueryShape } from "~/lib/trpc/SsrContext";
 import { getTrpcServer } from "~/lib/trpc/serverClient";
 import { deepMerge } from "~/lib/deepMerge";
 import { appRouter } from "~/server/api/root";
-
-import { deepSortObjectByKeys } from "../lib/deepSortObjectByKeys";
+import { deepSortObjectByKeys } from "~/lib/deepSortObjectByKeys";
 
 const routerKeyMap = createRouterMap(appRouter);
 
@@ -64,22 +63,28 @@ async function getDataForSingleProc<QueryProcedure extends AnyQueryProcedure>(
     return (acc as any)[key];
   }, trpcServer);
 
-  const result = await (trpcServerProc as any)(params);
-
-  // iterate keys and set the initialData
-  // generalize that to arbitrary depth, reduce right
-  // this adds the params to make a unique key
-  const initialData = keys.concat(paramsAsString).reduceRight((acc, key) => {
-    return {
-      [key]: acc,
-    };
-  }, result) as SsrQueryShape<typeof appRouter>;
-
-  // nest result based on keys
-  // keys = ['awardRouter', 'getActiveProfile']
-  // TODO: need to link the initial data to the the params also
-  //   console.log("useQuery", { keys, initialData, initialDataForProc });
-  return initialData;
+  try {
+    // this call will fail if user is not authenticated
+    const result = await (trpcServerProc as any)(params);
+
+    // iterate keys and set the initialData
+    // generalize that to arbitrary depth, reduce right
+    // this adds the params to make a unique key
+    const initialData = keys.concat(paramsAsString).reduceRight((acc, key) => {
+      return {
+        [key]: acc,
+      };
+    }, result) as SsrQueryShape<typeof appRouter>;
+
+    // nest result based on keys
+    // keys = ['awardRouter', 'getActiveProfile']
+    // TODO: need to link the initial data to the the params also
+    //   console.log("useQuery", { keys, initialData, initialDataForProc });
+    return initialData;
+  } catch (e) {
+    console.log("error", e);
+    return {};
+  }
 }
 
 export function createRouterMap(router: AnyRouter) {

src/server/openai/generations.ts

@@ -3,8 +3,7 @@ import { type ChatCompletionMessageParam } from "openai/resources/chat";
 import { type z } from "zod";
 
 import { env } from "~/env.mjs";
-
-import { type GptSentenceSchema } from "../api/routers/inputSchemas";
+import { type GptSentenceSchema } from "~/server/api/routers/inputSchemas";
 
 const openai = new OpenAI({
   apiKey: env.OPENAI_API_KEY,
@@ -130,7 +129,7 @@ export async function generateSentencesWithSettings(
     "You are an assistant for a phonics learning program.",
     "Your task is to generate sentences for young kids to read aloud.",
     "The user will give you a list of words to use in the sentences.",
-    "If the user gives you words on separate lines, ensure that all words are used in the same sentences.",
+    "If the user gives you words on separate lines, try to use all words in the same sentences.  Ensure the sentence still makes sense.",
     "Return each sentence on a new line.",
     "Do not add any extra punctuation around the sentence.",
     "Do not include 'Sentence N:' at the beginning of the sentence.",