Tip calculator app, developed with TypeScript and React

Community feedback

• 

  j0sephh123•140

  @j0sephh123Posted about 2 years ago

  Hello, adding some feedback

  • regarding typing in useState

  const [tipRender, setTipRender] = useState<tipPor[]>([]); // good
  const [billState, setBillState] = useState<string>(""); // no need for <string>
  const [erroBill, setErroBill] = useState<boolean>(false); // no need for <boolean>
  const [styleErrBill, setStyleErrBill] = useState<styleErr>(); 
  // here we could use null to handle when there is no error. It is a bit more verbose, but shows that error is null, i.e no error initially.
  const [styleErrBill, setStyleErrBill] = useState<styleErr | null>(null); 
  

  • Don't add types inside React components, either on top of the file or in another file depending on if it is used in multiple places or not.
  • const initialState - defined that also outside of the component
  • use CapitalCase for typescript type names
  • extract functions like trunc in different files like helpers or similar, they don't need to be defined inside the component. Keep functions like handleClick, which use components specific variables.
  • useMessage("Can't be zero"); - messages can be defined as variables and exported from another file
  • avoid deeply nested if's - in validationInput you have 3 levels deep ifs. Try to rewrite the function to avoid so much complexity.
  • function calcSimpleTip(): void if the function returns void, it doesn't need to be explicitly typed, it will be inferred from TS compiler.
  • in calcSimpleTip why billStateConvert and the other variables are defined with let ? Firstly, they can be const, also their type will be inferred. For example const billStateConvert = validationInput(billState, setErroBill, setErrMessBill); // will also have type number
  • Avoid casting variables to a type. It should be used only in rare cases, when there are no other options ( casting is ) let calctip = (billStateConvert * (porcentConvert / 100)) / peopleStateConvert; Here calctip doesnt need to be casted to number, because its type is inferred from the expression. Typescript is smart.
  • Again function resetStatusTip(): tipPor[] doesn't need to have explicit return type.
  • Regarding PartOneInput. Doesn't need to have type='text' since it it the default input prop. onBlur and onClick have e , but it is not used.

  Overall, good job. I would suggest the following:

  • split the application in smaller components
  • use useReducer function to handle the logic
  • refine Typescript knowledge a bit - it is endless, really, just a bit.

  Marked as helpful

  1

  ---

  

  Harvey Yerik•370

  @YerikAHPosted about 2 years ago

  @j0sephh123 Hello, I modified some parts of my code with the help of your comment, I think I'll start studying TypeScript a bit more.

  Anyway, thank you very much for the comment.

  0
• 

  Sebastian•510

  @sebix0nusPosted about 2 years ago

  Hello! 👋

  When I type in the number of people I should get the result right away, but unfortunately it only shows up when I press on the result panel. Maybe try to use .oninput event in a function on your input.

  Something like this in example: numberOfPeople.oninput = () => { }

  Cheers!

  0

  ---

  

  Harvey Yerik•370

  @YerikAHPosted about 2 years ago

  @sebix0nus Hi, I already fixed that little problem, I tried the solution you mentioned, but it didn't work, so I fixed it with the useEffect hook.

  Thank you very much for commenting on the errors of the application.

  0