71 add problem num page #86

## what - add `Error` component ## how - takes in two props - status: http status code - message (optional): message to display under the status code ## why - this will be displayed in a page if there's an error returned when fetching the api server - using `nextjs` app router `error.tsx` doesn't help - ex: if there's an 404 error, the `error` page rendered, not `not-found.tsx` - ex: if there's an 400 errror, the `error` page is rendered but the error is unhandled ## where ## usage

…Num]` to it's own file ## what - move schema validation for endpoint `/api/problems/[problemNum]` to it's own file - add schema in `/api/problems/[problemNum]` via import ## how ## why - the schema validation will also be used in the client side - used in `/problems[problemNum]` ## where - ./src/app/api/problems/[problemNum]/route.ts - ./src/schema/index.ts ## usage

## what - add react-query hook to fetch stats of problem number ## how - fetch from api endpoint `/api/problems/[problemNum]` ## why ## where - ./src/hooks/index.ts ## usage

## what - return status 404 if problem number is not found ## how ## why - this will ensure a problem number not found will be handled ## where - ./src/app/api/problems/[problemNum]/route.ts ## usage

## what - add type `number` to uhunt urls ## how ## why - it's a little tedious to convert number to a string when using the function ## where - ./src/utils/constants.ts ## usage

## what - fetch stats for `/problems/[problemNum]` page ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - add component `Card` ## how - run command npx shadcn-ui@latest add card ## why ## where - ./src/components/ui/card.tsx ## usage

## what - add structure and placeholder components ## how - divide into to big sections - charts - uses grid for display - 2 columns on md to larger screens - 1 column on smaller screens - table - uses flex for display - will be in flex column direction ## why - this will show how the components are laid out ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - add object `ProblemVerdictMap` ## how ## why - will be used to convert verdict keys in `Problem` type into a readable string ## where - ./src/types/index.ts ## usage

## what - add package `recharts` ## how ## why ## where - ./package-lock.json - ./package.json ## usage

## what - add `tremor` tailwindcss config - brand colors - light mode - dark mode - background colors - light mode - dark mode - border colors - light mode - dark mode - content colors - light mode - dark mode - box shadow - light - dark - border radius - font size ## how - obtained from - https://www.tremor.so/docs/getting-started/installation ## why - some of the tailwindcss styles from `tremor.so` will be used in this app - using chart styles - bar chart - line chart - area chart - tooltip styles ## where - ./tailwind.config.ts ## usage

…bar chart ## what - add function to generate data for `rechart` bar chart ## how ## why - this will be used to generate the data needed for `recharts` bar chart to render ## where - ./src/utils/dataProcessing.ts ## usage

## what - combine multiple instances of `Verdict` into one - add type `ProblemVerdictType` - title: string to display in client side. usually for displaying tooltip title - bgColor: tailwindcss background color - fgColor: tailwindcss foreground color - bgHex: hexcode of property `bgColor` - fgHex: hexcode of propetty `fgColor` - apply type `ProblemVerdictType` in object `ProblemVerdictMap` - set their properties - set `Problem.ver` number as key into object `ProblemVerdictMap` - they map to the same key in the object `ProblemVerdictMap - doing this way to prevent duplocate code` - remove `VerdictType` - remove `Verdict` - the keys of this object are applied in object `ProblemVerdictMap` - set property `Submission.verdict` to type `ProblemVerdictType` - apply changes to other files - replace `Verdict` with `ProblemVerdictMap` in api endpoint `/api/poll[pollId]` ## how ## why - this to remove duplicate code - to combine string abbreviation of the verdict into object `ProblemVerdictMap` - to combine verdict ID from `Submission` into object `ProblemVerdictMap` - refactoring these later would be difficult ## where - ./src/app/api/poll/[pollId]/route.ts - ./src/types/index.ts ## usage

…rdictMap` ## what - use array to filter out keys from `ProblemVerdictMap` - use an array to filter which keys to keep in `ProblemVerdictMap` - filter out keys from ProblemVerdictMap using the array - update references - setting `tooltipTitle` - setting `fill` ## how ## why - to keep up with the changes in `ProblemVerdictMap` - check c041074 - be default `ProblemVerdictMap` contains all verdicts - don't need to show all of them in a bar chart ## where - ./src/utils/dataProcessing.ts ## usage

## what - add file header docs ## how ## why - to explain what is this file used for ## where - ./src/types/index.ts ## usage

## what - add Recharts custom tooltip component ## how - obtained from - https://github.com/tremorlabs/tremor/blob/main/src/components/chart-elements/common/ChartTooltip.tsx - note - this tooltip is from `tremor.so` , and it uses tailwindcss custom configs, which means `tailwind.config.ts` needs to be updated - done in commit 1e5b14f ## why - this will be used in charts - this is will make chart tooltips more pleasing to look at compared to the default tooltips ## where - ./src/components/charts/Tooltip.tsx ## usage

