procrastinator_bas Posts - Answer Overflow

procrastinator_bas

•Created by procrastinator_bas on 8/25/2024 in #🙋questions

Getting the user in the rootcomponent

I specified the rootComponent for my client:

client: {
    rootComponent: import Root from "@src/client/Root",
  }

client: {
    rootComponent: import Root from "@src/client/Root",
  }

In my Root.tsx I want to check if the user is logged in, so I can check which menu items to show:

const links: { link: Routes, label: string }[] = [
  { link: routes.RootRoute, label: 'Home' },
  { link: routes.ClassRoute, label: 'Class' },
  { link: routes.CourseRoute, label: 'Course' },
];

export default function Root({ user, children }: { user: AuthUser, children: React.ReactNode }) {
  return (
    <MantineProvider>
      <Header user={user} />
      {children}
    </MantineProvider>)
}

function Header({ user }: { user: AuthUser }) {
  const items = links.map((link) => (
    <NavLink to={link.link.to}>
      <Button key={link.label}>{link.label}</Button>
    </NavLink>
  ));

  return (
    <header className={classes.header}>
      <Container size="md" className={classes.inner}>
        <h1>Teachers tools</h1>
        <Group gap={5} visibleFrom="xs">
          {user && items}
          {user && <Button size="s" onClick={logout}>Logout</Button>}
          {!user && <NavLink to='/login'><Button size="s">Login</Button></NavLink>}
        </Group>
      </Container>
    </header>
  );
}

const links: { link: Routes, label: string }[] = [
  { link: routes.RootRoute, label: 'Home' },
  { link: routes.ClassRoute, label: 'Class' },
  { link: routes.CourseRoute, label: 'Course' },
];

export default function Root({ user, children }: { user: AuthUser, children: React.ReactNode }) {
  return (
    <MantineProvider>
      <Header user={user} />
      {children}
    </MantineProvider>)
}

function Header({ user }: { user: AuthUser }) {
  const items = links.map((link) => (
    <NavLink to={link.link.to}>
      <Button key={link.label}>{link.label}</Button>
    </NavLink>
  ));

  return (
    <header className={classes.header}>
      <Container size="md" className={classes.inner}>
        <h1>Teachers tools</h1>
        <Group gap={5} visibleFrom="xs">
          {user && items}
          {user && <Button size="s" onClick={logout}>Logout</Button>}
          {!user && <NavLink to='/login'><Button size="s">Login</Button></NavLink>}
        </Group>
      </Container>
    </header>
  );
}

This does not work. Even if the user is logged in, the Header only shows this button: <NavLink to='/login'><Button size="s">Login</Button></NavLink> Is it possible to access the user in the rootComponent?

26 replies

WWasp-lang

•Created by procrastinator_bas on 8/25/2024 in #🙋questions

Accessing/changing another entity when performing a db action

I'm new to NodeJS, prisma and the likes and am having some trouble implementing an action. When I create a Student, they need to get a number assigned to them. If there are already 10 students in the class, the next created student should get number 11. I'm not sure how to best do this. This us my current code:

export const createStudent: CreateStudent<CreateStudentPayload, Student> = async (args, context) => {
    if (!context.user) {
        throw new HttpError(401);
    }

    return context.entities.Student.create({
        data: {
            name: args.name,
            number: 11,
            class: { connect: { teacherId: context.user.id }}
        }
    })
}

export const createStudent: CreateStudent<CreateStudentPayload, Student> = async (args, context) => {
    if (!context.user) {
        throw new HttpError(401);
    }

    return context.entities.Student.create({
        data: {
            name: args.name,
            number: 11,
            class: { connect: { teacherId: context.user.id }}
        }
    })
}

I tried calling the getClass query from the createStudent action and passing the cotext along, but it is not of the correct type. Should I send along the classId from the frontend, even though the frontend does not need to know about it? Should I just use the prismaClient and the full context over the wasp context?

37 replies

Gaming

Programming