oldben Comments - Answer Overflow

oldben

•Created by oldben on 11/7/2023 in #questions

Help setting up primsa + planetscale with t3 app.

Bump. I didn't figure out what the issue was. I ended up deleting the t3 app on my machine and setting up a new one without the next experimental features. I created my own CreatePost component:

 
function CreatePost() {
  const [name, setName] = useState("");

  const {
    data: post,
    isLoading: queryLoading,
    refetch,
  } = api.post.getLatest.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });

const { isLoading: postLoading, mutate: postPost } =
    api.post.create.useMutation({
      onSuccess: async () => {
        await refetch();
        setName("");
      },
    });

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (postLoading || queryLoading) return;

    setName(e.target.value);
  };

  const renderPost = () => {
    let newPost = "No posts to show";
    if (queryLoading) {
      newPost = "Loading ...";
    }

    if (!queryLoading && post) {
      return (newPost = post.name);
    }

    return <span>{newPost}</span>;
  };
  const buttonLoading = postLoading || queryLoading;
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <p className="text-md text-center text-white">{renderPost()}</p>
      <input value={name} onChange={handleNameChange} />
      <button
        type="button"
        className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
        onClick={(e) => {
          e.preventDefault();
          try {
            postPost({ name: name.trim() });
          } catch (err) {}
        }}
        disabled={buttonLoading}
      >
        {buttonLoading ? "loading..." : "Create Post"}
      </button>
    </div>
  );
}

 
function CreatePost() {
  const [name, setName] = useState("");

  const {
    data: post,
    isLoading: queryLoading,
    refetch,
  } = api.post.getLatest.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });

const { isLoading: postLoading, mutate: postPost } =
    api.post.create.useMutation({
      onSuccess: async () => {
        await refetch();
        setName("");
      },
    });

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (postLoading || queryLoading) return;

    setName(e.target.value);
  };

  const renderPost = () => {
    let newPost = "No posts to show";
    if (queryLoading) {
      newPost = "Loading ...";
    }

    if (!queryLoading && post) {
      return (newPost = post.name);
    }

    return <span>{newPost}</span>;
  };
  const buttonLoading = postLoading || queryLoading;
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <p className="text-md text-center text-white">{renderPost()}</p>
      <input value={name} onChange={handleNameChange} />
      <button
        type="button"
        className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
        onClick={(e) => {
          e.preventDefault();
          try {
            postPost({ name: name.trim() });
          } catch (err) {}
        }}
        disabled={buttonLoading}
      >
        {buttonLoading ? "loading..." : "Create Post"}
      </button>
    </div>
  );
}

3 replies

TTCTheo's Typesafe Cult

•Created by oldben on 11/7/2023 in #questions

Help setting up primsa + planetscale with t3 app.

Bump. Looks like the form submit is failing somewhere, but without any errors or logs I am not understanding what the problem is. Here is a video of me trying to console log around and in the mutation. https://youtu.be/l0Z8kppWPLQ Any idea how I can turn on logging for this part of the app to see what the problem is?

3 replies

TTCTheo's Typesafe Cult

•Created by oldben on 2/7/2023 in #questions

Responsive large tables?

What does your mobile view contain? half the data? or even less?

8 replies

TTCTheo's Typesafe Cult

•Created by oldben on 2/7/2023 in #questions

Responsive large tables?

Not components, I'm using tanstack for tables, it makes perfectly fine tables. Its more a design thing. I s'pose. Is there a good way of laying it all out, or is there a good strategy for them?

8 replies

TTCTheo's Typesafe Cult

•Created by oldben on 2/7/2023 in #questions

Responsive large tables?

bump

8 replies

TTCTheo's Typesafe Cult

•Created by oldben on 1/30/2023 in #questions

Random webdev question

cheers

5 replies

TTCTheo's Typesafe Cult

•Created by sean on 1/4/2023 in #questions

[Solved] Conditional types

Happy to help!

4 replies

TTCTheo's Typesafe Cult

•Created by sean on 1/4/2023 in #questions

[Solved] Conditional types

You are looking for a discriminated union type here.

type Response = { 
  hasErrored: false; } | {
  hasErrored: true;
  body: string;
}

type Response = { 
  hasErrored: false; } | {
  hasErrored: true;
  body: string;
}

4 replies

TTCTheo's Typesafe Cult

•Created by zenith on 12/2/2022 in #questions

Conditional rendering on TS type

if you have a union type then the 'in' operator is your friend for doing this:

interface Square { corners: number }
interface Circle { radius: number }
type Shape = Square | Circle
const whichShape = (shape: Shape) => {
  if ('radius' in shape) {
    // ... handle circle
  }
}

interface Square { corners: number }
interface Circle { radius: number }
type Shape = Square | Circle
const whichShape = (shape: Shape) => {
  if ('radius' in shape) {
    // ... handle circle
  }
}

10 replies

TTCTheo's Typesafe Cult

•Created by oldben on 12/2/2022 in #questions

Hot reloading in Remix

ahh that could be just what I need thanks

7 replies

TTCTheo's Typesafe Cult