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

88 add user page #89

Merged
merged 44 commits into from
Jan 15, 2024
Merged

88 add user page #89

merged 44 commits into from
Jan 15, 2024

Conversation

Clumsy-Coder
Copy link
Owner

Summary

add page for /users/[username]

Description

  • client
    • fetch data for users/[username] page
    • display chart for user submissions by verdict
    • display chart for user submissions overtime
    • display chart for user submissions by language
    • display chart for solved problems VS submission attempts
    • display table of user submissions
  • server
    • add schema for api endpoint
    • add endpoint for user submission by verdict
    • add endpoint for user submissions overtime
    • add endpoint for user submissions by language
    • add endpoint for solved problems VS submission attempts
    • add endpoint for user submissions
  • other
    • add screenshot
    • add screenshot to README

Related Issue

#88

Motivation and Context

This page will display stats on the user loaded

How Has This Been Tested?

Screenshots (if appropriate)

page-users-username-loading

page-users-username

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
chore(types): add type for User Submission
e95c81a 
  ## what
  - add type for User Submission
    - UserSubmission
      - name: name of the user
      - uname: username of the user
      - subs: (of type UserSub)
        - sid: submission id
        - pid: problem id
        - pnum: problem number
        - pTitle: problem title
        - ver: verdict id
        - verdict: verdict details (of type ProblemVerdictType)
        - run: runtime
        - sbt: submission time
        - lan: language
        - rank: submission rank

  ## how

  ## why
  - used for setting up structure of the data returned from api

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

  ## usage
@Clumsy-Coder
chore(schema:user:submissions): add schema for endpoint `/api/users/[…
8214e29 
…username]/submissions`

  ## what
  - add schema for endpoint `/api/users/[username]/submissions`

  ## how

  ## why
  - this will be used to validate the data on client side and server
    side

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

  ## usage
@Clumsy-Coder
feat(api:user:submissions): add endpoint `/api/users/[username]/submi…
b88c3a2 
…ssions`

  ## what
  - add endpoint `/api/users/[username]/submissions`

  ## how
  - check if username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch all problems from `/api/problems`
    - used as a cache for `pnum`, `pTitle`
  - fetch user submissions
  - sort the submissions by submission time in descending order
  - take only the first 500 elements in the array
  - convert submission array into `UserSub` object
    - add properties
      - pnum
      - pTitle
      - verdict

  ## why
  - this will be used for fetching user submissions

  ## where
  - ./src/app/api/users/[username]/submissions/route.ts

  ## usage
@Clumsy-Coder
chore(hooks): add react-query hook to fetch user submissions
953998c 
  ## what
  - add react-query hook to fetch user submissions

  ## how
  - fetch from endpoint `/api/users/[username]/submissions`

  ## why

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

  ## usage
@Clumsy-Coder
chore(shadcn:data-table): add columns structure for user submissions …
d56bc21 
…table

  ## what
  - add columns structure for user submissions table
    - submission ID
    - problem number
    - problem title
    - verdict
    - language
    - runtime
    - rank
    - submission time

  ## how
  - using @tanstack/react-table to generate a table

  ## why
  - this will be used to display data as a table using DataTable

  ## where
  - ./src/app/users/[username]/components/data-table/submissionColumns.tsx

  ## usage
@Clumsy-Coder
feat(page:user): display user submissions on /users/[username] page
7e68d5b 
  ## what
  - display user submissions on `/users/[username]` page

  ## how
  - using DataTable to display a table

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
chore(types): add property verdictShort in ProblemVerdictMap object
e83aea2 
  ## what
  - add property `verdictShort` in `ProblemVerdictMap` object

  ## how

  ## why
  - this will be used in api endpoint `/api/users/[username]/submissions/verdict`
    - the endpoint will count the verdicts by verdict ID
      - the verdicts are in number form
      - the ProblemVerdictMap needs a way to reference the object in
        reverse when converting verdictID into verdictShort
      - with this the endpoint can access the object of the
        corresponding verdictObject using verdictShort

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

  ## usage
@Clumsy-Coder
chore(types): add type for User submission verdict
2c0b18d 
  ## what
  - add type for User submission verdict
    - UserSubmissionBarChartType
      - name: name of the bar in bar chart
      - verdict: value of submission verdict count
      - tooltipTitle: string to display in bar tooltip
      - fill: color to display the bar chart

  ## how

  ## why
  - used for generating data for Rechart bar chart
    - for displaying user submissions by verdict

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

  ## usage
