toadmilk Posts - Answer Overflow

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Text content did not match. Server: "3/07/23" Client: "03/07/2023"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Text content did not match. Server: "3/07/23" Client: "03/07/2023"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

const PostPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
  { id }
) => {
...
const postCreatedAt = post ? dateTimeFormatter.format(post.createdAt) : "";
... }

const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
  dateStyle: "short",
});

export const getStaticPaths: GetStaticPaths = () => {
  return {
    paths: [],
    fallback: "blocking",
  }
}

export async function getStaticProps(context: GetStaticPropsContext<{id: string}>) {
  const id = context.params?.id;

  if (id == null) {
    return {
      redirect: {
        destination: "/"
      }
    }
  }

  const ssg = ssgHelper();
  await ssg.post.getById.prefetch({id});

  return {
    props: {
      trpcState: ssg.dehydrate(),
      id,
    }
  }
}

const PostPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
  { id }
) => {
...
const postCreatedAt = post ? dateTimeFormatter.format(post.createdAt) : "";
... }

const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
  dateStyle: "short",
});

export const getStaticPaths: GetStaticPaths = () => {
  return {
    paths: [],
    fallback: "blocking",
  }
}

export async function getStaticProps(context: GetStaticPropsContext<{id: string}>) {
  const id = context.params?.id;

  if (id == null) {
    return {
      redirect: {
        destination: "/"
      }
    }
  }

  const ssg = ssgHelper();
  await ssg.post.getById.prefetch({id});

  return {
    props: {
      trpcState: ssg.dehydrate(),
      id,
    }
  }
}

8 replies

TTCTheo's Typesafe Cult

•Created by toadmilk on 7/9/2023 in #questions

how to make a custom styled UploadButton

export const UploadImage = () => {
  return (
    <div className="flex flex-col items-center justify-between p-4">
      <UploadButton
        endpoint="postImage"
        onClientUploadComplete={(res) => {
          toast.success('Image uploaded successfully! 😄');
        }}
        onUploadError={(error: Error) => {
          toast.error(error.message + " 😭");
        }}
      />
    </div>
  ) 
};

export const UploadImage = () => {
  return (
    <div className="flex flex-col items-center justify-between p-4">
      <UploadButton
        endpoint="postImage"
        onClientUploadComplete={(res) => {
          toast.success('Image uploaded successfully! 😄');
        }}
        onUploadError={(error: Error) => {
          toast.error(error.message + " 😭");
        }}
      />
    </div>
  ) 
};

My goal is to use an icon <BsImage /> instead of the button and to be able to select a file then upon a function running the upload being called. Thanks in advance 😄

4 replies

TtRPC

•Created by toadmilk on 7/7/2023 in #❓-help

type error

TS2322: Type '{ name: string; bio: string; location: string; website: string; }' is not assignable to type '(Without<UserUpdateInput, UserUncheckedUpdateInput> & UserUncheckedUpdateInput) | (Without<...> & UserUpdateInput)'.   Object literal may only specify known properties, and 'bio' does not exist in type '(Without<UserUpdateInput, UserUncheckedUpdateInput> & UserUncheckedUpdateInput) | (Without<...> & UserUpdateInput)'.  index.d.ts(6234, 5): The expected type comes from property 'data' which is declared here on type '{ select?: UserSelect<DefaultArgs> | null | undefined; include?: UserInclude<DefaultArgs> | null | undefined; data: (Without<UserUpdateInput, UserUncheckedUpdateInput> & UserUncheckedUpdateInput) | (Without<...> & UserUpdateInput); where: UserWhereUniqueInput; }'

TS2322: Type '{ name: string; bio: string; location: string; website: string; }' is not assignable to type '(Without<UserUpdateInput, UserUncheckedUpdateInput> & UserUncheckedUpdateInput) | (Without<...> & UserUpdateInput)'.   Object literal may only specify known properties, and 'bio' does not exist in type '(Without<UserUpdateInput, UserUncheckedUpdateInput> & UserUncheckedUpdateInput) | (Without<...> & UserUpdateInput)'.  index.d.ts(6234, 5): The expected type comes from property 'data' which is declared here on type '{ select?: UserSelect<DefaultArgs> | null | undefined; include?: UserInclude<DefaultArgs> | null | undefined; data: (Without<UserUpdateInput, UserUncheckedUpdateInput> & UserUncheckedUpdateInput) | (Without<...> & UserUpdateInput); where: UserWhereUniqueInput; }'

editProfile: protectedProcedure.input(z.object({
          name: z.string(),
          bio: z.string(),
          location: z.string(),
          website: z.string(),
      }))
      .mutation(async ({ input: { name, bio, location, website }, ctx }) => {
        const currentUserId = ctx.session.user.id;
          return await ctx.prisma.user.update({
            where: { id: currentUserId },
            data: { name, bio, location, website },
        });
    }),

editProfile: protectedProcedure.input(z.object({
          name: z.string(),
          bio: z.string(),
          location: z.string(),
          website: z.string(),
      }))
      .mutation(async ({ input: { name, bio, location, website }, ctx }) => {
        const currentUserId = ctx.session.user.id;
          return await ctx.prisma.user.update({
            where: { id: currentUserId },
            data: { name, bio, location, website },
        });
    }),

when hovering bio in the data: { name, bio, location, website }, line any idea whats happening? it works as intended it just gives me an error on my ide.

2 replies

TtRPC

•Created by toadmilk on 7/4/2023 in #❓-help

problem with useContext (likely easy fix)

3 replies

TTCTheo's Typesafe Cult

•Created by toadmilk on 6/30/2023 in #questions

[Solved] for the audio on uploadthing what filetypes exactly does it accept?

I don't want people uploading wavs just mp3s or if they do upload a wav convert it to mp3 without losing too much quality.

3 replies

Gaming

Programming