Join session milestone point #43

qafui · 2024-10-12T02:13:05Z

Description

This PR adds the useSWR hook from the swr library as a wrapper around a global fetcher hook (useApiData). It allows any component to access the data it needs for rendering dynamic values from the API.

A dashboard component is refactored to use the new hook to fetch data for conditionally rendered select components and a button. The JoinCoachingSession component allows a user to select an organization, a coaching relationship and a session and join the session with a button click.

Todo

Separate previous from upcoming sessions with a SelectGroup
Merge and fix conflicts

Changes

Adds a hook for fetching data from the API
Adds a Dynamic select component that renders dropdowns with data fetched from the API
Renders 3 dynamic select components in a composite or ‘smart’ JoinCoachingSession component responsible for setting organization, relationship and session IDs in the state tree.

Screenshots / Videos Showing UI Changes (if applicable)

Testing Strategy

Login and attempt to join a session using the component illustrated in the image

Concerns

The rendering helper functions in the dynamic-api-select component should be separated into its own component.
PRs of this kind should be broken up into smaller features in future to improve code merge 😅

src/app/coaching-sessions/[id]/page.tsx

…sion page.

jhodapp

Thanks David, it's looking great and very close. I left a few changes inline to take a look at.

jhodapp · 2024-10-30T14:55:44Z

src/components/ui/coaching-sessions/overarching-goal-container.tsx

@@ -148,7 +148,6 @@ const OverarchingGoalContainer: React.FC<{
          );
        });
    }
-    fetchOverarchingGoal();


@qafui this is necessary, right now if you go to a coaching session page, if you've set an OverarchingGoal, it isn't getting loaded when the page loads.

Ah! I should have re-tested that bit. I noticed it was re-rendering in the console and thought to fix it with memoization but the thought somehow trailed off. I was too tired 😸

jhodapp · 2024-10-30T14:57:38Z

src/app/coaching-sessions/[id]/page.tsx