@Clumsy-Coder
feat(api:user:submissions:verdict): add endpoint `/api/users/[usernam…
d3b217d 
…e]/submissions/verdict`

  ## what
  - add endpoint `/api/users/[username]/submissions/verdict`

  ## how
  - check if username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions from endpoint `/api/users/[username]/submissions`
  - count submissions by verdict type
  - process the data to work with rechart bar chart

  ## why
  - used for displaying submission by verdict in a Rechart bar chart

  ## where
  - ./src/app/api/users/[username]/submissions/verdict/route.ts

  ## usage
@Clumsy-Coder
chore(hooks): add react-query hook to fetch user submissions by verdict
d2854e0 
  ## what
  - add react-query hook to fetch user submissions by verdict

  ## how
  - fetch from endpoint `/api/users/[username]/submissions/verdict`

  ## why

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

  ## usage
@Clumsy-Coder
feat(page:user): display user submissions by verdict with bar chart
21f3ffe 
  ## what
  - display user submissions by verdict with bar chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionVerdict`
  - display the data using Rechart bar chart

  ## why
  - to display submissions by verdict

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
style(page:user): format code
30b9241 
  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
chore(types:raw): add type for raw User submissions
debe276 
  ## what
  - add type for raw User submissions
    - UserSubmission
      - name: name of the user
      - uname: username of the user
      - subs: submissions of the user (type of UserSub)
    - UserSub: a tuple of 7 elements
      - Submission ID
      - Problem ID
      - Verdict ID
      - Runtime
      - Submission time (unix timestamp)
      - Language ID
      - Submission Rank

  ## how

  ## why
  - this is to add types to the raw data returned from uhunt api
  - better to have a seperate Raw data type before transforming them
    into usable data type

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

  ## usage
@Clumsy-Coder
refactor(api:user:submissions): use RawUserSubmission type in endpo…
76bbdf9 
…int `/api/users/[username]/submissions`

  ## what
  - use `RawUserSubmission` type in endpoint `/api/users/[username]/submissions`

  ## how

  ## why
  - this is to give a more accurate understanding of the data returned
    from uhunt api

  ## where
  - ./src/app/api/users/[username]/submissions/route.ts

  ## usage
@Clumsy-Coder
refactor(types): move type SubmissionLangType to src/types/index.ts
5d5572a 
  ## what
  - move type `SubmissionLangType` from `src/utils/dataProcessing.ts` to `src/types/index.ts`

  ## how

  ## why
  - better to move it in one place

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

  ## usage
@Clumsy-Coder
refactor(types): move type VerdictBarChartType to src/types/index.ts
9ebdce4 
  ## what
  - move type `VerdictBarChartType` to `src/types/index.ts`

  ## how

  ## why
  - better to move it in one place

  ## where
  - ./src/components/charts/ProblemVerdictChart.tsx
  - ./src/types/index.ts
  - ./src/utils/dataProcessing.ts

  ## usage
@Clumsy-Coder
refactor(api:problemNum:submission:language): process the data for Re…
ff57181 
…chart radar chart

  ## what
  - process the data for Rechart radar chart

  ## how

  ## why
  - better to process the data server side

  ## where
  - ./src/app/api/submissions/language/[problemNum]/route.tsx

  ## usage
@Clumsy-Coder
chore(hooks): add type returned for hook useFetchSubmissionLang
ff89cec 
  ## what
  - add type returned for hook `useFetchSubmissionLang`

  ## how

  ## why
  - better to have a datatype attached when fetching the data

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

  ## usage
@Clumsy-Coder
refactor(components:charts): change prop type to SubmissionLangType
853f163 
  ## what
  - change prop type to `SubmissionLangType`

  ## how

  ## why
  - the api endpoint `/api/submissions/language/[problemNum]` now
    processes the data for Rechart radar chart

  ## where
  - ./src/components/charts/SubmissionLanguageRadarChart.tsx

  ## usage
@Clumsy-Coder
refactor(page:problemNum): update datatype passed to component `Submi…
a789098 
…ssionLanguageRadarChart`

  ## what
  - update datatype passed to component `SubmissionLanguageRadarChart`

  ## how
  - cast type when passing data to the component

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage
@Clumsy-Coder
feat(api:users:submissions): add endpoint `/api/users/[username]/subm…
7a80d9e 
…issions/language`

  ## what
  - add endpoint `/api/users/[username]/submissions/language`

  ## how
  - check if username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions
  - count submissions by language
  - process the data to work with rechart Radar chart

  ## why
  - used for displaying submissions by language in a Rechart Radar chart

  ## where
  - ./src/app/api/users/[username]/submissions/language/route.ts

  ## usage
@Clumsy-Coder
chore(hooks): add react-query hook to fetch user submissions by language
b57dd3c 
  ## what
  - add react-query hook to fetch user submissions by language

  ## how
  - fetch from endpoint `/api/users/[username]/submissions/language`

  ## why

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

  ## usage
@Clumsy-Coder
feat(page:user): display user submissions by language with radar chart
0f3a540 
  ## what
  - display user submissions by language with radar chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionLanguage`
  - display the data using Rechart radar chart

  ## why
  - to display submissions by language

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
chore(types): add type for raw Problem
9cd4de2 
  ## what
  - add type for raw Problem
    - problem ID
    - problem number
    - problem title
    - Number of Distinct Accepted User (DACU)
    - Best Runtime of an Accepted Submission
    - Best Memory used of an Accepted Submission
    - Number of No Verdict Given (can be ignored)
    - Number of Submission Error
    - Number of Can't be Judged
    - Number of In Queue
    - Number of Compilation Error
    - Number of Restricted Function
    - Number of Runtime Error
    - Number of Output Limit Exceeded
    - Number of Time Limit Exceeded
    - Number of Memory Limit Exceeded
    - Number of Wrong Answer
    - Number of Presentation Error
    - Number of Accepted
    - Problem Run-Time Limit (milliseconds)
    - Problem Status (0 = unavailable, 1 = normal, 2 = special judge)

  ## how

  ## why
  - this will be used in api endpoint `/api/problems` when fetching from
    uhunt api
  - this would add some structure when fetching from uhunt api

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

  ## usage
