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

59 add problems page #65

Merged
merged 36 commits into from
Jan 2, 2024
Merged

59 add problems page #65

merged 36 commits into from
Jan 2, 2024

Conversation

Clumsy-Coder
Copy link
Owner

Summary

  • display all problems on page /problems

Description

  • client
    • fetch all problems using react-query
    • display the problems using DataTable
      • sort columns
      • show/hide columns
      • search all columns
      • show total items in the table
      • show pagination
    • display loading component when fetching data
    • Add /problems link to navbar

Related Issue

#59

Motivation and Context

To display all problems in a page
To display in a table in order to be more efficient with memory

How Has This Been Tested?

Screenshots (if appropriate)

page-problems

page-problems-loading

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(npm): add package @tanstack/react-table
0e8abd5 
  ## what
  - add package `@tanstack/react-table`

  ## how

  ## why
  - will be used shadcn-ui `Table` to make a more complex table

  ## where
  - ./package-lock.json
  - ./package.json

  ## usage
@Clumsy-Coder
build(shadcn): add component DataTable
d83d3ed 
  ## what
  - add component `DataTable`

  ## how
  - obtained from
    - https://ui.shadcn.com/docs/components/data-table#datatable--component

  ## why
  - this component was designed for one use, but this component will be
    used in multiple pages, so it makes sense to place it
    `src/components/ui/`
    - check end of section of the link above

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage
@Clumsy-Coder
chore(shadcn): add columns properties for DataTable component
30fbbf8 
  ## what
  - add columns properties for `DataTable` component
    - define which columns to display on the DataTable

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#column-definitions

  ## why
  - this will determine which columns to display

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

  ## usage
@Clumsy-Coder
chore(hooks): add react-query hook to fetch all problems
5fad4aa 
  ## what
  - add react-query hook to fetch all problems

  ## how
  - fetch from api endpoint `/api/problems`

  ## why

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

  ## usage
@Clumsy-Coder
feat(page:problems): display all problems using DataTable component
d556d2e 
  ## what
  - display all problems using `DataTable` component

  ## how
  - using component `DataTable`
  - check
    - https://ui.shadcn.com/docs/components/data-table

  ## why
  - the `DataTable` will later be changed to be able to
    - search by problem number or problem title
    - add problem to favourites
    - remove problem to favourites
    - view/hide columns
    - add pagination

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

  ## usage
