Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

148 add exercise entry #671

Draft
wants to merge 26 commits into
base: development
Choose a base branch
from
Draft

148 add exercise entry #671

wants to merge 26 commits into from

Conversation

Clumsy-Coder
Copy link
Owner

@Clumsy-Coder Clumsy-Coder commented Oct 29, 2024 •
edited
Loading

Summary

Add an exercise entry

Description

  • backend
    • add zod schema to validate exercise entry
      • exercise id
      • date
      • reps
      • weight
      • weight unit
      • distance
      • distance unit
      • duration
    • add POST endpoint /api/exercises/id/[exerciseId]/activity to add an exercise entry
    • add middleware
      • add /api/exercises/id/[exerciseId]/activity endpoint as protected endpoints
      • use next-auth to redirect to login page when accessing a protected endpoint
  • frontend
    • add component AddExerciseEntry dialog to enter exercise entry data
    • add react query mutation hook to send data to API endpoint
    • display add exercise entry button when the user is ONLY logged in
  • others
    • export database types for inserting data into the activities table
    • export database types for selecting data from the activities table
    • add shadcn ui components
      • Form
      • Select
      • Popover
      • Calendar

Related Issue

#148

Motivation and Context

To be able to add an exercise entry

How Has This Been Tested?

Screenshots (if appropriate)

image

image

image

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(env): add script to generate ENV for DATABASE_URL
2939726 
  ## what
  - add script to generate ENV for `DATABASE_URL`

  ## how

  ## why
  - this will be used to generate ENV `DATABASE_URL` for the nextjs app

  ## where
  - ./generateEnvs.sh

  ## usage
  - this will be used for connecting to the postgreSQL database
  - uses the connection string from
    - postgresql://user:password@url:port/databaseName

  ## issue or pull request
@Clumsy-Coder
chore(schema): add schema for /api/exercises/id/[exerciseId]/activity
b609c09 
  ## what
  - add schema for `/api/exercises/id/[exerciseId]/activity`
    - add schema
      - properties
        - exercise id
        - date
        - reps
        - weight
        - weight unit
        - distance
        - distance unit
        - duration
      - validation
        - if no data is provided
        - if one of `reps`, `weight` or `weight unit` is missing
        - if one of `distance` or `distance unit` is missing

  ## how
  - using zod
    - using property validation
    - using `superRefine` to validate grouped exercise entries
      - reps based
        - reps
        - weight
        - weight unit
      - distance based
        - distance
        - distance unit

  ## why
  - this will be used for validating POST request data received from the
    front end
    - will be used on page `/exercises/id/[exerciseId]`

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

  ## usage

  ## commit id, issue or pull request

  ## notes
  - the code needs to be cleaned up to work with the server and client
    side
  - needs better documentation
  - add better error handling. ex: `duration`
  - add validation handling.
@Clumsy-Coder
build(database): add types for selecting and inserting data from `act…
27d416f 
…ivities` table

  ## what
  - add types for selecting and inserting data from `activities` table

  ## how

  ## why
  - used for providing type definitions of the data

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

  ## usage

  ## commit id, issue or pull request

  ## notes
  - will be used in `/api/exercises/id/[exerciseId]/activity` POST endpoint
@Clumsy-Coder
feat(api:exercises:[exerciseId]:activity): add endpoint for inserting…
f8aecd8 
… exercise data into the database

  ## what
  - add endpoint for inserting exercise data into the database
    - get the request data
    - validate the data using zod
      - return code 400 if validation fails
    - insert the provided data into the database

  ## how
  - use drizzle to insert into the database

  ## why
  - used for adding a record of an exercise performed

  ## where
  - ./src/app/api/exercises/id/[exerciseId]/activity/route.ts

  ## usage

  ## commit id, issue or pull request

  ## notes
  - uses schema validation from `src/schema/index.ts`
    - check 5364a54
