DINO
DINO
PostsComments
RReactiflux
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?
No description
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