Silas | @silaspath
Silas | @silaspath
PostsComments
TTCTheo's Typesafe Cult
Created by ♡🔮cynthia🐾♡ on 6/11/2023 in #questions
App dir + tRPC +
how much type-safety do u really want with /app? t3 already gives u a prisma client so u can access that from /app to do what u want
21 replies
TTCTheo's Typesafe Cult
Created by ♡🔮cynthia🐾♡ on 6/11/2023 in #questions
App dir + tRPC +
hm this is all so experimental I might just be type-unsafe for sake of building my feature :p
21 replies
TTCTheo's Typesafe Cult
Created by ♡🔮cynthia🐾♡ on 6/11/2023 in #questions
App dir + tRPC +
crazy. I literally came here to ask about the same thing on a saturday night 🙂
21 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 5/23/2023 in #questions
bundle size and browser performance
4 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 5/23/2023 in #questions
bundle size and browser performance
page speed insights metrics seem to jump. I just used the next bundle analyzer and that is consistent. I think want I want to clear up is: how much do these animation libraries affect the main thread?
4 replies
TTCTheo's Typesafe Cult
Created by constraints on 4/23/2023 in #questions
Tailwind seemingly not working randomly when deployed.
ah yes
6 replies
TTCTheo's Typesafe Cult
Created by constraints on 4/23/2023 in #questions
Tailwind seemingly not working randomly when deployed.
what is the applied property upon inspection for one of those buttons?
6 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
@joerambo thanks for the tips. I haven't implemented the middleware option yet but I commented in the code that I should much, much later an amazing amount of effort was put on this. more of a react problem than anything else haha.
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
thanks, so to make sure, it worked out for you?
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
if I were to implement that, each page must then use getStaticProps? or would middleware be involved?
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
I'm more of a fan for this being sitewide
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
// imports~

if (typeof window !== "undefined") {
  let storedTheme = localStorage?.getItem("theme");
  if (!storedTheme) storedTheme = "light";

  document.documentElement.classList.add(storedTheme);
}

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);
// imports~

if (typeof window !== "undefined") {
  let storedTheme = localStorage?.getItem("theme");
  if (!storedTheme) storedTheme = "light";

  document.documentElement.classList.add(storedTheme);
}

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
like edit globals.css?
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
though you all have nudged me in the right direction and I think I found the best answer... turns out I should put this code in _app ... 
if (typeof window !== "undefined") {
  let storedTheme = localStorage?.getItem("theme");
  if (!storedTheme) storedTheme = "light";
  document.documentElement.classList.add(storedTheme);
}
if (typeof window !== "undefined") {
  let storedTheme = localStorage?.getItem("theme");
  if (!storedTheme) storedTheme = "light";
  document.documentElement.classList.add(storedTheme);
}
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
sorta. the problem was that the light them would flash before the browser did find the local storage and set it to dark
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/17/2023 in #questions
theme in storage
this is understood. the 'class' option is selected
43 replies
TTCTheo's Typesafe Cult
Created by Silas | @silaspath on 4/12/2023 in #questions
mapping a column in model to another model
I think I figured it out but will prob break? I defined a compound unique constraint for User id and name: 
// ~/schema.prisma

model User {
    id            String    @id @default(cuid())
    name          String   
    email         String?   @unique
    emailVerified DateTime?
    image         String?
    accounts      Account[]
    sessions      Session[]
    comments      Comment[]

    @@unique([id, name])
}
// ~/schema.prisma

model User {
    id            String    @id @default(cuid())
    name          String   
    email         String?   @unique
    emailVerified DateTime?
    image         String?
    accounts      Account[]
    sessions      Session[]
    comments      Comment[]

    @@unique([id, name])
}
so now my Comment can have two fields that refer to user: 
// ~/schema.prisma

model Comment {
    id         String     @id @default(cuid())
    createdAt  DateTime   @default(now())
    updatedAt  DateTime   @updatedAt
    userId     String
    userName   String
    content    String     @db.Text
    user       User       @relation(fields: [userId, userName], references: [id, name])
}
// ~/schema.prisma

model Comment {
    id         String     @id @default(cuid())
    createdAt  DateTime   @default(now())
    updatedAt  DateTime   @updatedAt
    userId     String
    userName   String
    content    String     @db.Text
    user       User       @relation(fields: [userId, userName], references: [id, name])
}
then my session callback is updated to add github user.name to session user.name: 
// ~/server/auth.ts
callbacks: {
    session({ session, user }) {
      console.log(`auth -- user`, user);

      if (session.user) {
        session.user.id = user.id;
        session.user.name = user.name || "";
      }
      return session;
    },
  },
// ~/server/auth.ts
callbacks: {
    session({ session, user }) {
      console.log(`auth -- user`, user);

      if (session.user) {
        session.user.id = user.id;
        session.user.name = user.name || "";
      }
      return session;
    },
  },
... however see that logical OR -- I don't want it. I tried to find how to update user type to guarantee it will return name then I had to update my router where it used to just rely on userId. now I have to specify a user object -> create object -> name: 
// ~/server/api/routers/guestbook.ts

create: protectedProcedure
    .input(z.object({ content: z.string() }))
    .mutation(({ ctx, input }) => {
      return ctx.prisma.comment.create({
        data: {
          content: input.content,
          user: {
            create: {
              name: ctx.session.user.name,
            },
          },
        },
      });
    }),
// ~/server/api/routers/guestbook.ts

create: protectedProcedure
    .input(z.object({ content: z.string() }))
    .mutation(({ ctx, input }) => {
      return ctx.prisma.comment.create({
        data: {
          content: input.content,
          user: {
            create: {
              name: ctx.session.user.name,
            },
          },
        },
      });
    }),
if I'm missing some things please let me know!
3 replies