utdev Comments - Answer Overflow

"use client"

import { useEffect, useRef, useState } from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { DashboardOverview } from "@/components/overview"

export function DashboardSheet() {
  const sheetButtonRef = useRef<HTMLButtonElement>(null)
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [isOpen, setIsOpen] = useState(false)

  const handleOverviewRoute = () => {
    router.push(`${pathname}?tab=overview`)
  }

  useEffect(() => {
    if (searchParams.get("tab") === "overview") {
      setIsOpen(true)
    }
  }, [pathname, router, searchParams, setIsOpen])

  return (
    <Sheet open={isOpen}>
      <SheetTrigger asChild>
        <Button onClick={handleOverviewRoute}>Open Overview</Button>
      </SheetTrigger>
      <SheetContent side="rightHalfFull" className="z-[1200]">
        <SheetHeader>
          <SheetTitle className="py-2">Overview</SheetTitle>
          <SheetDescription>
            <DashboardOverview />
          </SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

"use client"

import { useEffect, useRef, useState } from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { DashboardOverview } from "@/components/overview"

export function DashboardSheet() {
  const sheetButtonRef = useRef<HTMLButtonElement>(null)
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [isOpen, setIsOpen] = useState(false)

  const handleOverviewRoute = () => {
    router.push(`${pathname}?tab=overview`)
  }

  useEffect(() => {
    if (searchParams.get("tab") === "overview") {
      setIsOpen(true)
    }
  }, [pathname, router, searchParams, setIsOpen])

  return (
    <Sheet open={isOpen}>
      <SheetTrigger asChild>
        <Button onClick={handleOverviewRoute}>Open Overview</Button>
      </SheetTrigger>
      <SheetContent side="rightHalfFull" className="z-[1200]">
        <SheetHeader>
          <SheetTitle className="py-2">Overview</SheetTitle>
          <SheetDescription>
            <DashboardOverview />
          </SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

4 replies

TTCTheo's Typesafe Cult

•Created by utdev on 1/7/2024 in #questions

Update route info on click

ok sounds good to me ty

11 replies

TTCTheo's Typesafe Cult

•Created by utdev on 1/7/2024 in #questions

Update route info on click

Or something like this? /dashboard?tab=overview&subtab=analytics

11 replies

TTCTheo's Typesafe Cult

•Created by utdev on 1/7/2024 in #questions

Update route info on click

@Yiannis The sidebar has 4 section which I can click, I thought of updating the route there aswell so I would have something like /dashboard/overview/analytics, /dashboard/overview/foo etc.

11 replies

TTCTheo's Typesafe Cult

•Created by utdev on 10/9/2023 in #questions

Should I use Promise.all? When should I use it

allSettled that was it

6 replies

TTCTheo's Typesafe Cult

•Created by utdev on 10/9/2023 in #questions

Should I use Promise.all? When should I use it

ty, I remember this one and I also remember there being a better function for promise all

6 replies

TTCTheo's Typesafe Cult

•Created by utdev on 7/16/2023 in #questions

Help adding trpc-openapi to t3 app

😕

20 replies

TTCTheo's Typesafe Cult

•Created by utdev on 7/16/2023 in #questions

Help adding trpc-openapi to t3 app

@ccccjjjjeeee yes but I am a bit confused I am "stuck" at this step:

import http from 'http';
import { createOpenApiHttpHandler } from 'trpc-openapi';

import { appRouter } from '../appRouter';

const server = http.createServer(createOpenApiHttpHandler({ router: appRouter })); /* 👈 */

server.listen(3000);

import http from 'http';
import { createOpenApiHttpHandler } from 'trpc-openapi';

import { appRouter } from '../appRouter';

const server = http.createServer(createOpenApiHttpHandler({ router: appRouter })); /* 👈 */

server.listen(3000);

Where would I need to put it and also would it listen to the same port?

20 replies

TTCTheo's Typesafe Cult

•Created by utdev on 7/16/2023 in #questions

Help adding trpc-openapi to t3 app

The t3 app runs on http://localhost:3000, not even sure if the baseUrl should be the same url in the openApiDocument

20 replies

TTCTheo's Typesafe Cult

•Created by utdev on 5/27/2023 in #questions

Prisma zod enum validation

How can I properly use the enum type?

5 replies

TTCTheo's Typesafe Cult

•Created by utdev on 5/27/2023 in #questions

Prisma zod enum validation

This is my create route:

export const realEstateRouter = router({
    create: protectedProcedure
        .input(createRealEstateSchema)
        .mutation(async ({ ctx, input }) => {
            const userId = ctx.auth.userId;
...
            const newRealEstate = await ctx.prisma.realEstate.create({
                data: {
                    ...rest,
                    type: rest.type as unknown as RealEstateType,
                    status: RealEstateStatus.PENDING,
                    user: {
                        connect: {
                            userId: userId,
                        }
                    },
                    contactId: undefined,
                    location: {
                        create: newLocation,
                    },
                    features: {
                        create: newFeatures,
                    },
                    pricing: {
                        create: newPricing,
                    },
                },
            });
...

export const realEstateRouter = router({
    create: protectedProcedure
        .input(createRealEstateSchema)
        .mutation(async ({ ctx, input }) => {
            const userId = ctx.auth.userId;
...
            const newRealEstate = await ctx.prisma.realEstate.create({
                data: {
                    ...rest,
                    type: rest.type as unknown as RealEstateType,
                    status: RealEstateStatus.PENDING,
                    user: {
                        connect: {
                            userId: userId,
                        }
                    },
                    contactId: undefined,
                    location: {
                        create: newLocation,
                    },
                    features: {
                        create: newFeatures,
                    },
                    pricing: {
                        create: newPricing,
                    },
                },
            });
...

But I get this error

Argument type: Got invalid value 'apartment' on prisma.createOneRealEstate. Provided String, expected RealEstateTypeCreateNestedOneWithoutRealEstatesInput:
type RealEstateTypeCreateNestedOneWithoutRealEstatesInput {
  create?: RealEstateTypeCreateWithoutRealEstatesInput | RealEstateTypeUncheckedCreateWithoutRealEstatesInput
  connectOrCreate?: RealEstateTypeCreateOrConnectWithoutRealEstatesInput
  connect?: RealEstateTypeWhereUniqueInput
}

Argument type: Got invalid value 'apartment' on prisma.createOneRealEstate. Provided String, expected RealEstateTypeCreateNestedOneWithoutRealEstatesInput:
type RealEstateTypeCreateNestedOneWithoutRealEstatesInput {
  create?: RealEstateTypeCreateWithoutRealEstatesInput | RealEstateTypeUncheckedCreateWithoutRealEstatesInput
  connectOrCreate?: RealEstateTypeCreateOrConnectWithoutRealEstatesInput
  connect?: RealEstateTypeWhereUniqueInput
}

5 replies

TTCTheo's Typesafe Cult

•Created by utdev on 5/14/2023 in #questions

S3 File Upload

This is the frontend:

  const handleFileUpload = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    if (!event.target.files) return;
    const file = event.target.files[0];
    if (!file) {
      throw new Error("No file selected");
    }
    const formData = new FormData();
    try {
      const response = await fetch("/api/s3/upload", {
        method: "POST",
        body: formData,
        headers: { "Content-Type": "multipart/form-data" },
      });

      if (response.ok) {
        console.log("File uploaded successfully");
      } else {
        console.error("Error uploading file:", response.statusText);
      }
    } catch (error) {
      console.error("Error uploading file:", error);
    }
  };
                  <label htmlFor="fileInput">Select a file:</label>
                  <input
                    type="file"
                    id="fileInput"
                    onChange={handleFileUpload}
                  />

  const handleFileUpload = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    if (!event.target.files) return;
    const file = event.target.files[0];
    if (!file) {
      throw new Error("No file selected");
    }
    const formData = new FormData();
    try {
      const response = await fetch("/api/s3/upload", {
        method: "POST",
        body: formData,
        headers: { "Content-Type": "multipart/form-data" },
      });

      if (response.ok) {
        console.log("File uploaded successfully");
      } else {
        console.error("Error uploading file:", response.statusText);
      }
    } catch (error) {
      console.error("Error uploading file:", error);
    }
  };
                  <label htmlFor="fileInput">Select a file:</label>
                  <input
                    type="file"
                    id="fileInput"
                    onChange={handleFileUpload}
                  />

4 replies

Gaming

Programming