Lukem121 Comments - Answer Overflow

Hey! I am working on a travel website where users can search/buy plane tickets. Currently, I am facing some architectural challenges in setting up the state management for my website. Since it functions like a large form, I want to ensure that users can come back at the page at any time using the URL. Having a tough time deciding how it should work.

4 replies

TTCTheo's Typesafe Cult

•Created by Typedef on 9/20/2023 in #questions

Selecting through transparent background KonvaJS

Not sure I understand fully what you want but could you apply the following style: Tailwind: pointer-events-none CSS: pointer-events: none;

4 replies

TTCTheo's Typesafe Cult

•Created by clemwo on 9/21/2023 in #questions

How to customize zod union error message?

import React from "react";
import { z } from "zod";

export default function Page() {
  const schema = z.object({
    customer: z.union(
      [
        z.string().uuid({
          message: "Customer must be a valid UUID",
        }),
        z.literal("allCustomers", {
          errorMap: (error) => {
            // console.log("Zod Literal Error", error);

            if (error.code === "invalid_literal") {
              return {
                message: "Yo this is not 'allCustomers' ???",
              };
            }

            return {
              message: error.message ?? "There was an error",
            };
          },
        }),
      ],
      {
        errorMap: (error) => {
          // console.log("Zod Union Error", error);

          if (error.code === "invalid_union") {
            return {
              message: "Yo this is not a valid union ???",
            };
          }

          return {
            message: error.message ?? "There was an error",
          };
        },
      },
    ),
  });

  return (
    <div>
      <button
        onClick={() => {
          const result = schema.safeParse({ customer: undefined });
          if (result.success) {
            console.log(result.data);
          } else {
            console.log(result.error.errors.map((error) => error.message));
          }
        }}
      >
        Click me!
      </button>
    </div>
  );
}

import React from "react";
import { z } from "zod";

export default function Page() {
  const schema = z.object({
    customer: z.union(
      [
        z.string().uuid({
          message: "Customer must be a valid UUID",
        }),
        z.literal("allCustomers", {
          errorMap: (error) => {
            // console.log("Zod Literal Error", error);

            if (error.code === "invalid_literal") {
              return {
                message: "Yo this is not 'allCustomers' ???",
              };
            }

            return {
              message: error.message ?? "There was an error",
            };
          },
        }),
      ],
      {
        errorMap: (error) => {
          // console.log("Zod Union Error", error);

          if (error.code === "invalid_union") {
            return {
              message: "Yo this is not a valid union ???",
            };
          }

          return {
            message: error.message ?? "There was an error",
          };
        },
      },
    ),
  });

  return (
    <div>
      <button
        onClick={() => {
          const result = schema.safeParse({ customer: undefined });
          if (result.success) {
            console.log(result.data);
          } else {
            console.log(result.error.errors.map((error) => error.message));
          }
        }}
      >
        Click me!
      </button>
    </div>
  );
}

5 replies

TTCTheo's Typesafe Cult

•Created by clemwo on 9/21/2023 in #questions

How to customize zod union error message?

You can use the errorMap.

5 replies

TTCTheo's Typesafe Cult

•Created by Jaaneek on 9/21/2023 in #questions

ideas for projects

Are you looking for somthing to build?

8 replies

TTCTheo's Typesafe Cult

•Created by janglad on 9/21/2023 in #questions

Recommendations for websocket service

https://create.t3.gg/en/other-recs#pusher

5 replies

TTCTheo's Typesafe Cult

•Created by Lukem121 on 9/11/2023 in #questions

Error: Invariant: headers() expects to have requestAsyncStorage, none available.

From other posts online have found windows is the cause.

5 replies

TTCTheo's Typesafe Cult

•Created by Lukem121 on 9/11/2023 in #questions

Error: Invariant: headers() expects to have requestAsyncStorage, none available.

Seems I have found a "fix" 🤔 In page.tsx change from "edge" to "nodejs" export const runtime = "nodejs";

5 replies

TTCTheo's Typesafe Cult

•Created by Lukem121 on 9/11/2023 in #questions

Error: Invariant: headers() expects to have requestAsyncStorage, none available.

I have check the issues on the repo and there are others facing the same issue but no fixes.

5 replies

TTCTheo's Typesafe Cult

•Created by Lukem121 on 3/6/2023 in #questions