## what - add `ProblemVerdictChart` component ## how - uses Rechart bar chart - uses custom tooltip component in `./src/components/charts/Tooltip` ## why - this will be used to display a problem number submission verdicts using a bar chart ## where - ./src/components/charts/ProblemVerdictChart.tsx ## usage

## what - render `ProblemVerdictChart` component ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

…vertime/[problemNum]` ## what - add schema for endpoint `/api/submissions/overtime/[problemNum]` ## how ## why - this will be used to validate the data on client side and server side ## where - ./src/schema/index.ts ## usage

…mNum]` ## what - add endpoint `/api/submissions/overtime/[problemNum]` - get the submission count of a problem using problem number - if invalid `problem number` is given, a response of 400 will be returned - if the problem doesn't exist, a response of 404 will be returned - the endpoint will return a cumulative submission count - an array of object - time: momentjs time serialized - count: submission count from current index + the previous index ## how ## why - this will be used to chart submissions overtime of a problem ## where - ./src/app/api/submissions/overtime/[problemNum]/route.ts ## usage

## what - add react-query hook to fetch submissions overtime ## how - fetch from api endpoint `/api/submissions/overtime/[problemNum]` ## why ## where - ./src/hooks/index.ts ## usage

## what - add `SubmissionsOvertimeChart` component ## how - takes prop - data of type `SubmisionsOvertimeType[]` - use Recharts `AreaChart` component - use custom tooltip from `./src/components/charts/Tooltip` - use linear gradient for color the area chart ## why - this will be used to display submissions overtime of a problem using area chart ## where - ./src/components/charts/SubmissionsOvertimeChart.tsx ## usage

## what - render `SubmissionOvertimeChart` component ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - add `Python` as a value in `Language` object ## how ## why - found a case where the language id was not present in the `Language` object. - after a little investigation, I found that this new id is for the language `Python` ## where - ./src/types/index.ts ## usage

…anguage/[problemNum]` ## what - add schema for endpoint `/api/submissions/language/[problemNum]` ## how ## why - this will be used to validate the data on client side and server side ## where - ./src/schema/index.ts ## usage

…s of a problem ## what - limit start range when fetching submissions of a problem - limit submissions from today to 1 year ago and return 500 submissions - add params - startSubmission: starting point when searching for submissions - default to 1 year before in unix time. in other words, it will return submissions starting from 1 year ago - endSubmission: ending point when searching for submissions - default to current time. - limit: limit number of submissions to value provided - default to 500. in other words it will always return 500 submissions of a problem - currently not being used. - how to use - append the number to end - ex: https://uhunt.onlinejudge.org/api/p/subs/36/0/1707350533/500 - the 500 in the end of url will limit number of submissions to 500 ## how ## why - before the start range was set to 0, which would fetch every submission for the problem - this would fetch too many items and it would take a while to process them ## where - ./src/utils/constants.ts ## usage

…e/[problemNum]` ## what - add endpoint `/api/submissions/language/[problemNum]` - get submissions language count of a problem using problem number - if invalid `problem number` is given, a response of 400 will be returned - if the problem doesn't exist, a response of 404 will be returned - fetch submissions of problem number - count submission language ## how ## why ## where - ./src/app/api/submissions/language/[problemNum]/route.tsx ## usage

## what - add react-query hook to fetch submission language ## how - fetch from api endpoint `/api/submissions/language/[problemNum]` ## why ## where - ./src/hooks/index.ts ## usage

… radar chart ## what - add function to generate data for `recharts` radar chart ## how - loop through the object - add object to array - property `language`: string version of the language ID - property `count`: number of submissions of that language ID ## why - this will be used to generate the data needed for `recharts` radar chart to render ## where - ./src/utils/dataProcessing.ts ## usage

## what - add `SubmissionLanguageRadarChart` component ## how - takes a prop - data of type `/api/submissions/language/[problemNum]` GET response - process the data - use Recharts `radar` chart - use custom tooltip from `./src/components/charts/Tooltip` - use radial gradient for color inside of the radar ## why - this will display submissions by language of a problem using `radar` chart ## where - ./src/components/charts/SubmissionLanguageRadarChart.tsx ## usage

## what - render `SubmissionLanguageRadarChart` component ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

…lems/ranklist/[problemNum]` ## what - add schema for endpoint `/api/problems/ranklist/[problemNum]` ## how ## why - this will be used to validate the data on client side and server side ## where - ./src/schema/index.ts ## usage

…problemNum]` ## what - add endpoint `/api/problems/ranklist/[problemNum]` - get ranklist of a problem using problem number - if invalid `problem number` is given, a response of 400 will be returned - if the problem doesn't exist, a response of 404 will be returned - fetch problem ranklist - add extra properties - verdict object - fgColor - bgColor - title - fgHex - bgHex - language: convert language ID into a string - pnum: problem number - pTitle: name of the problem ## how ## why ## where - ./src/app/api/problems/ranklist/[problemNum]/route.ts ## usage

## what - add react-query hook to fetch problem ranklist ## how - fetch from endpoint `/api/problems/ranklist/[problemNum]` ## why ## where - ./src/hooks/index.ts ## usage

