mchisolm0 Posts - Answer Overflow

mchisolm0

•Created by mchisolm0 on 6/7/2024 in #questions

Mobx-state-tree action is undefined when passed to onPress

Link to full code of current branch With mobx-state-tree, can you not use actions as functions for onPress? Error on ExpoGo: Uncaught Error player.removeLifePoints is not a function (it is undefined)

const RemoveLifePointsButton = (player: Player) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

const RemoveLifePointsButton = (player: Player) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

Here is the Player model I have prototyped.

export const PlayerModel = types
  .model("Player")
  .props({
    playerID: types.identifierNumber,
    playerName: "Player",
    lifePoints: types.number,
    color: types.enumeration(["red", "green", "pink", "blue"]),
    playerIcon: types.enumeration(["assets/icons/bell.png", "assets/icons/lock.png"]),
  })
  .actions(withSetPropAction)
  .actions((player) => ({
    addLifePoints(amount: number) {
      player.lifePoints += amount;
    },
    removeLifePoints(amount: number) {
      player.lifePoints -= amount;
    },
  }))
  .views((player) => ({
    get playerInfo() {
      const defaultValue = { name: player.playerName, id: player.playerID };

      return defaultValue;
    }
  }))

export const PlayerModel = types
  .model("Player")
  .props({
    playerID: types.identifierNumber,
    playerName: "Player",
    lifePoints: types.number,
    color: types.enumeration(["red", "green", "pink", "blue"]),
    playerIcon: types.enumeration(["assets/icons/bell.png", "assets/icons/lock.png"]),
  })
  .actions(withSetPropAction)
  .actions((player) => ({
    addLifePoints(amount: number) {
      player.lifePoints += amount;
    },
    removeLifePoints(amount: number) {
      player.lifePoints -= amount;
    },
  }))
  .views((player) => ({
    get playerInfo() {
      const defaultValue = { name: player.playerName, id: player.playerID };

      return defaultValue;
    }
  }))

As I dig into it more, I think it might be I am misunderstanding how to use the setter actions like with .actions(withSetPropAction), but reading the docs on it, I still am struggling to understand.

3 replies

TTCTheo's Typesafe Cult

•Created by mchisolm0 on 5/2/2024 in #questions

Global error when clicking on photo in Gallery Tutorial

Following the new create-t3-app tutorial for a gallery app and locally everything seems to be working (click on image, get modal. Refresh page, get only image). In production, when I click the image, I get the global error page 500. Is that because of this change I made to get the <TopNav /> to render with and without being signed in?

          <TopNav />
          <SignedIn>
            {children}
            {modal}
            <div id="modal-root"></div>
          </SignedIn>
          <SignedOut />

          <TopNav />
          <SignedIn>
            {children}
            {modal}
            <div id="modal-root"></div>
          </SignedIn>
          <SignedOut />

Here is the repo if you need more context or you can let me know what I need to clarify. https://github.com/mchisolm0/gallery/tree/trunk

5 replies

TTCTheo's Typesafe Cult

•Created by mchisolm0 on 4/27/2024 in #questions

Modals failing from tutorial

https://github.com/mchisolm0/gallery/pull/2 I am having trouble getting the modals/app router working how I expect. When I click on pictures sometimes it loads, sometimes it gives "Unauthorized" errors, and sometimes it complains getImages(idAsNumber) is not a function. I have created a pull request on my repo in case that is helpful for context. I am getting off of hear to get some rest and hoping fresh eyes tomorrow may help me solve it. Thank you in advance if anyone has suggestions or wisdom.

1 replies

TTCTheo's Typesafe Cult

•Created by mchisolm0 on 4/26/2024 in #questions

TypeErrorinitialTree is not iterable in Modern React Tutorial vid

The images map correctly until I try clicking on one, so I think the error may be misleading me. I believe I have the modal set up to show the id at the bottom of the screen as shown in the tutorial, however, when I click the image I get the global error page. Sentry captures the above "initialTree is not iterable" which seems to mean I'm trying to map something that can't be mapped. file: app/page.tsx

