MR BIG
MR BIG
PostsComments
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
its not easy. the whole app router rollout has been tricky at best due to not very clear communication so it takes a lot of random reading and videos to get the hang of. thats what i did anyway 🙂
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
yep so the button is inside the dialog so the component has access to change the open state
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
there i call a server action getApprovedClientList however just using a normal drizzle query is perfectly fine
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
const Page = async () => {
  const clients = await getApprovedClientList();
  return (
    <div className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-10">
      <div className="flex justify-between">
        <div>
          <h1 className="text-2xl font-bold">Invoices</h1>
          <h5></h5>
        </div>
        <div>
          <AddToInvoiceDialog clients={clients} />
        </div>
      </div>
      <div>
xxxx
const Page = async () => {
  const clients = await getApprovedClientList();
  return (
    <div className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-10">
      <div className="flex justify-between">
        <div>
          <h1 className="text-2xl font-bold">Invoices</h1>
          <h5></h5>
        </div>
        <div>
          <AddToInvoiceDialog clients={clients} />
        </div>
      </div>
      <div>
xxxx
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
the client component looks along the lines of this 
"use client"
xxxxx

export const AddToInvoiceDialog = async ({
  clients,
}: {
  clients: {
    id: number | null;
    name: string | null;
    entries: number;
  }[];
}) => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Dialog
        open={open}
        onOpenChange={(val) => {
          setOpen(val);
        }}
      >
        <DialogTrigger asChild>
          <Button variant="primary" icon={faPlus} iconPosition="left">
            New Invoice
          </Button>
        </DialogTrigger>
        <DialogContent className="md:max-w-5xl">
          <DialogHeader>
            <DialogTitle>Add To Invoice</DialogTitle>
            <DialogDescription>
              Add approved time entries to an invoice.
            </DialogDescription>
          </DialogHeader>
          {JSON.stringify(clients)}
        </DialogContent>
      </Dialog>
    </div>
  );
};
"use client"
xxxxx

export const AddToInvoiceDialog = async ({
  clients,
}: {
  clients: {
    id: number | null;
    name: string | null;
    entries: number;
  }[];
}) => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Dialog
        open={open}
        onOpenChange={(val) => {
          setOpen(val);
        }}
      >
        <DialogTrigger asChild>
          <Button variant="primary" icon={faPlus} iconPosition="left">
            New Invoice
          </Button>
        </DialogTrigger>
        <DialogContent className="md:max-w-5xl">
          <DialogHeader>
            <DialogTitle>Add To Invoice</DialogTitle>
            <DialogDescription>
              Add approved time entries to an invoice.
            </DialogDescription>
          </DialogHeader>
          {JSON.stringify(clients)}
        </DialogContent>
      </Dialog>
    </div>
  );
};
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
this is what im working on right now actually so
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
modal is client component**
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
1. Keep page as server component. fetch the data on this page. 2. make the modal accept the data as a prop from the page. this will come in when the promise resolves. 3. when the user opens the modal which is actually a client component, the data will be in there. IF you need the data to be populated based on actions from within the modal, you can do so via server actions. if you only need the data populated via initial page load, then the above is no problems.
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
it can be a bit like that, some of it can kinda tunnel idk how best to describe it hahah\
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
so it can get very confusing with the new paradigm. - if your component uses any sort of react hook such as state, effect or context, it needs to be in a client component - if your component uses any interactables such as onClick, it needs to be in a client component.
- if you want to load the data from the server on initial you have two options. 1. pass the data as a prop to the client component 2. have the client component expose children as say, a react node then populate the data accordingly. note: to make this even more confusing for you, if you expose children as a prop and go that route, the data that you "stuff" into children will remain in the server context. This is how wrapping certain components as client components such as providers seem to work fine in a similar context despite it looking like a server component.
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
with this code example it shows that they are using fetch (disregard the parallel reference). replace that fetch call with a call to your database via drizzle instead. this is occuring on the page which runs in the server by default. https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#parallel-data-fetching
32 replies
DTDrizzle Team
Created by Rorsch on 12/17/2023 in #help
net::ERR_NAME_NOT_RESOLVED showing multiple times on the console
@Rorsch on your page which is a server component by default, fetch the data either on it or via a server action, then pass that data through to your table (being the client component) as a prop.
32 replies