[Story] Peer Testing #2 (Term 2 Week 8)

connordoman commented 8 months ago

Description

Features for upcoming peer testing.

Timetable

Session 1

Run Station 1	Participant 1	Run Station 2	Participant 2
Team 1	Linh	Seth (Team 3)	Ngan	Mackenzie (Team 18)
Team 4	Rahul	Thuan (Team 1)	Lakshay	Kael (Team 5)
Team 15	Kyle	Paul (Team 1)	Saksham	Satanshu (Team 10

Session 2

Run Station 1	Participant 1	Run Station 2	Participant 2
Team 1	Linh	Beck (Team 5)	Ngan	Mackenzie (Team 18)
Team 10	Arsh	Paul (Team 1)	Yafei	Jan (Team 9)
Team 18	Sam	Connor (Team 1)	Nikhil	Beth (Team 4)
Team 20	Abijith	Abdulhameed (Team 12)	Ryan	Thuan (Team 1)

Session 3

Run Station 1	Participant 1	Run Station 2	Participant 2
Team 1	Thuan	Jusnoor (Team 12)	Connor	Zetian (Team 6)
Team 6	Jiajun	Linh (Team 1)	Yiqi	Muhammad (Team 9)
Team 10	Arsh	Ngan (Team 1)	Ahmed	Saksham (Team 15)

Session 4

Run Station 1	Participant 1	Run Station 2	Participant 2
Team 1	Thuan	Sam (Team 18)	Paul	Issa (Team 20)
Team 4	Beth	Connor (Team 1)	Denis	Muhammad (Team 9)
Team 5	Kael	Ngan (Team 1)	Abhinav	Zeitain (Team 6)

Todo

[x] User selectable blurring regions
- [x] Add to censorship UI
- [x] Add to video processing logic
[x] Clients will be prompted to register before viewing appointment if not yet registered (Cognito registration)
- [x] #635
- [x] API route for registration
[x] ~Professionals identity management integrated into service~
- [x] ~Designated professionals can edit others~
- [x] ~Edit UI~
- [x] ~List UI~
- [x] ~API route to edit~
- [x] ~API route to list~
- [x] ~API route to create~
- [x] ~API route to delete~
[x] Templated feedback from professionals to clients
[ ] Clients can download censored videos
- [x] API route to request resource URI

Not in original spec:

[x] #585
- [x] Fetch all appointments, metadata
[x] Conversation/Appointment viewer (timeline of single appointment)
- [x] Descending timeline of appointments (newest first)
- Similar to the following:

We have decided to move focus away from Professional identity management since it is not a core feature of our app i.e. it does not fit our app's core mission.

Notes

Templated feedback: this would essentially require an implementation of chat messages.
- Add an additional table in DB: Message(apptId, sender: User, timestamp)
- Appointment page does one fetch
- API merges list of Videos with Messages by timestamp (chronological order)
- API returns this list of "events"
- Page iterates events, displays either message or video upload

tthvo commented 8 months ago

https://github.com/COSC-499-W2023/year-long-project-team-1/issues/452

MyStackOverflows commented 8 months ago

anything here that I can work on/that nobody else has started yet?

tthvo commented 8 months ago

anything here that I can work on/that nobody else has started yet?

Hey front-end team @connordoman @linhnnk, anything u need help with here so Paul can start on it?

connordoman commented 8 months ago

@MyStackOverflows for the appointments API:

api/appointments/[id]:

{
created: string,
videos: [
    { appointmentDate: string, videoRef: string }
  ]
}

api/appointments: (or some other path)

[
  {
    appointmentDate: "YYYY-MM-DD",
    contactName: string,
    contactRole: UserRole,
    contactAvatarUrl: string,
  }
]

nganphan123 commented 8 months ago

@connordoman I don't think we still have this feature as the client needs to be added by professionals, not register themselves "Clients will be prompted to register before viewing appointment if not yet registered".

nganphan123 commented 8 months ago

I can work on the template feedback API "Templated feedback from professionals to clients". We don't have UI for the chat yet i think @linhnnk @connordoman

connordoman commented 8 months ago

@nganphan123 @MyStackOverflows templated feedback requires messages to be added to the db and will change the appointments/ API.

as far as I can tell this should just be a matter of adding another table, linking with apptId like the videos, then interleaving them with the list of videos as "appointment events" in the API call. UI could be an extension of the timeline above with a chat box on top and messages in between videos, or even with the chat box as the footer for the right-hand side.

Templated feedback could just be a message created by a form with some conditional fields or explicit structure, or maybe another separate table with JSON objects for different feedback types, or we could even render markdown, which is easy in React. I think the Markdown approach would allow the template to be visible and would not require us to make another table, though the table would probably need a boolean isFeedback attribute or something.

i'm picturing the timeline/chat as basically an upside-down GitHub issue/conversation.

do we wanna do this? i'm for it. i'm not sure if we have enough time before Peer Testing for templated feedback, but simple messages can definitely be done by end of week.

nganphan123 commented 8 months ago

We can start with having APIs return timelines of videos and simple messages.

tthvo commented 8 months ago

Some carry-over from peer-testing 1 feedbacks: https://github.com/COSC-499-W2023/year-long-project-team-1/issues/452

Description

There are several things we need to work on leading up to Peer Testing #2. We got pretty consistent feedback mostly focused on UX, most of which should be straightforward to fix. Some feedback was more valuable than others. The following is a list of fixes we should implement for our Week 6 milestone.

New features for Week 6 and Week 8 will be in another issue (e.g. appointment video display/delete features, backend restructuring).

Feedback

[x] More descriptive homepage
- Sign-in/register should be more prominent (e.g. placed centrally on /)
[ ] #487
- e.g. create appointment should redirect, buttons should be stateful
[x] Phone number in Cognito is awkward/unnecessary
[x] "Sign in with Cognito" feels like you need a Cognito account
[ ] #573
- e.g. appointment cards feel confusing because time is understated
[x] #515
[ ] Info card coloring looks amateurish
[x] #562
- [x] ~Staff don't need to access User area (give staff their own hub with quick views)~
[x] Navigation bar (once logged in) can show quick details $\to$ #524
- e.g. sign-in/sign-out, staff/user status, upload button
[x] Progress indicators should be used (i.e. loader spinner, progress bars) $\to$ part of #514
[x] #571
- e.g. email button doesn't do anything, we don't have a YouTube page

Quick Links

Patternfly

Notification drawer
Navigation demos
Loading buttons
Loading spinner
Label
Masthead/Navigation bar
Avatar/Profile picture
~~Background image~~ Can't use because of @next/image
Brand logo
Flow/Progress stepper
File upload $\leftarrow$ Wasn't there a reason we couldn't use it?
Tooltip
Alert/Toast
Description list/key-value list

Other React Components

React Video Recorder

Carry over from peer testing 1 (See #349):

The original deliverables from the project doc are as follows:

[x] Professionals can edit appointments for clients
- [x] #367
- [x] API route to save to database
[ ] Clients can view appointment details (videos sent, times, etc.)
- [ ] #365
- [ ] #366
[ ] Clients can cancel appointments
- [ ] #363
[x] Clients can view a list of their appointments
- [x] #362
[x] Videos are processed into censored versions
- [x] #360
- [x] #361
[x] API routes for upload to video processing server
- [x] Upload to S3
- [x] Store resource URI in database/update message history

Additional work that needs to be done:

[x] Transition (or partial transition) to serverless
- [x] RDS
- [x] Lambda
- [x] S3 input, S3 output
[x] Reintegrate video upload pipeline
[x] Improve usability, critical path

COSC-499-W2023 / year-long-project-team-1