Todo app built with t3 stack

Community feedback

• 

  j0sephh123•140

  @j0sephh123

  Posted over 2 years ago

  Great job, looks very clean and maintainable. Works fine on the deployed url, haven't started it locally due to the need of postgres. I really like how you have used react-query, modules folder, hooks with optimistic updates and rollback.

  • Small idea for Typescript:

  // src/layout/AppLayout.tsx
  type LayoutContentWrapperProps = {
  
  className?: string;
  
  } & PropsWithChildren;
  …
  export const AppLayout = ({ children }: PropsWithChildren) => {
  

  • Seeing that you cast router.query.status in src/modules/todos/views/TodosView.tsx, i have a small idea to create a custom hook. Since you are using router.query.status in 2 files you may be able to abstract a bit.

  function useRouterQueryStatus<T>() {
    const router = useRouter();
  
    return router.query.status as T;
  }
  
  export const TodosView = ({ className }: TodosViewProps) => {
    const status = useRouterQueryStatus<TodoStatus>();
  

  • Slightly opinionated idea for useTodos hook.

  export function useTodos(status?: TodoStatus) {
    const { isLoading, data } = api.todos.getAll.useQuery({ status });
  
    return { isLoading, todos: data };
  }
  

  02