…table ## what - add columns structure for problem ranklist table - define which columns to display on the DataTable ## how ## why ## where - ./src/app/problems/[problemNum]/components/data-table/ranklistColumns.tsx ## usage

## what - add package `@tanstack/react-virtual` ## how ## why ## where - ./package-lock.json - ./package.json ## usage

## what - add `VirtualTable` component ## how - uses - `@tanstack/react-table` to generate a table - `@tanstack/react-virtual` to handle virtualization ## why - to display a table without the `DataTable` functionality ## where - ./src/components/virtual-table/index.tsx ## usage

## what - render `VirtualTable` for ranklist - fetch problem ranklist using react-query hook - render data using VirtualTable ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

…bmissions/[problemNum]` ## what - add schema for endpoint `/api/submissions/[problemNum]` ## how ## why - this will be used to validate the data on client side and server side ## where - ./src/schema/index.ts ## usage

…lemNum]` ## what - add endpoint `/api/submissions/[problemNum]` - get submissions of a problem using problem number - if invalid `problem number` is given, a response of 400 will be returned - if the problem doesn't exist, a response of 404 will be returned - fetch problem submissions - add extra properties - verdict - fgColor - bgColor - title - fgHex - bgHex - language: convert language ID into a string - pnum: problem number - pTitle: name of the problem ## how ## why ## where - ./src/app/api/submissions/[problemNum]/route.ts ## usage

## what - add react-query hook to fetch problem submissions ## how - fetch from endpoint `/api/submissions/[problemNum]` ## why ## where - ./src/hooks/index.ts ## usage

## what - render `VirtualTable` for `Problem submissions` - fetch problem submissions using react-query hook - render data using VirtualTable ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

…missions ## what - use the limit value when fetching problem submissions ## how - uses the parameter `limit` value - default is 500 ## why - this will limit the number of submissions returned ## where - ./src/utils/constants.ts ## usage

…n theme ## what - change rader chart grid opacity depending on theme - set radar chart grid opacity to 0.3 in dark mode - set radar chart grid opacity to 1.0 in light mode ## how ## why - the opacity of 0.3 is barely visible in light mode - cant change the fill color of the radar chart grid ## where - ./src/components/charts/SubmissionLanguageRadarChart.tsx ## usage

## what - render problem number and title ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - set DataTable height if provided ## how - take `height` as a prop - set the height of the table if it's defined - set the table to overflow-y if height is defined ## why - a replacement for `VirtualTable` - VirtualTable struggles to scroll when theres high amounts of items to render. DataTable can handle high items without issue - to have the ability to set the size of the DataTable ## where - ./src/components/ui/data-table/index.tsx ## usage

…missions ## what - use `DataTable` to render ranklist and submissions - set a max height to the DataTable ## how ## why - DataTable can handle high volumes of items when scrolling ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - set submission limit to 500 ## how ## why - Since the DataTable is being used to display problem submissions, it can handle a high amount of items to be rendered ## where - ./src/app/api/submissions/[problemNum]/route.ts ## usage

…emNum]` page ## what - add `Loading` component for `/problems/[problemNum]` page ## how ## why - this will be used to display when fetching data on the `/problems/[problemNum]` page ## where - ./src/app/problems/[problemNum]/loading.tsx ## usage

## what - use `Loading` component - use component from `./src/app/problems/[problemNum]/loading.tsx` ## how ## why - this will be used to display when fetching data for `problems/[problemNum]` page ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - set title as link to view problem pdf ## how ## why - to be able to view the problem that is currently loaded ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - format code ## how ## why ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - update images for `/problems/[problemNum]` page - loading - data loaded ## how ## why ## where - ./docs/images/page-problems-num-loading.png - ./docs/images/page-problems-num.png ## usage

## what - display screenshots for `/problems/[problemNum]` page ## how ## why ## where - ./README.md ## usage

## what - extract data after fetching when fetching from `/api/problems/[problemNum]` ## how ## why - this will prevent error `variable may be undefined` when using the hooks data ## where - ./src/hooks/index.ts ## usage

…stats ## what - update reference when fetching problemNum stats ## how ## why - to accommodate changes made in `./src/hooks/index.ts` - check 46ca37e ## where - ./src/app/problems/[problemNum]/page.tsx ## usage

## what - format code ## how ## why ## where - ./src/hooks/index.ts ## usage

## what - add npm script - `lint:tsc` - `lint:eslint` - update npm script - `lint` ## how ## why - to lint code using typescript and eslint separately and together ## where - ./package.json ## usage

## what - apply types returned when fetching ## how ## why - to provide a data type when data is fetched ## where - ./src/hooks/index.ts ## usage

## what - apply types to the fetched data using react-query hooks ## how ## why - to deal with typescript errors - to accomodate changes made from d957416 ## where - ./src/app/problems/[problemNum]/page.tsx - ./src/app/problems/page.tsx ## usage

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

71 add problem num page #86

71 add problem num page #86

Commits on Jan 12, 2024