@Clumsy-Coder
refactor(api:users:submissions): fetch all problems from uhunt api in…
ff0e169 
…stead of nextjs api endpoint `/api/problems`

  ## what
  - fetch all problems from uhunt api instead of nextjs api endpoint `/api/problems`

  ## how

  ## why
  - fetching all problems from `http://localhost:3000/api/problems`
    fails when published on vercel
  - so the alternative is to fetch from uhunt api
    - add type `RawProblem` to the data

  ## where
  - ./src/app/api/users/[username]/submissions/route.ts

  ## usage
@Clumsy-Coder
chore(types): add type for submissions overtime
1a679a5 
  ## what
  - add type for submissions overtime
    - SubmissionsOvertimeLineChartType
      - name: name of the entry
      - time: submission year. Denoted as YYYY
      - submissions: submission count for the year
      - fill: color used for the chart

  ## how

  ## why
  - used for generating code Rechart area/line chart
  - will be used for api endpoint `/api/users/[username]/submissions/overtime`

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

  ## usage
@Clumsy-Coder
refactor(components:charts): use SubmissionsOvertimeLineChartType a…
95ea3df 
…s proptype

  ## what
  - use `SubmissionsOvertimeLineChartType` as proptype
    - replace proptype `SubmissionOvertimeType` with `SubmissionsOvertimeLineChartType` type

  ## how

  ## why
  - to use a type coming from one source
  - having the prop type coming from multiple sources is confusing

  ## where
  - ./src/components/charts/SubmissionsOvertimeChart.tsx

  ## usage
@Clumsy-Coder
refactor(api:submission): use SubmissionsOvertimeLineChartType as a…
61f04a9 
…pi endpoint response

  ## what
  - use `SubmissionsOvertimeLineChartType` as api endpoint response
    - replace type `getResponseType` with `SubmissionsOvertimeLineChartType`

  ## how

  ## why
  - to use a type coming from one source
  - having the type coming from multiple sources is confusing

  ## where
  - ./src/app/api/submissions/overtime/[problemNum]/route.ts

  ## usage
@Clumsy-Coder
feat(api:users:submissions): add endpoint `/api/users/[username]/subm…
c820678 
…issions/overtime`

  ## what
  - add endpoint `/api/users/[username]/submissions/overtime`

  ## how
  - check if username if valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions
  - count submissions by year
  - add missing years
    - add missing year as key, and value as 0 (because there was no submissions that year)
  - calculate cumulative sum
  - construct data structure for Rechart area/lint chart

  ## why
  - used for displaying submissions overtime

  ## where
  - ./src/app/api/users/[username]/submissions/overtime/route.ts

  ## usage
@Clumsy-Coder
chore(hooks): add react-query hook to fetch user submissions overtime
f29453e 
  ## what
  - add react-query hook to fetch user submissions overtime

  ## how
  - fetch from endpoint `/api/users/[username]/submissions/overtime`

  ## why

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

  ## usage
@Clumsy-Coder
style(hooks): format code
07cf02c 
  ## what
  - format code

  ## how

  ## why

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

  ## usage