return (
    <main className="">
      <div className="flex flex-wrap justify-center gap-4">
        {images.map((image) => (
          <div key={image.id} className="flex h-48 w-48 flex-col">
            <Link href={`/img/${image.id}`}>
              <Image
                src={image.url}
                alt={image.name}
                style={{ objectFit: "contain" }}
                width={480}
                height={480}
              />
            </Link>
            <div>{image.name}</div>
          </div>
        ))}
      </div>
    </main>
  );
}

return (
    <main className="">
      <div className="flex flex-wrap justify-center gap-4">
        {images.map((image) => (
          <div key={image.id} className="flex h-48 w-48 flex-col">
            <Link href={`/img/${image.id}`}>
              <Image
                src={image.url}
                alt={image.name}
                style={{ objectFit: "contain" }}
                width={480}
                height={480}
              />
            </Link>
            <div>{image.name}</div>
          </div>
        ))}
      </div>
    </main>
  );
}

file: server/queries.ts

export async function getMyImages() {
  const user = auth();

  if (!user.userId) throw new Error("Unauthorized");

  const images = await db.query.images.findMany({
    where: (model, { eq }) => eq(model.userId, user.userId),
    orderBy: (model, { desc }) => desc(model.id),
  });

  return images;
}

export async function getMyImages() {
  const user = auth();

  if (!user.userId) throw new Error("Unauthorized");

  const images = await db.query.images.findMany({
    where: (model, { eq }) => eq(model.userId, user.userId),
    orderBy: (model, { desc }) => desc(model.id),
  });

  return images;
}

6 replies

TTCTheo's Typesafe Cult

•Created by mchisolm0 on 4/23/2024 in #questions

New T3 gallery app only gives global error

After adding Sentry and trying out the default page, I now can't seem to get the rest of the app working again. I did delete the example error page, but I updated the global error file like Theo showed in the tutorial. It seems like while the compaint is about auth, it actually is that global-error.tsx is in the main app/ directory. When I move it, the page.tsx page loads as intended. Here is the current error: ⨯ src/server/queries.ts (8:27) @ getMyImages ⨯ Error: Unauthorized at getMyImages (./src/server/queries.ts:14:29) at HomePage (./src/app/page.tsx:29:86) at AsyncLocalStorage.run (node:async_hooks:346:14) at AsyncLocalStorage.run (node:async_hooks:346:14) at Object.apply (./src/app/page.tsx:105:10) at stringify (<anonymous>) digest: "4257623417" Code snippet:

   6 |   const user = auth();
   7 |
>  8 |   if (!user.userId) throw new Error("Unauthorized");
     |                           ^
   9 |
  10 |   const images = await db.query.images.findMany({
  11 |     where: (model, { eq }) => eq(model.userId, user.userId),

   6 |   const user = auth();
   7 |
>  8 |   if (!user.userId) throw new Error("Unauthorized");
     |                           ^
   9 |
  10 |   const images = await db.query.images.findMany({
  11 |     where: (model, { eq }) => eq(model.userId, user.userId),

Is it needing me to do something about rendering the children in the layout.tsx file?

        <body className={`font-sans ${inter.variable} flex flex-col gap-4`}>
          <TopNav />
          {children}
        </body>

        <body className={`font-sans ${inter.variable} flex flex-col gap-4`}>
          <TopNav />
          {children}
        </body>

1 replies

TTCTheo's Typesafe Cult

•Created by mchisolm0 on 4/18/2024 in #questions

Clerk middleware complaining on new T3 gallery tutorial

Following https://youtu.be/d5x0JCZbAJs?si=7ucvDfDadGRZ0HBC&t=2799 After getting the .env variables in my local environment and on Vercel, I was able to get Auth to start, let me sign into GitHub, authorize the app, and then fail with the following error when trying to return to the gallery.

Error: Clerk: Unable to verify request, this usually means the Clerk middleware did not run. Ensure Clerk's middleware is properly integrated and matches the current route. For more information, see: https://clerk.com/docs/nextjs/middleware. (code=auth_signature_invalid)

Error: Clerk: Unable to verify request, this usually means the Clerk middleware did not run. Ensure Clerk's middleware is properly integrated and matches the current route. For more information, see: https://clerk.com/docs/nextjs/middleware. (code=auth_signature_invalid)

I tried with Google, too. Each time, I have to clear my cache/cookies. Next: 14.2.2

8 replies

Gaming

Programming