@Clumsy-Coder
build(shadcn): add component Form
d1ab851 
  ## what
  - add component `Form`

  ## how
  - run command
    - pnpm dlx shadcn@latest add form

  ## why

  ## where
  - ./package.json
  - ./pnpm-lock.yaml
  - ./src/components/ui/form.tsx
  - ./src/components/ui/label.tsx

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
build(shadcn): add component Select
22281f0 
  ## what
  - add component `Select`

  ## how
  - run command
    - pnpm dlx shadcn@latest add select

  ## why

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
build(shadcn): add component Popover
77cbc67 
  ## what
  - add component `Popover`

  ## how
  - run command
    - pnpm dlx shadcn@latest add popover

  ## why

  ## where
  - ./package.json
  - ./pnpm-lock.yaml
  - ./src/components/ui/popover.tsx

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
build(shadcn): add component Calendar
9bc1b00 
  ## what
  - add component `Calendar`

  ## how
  - run command
    - pnpm dlx shadcn@latest add calendar

  ## why

  ## where
  - ./package.json
  - ./pnpm-lock.yaml
  - ./src/components/ui/calendar.tsx

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
feat(components:addExerciseEntry): add component for adding exercise …
7eba964 
…entry

  ## what
  - add component for adding exercise entry
    - display in a dialog
    - display
      - exercise name
      - exercise id
    - input
      - date
      - reps
      - weight
      - weight unit
      - distance
      - distance unit
      - duration

  ## how
  - uses
    - react hook form
    - zod
    - shadcn `Form` component

  ## why
  - this component will be used for adding a new exercise entry to the
    database

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
refactor(schema): change properties in exerciseEntry from `.nullish…
c9dfeeb 
…()` to `optional()`

  ## what
  - change properties in `exerciseEntry` from `.nullish` to `optional`

  ## how

  ## why
  - using `.nullish()` was causing typescript to through errors

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
feat(actions): add server action for adding an exercise activity entry
1b85a2a 
  ## what
  - add server action for adding an exercise activity entry

  ## how
  - send a POST request to the URL `/api/exercises/id/[exerciseId]/activity`

  ## why
  - this will be used as a server action for adding an exercise activity
    entry
  - will be used in react query hooks

  ## where
  - ./src/server/actions.ts

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
chore(hooks): add react-query hook to send POST request for adding an…
01a09f9 
… exercise activity entry

  ## what
  - add react-query hook to send POST request for adding an exercise activity entry

  ## how
  - uses react query `mutation` hook
    - check
      - https://tanstack.com/query/latest/docs/framework/react/guides/mutations
  - uses server action `postExerciseEntry`

  ## why
  - this will be used to send a POST request to add an entry in the
    database

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

  ## usage

  ## commit id, issue or pull request

  ## notes
  - after implementing fetching exercise entries, invalidate the
    exercise entry data to force fetch new data
@Clumsy-Coder
chore(components:addExerciseEntry): use state to manage opening and c…
b191285 
…losing dialog box

  ## what
  - use state to manage opening and closing dialog box
  - clear the form when closing the dialog box

  ## how
  - use react `useState` to track whether the dialog box is open or not
  - check
    - shadcn-ui/ui#709 (comment)
    - shadcn-ui/ui#386 (comment)

  ## why
  - to perform extra when closing the dialog box
    - ex: clear the form data when closing

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
feat(components:addExerciseEntry): use react query hook to send POST …
d303158 
…request to add exercise activity entry

  ## what
  - use react query hook to send POST request to add exercise activity entry
  - clear the form after the request is successful
  - close dialog box after the request is successful
  - show loading icon and disable submit button when the request is pending

  ## how
  - use react query mutation hook to send the POST request to add
    exercise entry

  ## why
  - this will allow the user to add an exercise entry

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
feat(page:exercises:exerciseId): display add exercise entry button wh…
a4d42db 
…en the user's logged in

  ## what
  - display add exercise entry button when the user's logged in

  ## how
  - check the `session` from using `useSession`
    - if the user's logged in, then the `session` will be NOT be
      undefined

  ## why
  - to prevent adding an entry without the user being logged in
    - even if it did, it would redirect the to the login page

  ## where
  - ./src/app/exercises/id/[exerciseId]/page.tsx

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
feat(middleware): add middleware and use next-auth to redirect protec…
91f42e7 
…ted endpoints

  ## what
  - add middleware and use next-auth to redirect protected endpoints

  ## how
  - check
    - https://next-auth.js.org/configuration/nextjs#middleware

  ## why
  - the middleware will be used to protect endpoints
    - mainly ones that use authentication

  ## where
  - ./src/middleware.ts

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
refactor(schema): use regex to validate the duration property
d7afbc3 
  ## what
  - use regex to validate the `duration` property

  ## how
  - using regex

  ## why
  - the regex allows the user to enter `99:00:00`, while using the date
    object limits to `23:59:59`

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

  ## usage

  ## commit id, issue or pull request

  ## notes
  - there might be edge cases where the regex might not pickup
    - ex: `00:00:00`
@Clumsy-Coder Clumsy-Coder self-assigned this Oct 29, 2024
@vercel Vercel
Copy link

vercel bot commented Oct 29, 2024 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
exercise-tracker ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 5, 2024 2:49am

