ahmadaccino Comments - Answer Overflow

ahmadaccino

•Created by ahmadaccino on 5/5/2023 in #questions

Tips/Tricks for large scale create-t3-turbo projects?

Yup, second one, in functionality. Lots of accumulation of data. graphs, tables, calendars. So performance is definitely a concern

8 replies

TTCTheo's Typesafe Cult

•Created by Joshowaaah! on 5/5/2023 in #questions

Any good datepicker libraries?

A lot of people like shadcn so heres one: https://ui.shadcn.com/docs/components/calendar. This one is purely just a dedicated datepicker package and is not bad: https://react-tailwindcss-datepicker.vercel.app

7 replies

TTCTheo's Typesafe Cult

•Created by RockBacon on 3/17/2023 in #questions

What is the best typesafe tech stack for a chrome extension?

this. using tailwind, vite, react, and typescript i found the ui side of making a chrome extension a very nice and smooth experience. The backend ofc can be literally anything you like, and trpc is good for end to end type safety

5 replies

TTCTheo's Typesafe Cult

•Created by Perfect on 2/2/2023 in #questions

Complex State Help / Best Practice

This is something I encountered quite frequently. It can definitely get hectic with a complex object. Sometimes you have step back and think of a more SOLID approach and ask yourself if you can optimize the way the dataflow is set up to simplify state management. If your react components are split up enough, the state that they do own will be minimal. But, sometimes, especially for mutations, one needs to go ahead and deal with a deeply nested object in state. If thats the case, then the spread operator is you best friend, as you dont need to enter values that will remain the same. That way the code will only show the values that are getting updated. Make sure to use the spread operator BEFORE the fields that you are overriding, otherwise your override will get overridden by the previous object. On an unrelated note, it might make more sense for resources and components to be arrays. If they are a list of resources and the keys aren't always the same list, an array should be used. Nonetheless, here are some examples (I added an example with lodash incase you dont care about type safety):

const [costObj, setCostObj] = useState({
  cost: {
    resources: {
      sulfur: 2200,
      charcoal: 3000,
      frags: 200,
      low_grade: 60,
      cloth: 5,
    },
    components: {
      tech_trash: 2,
    },
  },
});

// Switch Sulfur from 2200 -> 5000

setCostObj({
  cost: {
    ...costObj.cost,
    resources: {
      ...costObj.cost.resources,
      sulfur: 5000,
    },
  },
});

// Increment Sulfur by 1

setCostObj({
  cost: {
    ...costObj.cost,
    resources: {
      ...costObj.cost.resources,
      sulfur: costObj.cost.resources.sulfur + 1,
    },
  },
});

// Same as Previous, but dangerously using lodash
const originalSulfurValue = get(costObj, 'cost.resources.sulfur')
const newCostObj = costObj
set(newCostObj, 'cost.resources.sulfur', originalSulfurValue + 1)
setCostObj(costObj)

const [costObj, setCostObj] = useState({
  cost: {
    resources: {
      sulfur: 2200,
      charcoal: 3000,
      frags: 200,
      low_grade: 60,
      cloth: 5,
    },
    components: {
      tech_trash: 2,
    },
  },
});

// Switch Sulfur from 2200 -> 5000

setCostObj({
  cost: {
    ...costObj.cost,
    resources: {
      ...costObj.cost.resources,
      sulfur: 5000,
    },
  },
});

// Increment Sulfur by 1

setCostObj({
  cost: {
    ...costObj.cost,
    resources: {
      ...costObj.cost.resources,
      sulfur: costObj.cost.resources.sulfur + 1,
    },
  },
});

// Same as Previous, but dangerously using lodash
const originalSulfurValue = get(costObj, 'cost.resources.sulfur')
const newCostObj = costObj
set(newCostObj, 'cost.resources.sulfur', originalSulfurValue + 1)
setCostObj(costObj)

3 replies

TTCTheo's Typesafe Cult

•Created by H on 2/2/2023 in #questions

create t3 app with pnpm issue

I dont think it has to do anything with t3, I think he just forgot to add the react-query clientprovider to app root

9 replies

TTCTheo's Typesafe Cult

•Created by H on 2/2/2023 in #questions

create t3 app with pnpm issue

I believe that is because you need to instantiate a queryclient. Make sure to start the client and add the provider in your _app.tsx // Create a client const queryClient = new QueryClient() function App() { return ( // Provide the client to your App <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ) }

9 replies

Gaming

Programming