Crim Posts - Answer Overflow

Crim

Posts Comments

TTCTheo's Typesafe Cult

•Created by Crim on 7/22/2024 in #questions

Best way to create a polling system?

5 replies

TTCTheo's Typesafe Cult

•Created by Crim on 6/26/2024 in #questions

View transitions aren't working with multiple elements with the same classname

Hey, I have quite a unique problem and I tried searching for the solution but view transitions are relatively new. I am using the next-view-transitions package. View transitions work how I expect them to when there is a singular element with the transition classname. But, I want to map through posts, and then when you click on that post, the title of the post transitions smoothly onto the next page. I have deduced the problem to the fact that if you have multiple elements with the same transition name, then it will not work. Im wondering if anyone has a solution to this problem. Possibly dynamic classnames, manually defining classes 1-10 and using pagination so they each have their "individual values", but all of those solutions seem very complex for something that may be so simple. Thanks! Non Working:

{basePosts.map((post, _idx) => 
<span key={post.id} className={`transit ${post.id}`} >{post.title}</span>
        )}

{basePosts.map((post, _idx) => 
<span key={post.id} className={`transit ${post.id}`} >{post.title}</span>
        )}

Class defined in globals.css

.transit {
  view-transition-name: demo-title;
  width: fit-content;
}

.transit {
  view-transition-name: demo-title;
  width: fit-content;
}

2 replies

TTCTheo's Typesafe Cult

•Created by Crim on 3/30/2024 in #questions

Basic system design questions for a big project

Hey, I am making a fairly ambitious app and wanted some advice on how to proceed with my system design. Questions: 1. Is there a common way to store valuable information like a team id somewhere other than the url? (Some apps have it, some don't, I am just curious to know how they are doing this. A state management solution?) 2. For realtime functionality across multiple clients, I cannot use pusher channels with T3 because they aren't supported with trpc. Are there any other alternatives or is the most advisable course of action to just use trpc subscriptions/websockets? 3. What is the most efficient way to query data so that users have the best and most performant experience? I am assuming that most systems query their data on a "per page" basis. so when you reroute to a separate page, you query the data you want. Is this the best course of action? Will the users even feel the difference with optimized builds of nextjs?

5 replies

TTCTheo's Typesafe Cult

•Created by Crim on 2/18/2024 in #questions

Not understanding best practices

Hey, I am having a bit of trouble with my app. Here is the list: 1. Any time I do any basic crud operations my entire page reloads without calling router refresh or revalidatepath (trpc fetches again on any db write) 2. I have a component where I query data and pass that data into two separate client components, one that adds an issue, and one that displays the issues. When an issue is added I don't want to router.refresh every single time but I may have to in order to get the other client component to update. 3. Realtime functionality. This is a multi-tenancy system and I need to be able to add realtime funcationality to prevent race conditions when editing. Websockets for trpc seems very complicated when I look at it, and pusher channels don't work in trpc.

15 replies

TTCTheo's Typesafe Cult

•Created by Crim on 2/9/2024 in #questions

Simplifying routes and making new procedures

Hey, I am making an app and I wanted to ask if there was an easier way to ensure that the user has access to the team they are redirecting to. I do this by writing a query to check if the user's id is found inside of the members object of that team. If nothing is returned then I redirect them somewhere else. I am wondering if there is a simpler way to do this, like making a teamProcedure in trpc that automatically does that every single time a procedure call is made. Any tips will help. team/[teamId]/layout.tsx

import { redirect } from "next/navigation";
import Sidebar from "../_components/sidebar";
import { api } from "~/trpc/server";

export default function Layout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { teamId: string };
}) {
  const teamAuth = api.team.checkTeamAuth.query({ teamId: params.teamId });
  if (!teamAuth) {
    redirect("/login");
  }
  return (
    <div className="flex min-h-screen gap-2">
      <Sidebar />
      {children}
    </div>
  );
}

import { redirect } from "next/navigation";
import Sidebar from "../_components/sidebar";
import { api } from "~/trpc/server";