@@ -46,26 +48,25 @@ export default function CoachingSessionsPage() {
  const [note, setNote] = useState<Note>(defaultNote());
  const [syncStatus, setSyncStatus] = useState<string>("");
  const { userId } = useAuthStore((state) => ({ userId: state.userId }));
-  const { coachingSession } = useAppStateStore((state) => state);
+  const coachingSessionId = useAppStateStore(


This is ok if it fixes the fetch loop (not sure if it was the cause or not). We'll convert to de-duplicating storing these Ids separately from their object instances after we land this PR.

Not the cause but a small optimization after observing that we weren't using any other properties of the object in the component.

I could be wrong but the way I understand it, this is a case of whether we want to pass around the string value or the reference to the object (while operating on its mutable property).

Yeah, I'm open to your thoughts here on what's best long term for convenience and efficiency.

src/components/ui/dashboard/join-coaching-session.tsx

jhodapp · 2024-10-30T15:00:13Z

src/components/ui/dashboard/join-coaching-session.tsx

+              url={`/organizations/${organizationId}/coaching_relationships`}
+              params={{ organizationId }}
+              onChange={handleRelationshipSelection}
+              placeholder="Select coaching relationship"


Same here (see above comment about organizationId).

src/components/ui/dashboard/join-coaching-session.tsx

jhodapp · 2024-10-30T15:01:32Z

src/components/ui/dashboard/join-coaching-session.tsx

+          <div className="grid gap-2">
+            <Label htmlFor="session-selector">Coaching Session</Label>
+
+            <DynamicApiSelect<CoachingSession>


For some reason I'm seeing duplicate past sessions and 1-2 of them are out of chronological order as well.

I see that in the db as well. Not sure how that got added tbh.

Oh you see it duplicated in the DB itself? In that case it's an error seeding data on the backend. I'll try changing it locally and see if this issue goes away.

I found the culprit in the backend and fixed.

jhodapp

Looking great, just a couple more issues to address and I think it might be ready to approve (I'll give it one last look over again).

src/app/coaching-sessions/[id]/page.tsx

jhodapp · 2024-10-31T15:41:29Z

src/components/ui/dashboard/join-coaching-session.tsx

+                to_Date: TO_DATE,
+              }}
+              onChange={handleSessionSelection}
+              placeholder={sessionPlaceholder}


When you select a session and join, and then return to the dashboard page, it'll show the date of the selected session but it's in a raw datetimestampz format instead of the same format used in the drop down list in the selector.

Yup! See slack DM! That was the last bit driving me mad 😠. Not an ideal solution but I'll add a reformatter to the option content itself. Let me know if you can think of something else in the sorting part of the dynamic select component.

The sorting looks good, it's just the placeholder text. So if you add a formatter making sure the date renders correctly, that should fix the issue.

Turned out to be value of the date in the state tree. 😄

Co-authored-by: Jim Hodapp <james.hodapp@gmail.com>

jhodapp · 2024-10-31T16:12:29Z

There seems to be another bug where the coaching session select displays coaching sessions that don't apply to the coaching relationship.

So if I select "Refactor Coaching" -> "Jim Hodapp -> Caleb Bourg" I do expect to see a list of coaching sessions (these are the only sessions seeded by default and only for this relationship).

But if I select "Acme Corp" -> "Jim Hodapp -> Other Users" I would expect no coaching sessions to be found. Here's a screenshot of the invalid behavior:

jhodapp · 2024-10-31T17:03:45Z

@qafui I do see a correctly formatted date on the dashboard page now, but unfortunately I see a regression now on the coaching session page of an invalid date:

It's because you change the underlying date string format in the stored object. If you leave that alone and just render it correctly here, the coaching session page should be ok then.

qafui · 2024-10-31T17:06:19Z

Thanks for catching those. Will let you know when they're resolved.

qafui added 11 commits September 25, 2024 23:56

todo: update hook to post, update component

bb9ef5e

Get basic struction working

0a28c00

Clean up dynamic select component

6f5423f

remove comments

02278df

Fix session separation and date-time rendering

f413887

Merge branch 'main' into select-session

d4ab474

Use zustand to share ids across contexts

2821e62

Format dynamic select component with Prettier

bdc92ec

Merge and resolve conflicts

c6bd7ff

Fix css conflict on coaching-session page

766bd8e

Use dynamic-api-selector on session page

4889b1e

qafui marked this pull request as ready for review October 12, 2024 04:16

qafui commented Oct 12, 2024

View reviewed changes

src/app/coaching-sessions/[id]/page.tsx Show resolved Hide resolved

Add coaching relationship to state store on select

27239a9

jhodapp assigned qafui Oct 16, 2024

jhodapp added the enhancement Improves existing functionality or feature label Oct 16, 2024

jhodapp added this to the 0.9 - Live update coaching session page data milestone Oct 16, 2024

qafui and others added 7 commits October 25, 2024 14:46

Load full fetched objects into state

9f5d37b

Merge branch 'main' into join-session-milestone-point

bc2ff8e

Run npm i

d93108a

Update coaching session with latest

96a4d59

Duplicate session selection component and logic - yuck

1607fbd

Make sure a proper CoachingSession Id gets passed to the coaching ses…

c4206d2

…sion page.

Fix session fetch loop and extra goal EP hit

fd0b4ea

jhodapp requested changes Oct 30, 2024

View reviewed changes

qafui added 5 commits October 30, 2024 18:29

Set overarching goal per session

68f4ed5

Clean up join coaching session component

ad4c6a4

Clean up join-coaching-session component further

2bdae0f

Use coachee last name in relationship string

7f7011a

Sort session dates

6e898e6

qafui added 3 commits October 30, 2024 21:47

Persist placeholder with useEffect

5efcf61

Make sure the entire join session button is clickable

f9e79df

Slight wording change on session page

1ad2df8

jhodapp requested changes Oct 31, 2024

View reviewed changes

Update page.tsx

b8afc27

Co-authored-by: Jim Hodapp <james.hodapp@gmail.com>

Transform displayed date in state store

dc32d21

qafui added 2 commits November 8, 2024 01:33

Extract state logic from joinCoachingSession component

6cc4734

Clean up selection hook

4354aa0

qafui marked this pull request as draft November 12, 2024 22:23

jhodapp modified the milestones: 0.9 - Live update coaching session page data, 1.0-rc1 Nov 14, 2024

qafui closed this Nov 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Join session milestone point #43

Join session milestone point #43

qafui commented Oct 12, 2024

jhodapp left a comment

jhodapp Oct 30, 2024

qafui Oct 30, 2024

jhodapp Oct 30, 2024

qafui Oct 30, 2024

jhodapp Oct 31, 2024

jhodapp Oct 30, 2024

jhodapp Oct 30, 2024

qafui Oct 30, 2024

jhodapp Oct 31, 2024

jhodapp Oct 31, 2024

jhodapp left a comment

jhodapp Oct 31, 2024

qafui Oct 31, 2024

jhodapp Oct 31, 2024

qafui Oct 31, 2024

jhodapp commented Oct 31, 2024

jhodapp commented Oct 31, 2024 •

edited

Loading

qafui commented Oct 31, 2024

Join session milestone point #43

Join session milestone point #43

Conversation

qafui commented Oct 12, 2024

Description

Todo

Changes

Screenshots / Videos Showing UI Changes (if applicable)

Testing Strategy

Concerns

jhodapp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jhodapp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jhodapp commented Oct 31, 2024

jhodapp commented Oct 31, 2024 • edited Loading

qafui commented Oct 31, 2024

jhodapp commented Oct 31, 2024 •

edited

Loading