@Clumsy-Coder
feat(page:user): display user submissions overtime with area chart
aa7e6bd 
  ## what
  - display user submissions overtime with area chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionOvertime`
  - display the data using Rechart area chart

  ## why
  - to display submissions overtime

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
chore(types): add proper color hexcode for ProblemVerdictMap object
5e10649 
  ## what
  - add proper color hexcode for `ProblemVerdictMap` object

  ## how

  ## why
  - some of the `bgHex` were missing `#` to denote hexcode

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

  ## usage
@Clumsy-Coder
feat(api:users:attempted): add endpoint `/api/users/[username]/submis…
5c93f6f 
…sions/attempted`

  ## what
  - add endpoint `/api/users/[username]/submissions/attempted`

  ## how
  - check if the username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions
  - count unique solved submissions using a set
    - record problem ID
  - construct data structure for Rechart donut chart
    - solved submissions (get the size of the set)
    - attempted submissions (number of user submissions)

  ## why

  ## where
  - ./src/app/api/users/[username]/submissions/attempted/route.ts

  ## usage
@Clumsy-Coder
chore(hooks): add react-query hook to fetch user submission attempted
e192798 
  ## what
  - add react-query hook to fetch user submission attempted

  ## how
  - fetch from api endpoint `/api/users/[username]/submissions/attempted`

  ## why

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

  ## usage
@Clumsy-Coder
feat(components:charts): add SolvedVsAttemptedDonutChart component
ef829fe 
  ## what
  - add `SolvedVsAttemptedDonutChart` component

  ## how
  - take a prop
    - data of type `SubmissionSolvedVsAttempted` array
  - use Rechart pie chart
  - use custom tooltip from `./src/components/charts/Tooltip`
  - use styles from Tremor charts
    - https://github.com/tremorlabs/tremor/blob/main/src/components/chart-elements/DonutChart/DonutChart.tsx

  ## why
  - this will display user solved problems vs user submissions using
    `donut` chart

  ## where
  - ./src/components/charts/SolvedVsAttemptedDonutChart.tsx

  ## usage
@Clumsy-Coder
feat(page:user): display problem solved VS user submissions with donu…
aeefe5e 
…t chart

  ## what
  - display problem solved VS user submissions with donut chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionAttempted`
  - display the data using Rechart donut chart

  ## why
  - to display user solved problems VS user submissions

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
chore(components:charts): add style to display tooltip color
250458a 
  ## what
  - add style to display tooltip color

  ## how
  - use `style` property
    - use `backgroundColor`

  ## why
  - sometimes the background color is not applied when using tailwindcss
  - this method will make sure to apply the background color

  ## where
  - ./src/components/charts/Tooltip.tsx

  ## usage
@Clumsy-Coder
chore(page:user): add Loading component for /users/[username] page
9295cea 
  ## what
  - add `Loading` component for `/users/[username]` page

  ## how

  ## why
  - this will be displayed when fetching data on the `/users/[username]`
    page

  ## where
  - ./src/app/users/[username]/loading.tsx

  ## usage
@Clumsy-Coder
chore(page:user): display Loading component when fetching data on `…
99fb1ec 
…/users/[username]` page

  ## what
  - display `Loading` component when fetching data on `/users/[username]` page

  ## how

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
refactor(page:user): get isFetching from react-query hooks
5b2bea8 
  ## what
  - replace `isLoading` with `isFetching` from react-query hooks

  ## how

  ## why
  - scenario
    - currently in user page
    - navigate to `/` page
    - click on a user link
    - loading component is not being displayed
  - `isFetching` will be true when fetching data even if the page has
    been mounted

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
style(page:user): format code
e81600f 
  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage
@Clumsy-Coder
docs(docs:images): add screenshot of /users/[username] page
78d1579 
  ## what
  - add screenshot of `/users/[username]` page
    - loading
    - data loaded

  ## how

  ## why

  ## where
  - ./docs/images/page-users-username-loading.png
  - ./docs/images/page-users-username.png

  ## usage
@Clumsy-Coder
docs(readme): display screenshots for /users/[username] page
87e1a49 
  ## what
  - display screenshots for `/users/[username]` page

  ## how

  ## why

  ## where
  - ./README.md

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

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

@Clumsy-Coder Clumsy-Coder linked an issue Jan 15, 2024 that may be closed by this pull request
[feature-request]: add user page #88
Closed
@Clumsy-Coder Clumsy-Coder merged commit 4b65205 into development Jan 15, 2024
8 checks passed
@Clumsy-Coder
Copy link
Owner Author

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

The release is available on GitHub release

Your semantic-release bot 📦🚀

@Clumsy-Coder Clumsy-Coder deleted the 88-add-user-page branch January 15, 2024 15:09
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 user page
1 participant
@Clumsy-Coder