janglad Posts - Answer Overflow

janglad

•Created by janglad on 5/22/2024 in #questions

Writing to a variable defined outside a component or hook is not allowed. Consider using an effect

With the new react compiler, I have a few Writing to a variable defined outside a component or hook is not allowed. Consider using an effect an example of something triggering this is

  const onSomeEvent = () => {
    document.body.style.overflow = showMobileFilters ? "auto" : "hidden";
  };

  const onSomeEvent = () => {
    document.body.style.overflow = showMobileFilters ? "auto" : "hidden";
  };

What is the suggested way to solve this?

2 replies

TTCTheo's Typesafe Cult

•Created by janglad on 5/9/2024 in #questions

Next Image lazy loading w/ ShadCn/Embla carousel

Hey Has anyone set up a proper image carousel with Next image and the ShadCn or underlying Embla component before? I got everything working but the lazy loading isn't really behaving the way I'd like to. Only one image is visible at a time, but it loads the first 3 upon first render without interaction. This results in the carrousel not being interactive until those 3 images have loaded. How would you guys solve this?

2 replies

TTCTheo's Typesafe Cult

•Created by janglad on 4/3/2024 in #questions

What's your favourite chart library for dashboards?

Title. Most important thing is DX tbh as it should just be implemented quickly for some basic internal use.

5 replies

TTCTheo's Typesafe Cult

•Created by janglad on 4/2/2024 in #questions

Revalidatepath type undefined vs page

Hello! Does anyone know if there's supposed to be a difference between calling revalidatePath with type as undefinedvs page? Cause calling it with page seems to do nothing when trying to revalidate a path like /blog/123abc but calling it with undefined works.

2 replies

TTCTheo's Typesafe Cult

•Created by janglad on 2/29/2024 in #questions

in app browser gives oAuth errors

2 replies

TTCTheo's Typesafe Cult

•Created by janglad on 2/28/2024 in #questions

Revalidating a GET endpoint in Next

Hey! Does anyone know how to revalidate a cached GET endpoint in Next? With this basic code cached/route.ts

export const GET = async (request: NextRequest) => {
  console.log("Getting /cached");
  const date = new Date();
  return NextResponse.json({ date });
};

export const GET = async (request: NextRequest) => {
  console.log("Getting /cached");
  const date = new Date();
  return NextResponse.json({ date });
};

reval/route.ts

export const dynamic = "force-dynamic";

export const GET = (req: NextRequest) => {
  console.log("Revalidating /cached");
  revalidatePath("/cached");
  revalidatePath("/cached-page");
  return NextResponse.json({ done: true });
};

export const dynamic = "force-dynamic";

export const GET = (req: NextRequest) => {
  console.log("Revalidating /cached");
  revalidatePath("/cached");
  revalidatePath("/cached-page");
  return NextResponse.json({ done: true });
};

cached-page/page.ts

export default function Page() {
  const date = new Date();
  return <div>{date.toString()}</div>;
}

export default function Page() {
  const date = new Date();
  return <div>{date.toString()}</div>;
}

The cached page revalidates fine, however the route handler does not. even calling revalidatePath("/", "layout") which should revalidate everything only does so for the page.

19 replies

TTCTheo's Typesafe Cult

•Created by janglad on 11/5/2023 in #questions

Button creates vertical gap in grid, button doesn't

This is possibly a really really dumb question, but why does the button result in a vertical gap in the grid when using a div doesn't?

import React from "react";
import "./styles.css";

export default function App() {
  const images = [1, 2, 3, 4, 5, 6,7,8,9];
  const aspectRatio = "16/9";
  return (
    <ul className="group grid transform grid-cols-5 gap-1">
      {images.map((image, index) => (
        <li
          key={image}
          style={{ aspectRatio }}
          className="cols-span-1 relative transform duration-200 hover:!scale-110 group-hover:scale-100"
        >
          <button
            className="relative h-full w-full"
            onClick={() => setCurrentImageIndex(index)}
          >
            <div className="h-full w-full bg-red-500"></div>
          </button>
        </li>
      ))}
    </ul>
  );
}

import React from "react";
import "./styles.css";

export default function App() {
  const images = [1, 2, 3, 4, 5, 6,7,8,9];
  const aspectRatio = "16/9";
  return (
    <ul className="group grid transform grid-cols-5 gap-1">
      {images.map((image, index) => (
        <li
          key={image}
          style={{ aspectRatio }}
          className="cols-span-1 relative transform duration-200 hover:!scale-110 group-hover:scale-100"
        >
          <button
            className="relative h-full w-full"
            onClick={() => setCurrentImageIndex(index)}
          >
            <div className="h-full w-full bg-red-500"></div>
          </button>
        </li>
      ))}
    </ul>
  );
}

6 replies

TTCTheo's Typesafe Cult

•Created by janglad on 10/29/2023 in #questions

Prisma nested create only giving proper typings one way

2 replies

TTCTheo's Typesafe Cult

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

How would you guys implement user editable themes (next13 with Shadcn and tailwind)

Admins should be able to set a theme for end users by giving hex values for things like background colour etc. What would be the most elegant way to implement this?

2 replies

TTCTheo's Typesafe Cult

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

Recommendations for websocket service

Hi, for a small side project I need a live leaderboard and would need a pretty simple websocket implementation (using Next 13 with app dir). Any services you would recommend?

5 replies

TTCTheo's Typesafe Cult

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

Prisma + Zod, where to validate uniqueness

Say I have a Prisma schema with multiple unique fields (for example an ID and a URL), where do I validate the uniqueness of these fields on the server? I could use an async ZOD refinement, which makes it easy to provide a custom error message etc to the user but this is more costly DB wise. I could also just let Prisma throw, but formatting a custom error message there is a bit of a pain. It's possible to check the type of the error and implement custom logic based on the code, but the field on which the error is thrown is passed through meta.target which doesn't seem to be properly typed. This results in some quite ugly code checking the code of the error first, checking if there is a meta , a target and checking if that is an array. https://www.prisma.io/docs/reference/api-reference/error-reference#prismaclientknownrequesterror How do you guys handle this?

10 replies

Gaming

Programming