starred/documenso

Fork 0

mirror of https://github.com/documenso/documenso.git synced 2026-04-26 06:15:58 +03:00

[GH-ISSUE #752] Modularize data rendering logic inside tab component #221

New issue

Closed

opened 2026-02-26 18:45:58 +03:00 by kerem · 3 comments

kerem commented

2026-02-26 18:45:58 +03:00

Owner

Originally created by @plxity on GitHub (Dec 10, 2023).
Original GitHub issue: https://github.com/documenso/documenso/issues/752

Improvement Description

As of now multiple && are used for rendering data inside the table based on the conditions. We can make this modular to accommodate any other logic that might get added in future.

File : apps/web/src/app/(dashboard)/documents/page.tsx

Current code :

      <div className="mt-8">
        {results.count > 0 && <DocumentsDataTable results={results} />}
        {results.count === 0 && <EmptyDocumentState status={status} />}
      </div>

Rationale

No response

Proposed Solution

A function to render components based on the parameter passed inside the function

Updated code :

  const renderTableData = (count: number) => {
    if (count > 0) {
      return <DocumentsDataTable results={results} />;
    } else if (count === 0) {
      return <EmptyDocumentState status={status} />;
    }
  };

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this improvement suggestion.

I have searched the existing issues and improvement suggestions to avoid duplication.
I have provided a clear description of the improvement being suggested.
I have explained the rationale behind this improvement.
I have included any relevant technical details or design suggestions.
I understand that this is a suggestion and that there is no guarantee of implementation.

Originally created by @plxity on GitHub (Dec 10, 2023). Original GitHub issue: https://github.com/documenso/documenso/issues/752 ### Improvement Description As of now multiple `&&` are used for rendering data inside the table based on the conditions. We can make this modular to accommodate any other logic that might get added in future. File : `apps/web/src/app/(dashboard)/documents/page.tsx` Current code : ```js <div className="mt-8"> {results.count > 0 && <DocumentsDataTable results={results} />} {results.count === 0 && <EmptyDocumentState status={status} />} </div> ``` ### Rationale _No response_ ### Proposed Solution A function to render components based on the parameter passed inside the `function` Updated code : ```js const renderTableData = (count: number) => { if (count > 0) { return <DocumentsDataTable results={results} />; } else if (count === 0) { return <EmptyDocumentState status={status} />; } }; ``` ### Alternatives (optional) _No response_ ### Additional Context _No response_ ### Please check the boxes that apply to this improvement suggestion. - [X] I have searched the existing issues and improvement suggestions to avoid duplication. - [X] I have provided a clear description of the improvement being suggested. - [X] I have explained the rationale behind this improvement. - [X] I have included any relevant technical details or design suggestions. - [X] I understand that this is a suggestion and that there is no guarantee of implementation.

kerem

2026-02-26 18:45:58 +03:00

closed this issue
added the
status: triage
label

kerem commented

2026-02-26 18:45:59 +03:00

Author

Owner

@dguyen commented on GitHub (Dec 11, 2023):

Hey @plxity! Thanks for looking through the codebase!

In this case, we prefer the current style for basic conditional scenarios like above.

To handle cases where the conditional logic gets more complicated, we have been experimenting with using ts pattern match to handle rendering complex sections.

Example:

https://github.com/documenso/documenso/blob/main/apps/web/src/app/(signing)/sign/%5Btoken%5D/complete/page.tsx#L70-L88

@dguyen commented on GitHub (Dec 11, 2023): Hey @plxity! Thanks for looking through the codebase! In this case, we prefer the current style for basic conditional scenarios like above. To handle cases where the conditional logic gets more complicated, we have been experimenting with using ts pattern match to handle rendering complex sections. Example: https://github.com/documenso/documenso/blob/main/apps/web/src/app/(signing)/sign/%5Btoken%5D/complete/page.tsx#L70-L88

kerem commented

2026-02-26 18:45:59 +03:00

Author

Owner

@plxity commented on GitHub (Dec 11, 2023):

@dguyen Understood, this makes sense. Should I migrate it to the ts-pattern instead of the current PR? What do you suggest?

@plxity commented on GitHub (Dec 11, 2023): @dguyen Understood, this makes sense. Should I migrate it to the ts-pattern instead of the current PR? What do you suggest?

kerem commented

2026-02-26 18:45:59 +03:00

Author

Owner

@dguyen commented on GitHub (Dec 11, 2023):

The current implementation is fine for now, if it ever gets complex we can always update it to use ts pattern

@dguyen commented on GitHub (Dec 11, 2023): The current implementation is fine for now, if it ever gets complex we can always update it to use ts pattern

kerem referenced this issue

2026-02-26 18:48:59 +03:00

[PR #221] [CLOSED] feat: add action buttons to document table #804

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/documenso#221

No description provided.

Rows
Columns