DINO Posts - Answer Overflow

DINO

Explore posts from servers

RReactiflux TtRPC TTCTheo's Typesafe Cult

•Created by DINO on 11/13/2024 in #react-forum

How do I handle authentication state in a SPA react app?

Hello, I have implemented authentication in my backend that uses http only cookies, so now I am not sure how do I handle authentication state in a SPA react app. When the user logs in I would like to store the auth state in a store like React Context or Zustand, but what if the user closes the app and opens it again? Should I hit an API route like getUser every time he opens it and if it returns the user that means he is sill logged in? Should I use Provider component (React Context) that wraps the whole app that checks the API? I would like to use a HashRouter instead of a BrowserRouter in my app. Thanks.

5 replies

RReactiflux

•Created by DINO on 9/29/2024 in #react-forum

I would like implement multiple tabs navigation inside my React app, where do I start?

12 replies

RReactiflux

•Created by DINO on 4/14/2024 in #react-forum

How do I query data with Tanstack Query if one of the query params can be undefined.

Hello, I have an id variable that can be undefined because I get him from useParams, and I use the id value to query data with Tanstack Query, but Tanstack Query requires to have a value that cannot be undefined which is very logical. So I had to do Number(id) || 1 and enabled: !!id this way:

const { id } = useParams() // const id: string | undefined
const { data: counterSale } = trpcReact.counterSale.get.useQuery(Number(id) || 1, {
    enabled: !!id
})

const { id } = useParams() // const id: string | undefined
const { data: counterSale } = trpcReact.counterSale.get.useQuery(Number(id) || 1, {
    enabled: !!id
})

Is this a common practice? And is there any other way to do this? Thanks.

4 replies

RReactiflux

•Created by DINO on 4/5/2024 in #react-forum

Make Zustand store scalable

Hello, This is my Zustand store state type:

type WaitlistState = {
  counterSaleWaitlist: CounterSaleWaitlistItemType[]
  salesInvoiceWaitlist: SalesInvoiceWaitlistItemType[]
  purchaseInvoiceWaitlist: PurchaseInvoiceWaitlistItemType[]
  addCounterSaleItem: (data: CounterSaleWaitlistItemType['data']) => void
  addSalesInvoiceItem: (data: SalesInvoiceWaitlistItemType['data']) => void
  addPurchaseInvoiceItem: (data: PurchaseInvoiceWaitlistItemType['data']) => void
  deleteItem: (date: string) => void
  deleteList: (
    list: 'counterSaleWaitlist' | 'salesInvoiceWaitlist' | 'purchaseInvoiceWaitlist'
  ) => void
  deleteAll: () => void
}

type WaitlistState = {
  counterSaleWaitlist: CounterSaleWaitlistItemType[]
  salesInvoiceWaitlist: SalesInvoiceWaitlistItemType[]
  purchaseInvoiceWaitlist: PurchaseInvoiceWaitlistItemType[]
  addCounterSaleItem: (data: CounterSaleWaitlistItemType['data']) => void
  addSalesInvoiceItem: (data: SalesInvoiceWaitlistItemType['data']) => void
  addPurchaseInvoiceItem: (data: PurchaseInvoiceWaitlistItemType['data']) => void
  deleteItem: (date: string) => void
  deleteList: (
    list: 'counterSaleWaitlist' | 'salesInvoiceWaitlist' | 'purchaseInvoiceWaitlist'
  ) => void
  deleteAll: () => void
}

In the future I will add more invoices (up to 10), and I kind of don't like doing something like:

  counterSaleWaitlist: CounterSaleWaitlistItemType[]
  salesInvoiceWaitlist: SalesInvoiceWaitlistItemType[]
  purchaseInvoiceWaitlist: PurchaseInvoiceWaitlistItemType[]
  xInvoiceWaitlist: XInvoiceWaitlistItemType[]
  yInvoiceWaitlist: YInvoiceWaitlistItemType[]
  zInvoiceWaitlist: ZInvoiceWaitlistItemType[]
  addCounterSaleItem: (data: CounterSaleWaitlistItemType['data']) => void
  addSalesInvoiceItem: (data: SalesInvoiceWaitlistItemType['data']) => void
  addPurchaseInvoiceItem: (data: PurchaseInvoiceWaitlistItemType['data']) => void
  addPurchaseX: (data: XInvoiceWaitlistItemType['data']) => void
  addPurchaseY: (data: YInvoiceWaitlistItemType['data']) => void
  addPurchaseZ: (data: ZInvoiceWaitlistItemType['data']) => void
  // ...

  counterSaleWaitlist: CounterSaleWaitlistItemType[]
  salesInvoiceWaitlist: SalesInvoiceWaitlistItemType[]
  purchaseInvoiceWaitlist: PurchaseInvoiceWaitlistItemType[]
  xInvoiceWaitlist: XInvoiceWaitlistItemType[]
  yInvoiceWaitlist: YInvoiceWaitlistItemType[]
  zInvoiceWaitlist: ZInvoiceWaitlistItemType[]
  addCounterSaleItem: (data: CounterSaleWaitlistItemType['data']) => void
  addSalesInvoiceItem: (data: SalesInvoiceWaitlistItemType['data']) => void
  addPurchaseInvoiceItem: (data: PurchaseInvoiceWaitlistItemType['data']) => void
  addPurchaseX: (data: XInvoiceWaitlistItemType['data']) => void
  addPurchaseY: (data: YInvoiceWaitlistItemType['data']) => void
  addPurchaseZ: (data: ZInvoiceWaitlistItemType['data']) => void
  // ...

Are there any common practices to handle such a thing? Thanks.

10 replies

Gaming

Programming