vitor markis 🎈 Posts - Answer Overflow

vitor markis 🎈

•Created by vitor markis 🎈 on 2/26/2024 in #questions

Remix loaders are middlewares?

I'm learning Remix and I had this question about how it works... is the remix loaders like "middlewares"? The browser hits the server with GET request, the server process the JSX Page and instead of returning this directly, it runs the page loader before, and "injects" the result in the HTML page. Is that correct? Also, are actions just a server procedure that I write in the page level and Remix binds it to the page POST submit?

2 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 10/26/2023 in #questions

How to decrease user plan usage based on service usage?

I'm dealing with a Steam farming hour system, I can start the farm via a method from client instance, like

const user = new SteamUser()
user.logOn()

const user = new SteamUser()
user.logOn()

At this point, the client starts the farming. How can I count the user service usage? Like a setInterval? Pub/sub? Observers? If this service is in a different server than the application one? How should I do this communication?

2 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 9/8/2023 in #questions

How to create custom upload component to use with UploadThing?

UploadThing custom component is designed to be an entire section of a form. However, I'm working in a project, that involves multiple images inputs (field array), so I need a different design, something like a regular input size type of a button. Is there a way to achieve this? If there isn't, should I consider using the existing UploadThing component hidden (absolute and opacity-0) as an intermediary between my displayed component I've created, and the server? Or am I tripping?

5 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 6/7/2023 in #questions

How to type return of hook based on string passed as argument?

I wanna have different types based on string passed as the argument of a custom hook, but i don't know how to infer types of zod schema dynamically based on a received string. I reckon typescript helpers function might help but i don't know any.

const validations = {
  "GET_FRUITS": {
    schema: z.object({ fruit: z.string() }),
  },
  "GET_AMMOUNT": {
    schema: z.object({ ammount: z.number() }),
  }
}

function useHook = //

const Component = () => {
  const { data } = useHook("GET_FRUITS", unparsedData)
  // data.fruit === string

  const { data } = useHook("GET_AMMOUNT", unparsedData)
  // data.ammount === number

  return null
}

const validations = {
  "GET_FRUITS": {
    schema: z.object({ fruit: z.string() }),
  },
  "GET_AMMOUNT": {
    schema: z.object({ ammount: z.number() }),
  }
}

function useHook = //

const Component = () => {
  const { data } = useHook("GET_FRUITS", unparsedData)
  // data.fruit === string

  const { data } = useHook("GET_AMMOUNT", unparsedData)
  // data.ammount === number

  return null
}

5 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 5/17/2023 in #questions

persist user vertical scroll during navigation between pages NEXT 13 App Dir

i wanna learn how to keep the user where he was during navigation between pages like, open blog post, then go back to feed, but keeping the feed vertical scroll history i'm using server components, the issue is the page is rendered then the javascript loads and moves the user to desired position, garbage ux

5 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 4/26/2023 in #questions

How to use Next 13/Font inside client component (App Directory)?

I'm struggling to use Jetbrains Mono by Google inside a client component in specific element only, in Next 13 App Directory, how is the right way to do it? I'm getting this error, seems like the font class is RE-generated when it goes to client

Prop `className` did not match. Server: "font-bold ml-1 __className_f9db54 jetbrains" Client: "font-bold ml-1 __className_9b0839 jetbrains"

Prop `className` did not match. Server: "font-bold ml-1 __className_f9db54 jetbrains" Client: "font-bold ml-1 __className_9b0839 jetbrains"

1 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 4/10/2023 in #questions

how to absolute URLs using fetch in next 13?

This is how i wanna use the fetch:

const api_endpoint = "http://localhost:3000"

const api_endpoint = "http://localhost:3000"

await fetch(api_endpoint.concat("/api/posts/bids"), {
  headers,
  method: "POST",
  body: JSON.stringify({ post_id, value }),
})

await fetch(api_endpoint.concat("/api/posts/bids"), {
  headers,
  method: "POST",
  body: JSON.stringify({ post_id, value }),
})

But this way he is doing the fetch request to this weird endpoint: http://localhost:3000/post/undefined/api/posts/bids --- Using "relative" url solves the problem:

await fetch("/api/posts/bids", {
  headers,
  method: "POST",
  body: JSON.stringify({ post_id, value }),
})

await fetch("/api/posts/bids", {
  headers,
  method: "POST",
  body: JSON.stringify({ post_id, value }),
})

I assume this is a Next 13 doing, but this isn't how i'm supposed to do once i have a different baseUrl based on app environment, in case i need to use an external backend api this won't be ideal. How can i switch back to default fetch URL behavior? i'm using app directory, and this issue only happens on CLIENT COMPONENTS

2 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 4/8/2023 in #questions

await Prisma create never resolves using PlanetScale

I'm using Next API routes as my backend, and there is the logic inside:

if (req.method === "POST") {
    try {
      const session = await getServerSession(req, res, authOptions)
      if (!session || !session.user || !session.user.sub) {
        return res.status(401).send("Usuário não autenticado.")
      }
        
      const { announcement_date, medias_url, price, text, title } = newPostSchema.parse(req.body)

      const random = () => parseInt(String(Math.random() * 10 ** 10))
      const slug = `${slugify(title)}-${random()}`

      await prisma.post.create({
        data: {
          announcement_date,
          price,
          text,
          slug,
          title,
          author_id: session.user.sub,
          // author_id: "clg7ycfq00000ve146tnoayuc",
          post_media: {
            create: medias_url.map(media => ({
              media,
            })),
          },
        },
      })

      return res.status(201)
    } catch (error) {
      return res.json(error)
    }
  }

if (req.method === "POST") {
    try {
      const session = await getServerSession(req, res, authOptions)
      if (!session || !session.user || !session.user.sub) {
        return res.status(401).send("Usuário não autenticado.")
      }
        
      const { announcement_date, medias_url, price, text, title } = newPostSchema.parse(req.body)

      const random = () => parseInt(String(Math.random() * 10 ** 10))
      const slug = `${slugify(title)}-${random()}`

      await prisma.post.create({
        data: {
          announcement_date,
          price,
          text,
          slug,
          title,
          author_id: session.user.sub,
          // author_id: "clg7ycfq00000ve146tnoayuc",
          post_media: {
            create: medias_url.map(media => ({
              media,
            })),
          },
        },
      })

      return res.status(201)
    } catch (error) {
      return res.json(error)
    }
  }

issue: the prisma promise never resolves

await prisma.post.create({

await prisma.post.create({

and there is no successful response in my front-end - this issue started when i started using planetscale database in development mode - all my get requests are being fetch successfully - i'm using the pscale connection proxy, on port 3309 - the issue is occurring both in chrome and insomnia here is the front-end fetch in case it comes handy

mutationFn: async (newPostData: TNewPostBody) => {
  const headers = new Headers()
  headers.append("Content-Type", "application/json")

  const res = await fetch(`http://localhost:3000/api/posts`, {
    headers,
    method: "POST",
    body: JSON.stringify(newPostData),
  })
  return res
}

mutationFn: async (newPostData: TNewPostBody) => {
  const headers = new Headers()
  headers.append("Content-Type", "application/json")

  const res = await fetch(`http://localhost:3000/api/posts`, {
    headers,
    method: "POST",
    body: JSON.stringify(newPostData),
  })
  return res
}

4 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 4/3/2023 in #questions

Watchpack error: EACCES: Permission denied

2 replies

TTCTheo's Typesafe Cult

•Created by vitor markis 🎈 on 4/1/2023 in #questions

Next 13 API responses just froze after build

7 replies

Gaming

Programming