Skip to content
This repository has been archived by the owner on Jan 16, 2024. It is now read-only.

66 use datatable in live submissions #70

Merged
merged 22 commits into from
Jan 3, 2024
Merged

66 use datatable in live submissions #70

merged 22 commits into from
Jan 3, 2024

Conversation

Clumsy-Coder
Copy link
Owner

Summary

Make Live submissions table searchable

Description

  • Use DataTable to display live submissions
    • display live submissions
    • search through the table
    • sort columns
    • show/hide columns
    • show total table items
    • show table pagination
    • use Shadcn-ui badge to display Verdict
      • use fgColor
  • display loading skeleton when fetching data
  • set fgColor to Verdict type

Related Issue

#66

Motivation and Context

To make the table searchable.

How Has This Been Tested?

Screenshots (if appropriate)

page-home-loading

page-home

Types of changes

  • New feature: (non-breaking change, which adds functionality)
  • Bug fix: (non-breaking change, which fixes an issue)
  • Performance: improvement
  • Documentation:
  • Style: (fix code formatting issues, whitespace, missing semicolon, rename variable etc)
  • Chore: (add changes that are not related to source code. Ex: changing eslint config)
  • Code refactor: (change working code without regressing features)
  • Test: (adding/updating tests)
  • Build: (changes that affect the build system. Ex: npm)
  • CI: (changes to the CI/CD configs and scripts)

Does this Pull Request introduce a breaking change?

  • yes
  • no

Checklist

  • The commit message follows conventional commits guidelines: https://www.conventionalcommits.org/en/v1.0.0/
  • My code follows the code style of this project.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@Clumsy-Coder
build(shadcn): add component Badge
5765788 
  ## what
  - add component `Badge`

  ## how
  - run command
    npx shadcn-ui@latest add badge

  ## why
  - this component will be used to display the verdict in
    `LiveSubmissions`

  ## where
  - ./src/components/ui/badge.tsx

  ## usage
@Clumsy-Coder
chore(components:data-table): add columns.tsx for home page
9ecd8fd 
  ## what
  - add `columns.tsx` for home page
  - display the `Submission ID` column

  ## how

  ## why
  - this will be used to display live submissions on the home page

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(page:home): display the DataTable for live submissions
39f9460 
  ## what
  - display the `DataTable` for live submissions

  ## how

  ## why
  - using the `DataTable` will allow
    - filter the table
    - sort columns
    - show/hide columns
    - use pagination
  - reusing code to keep the code base lean

  ## where
  - ./src/app/page.tsx

  ## usage
@Clumsy-Coder
refactor(page:home): use DataTable loading component
9498143 
  ## what
  - use `DataTable` loading component

  ## how

  ## why
  - reusing code
  - easy way to display skeleton data table with varying columns and
    rows

  ## where
  - ./src/app/page.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display problem number in live submiss…
80991ff 
…ions data-table

  ## what
  - display `problem number` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display problem title in live submissi…
c3e09bd 
…ons data-table

  ## what
  - display `problem title` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display username in live submissions d…
470b6b2 
…ata-table

  ## what
  - display `username` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display verdict in live submissions da…
48a334a 
…ta-table

  ## what
  - display `verdict` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display language in live submissions d…
e7f3194 
…ata-table

  ## what
  - display `language` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display runtime in live submissions da…
e92ed29 
…ta-table

  ## what
  - display `runtime` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display rank in live submissions data-…
8565ef7 
…table

  ## what
  - display `rank` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display submit time in live submission…
064d5e8 
…s data-table

  ## what
  - display `submit time` in live submissions data-table

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
style(components:data-table): add styling to live submissions `DataTa…
bc46636 
…ble`

  ## what
  - add styling to live submissions `DataTable`
    - show underline for `submission id` cells
    - show underline for `problem number` cells
    - show underline for `problem title` cells
    - show underline for `username` cells
    - align right `submit time` column
    - remove css classes for `buttonVariant`

  ## how

  ## why
  - to make it look better
  - to make the table fit in a laptop sized screen without overflowing

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
chore(components:data-table): disable column sorting in live submissions
975a63e 
  ## what
  - disable column sorting in live submissions

  ## how

  ## why
  - they have no purpose in sorting
  - they take up space, causing the table to overflow in x-axis

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
chore(components:data-table): set string names in the column dropdown
7f8d152 
  ## what
  - set string names in the column dropdown

  ## how

  ## why
  - before the dropdown would use the column `accessorKey` as a string
    to display
    - now it's manually set to have a better look

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
build(shadcn): add component Tooltip
9dc2458 
  ## what
  - add component `Tooltip`

  ## how
  - run command
    npx shadcn-ui@latest add tooltip

  ## why
  - will be used when hovering over `submit time` cell in live
    submissions

  ## where
  - ./package-lock.json
  - ./package.json
  - ./src/components/ui/tooltip.tsx

  ## usage
@Clumsy-Coder
feat(components:data-table): display submit time using tooltip
03b4435 
  ## what
  - display submit time using tooltip

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
chore(types): add fgColor for verdict
ec57ce7 
  ## what
  - add fgColor for `verdict`

  ## how

  ## why

  ## where
  - ./src/types/index.ts

  ## usage
@Clumsy-Coder
style(components:data-table): format code
decf2a6 
  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
style(components:data-table): add padding to links in live-submission…
5b3898a 
… DataTable

  ## what
  - add padding to links in live-submission DataTable

  ## how

  ## why

  ## where
  - ./src/app/components/data-table/columns.tsx

  ## usage
@Clumsy-Coder
chore(page:home): add page title
0d4506b 
  ## what
  - add page title

  ## how

  ## why

  ## where
  - ./src/app/page.tsx

  ## usage
@Clumsy-Coder
docs(docs:images): update images for home page
b4091b4 
  ## what
  - update images for home page
    - loading
    - data loaded

  ## how

  ## why

  ## where
  - ./docs/images/page-home-loading.png
  - ./docs/images/page-home.png

  ## usage
@Clumsy-Coder Clumsy-Coder self-assigned this Jan 3, 2024
@vercel Vercel
Copy link

vercel bot commented Jan 3, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
uva-uhunt ✅ Ready (Inspect) Visit Preview Jan 3, 2024 11:41pm

@Clumsy-Coder Clumsy-Coder linked an issue Jan 3, 2024 that may be closed by this pull request
[feature-request]: use DataTable to live submissions page #66
Closed
@Clumsy-Coder Clumsy-Coder merged commit e419610 into development Jan 3, 2024
8 checks passed
@Clumsy-Coder Clumsy-Coder deleted the 66-use-datatable-in-live-submissions branch January 3, 2024 23:44
@Clumsy-Coder
Copy link
Owner Author

🎉 This PR is included in version 1.0.0-development.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees

@Clumsy-Coder Clumsy-Coder

Labels
released on @development
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[feature-request]: use DataTable to live submissions page
1 participant
@Clumsy-Coder