export default function Layout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { teamId: string };
}) {
  const teamAuth = api.team.checkTeamAuth.query({ teamId: params.teamId });
  if (!teamAuth) {
    redirect("/login");
  }
  return (
    <div className="flex min-h-screen gap-2">
      <Sidebar />
      {children}
    </div>
  );
}

query:

checkTeamAuth: protectedProcedure
    .input(
      z.object({
        teamId: z.string(),
      }),
    )
    .query(async ({ ctx, input }) => {
      return ctx.db.team.findFirst({
        where: {
          name: input.teamId,
          members: { some: { id: ctx.session.user.id } },
        },
      });
    }),

checkTeamAuth: protectedProcedure
    .input(
      z.object({
        teamId: z.string(),
      }),
    )
    .query(async ({ ctx, input }) => {
      return ctx.db.team.findFirst({
        where: {
          name: input.teamId,
          members: { some: { id: ctx.session.user.id } },
        },
      });
    }),

1 replies

TTCTheo's Typesafe Cult

•Created by Crim on 1/14/2024 in #questions

Progress not working

3 replies

TTCTheo's Typesafe Cult

•Created by Crim on 1/9/2024 in #questions

persisting information

hey, im building out a dashboard app and am planning to make it customizable, what would be the best way to save a users preferences? I was thinking about persist in zustand's local storage option

2 replies

TTCTheo's Typesafe Cult

•Created by Crim on 11/6/2023 in #questions

Too many re-renders

5 replies

TTCTheo's Typesafe Cult

•Created by Crim on 11/4/2023 in #questions

Links within one another (nextjs)

Hey, having a problem with having link buttons within each other. When I try to give the bottom button with MdSettings icon props as={Link} and href it breaks the entire thing. But when i remove the as={Link} from the parent Card component, It works. how do you have two links within each other?

{projects?.map((project) => 
<>
<Card as={Link} href={`/dashboard/${project.id}`} className="dark:bg-[#171717] rounded-md border dark:border-neutral-800 p-2 group hover:cursor-pointer dark:hover:border-neutral-600 transition-colors">
  <CardHeader className="flex justify-between">
    <div className="flex flex-col gap-1">
      <span className="font-bold">{project.title}</span>
      <span className="opacity-50 font-mono">{formatDate(project.created_at)}</span>
    </div>
    <ChevronRightIcon className="w-4 h-4 absolute top-6 right-5 group-hover:translate-x-1 transition-transform"/>
  </CardHeader>
  
  <CardBody></CardBody>
                        
  <CardFooter className="flex justify-between">
    <Chip color="warning" variant="dot">Next Due Date:</Chip>
    <div className="flex gap-2">
      <Button variant="light" isIconOnly><InfoIcon className="w-4 h-4"/></Button>
      <Button as={Link} href={`/settings/${project.id}`} variant="light" isIconOnly><MdSettings className="w-4 h-4"/></Button>
    </div>
</CardFooter>
</Card>
</>)}

{projects?.map((project) => 
<>
<Card as={Link} href={`/dashboard/${project.id}`} className="dark:bg-[#171717] rounded-md border dark:border-neutral-800 p-2 group hover:cursor-pointer dark:hover:border-neutral-600 transition-colors">
  <CardHeader className="flex justify-between">
    <div className="flex flex-col gap-1">
      <span className="font-bold">{project.title}</span>
      <span className="opacity-50 font-mono">{formatDate(project.created_at)}</span>
    </div>
    <ChevronRightIcon className="w-4 h-4 absolute top-6 right-5 group-hover:translate-x-1 transition-transform"/>
  </CardHeader>
  
  <CardBody></CardBody>
                        
  <CardFooter className="flex justify-between">
    <Chip color="warning" variant="dot">Next Due Date:</Chip>
    <div className="flex gap-2">
      <Button variant="light" isIconOnly><InfoIcon className="w-4 h-4"/></Button>
      <Button as={Link} href={`/settings/${project.id}`} variant="light" isIconOnly><MdSettings className="w-4 h-4"/></Button>
    </div>
</CardFooter>
</Card>
</>)}

6 replies

TTCTheo's Typesafe Cult

•Created by Crim on 11/3/2023 in #questions

Automatic image/banner gen.

2 replies

Gaming

Programming