@Clumsy-Coder
feat(shadcn): add pagination to DataTable component
d875e1b 
  ## what
  - add pagination to `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#pagination

  ## why
  - to not load the a huge list of elements at once
    - lighter on memory

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage
@Clumsy-Coder
feat(shadcn): add column scrolling to DataTable component
54246db 
  ## what
  - add column scrolling to `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#sorting

  ## why
  - allows a column to be sorted

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage
@Clumsy-Coder
feat(components): add column properties to be sortable DataTable co…
8730efd 
…mponent

  ## what
  - add column properties to be sortable `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#make-header-cell-sortable

  ## why
  - to have the ability to sort the table as you please

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

  ## usage
@Clumsy-Coder
feat(shadcn): add column visibility toggle for DataTable component
8a9510f 
  ## what
  - add column visibility toggle for `DataTable` component

  ## how
  - check
    - https://ui.shadcn.com/docs/components/data-table#visibility

  ## why
  - this will allow the usage of toggling columns visibility

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage
@Clumsy-Coder
build(npm): add package @radix-ui/react-icons
1c158d8 
  ## what
  - add package `@radix-ui/react-icons`

  ## how

  ## why

  ## where
  - ./package-lock.json
  - ./package.json

  ## usage
@Clumsy-Coder
build(shadcn): add component Select
a7620ee 
  ## what
  - add component `Select`

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

  ## why

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

  ## usage
@Clumsy-Coder
feat(shadcn): add DataTablePagination component
1d00e1c 
  ## what
  - add `DataTablePagination` component

  ## how
  - obtained from
    - https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/components/data-table-pagination.tsx

  ## why
  - the table pagination is getting complicated, so it's better to move
    it to it's own file

  ## where
  - ./src/components/ui/data-table/pagination.tsx

  ## usage
@Clumsy-Coder
refactor(shadcn): use component DataTablePagination in DataTable …
e8c4cfe 
…component

  ## what
  - use component `DataTablePagination` in `DataTable` component

  ## how
  - obtained from
    - https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/components/data-table.tsx#L123

  ## why
  - the table pagination is getting complicated, so it's better to move
    it to it's own file

  ## where
  - ./src/components/ui/data-table.tsx

  ## usage
@Clumsy-Coder
chore(shadcn): move DataTable to `./src/components/ui/data-table/in…
0bbd967 
…dex.tsx`

  ## what
  - move `DataTable` to `./src/components/ui/data-table/index.tsx`

  ## how

  ## why
  - place data-table related to it's own folder

  ## where
  - ./src/components/ui/data-table.tsx -> ./src/components/ui/data-table/index.tsx

  ## usage
@Clumsy-Coder
feat(components): add a Link to the problem page in DataTable for `…
1746b65 
…/problems`

  ## what
  - add a Link to the problem page in `DataTable` for `/problems`

  ## how

  ## why
  - need to be able to go the problem page for a specific problem number

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

  ## usage
@Clumsy-Coder
chore(components): use Problem as a type in DataTable columns
1c04ed2 
  ## what
  - use `Problem` as a type in DataTable columns

  ## how

  ## why
  - was using incorrect type for the column

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

  ## usage
@Clumsy-Coder
style(components): format code
8aebe8a 
  ## what
  - format code

  ## how

  ## why

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

  ## usage
@Clumsy-Coder
build(shadcn): add component Input
121baf4 
  ## what
  - add component `Input`

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

  ## why

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

  ## usage
@Clumsy-Coder
feat(shadcn): add ability to filter any column in DataTable component
089dffc 
  ## what
  - add ability to filter any column in `DataTable` component

  ## how
  - obtained from
    - https://youtu.be/ZG2_vPlQA8Q?si=4AvVNavj5ih1A8tQ

  ## why
  - this will allow the ability to filter by any column

  ## where
  - ./src/components/ui/data-table/index.tsx

  ## usage
@Clumsy-Coder
feat(shadcn:data-table): add button to clear filter
20e960c 
  ## what
  - add button to clear filter

  ## how

  ## why

  ## where
  - ./src/components/ui/data-table/index.tsx

  ## usage
@Clumsy-Coder
chore(shadcn:data-table): add icon in DataTable columns dropdown
232d0ab 
  ## what
  - add icon in DataTable `columns` dropdown
  - add dropdown separator when opening the dropdown

  ## how

  ## why
  - better looking

  ## where
  - ./src/components/ui/data-table/index.tsx

  ## usage
@Clumsy-Coder
chore(shadcn:data-table): use custom string in DataTable dropdown
0a4c02b 
  ## what
  - use custom string in DataTable dropdown

  ## how
  - add custom property `meta` in columns.tsx
  - check https://tanstack.com/table/v8/docs/api/core/column-def#meta

  ## why
  - add better string to display in dropdown
    - before it was displaying the column ID

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

  ## usage
@Clumsy-Coder
chore(components:data-table): display link as a button
aeb953f 
  ## what
  - display link as a button

  ## how

  ## why
  - makes it more apparent that there is a link available

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

  ## usage
@Clumsy-Coder
chore(pages:problems): add page title
2ad6315 
  ## what
  - add page title

  ## how

  ## why

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

  ## usage
@Clumsy-Coder
chore(shadcn:data-table): display total number of items in the DataTable
d1552f2 
  ## what
  - display total number of items in the DataTable

  ## how

  ## why
  - to give the user an idea how many items are there in a table

  ## where
  - ./src/components/ui/data-table/pagination.tsx

  ## usage
@Clumsy-Coder
feat(shadcn:data-table): add column header component for DataTable
f1901ff 
  ## what
  - add column header component for DataTable
    - sort column
      - ascending
      - descending
      - default (sort by it's original order)
    - hide column

  ## how
  - obtained from
    - https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/tasks/components/data-table-column-header.tsx

  ## why
  - this will be used by DataTable to render a more advanced column header
    - this is opt-in
  - this can only be used in a `column.tsx` file
    - check
      - https://github.com/shadcn-ui/ui/blob/fb614ac2921a84b916c56e9091aa0ae8e129c565/apps/www/app/examples/tasks/components/columns.tsx#L38-L46C4

  ## where
  - ./src/components/ui/data-table/column-header.tsx

  ## usage
@Clumsy-Coder
refactor(components:data-table): use DataTableColumnHeader to rende…
d2d7193 
…r column header

  ## what
  - use `DataTableColumnHeader` to render column header

  ## how

  ## why
  - this will add a more advanced form of column header options
    - sort column
      - ascending
      - descending
      - default
    - hide column

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

  ## usage
@Clumsy-Coder
chore(pages:problems): remove unused code
7a85498 
  ## what
  - remove unused code

  ## how

  ## why

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

  ## usage
@Clumsy-Coder
chore(shadcn:data-table): disable word-wrapping for pagination number
a302e0f 
  ## what
  - disable word-wrapping for pagination number
    - show `Page 'i' of 'x'` in the same line

  ## how

  ## why

  ## where
  - ./src/components/ui/data-table/pagination.tsx

  ## usage
@Clumsy-Coder
feat(shadcn:data-table): add loading component for DataTable
5796915 
## what
  - add loading component for DataTable

  ## how

  ## why
  - will be used to display when fetching data

  ## where
  - ./src/components/ui/data-table/loading.tsx

  ## usage
@Clumsy-Coder
style(css): add css classnames
48c1b1a 
  ## what
  - add css classnames
    - nav-link
      - highlight the link on hover
    - active-nav-link
      - highlight the link. (used when the link and current page are the
        same)

  ## how

  ## why
  - these two nav-links will be used in `Navbar` component to
    - highlight a link on hover
    - highlight a link when the current path url is the same as the nav
      link url

  ## where
  - ./src/app/globals.css

  ## usage
@Clumsy-Coder
chore(components:navbar): add navbar link to /problems page
700e427 
  ## what
  - add navbar link to `/problems` page

  ## how

  ## why

  ## where
  - ./src/components/navbar.tsx

  ## usage
@Clumsy-Coder
feat(components:navbar): highlight active links
87927e2 
  ## what
  - highlight active links

  ## how
  - use css classname from `globals.css`
    - nav-link
      - highlight link on hover
    - active-nav-link
      - highlight link when link href is the same as the url pathname

  ## why

  ## where
  - ./src/components/navbar.tsx

  ## usage
@Clumsy-Coder
chore(pages:problems): display a loading component for /problems page
380fa20 
  ## what
  - display a loading component for `/problems` page

  ## how

  ## why

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

  ## usage
@Clumsy-Coder
docs(docs:images): add a screenshot of /problems page
8242aee 
  ## what
  - add a screenshot of `/problems` page
    - loading
    - data loaded

  ## how

  ## why

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

  ## usage
@Clumsy-Coder
docs(readme): display screenshots of /problems page
b9ee354 
  ## what
  - display screenshots of `/problems` page
    - loading
    - data loaded

  ## how

  ## why

  ## where
  - ./README.md

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

vercel bot commented Jan 2, 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 2, 2024 11:54pm

@Clumsy-Coder Clumsy-Coder linked an issue Jan 2, 2024 that may be closed by this pull request
[feature-request]: add problems page #59
Closed
@Clumsy-Coder Clumsy-Coder merged commit 685b71d into development Jan 2, 2024
8 checks passed
@Clumsy-Coder Clumsy-Coder deleted the 59-add-problems-page branch January 2, 2024 23:57
@Clumsy-Coder
Copy link
Owner Author

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

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]: add problems page
1 participant
@Clumsy-Coder