@Clumsy-Coder Clumsy-Coder linked an issue Oct 29, 2024 that may be closed by this pull request
[feature-request]: add exercise entry #148
Open
@Clumsy-Coder Clumsy-Coder added this to the Exercise entry milestone Oct 29, 2024
@Clumsy-Coder
build(shadcn): add component date-time-picker
327b05b 
  ## what
  - add component `date-time-picker`
  - update package `react-day-picker` to `v9.2.1`

  ## how
  - obtained from
    - https://shadcnui-expansions.typeart.cc/docs/datetime-picker

  ## why
  - this component has more controls over the calendar component from
    `shadcn`
    - has option to set the time
    - has option to pick year easily
    - has option to change month easily

  ## where
  - ./package.json
  - ./pnpm-lock.yaml
  - ./src/components/ui/date-time-picker.tsx

  ## usage

  ## commit id, issue or pull request

  ## notes
  - upgrading package `react-day-picker` to `v9.2.1` causes issues with
    shadcn `calendar` component
    - check
      - shadcn-ui/ui#5417
  - remove component `calendar.tsx` since `date-time-picker` is
    replacing it
@Clumsy-Coder
refactor(shadcn): update component Calendar props
b44b23d 
  ## what
  - update component `Calendar` props

  ## how

  ## why
  - when upgrading package `react-day-picker` to `v9.2.1` it had some
    breaking changes that needed to be addressed
    - check
      - https://daypicker.dev/upgrading
    - the reason for upgrading `react-day-picker` is due to installing
      component `date-time-picker`
      - 327b05b

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

  ## usage

  ## commit id, issue or pull request
  - 327b05b

  ## notes
@Clumsy-Coder
refactor(components:addExerciseEntry): use component DateTimePicker…
e2aa71c 
… and `TimePicker` for setting date and time

  ## what
  - use component `DateTimePicker` and `TimePicker` for setting date and time

  ## how

  ## why
  - the shadcn component `Calendar` is limited
    - can't set the time
    - can't jump to different year
    - can't jump to different year. have to use the arrows

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
fix(components:addExerciseEntry): update the time property when openi…
e737444 
…ng dialog

  ## problem
  - the date doesn't update when opening the dialog

  ## fix
  - set the date ONLY when opening the dialog

  ## how
  - run the code in dialog `onOpenChange` function

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
chore(components:addExerciseEntry): set min requirement for input `di…
e91ed36 
…stance`

  ## what
  - set min requirement for input `distance`

  ## how

  ## why
  - doesn't makes sense to travel negative distance

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
style(components:addExerciseEntry): remove unused code
2bbc760 
  ## what
  - remove unused code
  - remove console logs

  ## how

  ## why

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
style(components:addExerciseEntry): add placeholder in weight unit …
b66c3b0 
…and `distance unit` dropdown

  ## what
  - add placeholder in `weight unit` and `distance unit` dropdown
  - increase the width of dialog; to view the placeholder of the two
    dropdown with being cut of

  ## how

  ## why
  - for more clarity on what the form element is for

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

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder Clumsy-Coder force-pushed the 148-add-exercise-entry branch 2 times, most recently from bbfecbe to ded9c93 Compare November 4, 2024 17:42
@Clumsy-Coder
ci(workflows): add github action for deleting data from remote database
179479a 
  ## what
  - add github action for deleting data from remote database
    - run every hour
    - install `psql` client
    - delete the data on table `activities`
    - reset auto increment for `activities.id` to 1

  ## how

  ## why
  - the database is being used by public with limited space
    - don't want to go overboard in using the database

  ## where
  - ./.github/workflows/remoteDatabaseReset.yaml

  ## usage

  ## commit id, issue or pull request

  ## notes
@Clumsy-Coder
chore(layout:home): display a demo badge when ENV DEMO is set
e81ca97 
  ## what
  - display a demo `badge` when ENV `DEMO` is set

  ## how
  - use shadcn component `badge` and `tooltip`
  - display badge when ENV `DEMO` is set

  ## why
  - this to notify the user that this a demo app
  - mainly used for hosting the app on vercel as a demo
    - the data on the database will be erased at a schedule
      - check `.github/workflows/remoteDatabaseReset.yaml`

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

  ## usage

  ## commit id, issue or pull request

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

@Clumsy-Coder Clumsy-Coder

Labels
None yet
Projects
None yet
Milestone
Exercise entry
Development

Successfully merging this pull request may close these issues.

[feature-request]: add exercise entry
1 participant
@Clumsy-Coder