feat: program dashboard progress page initial layout#5
Conversation
deborahgu
left a comment
deborahgu
left a comment
There was a problem hiding this comment.
this looks good to me, although some things I don't understand. , I know @jsnwesson was going to look at it as well and he presumably understands more of them. :-)
| && programProgressData.programData | ||
| && programProgressData.urls; | ||
|
|
||
| // TODO: for review: https://stackoverflow.com/questions/75706357/react-useparams-returns-string-undefined |
There was a problem hiding this comment.
On line 22, there is some typecasting going on. I've never had to do it before but it's the only way I've found to satisfy Typescript when using the useParams hook from React Router. I put the link to the stackoverflow that gave me the idea so that reviewers could easily see why I did that. But it should probably be removed and just included in the PR description
|
|
||
| if (!hasProgramProgressData) { | ||
| return ( | ||
| <div>Loading...</div> |
There was a problem hiding this comment.
is this the error condition that we would see if there is a request out that hasn't returned yet? Is this placeholder?
There was a problem hiding this comment.
Yes it is placeholder. I will replace it with the LoadingSpinner (link) from Paragon.
And yes it is what the user will see while the request is pending. It's the first thing that is rendered to the page, then the request is made, the response comes back, updates state variables, which triggers a re-render in React, which will either render the error state (NotFoundPage) or the actual page
|
|
||
| if (programProgressEndpointError) { | ||
| return ( | ||
| <div>Not found page</div> |
There was a problem hiding this comment.
Yes it is. It will be replaced with an alert similar to what's in the enterprise version
2 participants
This is a PR to set up the general component layout for the Program Progress Page. This page consists of:
ProgramProgress/index.tsx)ProgramProgress/ProgramProgressHeader.tsx)ProgramProgress/ProgramProgressInfo.tsx)ProgramProgress/ProgramProgressCourses.tsx)ProgramProgress/ProgramProgressSidebar.tsx)The Layout roughly looks like this:
The base
index.tsxfile handles the API call to retrieve data for the program. The data is fed to child components as needed.No tests are included in this PR.
For prior art, the frontend-app-learner-portal-enterprise program-progress component was used as well as the legacy Program Dashboard.