Some questions regarding code organization inT3 Stack

Unanswered

Wetterhoun posted this in #help-forum

WetterhounOP

2023-12-13T17:55:34.000Z

I have couple of questions regarding code organization.

How do you guys handle different states like isError, isLoading etc. And where does the code of this resides? Does that resides on the page or is there a separate component like SomeEntityListing.tsx to handle these cases etc. Also where does the data fetching logic and code resides?

In my case, I have a list of Projects and I have a ProjectsListing component which fetches and display the data along with their different state. The code looks very spaghetti and I want to move it to something more maintainable.

18 Replies

WetterhounOP

2023-12-13T17:57:56.000Z

My code for ProjectListing.tsx currently looks like this

import ProjectListItem from "~/components/projects/project-list-item";
import { api } from "~/utils/api";

function ProjectsList_Loading() {
  return (
    <>
      <ProjectListItem project={undefined} />
      <ProjectListItem project={undefined} />
    </>
  );
}

function ProjectList_Empty() {
  return (
    <div className="flex h-96 items-center justify-center">
      Ohh... So empty. Create a project to see them here in the list.
    </div>
  );
}

function ProjectList_Error() {
  return (
    <div className="flex h-96 items-center justify-center">
      Some error happened while loading the projects. Kindly refresh the page.
    </div>
  );
}

export default function ProjectsList() {
  const projectsQuery = api.projects.getAll.useQuery();

  if (projectsQuery.isLoading) {
    return ProjectsList_Loading();
  }

  if (projectsQuery.isError) {
    return ProjectList_Error();
  }

  if (projectsQuery.data?.length === 0) {
    return ProjectList_Empty();
  }

  return projectsQuery.data?.map((project) => (
    <ProjectListItem key={project.id} project={project} />
  ));
}